Add 'Coordinates' lesson to csintro. (#432)

docs/SUMMARY.md

@@ -90,6 +90,12 @@
             * [Activity](/courses/csintro/miniproject/activity)
             * [Project](/courses/csintro/miniproject/project)
             * [Standards](/courses/csintro/miniproject/standards)
+        * [Coordinates](/courses/csintro/coordinates)
+            * [Overview](/courses/csintro/coordinates/overview)
+            * [Unplugged](/courses/csintro/coordinates/unplugged)
+            * [Activity](/courses/csintro/coordinates/activity)
+            * [Project](/courses/csintro/coordinates/project)
+            * [Standards](/courses/csintro/coordinates/standards)
 
 ## #reference
 

docs/courses/csintro.md

@@ -37,7 +37,7 @@ UNDER CONSTRUCTION: We are still migrating the CSIntro content to this format...
 4. [Conditionals](/courses/csintro/conditionals)
 5. [Iteration](/courses/csintro/iteration) 
 6. [Review/Mini-Project](/courses/csintro/miniproject)
-7. Coordinate Grid System
+7. [Coordinate Grid System](/courses/csintro/coordinates)
 8. Booleans
 9. Music and Arrays 
 10. Bits, Bytes, and Binary 

docs/courses/csintro/coordinates.md

@@ -0,0 +1,34 @@
+# Coordinate grid and LEDs
+
+This lesson introduces the use of coordinates to store data or the results of mathematical operations. It gives students practice programming for the LEDs of the micro:bit screen using coordinates. And introduces the basic game blocks of MakeCode.
+
+## Lesson objectives
+
+Students will...
+* Understand that the 5 x 5 grid of LEDs on the micro:bit represent a coordinate grid with the origin (0,0) in the top left corner.
+* Understand that the values of the x coordinates range from 0 through four and increase from left to right.
+* Understand that the values of the y coordinates range from 0 through four and increase from top to bottom.
+* Learn how to refer to an individual LED by its x & y coordinates.
+* Learn how to plot (turn on) and unplot (turn off) individual LEDs and how to toggle between these two states.
+* Learn how to check the current on or off status of an individual LED as well as check and set the brightness level.
+* Apply the above knowledge and skills to create a unique program that uses coordinates as an integral part of the program.
+
+## Lesson structure
+
+* Introduction: Coordinate Grid
+* Unplugged Activity: Battleship
+* Micro:bit Activities: Animation and Patterns
+* Project: Screensaver or Game
+* Assessment: Rubric 
+* Standards: Listed
+
+## Lesson plan
+
+1. [**Overview**: Coordinate grid and LEDs](/courses/csintro/coordinates/overview)
+2. [**Unplugged**: Battleship](/courses/csintro/coordinates/unplugged)
+3. [**Activity**: Animation and patterns](/courses/csintro/coordinates/activity)
+4. [**Project**: Screensaver or game](/courses/csintro/coordinates/project)
+
+## Related standards
+
+[Targeted CSTA standards](/courses/csintro/coordinates/standards)

docs/courses/csintro/coordinates/activity.md

@@ -0,0 +1,198 @@
+# Activity: Animation and patterns
+
+Guide the students to create programs using coordinates and LEDs. Each of these short exercises demonstrates how to use coordinates to control the LEDs. These programs can then be modified and used in the students’ more complex projects. 
+ 
+* Smile animation - A short exercise in plotting and toggling LEDs to create a simple animation.
+* Random Patterns generator - A short exercise using a loop to generate random LED patterns and then checking the status of a specific LED.
+* Brightness - A short exercise in using the brightness settings for the micro:bit LEDs.
+
+## Smile Animation
+
+A short exercise in plotting and toggling LEDs to create a simple animation.
+* Though students can use the 'show leds' block for images and animation, there is another way to tell the micro:bit what LEDs to turn on and off using coordinates.
+* We can still use the 'show leds' block to plan which LED coordinates to turn on
+* Drag out a couple 'show leds' blocks from the Basic Toolbox drawer.
+* Create a smiling face and a non-smiling face.
+
+```block
+basic.showLeds(`
+    . . . . .
+    . # . # .
+    . . . . .
+    # . . . #
+    . # # # .
+    `)
+basic.showLeds(`
+    . . . . .
+    . # . # .
+    . . . . .
+    # # # # #
+    . . . . .
+`)
+```
+
+* From the LED Toolbox drawer, drag out 6 'plot x y' blocks.
+
+>* Tip: you can also right-click on a block and select Duplicate to copy blocks
+
+* Have the students compare the two face images and determine which LEDs are on in both images. 
+* Plot these LEDs using the correct (x,y) coordinates.
+* When done, place these 'plot x y' blocks inside an 'on start' block.
+
+```blocks
+led.plot(1, 0)
+led.plot(3, 0)
+led.plot(2, 1)
+led.plot(1, 3)
+led.plot(2, 3)
+led.plot(3, 3)
+```
+
+Now we can code for the 4 LEDs that change back and forth, on and off, as we switch from one face to the other and back again over and over.
+
+* From the LED Toolbox drawer, drag out 4 'toggle x y' blocks. 
+* Replace the default values with the correct (x,y) coordinates. 
+The 'toggle x y' block will change the status of an LED from on to off or off to on.
+* Place these 4 'toggle x y' blocks in a 'forever' block. 
+* Place the two 'toggle x y' blocks that create the smile first, followed by the two 'toggle x y' blocks for the non-smile.
+* You may notice that the toggling happens too quickly. Let’s slow it down a bit by placing a 'pause' block between the two pairs of 'toggle x y' blocks.  Set the pause value to 250 milliseconds.
+
+Here is the full program:
+
+```blocks
+basic.forever(() => {
+   led.toggle(0, 2)
+   led.toggle(4, 2)
+   basic.pause(250)
+   led.toggle(0, 3)
+   led.toggle(4, 3)
+})
+led.plot(1, 0)
+led.plot(3, 0)
+led.plot(2, 1)
+led.plot(1, 3)
+led.plot(2, 3)
+led.plot(3, 3)
+```
+
+## Mod this!
+* Add a third image to the animation, perhaps a frown face. 
+* Make your own custom animation! What LEDs stay the same and which need to be toggled?
+ 
+## Random Patterns generator
+A short exercise using a loop to generate random LED patterns and then checking the status of a specific LED.
+Pseudocode:
+* On button A pressed we’ll use a loop to turn on a random set of LED lights on our micro:bit. 
+* Our display will have one LED lit for each column or x coordinate value from 0 through 4.
+Steps:
+* From the Input Toolbox drawer, select the 'on button pressed' block
+* From the Basic - More Toolbox drawer, drop in a 'clear screen' block
+* From the Loops Toolbox drawer, drop in a 'for' block
+* From the LED Toolbox drawer, drop a 'plot x y' block
+* Use the variable 'index' for the x value
+* From the Math Toolbox drawer, drop a 'pick random' block into the y value
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+   basic.clearScreen()
+   for (let index = 0; index <= 4; index++) {
+       led.plot(index, Math.random(5))
+   }
+})
+```
+ 
+Check the on/off state of an LED
+* On button B pressed we’ll use an 'if...then...else' block from the Logic Toolbox drawer
+* From the LED Toolbox drawer, drop a 'point x y' block into the 'if' condition to check the current on/off state of a specific LED.
+
+>* If the LED is currently on, the point x y block will return true. 
+* If the LED is currently off, the point x y block will return false. 
+
+* For this exercise, we’ll use the two Yes/No built in icons to display the LED’s current status. From the Basic Toolbox drawer, drag 2 'show icon' blocks into each of the 'then' and 'else' clauses.  Select the check mark for Yes, and the X icon for No.
+* For now, we’ll leave the default coordinate values (0,0).  But you can challenge your students to add a loop to test for all coordinates on the micro:bit
+
+Here is the complete program:
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+   basic.clearScreen()
+   for (let index = 0; index <= 4; index++) {
+       led.plot(index, Math.random(5))
+   }
+})
+input.onButtonPressed(Button.B, () => {
+   if (led.point(0, 0)) {
+       basic.showIcon(IconNames.Yes)
+   } else {
+       basic.showIcon(IconNames.No)
+   }
+})
+```
+
+Try it out!
+* Download the program to your micro:bit
+* Press button A to create a random pattern
+* Press button B to check and display the status of the specific LED
+ 
+## Brightness
+A short exercise in using the brightness settings for the micro:bit LEDs.  Important to note - the brightness level of the micro:bit simulator LEDs will NOT appear to change! You must run your program on the actual micro:bit to see the different brightness levels.
+
+We will check on, and numerically display the brightness level with our program, so we can verify with the simulator that it is working.
+
+Pseudocode:
+We’ll set the brightness level for the LEDs to the highest level on start and then use on button A pressed to decrease the brightness level and on button B pressed to increase the brightness level. We’ll use on button A+B pressed to check and display numerically the current brightness level.
+
+Steps:
+* Drag 3 'set brightness' blocks and 3 'brightness' blocks from the Led - More Toolbox drawer onto your coding workspace
+* Place one 'set brightness' block in the 'on start' block
+* Add a 'show icon' block after the 'set brightness' block so we will have an image to look at
+
+```blocks
+led.setBrightness(255)
+basic.showIcon(IconNames.Heart)
+```
+ 
+* From the Input Toolbox drawer, drag out 3 'on button pressed' blocks onto your coding workspace
+* Leave one 'on button pressed' block with the default setting of A and change the second one to B and the third one to A+B
+* Place one 'set brightness' block in the 'on button A' pressed block, and the other 'set brightness' block in the 'on button B' pressed block
+* From the Math Toolbox drawer, drag out an addition block and a subtraction block
+* Place the addition block within the 'set brightness' block in the 'on button B pressed' block
+* Place the subtraction block within the 'set brightness' block in the 'on button A pressed' block
+* Place a 'brightness' block on the left side of each math expression
+* Change the default value of 0 on the right side of each math expression to 25
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+   led.setBrightness(led.brightness() - 25)
+})
+input.onButtonPressed(Button.B, () => {
+   led.setBrightness(led.brightness() + 25)
+})
+```
+ 
+Since we cannot see if our program is working in the simulator, let’s add a check into our code.
+
+* On button A+B pressed, we’ll clear the screen and get and display the current brightness level as a number.
+* Then we’ll re-display the image we used on start.
+
+Here is the complete program:
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+   led.setBrightness(led.brightness() - 25)
+})
+input.onButtonPressed(Button.B, () => {
+   led.setBrightness(led.brightness() + 25)
+})
+input.onButtonPressed(Button.AB, () => {
+   basic.clearScreen()
+   basic.showNumber(led.brightness())
+   basic.showIcon(IconNames.Heart)
+})
+led.setBrightness(255)
+basic.showIcon(IconNames.Heart)
+```
+
+Try it out!
+
+* What happens if adding 25 or subtracting 25 from the current brightness level would result in a sum or difference outside of the 0 to 255 brightness range? 

docs/courses/csintro/coordinates/overview.md

@@ -0,0 +1,45 @@
+# Introduction
+
+Through math class, most middle school students are already familiar with coordinate grids and mapping x and y coordinates on a plane. To review some terms:
+
+#### Axes
+* The basic coordinate grid a student learns has two axes,
+
+>* an x-axis which runs horizontally and 
+* a y-axis which runs vertically.
+	
+#### Origin
+* These two axes meet at a point called the origin where both the x and the y values are zero.
+* On this basic coordinate grid, the origin is in the lower left corner of the grid and has the coordinates (0,0).
+	
+#### Coordinate pair
+* The first value in a coordinate pair is the x value and the second value in a coordinate pair is the y value.
+* A simple way to remember which value comes first is to remember their order in the alphabet. The letter x comes before the letter y in the alphabet and the x coordinate comes before the y coordinate in a coordinate pair.
+	
+#### Coordinate value changes
+* On a basic coordinate grid,
+
+>* the value of the x coordinate increases left to right and is a measure of how many units a point is horizontally from the origin
+* the value of the y coordinate increases bottom to top and is a measure of how many units a point is vertically from the origin
+	
+![Math coordinates](/static/courses/csintro/coordinates/math-coords.png)
+
+## Coordinate grid and JavaScript and the micro:bit
+
+The 5 x 5 grid of LEDs on the micro:bit represent a coordinate grid with a horizontal x-axis and a vertical y-axis. It has an origin and you can refer to the position of the LEDs with coordinate pairs.
+ 
+It is important however that the students understand the two major differences between the micro:bit LED grid and the coordinate grid that they are used to using in math class:
+* the origin (0,0) is in the top left corner.
+* the values of the y coordinates range from 0 through four and increase from top to bottom.
+	
+Note:
+* The values of the x coordinates range from 0 through four and increase from left to right just as they do in the coordinate grids used in math class.
+
+![micro:bit LED coordinates](/static/courses/csintro/coordinates/microbit-led-coords.png)
+
+## Sidebar material
+
+![Rene Descartes](/static/courses/csintro/coordinates/rene-descartes.jpg)
+(image credit: Wikipedia Commons)
+
+René Descartes (1596-1650), was a French philosopher and mathematician who developed the coordinate system we use today. A story goes that while lying in bed, he noticed a fly on the ceiling. In wondering how he could describe the fly’s exact position on the ceiling, he decided to use a corner of the ceiling as a reference point and then describe the fly’s position as a measure of how far away from the reference point one would need to travel horizontally and then vertically to reach the fly. His coordinate system proved useful in many ways including creating an important link between the studies of algebra and geometry. Geometric shapes could now be described by points on a coordinate plane.

docs/courses/csintro/coordinates/project.md

@@ -0,0 +1,162 @@
+# Project: Screensaver or game
+
+Use what you now know about LEDs, coordinates, and brightness to create your own project: a screensaver, or a game. You should find a way to use coordinates in your program. Even better, use variables to store and update your coordinates.
+
+## Screensavers
+One type of project is a screensaver. A long time ago, computers and televisions used cathode ray tube (CRT)screens for displays. The glass screen of the display was coated on the back with phosphor, a substance that glows when painted with electrons from an electron gun at the other end of the tube. When the same area of the screen was painted (excited) over and over again by the stream of electrons, that part of the screen would sometimes "freeze" with the same image, burned into the phosphor for good. This was called "burn-in".
+
+Normally, if a show was running, or if someone was actively using the computer, the display changed often enough that burn-in wasn’t a problem. Programmers learned to create a demo screen with an animation that would run whenever the screen was idle. Today, nearly all computers and television sets use LCD displays, which are not affected by burn-in. But you can still find a screen saver in nearly every computer's Settings panel, as an opportunity to show off some neat graphics or animation.
+
+Your task is to create:
+
+1. A "screen saver" animation using the plot/unplot blocks. You can fill the screen line by line, pausing between each one, or fill it with a random constellation of stars. 
+
+OR
+
+1. A game that uses sprites to manage the x and y coordinate values of the different objects.
+
+Your project might use variables to store the values of sprites, which are special structures that contain an x and a y coordinate together that describe the sprite's location as one LED on the screen. 
+
+## Project Ideas
+
+### Firework Screensaver
+
+This project uses a for loop with the plot/unplot blocks to create a symmetrical design on the screen. This student used a subtraction operation to get a variable that decreases as the index variable in the loop increases.
+
+```blocks
+basic.forever(() => {
+    for (let x = 0; x <= 4; x++) {
+        led.plot(x, 0)
+        led.plot(0, 4 - x)
+        led.plot(4 - x, 4)
+        led.plot(4, x)
+        basic.pause(50)
+        led.unplot(x, 0)
+        led.unplot(4 - x, 4)
+        led.unplot(0, 4 - x)
+        led.unplot(4, x)
+        basic.pause(50)
+    }
+})
+```
+
+### Cascade Screensaver
+
+This example creates a diagonal cascading effect across the screen. Note the use of a variable (speed) to allow you to easily change the speed of the animation by changing just one number value.
+
+```blocks
+
+let reverse = 0
+let speed = 0
+let inner = 0
+let outer = 0
+basic.forever(() => {
+    for (let outer = 0; outer <= 4; outer++) {
+        reverse = 4 - outer
+        for (let inner = 0; inner <= 4; inner++) {
+            led.plot(outer, reverse)
+            basic.pause(speed)
+            led.plot(reverse, outer)
+            basic.pause(speed)
+            led.plot(reverse - inner, reverse)
+            basic.pause(speed)
+            led.plot(reverse, reverse - inner)
+            basic.pause(speed)
+        }
+    }
+    for (let outer = 0; outer <= 4; outer++) {
+        reverse = 4 - outer
+        for (let inner = 0; inner <= 4; inner++) {
+            led.unplot(outer, reverse)
+            basic.pause(speed)
+            led.unplot(reverse, outer)
+            basic.pause(speed)
+            led.unplot(reverse - inner, reverse)
+            basic.pause(speed)
+            led.unplot(reverse, reverse - inner)
+            basic.pause(speed)
+        }
+    }
+})
+speed = 10
+```
+
+### Dodge Ball Game 
+This is a Dodge Ball game that uses one sprite (dodger) to try to avoid another sprite (ball). You use the A and B buttons to move the dodger to avoid the balls that are falling from the top of the screen.
+
+Here is the complete Dodge Ball program.
+
+```blocks
+let dodger: game.LedSprite = null
+let ball: game.LedSprite = null
+basic.forever(() => {
+   if (dodger.isTouching(ball)) {
+       game.gameOver()
+   } else if (ball.get(LedSpriteProperty.Y) < 4) {
+       ball.change(LedSpriteProperty.Y, 1)
+       basic.pause(250)
+   } else {
+       game.addScore(1)
+       ball.set(LedSpriteProperty.Y, 0)
+       ball.set(LedSpriteProperty.X, Math.random(5))
+   }
+})
+input.onButtonPressed(Button.A, () => {
+   if (dodger.get(LedSpriteProperty.X) > 0) {
+       dodger.change(LedSpriteProperty.X, -1)
+   }
+})
+input.onButtonPressed(Button.B, () => {
+   if (dodger.get(LedSpriteProperty.X) < 4) {
+       dodger.change(LedSpriteProperty.X, 1)
+   }
+})
+ball = game.createSprite(Math.random(5), 0)
+dodger = game.createSprite(2, 4)
+game.setScore(0)
+```
+
+## Reflection
+
+Have students write a reflection of about 150–300 words, addressing the following points:
+* Did you do a screensaver? A game? Something different? How did you decide?
+* If you did a game, what is the object of the game?
+* How does your project use coordinates?
+* Describe something in your project that you are proud of.
+* Describe a difficult point in the process of designing this program, and explain how you resolved it.
+* What feedback did your beta testers give you? How did that help you improve your design?
+ 
+## Assessment
+
+**Competency scores**: 4, 3, 2, 1
+ 
+### Coordinates and LEDs
+
+**4 =** Uses at least 3 of the different kinds of plot/ unplot/toggle/point x y blocks in a meaningful way.
+`*` Uses variables to update coordinates.<br/>
+**3 =** At least 2 of the different kinds of plot/unplot/ toggle/point x y blocks in a meaningful way.<br/>
+**2 =** At least 1 of the different kinds of plot/unplot/ toggle/point x y blocks in a meaningful way.<br/>
+**1 =** No plot/unplot/ toggle/point x y blocks are implemented. 	 
+
+### micro:bit program
+
+**4 =** micro:bit program:<br/>
+`*` Uses plotted LEDs in a way that is integral to the program<br/>
+`*` Compiles and runs as intended<br/>
+`*` Meaningful comments in code<br/>
+**3 =** micro:bit program lacks 1 of the required elements.<br/>
+**2 =** micro:bit program lacks 2 of the required elements.<br/>
+**1 =** micro:bit program lacks all of the required elements.
+
+### Collaboration reflection
+
+**4 =** Reflection piece includes:<br/>
+`*` Brainstorming ideas<br/>
+`*` Construction<br/>
+`*` Programming<br/>
+`*` Beta testing<br/>
+**3 =** Reflection piece lacks 1 of the required elements.<br/>
+**2 =** Reflection piece lacks 2 of the required elements.<br/>
+**1 =** Reflection piece lacks 3 of the required elements. 
+	 
+	 

docs/courses/csintro/coordinates/standards.md

@@ -0,0 +1,10 @@
+# Standards
+
+## CSTA K-12 Computer Science Standards
+
+* CL.L2-03 Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities
+* CT.L1:6-01 Understand and use the basic steps in algorithmic problem-solving
+* CT.L1:6-02 Develop a simple understanding of an algorithm using computer-free exercises
+* CPP.L1:6-05 Construct a program as a set of step-by-step instructions to be acted out
+* 2-A-5-7 Create variables that represent different types of data and manipulate their values.
+* CT.L2-14 Examine connections between elements of mathematics and computer science including binary numbers, logic, sets and functions.

docs/courses/csintro/coordinates/unplugged.md

@@ -0,0 +1,44 @@
+# Unplugged: Battleship
+
+The game Battleship is perhaps the most fun a student can have practicing using a coordinate grid. The original Battleship game is a 10x10 grid with numbers on one axis and letters on the other.
+ 
+To help us practice using the correct coordinates for the grid of micro:bit LEDs, let the students play a smaller 5x5 version of Battleship using x and y coordinates instead of letters and numbers.
+ 
+Have students make their own sets of 5x5 grids to reinforce the layout of the micro:bit grid.
+
+Each student should make two grids. One grid is for placing their own ships and keeping track of their opponent’s hits and misses and the other grid is for keeping track of their own hits and misses while trying to determine the location of their opponent’s ships.
+ 
+Player’s grid: Mark where your ships are and keep track of your opponent’s hits and misses.
+
+```
+	(0,0)	(1,0)	(2,0)	(3,0)	(4,0)
+	(0,1)	(1,1)	(2,1)	(3,1)	(4,1)
+	(0,2)	(1,2)	(2,2)	(3,2)	(4,2)
+	(0,3)	(1,3)	(2,3)	(3,3)	(4,3)
+	(0,4)	(1,4)	(2,4)	(3,4)	(4,4)
+	 
+```
+Opponent’s grid: Keep track of your hits and misses while trying to locate your opponent’s ships.
+
+```
+	(0,0)	(1,0)	(2,0)	(3,0)	(4,0)
+	(0,1)	(1,1)	(2,1)	(3,1)	(4,1)
+	(0,2)	(1,2)	(2,2)	(3,2)	(4,2)
+	(0,3)	(1,3)	(2,3)	(3,3)	(4,3)
+	(0,4)	(1,4)	(2,4)	(3,4)	(4,4)
+```
+
+Then pair the students to play against a partner. Each student's ships are hidden somewhere on their 5x5 grid. Students should be taking turns calling their shots using x and y coordinates, in the proper order. Their opponent will use those coordinates to plot the location of their shots.
+
+If a hit is recorded on a ship, then you say, "Hit". If the shot misses, you say, "Miss". If the entire length of a ship is hit, it is sunk and removed from play. Tradition dictates that the player announces, "You sank my battleship!"
+
+Since their grid is only one quarter the size of the original Battleship grid, students can use fewer and smaller ships. For example, they could play with 3 ships, one each of size 3, 2, and 1.
+
+The game can be played with just paper and pencils or you could use small tokens and markers, like coins, buttons, or paper clips to represent the ships.
+ 
+Notes
+* Place students’ grids in sheet protectors or laminate them so they can be used again and again with white board (dry erase) markers.
+* The official rules of Battleship are easily found on the internet. Modify them as needed for your particular class.
+
+![Battleship board game](/static/courses/csintro/coordinates/battleship-board-game.jpg)
+The original Battleship Board Game