Add 'Radio' lesson to csintro. (#435)

* Local commit.

* Add 'Radio' lesson to csintro.

docs/SUMMARY.md

@@ -108,6 +108,12 @@
             * [Activity](/courses/csintro/binary/activity)
             * [Project](/courses/csintro/binary/project)
             * [Standards](/courses/csintro/binary/standards)
+        * [Radio](/courses/csintro/radio)
+            * [Overview](/courses/csintro/radio/overview)
+            * [Unplugged](/courses/csintro/radio/unplugged)
+            * [Activity](/courses/csintro/radio/activity)
+            * [Project](/courses/csintro/radio/project)
+            * [Standards](/courses/csintro/radio/standards)
 
 ## #reference
 

docs/courses/csintro.md

@@ -40,6 +40,6 @@ UNDER CONSTRUCTION: We are still migrating the CSIntro content to this format...
 7. [Coordinate Grid System](/courses/csintro/coordinates)
 8. [Booleans](/courses/csintro/booleans)
 9. [Bits, Bytes, and Binary](/courses/csintro/binary)
-10. Radio 
+10. [Radio](/courses/csintro/radio)
 11. Arrays
 12. Independent Final Project 

docs/courses/csintro/radio.md

@@ -0,0 +1,31 @@
+# Radio and Communication
+
+This lesson covers the use of more than one micro:bit to share and combine data. Students will explore a complex epidemiological program (Infection) that demonstrates the Radio functionality of the micro:bit. Students will send and receive numbers and strings in a series of guided activities. Finally, students are asked to collaborate so that they can share their micro:bits and create a project together.
+
+![Radio wave diagram](/static/courses/csintro/radio/radio-wave.png)
+
+## Lesson objectives
+
+Students will...
+* Understand how to use the Radio blocks to send and receive data between micro:bits
+* Understand the specific types of data that can be sent over the Radio
+
+## Lesson structure
+
+* Introduction: Radio & Communication
+* Unplugged Activity: Infection Simulation
+* Micro:bit Activity: Marco Polo & Morse Code
+* Project: Radio
+* Assessment: Rubric 
+* Standards: Listed
+
+## Lesson plan
+
+1. [**Overview**: Radio and communications](/courses/csintro/radio/overview)
+2. [**Unplugged**: Infection simulation](/courses/csintro/radio/unplugged)
+3. [**Activity**: Marco Polo and Morse code](/courses/csintro/radio/activity)
+4. [**Project**: Radio project](/courses/csintro/radio/project)
+
+## Related standards
+
+[Targeted CSTA standards](/courses/csintro/radio/standards)

docs/courses/csintro/radio/activity.md

@@ -0,0 +1,316 @@
+# Activity: Marco Polo and Morse code
+
+Guide the students in creating programs that use the radio communication blocks to send and receive data between two micro:bits.
+
+Notes:
+* When using the radio blocks, the micro:bit simulator will show two micro:bits 
+* In the simulator, a radio transmission icon will appear in the top right corner of the micro:bit. The icon will light up as the micro:bit is transmitting data.
+* In the simulator, all the code in the coding workspace runs on both virtual micro:bits. You should include for how to send data as well as what to do when it receives data.
+
+## Marco Polo
+Send and receive strings between micro:bits.
+On button A pressed, we will send the string Marco and on button B pressed we will send the string Polo.
+
+* When communicating between micro:bits, it is important that the micro:bits involved are all using the same group ID. So, the first thing we will do is set the group ID number.
+* From the Radio menu, drag a 'radio set group' block to the coding workspace and place the block into the on start block. 
+* In the 'radio set group block', leave the default value of 1 for the group ID
+
+```blocks
+radio.setGroup(1)
+```
+
+* Drag 2 'on button pressed' blocks to the coding workspace
+* Leave one with the default value A and change the other button to B 
+* From the Radio Toolbox drawer, drag 2 'radio send string' blocks to the coding workspace
+* Place one 'radio send string' block into the 'on button A pressed' block, and the other'radio send string' block into the 'on button B pressed' block
+* In the 'on button A pressed' block, change the default empty string value of the 'radio send string' block to the string "Marco"
+* In the 'on button B pressed' block, change the default empty string value of the 'radio send string' block to the string "Polo"
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+    radio.sendString("Marco")
+})
+input.onButtonPressed(Button.B, () => {
+    radio.sendString("Polo")
+})
+```
+* To display the data sent between the micro:bits, drag an 'on radio received receivedString' block to the coding workspace
+* From the Basic Toolbox drawer, drag a 'show string' block into the 'on radio received receivedString' block
+* From the Variables Toolbox drawer, drag a 'receivedString' variable block into the default string value of "Hello" in the 'show string' block 
+
+Here is the complete Marco Polo program:
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+    radio.sendString("Marco")
+})
+
+radio.onDataPacketReceived(({ receivedString }) => {
+    basic.showString(receivedString)
+})
+input.onButtonPressed(Button.B, () => {
+    radio.sendString("Polo")
+})
+radio.setGroup(1)
+```
+
+## Mods
+* Add a 'show leds' block to the 'on start' block. We created an image of the initials MP.
+* From the Music Toolbox drawer, drag 2 'play tone' blocks to the coding workspace.  See https://makecode.microbit.org/projects/hack-your-headphones for how to connect a speaker or headphones to the micro:bit.
+* Drag one of the 'play tone' blocks to the 'on button A pressed' block, and the other one to the 'on button B pressed' block.
+* Change the default value in the 'play tone' block that is inside the 'on button A pressed' block to the value Low C.
+
+Complete Marco Polo program with mods:
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+    radio.sendString("Marco")
+    music.playTone(131, music.beat(BeatFraction.Whole))
+})
+    radio.onDataPacketReceived( ({ receivedString }) => {
+    basic.showString(receivedString)
+})
+input.onButtonPressed(Button.B, () => {
+    radio.sendString("Polo")
+    music.playTone(262, music.beat(BeatFraction.Whole))
+})
+radio.setGroup(1)
+basic.showLeds(`
+    # . # # #
+    # # # # #
+    # . # # #
+    # . # # .
+    # . # # .
+`)
+```
+
+## Morse Code
+
+Send and receive numbers between micro:bits. 
+Depending on the button pressed, send a different number value between micro:bits. On receiving a number, display a different image unique to the number sent. One number will represent a dot, another a dash and another a space or stop.
+
+![Morse code alphabet](/static/courses/csintro/radio/morse-code-alphabet.jpg)
+
+* Set the group ID number.
+* Add a 'show string' block to the 'on start' block, to identify the program. 
+* We choose to change the default string value of "Hello" to the value "Morse Code"
+
+```blocks
+radio.setGroup(1)
+basic.showString("Morse Code")
+```
+
+* Drag 3 'on button pressed' blocks to the coding workspace. 
+* Leave one with the default value A, change the value in the second block to B, and change the value in the third block to A+B. 
+* From the Radio Toolbox drawer, drag 3 'radio send number' blocks to the coding workspace.
+* Place one radio send number block into each of the 'on button pressed' blocks.
+* In the 'on button A pressed' block, leave the default number value of the 'radio send number' block as 0.
+* In the 'on button B pressed' block, change the default number value of the 'radio send number' block to the value 1.
+* In the 'on button A+B pressed' block, change the default number value of the 'radio send number' block to the value 2.
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+    radio.sendNumber(0)
+})
+input.onButtonPressed(Button.B, () => {
+    radio.sendNumber(1)
+})
+input.onButtonPressed(Button.AB, () => {
+    radio.sendNumber(2)
+})
+```
+
+* From the Radio Toolbox drawer, drag an 'on radio received receivedNumber' event handler to the coding workspace.
+* Since we will display a different image depending on the number value received, we need a logic block. 
+* From the Logic Toolbox drawer, drag an 'if...then' block to the coding workspace and place it in the 'on radio received receivedNumber' event handler.
+
+In order to know whether to display a dot, a dash, or a space/stop image, we need to compare the number received to the values 0, 1, and 2.
+
+* From the Logic Toolbox drawer, drag a 0=0 comparison block into the coding workspace.
+* Replace the default value 'true' of the 'if...then' block with the comparison block.
+* From the Variables Toolbox drawer, drag a 'receivedNumber' variable block into the coding workspace, and drop it into the first slot of the comparison block
+* Leave the righthand side default value of zero in the 0=0 block. 
+
+```blocks
+radio.onDataPacketReceived( ({ receivedNumber }) => {
+    if (receivedNumber == 0) {
+
+    }
+})
+```
+
+* Place a 'show leds' block in the space after the then of the 'if...then' block. 
+* Create an image to represent a dot.
+
+```blocks
+radio.onDataPacketReceived( ({ receivedNumber }) => {
+    if (receivedNumber == 0) {
+        basic.showLeds(`
+            . . . . .
+            . . # . .
+            . # # # .
+            . . # . .
+            . . . . .
+        `)
+    }
+})
+```
+
+### Try it!
+* Download your program to the micro:bit
+* Press button A on the sending micro:bit
+* Does this cause a dot to be displayed on the receiving micro:bit? 
+* However, pressing button A again does not appear to send another dot as the image on the receiving micro:bit does not appear to change. 
+
+Challenge question: How can we fix this?
+* Add a 'pause' block and a 'clear screen' block after the 'show leds' block
+
+```blocks
+radio.onDataPacketReceived( ({ receivedNumber }) => {
+    if (receivedNumber == 0) {
+        basic.showLeds(`
+            . . . . .
+            . . # . .
+            . # # # .
+            . . # . .
+            . . . . .
+        `)
+        basic.pause(1)
+        basic.clearScreen()
+    }
+})
+```
+Try running the program again. 
+Now each time the sender presses button A, you see a dot appear.
+
+![micro:bit dot display](/static/courses/csintro/radio/microbit-dot-display.png)
+
+* You can now right-click on the 'if…then' block and select Duplicate to copy that piece of code twice for the other 2 values that a sender may send.
+
+![If-block, right-click and duplicate](/static/courses/csintro/radio/if-then-duplicate.png)
+
+* Change the values on the righthand side of the comparison block to 1, and 2.
+* Modify the images displayed to show a dash, and a full screen of lights
+
+### Morse code program
+
+```blocks
+
+radio.onDataPacketReceived( ({ receivedNumber }) =>  {
+    if (receivedNumber == 0) {
+        basic.showLeds(`
+            . . . . .
+            . . # . .
+            . # # # .
+            . . # . .
+            . . . . .
+            `)
+        basic.pause(100)
+        basic.clearScreen()
+    }
+    if (receivedNumber == 1) {
+        basic.showLeds(`
+            . . . . .
+            . . . . .
+            . # # # .
+            . . . . .
+            . . . . .
+            `)
+        basic.pause(100)
+        basic.clearScreen()
+    }
+    if (receivedNumber == 2) {
+        basic.showLeds(`
+            # # # # #
+            # # # # #
+            # # # # #
+            # # # # #
+            # # # # #
+            `)
+        basic.pause(100)
+        basic.clearScreen()
+    }
+})
+input.onButtonPressed(Button.A, () => {
+    radio.sendNumber(0)
+})
+input.onButtonPressed(Button.B, () => {
+    radio.sendNumber(1)
+})
+input.onButtonPressed(Button.AB, () => {
+    radio.sendNumber(2)
+})
+radio.setGroup(1)
+basic.showString("Morse Code")
+```
+
+### Try it!
+* Download your program to the micro:bit
+* Press buttons A, B, and A+B together on the micro:bit
+
+Challenge question: Can our code be made more efficient?
+* Whenever you look over a program and see the same lines of code repeated, there is usually a chance to improve the code making it more efficient by reducing the number of lines of code
+* What lines are repeated in our program?  If...then, pause, clear screen 
+* Can we edit the code to use only one 'if...then' block, one 'pause' block, and one 'clear screen' block? Yes!
+
+## Making our code more efficient
+
+Remind students that they can edit the 'if...then' block, adding as many 'else if' conditions as needed. 
+They can do this by clicking on the blue gear-wheel icon in the top left corner of the 'if...then' block.
+
+![Add else-if to if-then block](/static/courses/csintro/radio/if-then-else-if.png)
+
+A final else
+In a conditional that might receive a number of different values, it is good coding practice to have a catch-all 'else' clause.  In our example, if any number value other than the ones we coded for (0,1, and 2) is received, we can signal the user that an error has occurred by using a 'show icon' block to display an X. 
+
+The pause and clear screen
+Rather than repeat these lines of code 3 times, we can move the 'pause' block and the 'clear screen' block outside of the edited 'if...then…else' block.
+
+Now our program runs as we designed it to run and is more efficient, too!
+
+Final Morse Code Program:
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+    radio.sendNumber(0)
+})
+input.onButtonPressed(Button.B, () => {
+    radio.sendNumber(1)
+})
+input.onButtonPressed(Button.AB, () => {
+    radio.sendNumber(2)
+})
+radio.onDataPacketReceived(({ receivedNumber }) => {
+    if (receivedNumber == 0) {
+        basic.showLeds(`
+            . . . . .
+            . . # . .
+            . # # # .
+            . . # . .
+            . . . . .
+        `)
+    } else if (receivedNumber == 1) {
+        basic.showLeds(`
+            . . . . .
+            . . . . .
+            . # # # .
+            . . . . .
+            . . . . .
+        `)
+    } else if (receivedNumber == 2) {
+        basic.showLeds(`
+            # # # # #
+            # # # # #
+            # # # # #
+            # # # # #
+            # # # # #
+        `)
+    } else {
+        basic.showIcon(IconNames.No)
+    }
+    basic.pause(100)
+    basic.clearScreen()
+})
+radio.setGroup(1)
+basic.showString("Morse Code")
+```

docs/courses/csintro/radio/overview.md

@@ -0,0 +1,12 @@
+# Introduction
+
+Up to this point, we have been primarily challenging students to collaborate while they create their own projects. This lesson, on communication using the micro:bit radio, is a great opportunity to have students work in pairs on a project. Have kids find a partner to work with for this lesson, and make sure they are seated next to each other.
+ 
+Note: Many teachers find the concept of “pair programming” to be a valuable way to have students collaborate when programming. Two students share one computer, with one student at the keyboard acting as the driver, and the other student providing directions as the navigator. Students must practice good communication with each other throughout the entire programming process.
+ 
+The micro:bit allows you to communicate with other micro:bits in the area using the blocks in the Radio category. You can send a number, a string (a word or series of characters) or a string/number combination in a radio packet. You can also give a micro:bit instructions on what to do when it receives a radio packet.
+ 
+This lesson starts with a “plugged” unplugged activity, in which students use their micro:bits to explore an advanced simulation. The code is quite complex, so students will focus more on how to use the micro:bits to explore aspects of viruses and epidemics, than the intricacies of the code itself.
+ 
+The project for this lesson will challenge students to work together to send and receive some sort of data to and from each other. There is a wide range of simple and complex projects kids can try, but whatever they choose it is a whole lot of fun to communicate with each other using the micro:bits!
+

docs/courses/csintro/radio/project.md

@@ -0,0 +1,136 @@
+# Project: Radio project
+
+For this project, students should work in pairs to design a project that incorporates radio communication to send and receive data in some way. Some projects may have two separate programs: One that receives data, and one that sends data. Students might each choose to submit one program in that case.
+
+In other cases, a pair of students might submit one program that has both sending and receiving code in it, and the same code is uploaded to two or more micro:bits.
+
+## Project Ideas
+
+### Stop, thief!
+Design an alarm system for your bedroom that alerts you with a screen animation when someone opens your door. You can mount one micro:bit on your door and use the accelerometer to send a signal over the radio when it is being moved.
+
+### Interactive art
+Create a piece of interactive artwork that receives something as input over the radio from another micro:bit, and displays something based on that as output. 
+
+### 3-Note keyboard
+This is a simple three-note keyboard that uses wooden paint stirrers and copper tape to make a connection to each of the three pins on the micro:bit.
+
+![Keyboard with copper tape](/static/courses/csintro/radio/keyboard-copper-tape.png)
+Keyboard with copper tape connections
+ 
+When a key is pressed, it sends a number over the radio to a second micro:bit that plays the appropriate tone over a set of earbuds.  This allows you to use each of the three pins on the first micro:bit to play a different tone.
+
+![Second micro:bit that plays notes](/static/courses/csintro/radio/microbit-number-two.png)
+Second micro:bit that plays the notes
+
+#### 3-Note keyboard program
+
+```blocks
+let sound = 0
+radio.onDataPacketReceived( ({ receivedNumber }) =>  {
+    if (receivedNumber == 0) {
+        sound = 349
+        music.playTone(sound, music.beat(BeatFraction.Half))
+    } else if (receivedNumber == 1) {
+        sound = 392
+        music.playTone(sound, music.beat(BeatFraction.Half))
+    } else if (receivedNumber == 2) {
+        sound = 440
+        music.playTone(sound, music.beat(BeatFraction.Half))
+    }
+})
+input.onPinPressed(TouchPin.P0, () => {
+    sound = 0
+    radio.sendNumber(sound)
+    basic.showLeds(`
+        . . # . .
+        . # . # .
+        . # . # .
+        . # . # .
+        . . # . .
+        `)
+    basic.pause(500)
+    basic.clearScreen()
+})
+input.onPinPressed(TouchPin.P1, () => {
+    sound = 1
+    radio.sendNumber(sound)
+    basic.showLeds(`
+        . . # . .
+        . # # . .
+        . . # . .
+        . . # . .
+        . # # # .
+        `)
+    basic.pause(500)
+    basic.clearScreen()
+})
+input.onPinPressed(TouchPin.P2, () => {
+    sound = 2
+    radio.sendNumber(sound)
+    basic.showLeds(`
+        . # # # .
+        # . . # .
+        . . # . .
+        . # . . .
+        # # # # .
+        `)
+    basic.pause(500)
+    basic.clearScreen()
+})
+basic.showLeds(`
+    # # # # #
+    # # # # #
+    . . . . .
+    . . . . .
+    . . . . .
+    `)
+basic.clearScreen()
+```
+
+### Radio tennis
+In this project, the tennis racquets alternate displaying a ball on the micro:bit LED screen.  When you swing the racquet, the ball disappears from one micro:bit display and shows up on the other micro:bit's display.
+
+![Radio tennis racquets](/static/courses/csintro/radio/radio-tennis-racquets.jpg)
+Radio Tennis racquets (made from cardboard)
+
+## Reflection
+
+Have students write a reflection of about 150–300 words, addressing the following points:
+* What kind of Project did you do?  How did you decide what to pick?
+* How does your project use radio communication?
+* Are there separate programs for the Sender and the Receiver micro:bits?  Or 1 program for both?
+* 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
+ 
+### Radio
+
+**4 =** Effectively uses the Radio to send and receive data, with meaningful actions and responses for each.<br/>
+**3 =** Effectively uses the Radio to send or receive data, with meaningful actions and responses for each.<br/>
+**2 =** Use of Radio is incomplete or non-functional and/or tangential to operation of program.<br/>
+**1 =** No working and/or meaningful use of Radio.
+		 	 
+### micro:bit program
+**4 =** micro:bit program:<br/>
+`*` Uses Radio blocks 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/radio/standards.md

@@ -0,0 +1,7 @@
+# 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.
+* CL.L2-04 Exhibit dispositions necessary for collaboration: providing useful feedback, integrating feedback, understanding and accepting multiple perspectives, socialization.   
+* CL.L2-05 Implement problem solutions using a programming language, including: looping behavior, conditional statements, logic, expressions, variables, and functions.

docs/courses/csintro/radio/unplugged.md

@@ -0,0 +1,67 @@
+## Unplugged: Infection Simulation
+
+For this activity, each student will need a micro:bit and battery pack, as well as the teacher who will be the Master controller.
+ 
+There are four parts to this unplugged activity:
+* Setup: Set up the code on all micro:bits
+* Explore: Let students experience the game first
+* Discuss: Talk about observations, theories, propose strategies
+* Test: Play again, testing different strategies and approaches for containing outbreak
+ 
+The goals of this activity are:
+* Develop a common working vocabulary for talking about disease spread
+* Make inferences based on observation
+* Propose and test original hypotheses to explain complex behavior
+* Explore a professionally developed micro:bit simulation
+ 
+
+![Biohazard symbol](/static/courses/csintro/radio/infection.png)
+
+## Setup
+This site is the home page for the Infection game:
+https://pxt.microbit.org/projects/infection
+ 
+On that page you should be able to copy the JavaScript code, then go to your MakeCode JavaScript editor and paste the JavaScript code into the window.
+ 
+Then click the Download button to download this program onto your micro:bit. This code should be downloaded onto all of your students’ micro:bits as well as your own.
+ 
+This activity works best in an open area. If it’s possible to go outside, that works even better! To set up the game, the teacher should press the A + B buttons on his or her device. This will register all of the student devices and establish the teacher’s micro:bit as the Master device.
+ 
+## Explore
+In this phase, students should just play the game to get a feel for how it works. The object of the game is to meet as many people as possible without getting sick. If at any time players decide to stop meeting people, they should sit down and cover their micro:bit. 
+ 
+To start the game, students should take their devices and spread out. When everyone is ready to begin, the teacher should press the A + B buttons again. All of the student devices will show a unique player icon.
+ 
+One of the players is randomly chosen to have a virus that is transmitted when they meet other players. Players can meet each other by going up to another player and placing the two devices next to each other. Players who are healthy, or who are infected but are not showing symptoms yet, will have a smile. Once a player is sick, their micro:bit will display a frowny face.
+ 
+After a certain period of time being sick, the player dies and the micro:bit will display a skull icon. That player should sit down and wait for the game to end, when all players are dead or the virus stops spreading.
+ 
+## Discuss
+After one round, it is good to have a discussion with the players:
+* Did anyone manage to stay healthy? If so, how? If not, why not?
+* How do you think the disease spread?
+* Who do you think started it?
+* What could we do to find out?
+* What strategies might we adopt next time, to have a better outcome?
+ 
+## Test
+Play the game one more time, or more depending on available time, and attempt to test some of the theories students came up with. 
+* What strategies worked well? 
+* Which strategies seemed like a good idea at the time, but in practice, were less effective? Why? 
+* Are there any real-world situations that this might remind you of?
+ 
+## Vocabulary
+As students talk through their theories, they will often talk about a scientific idea without knowing the specific word for it. This presents a nice opportunity, once students have surfaced an idea, to give it a proper name so that you can start to develop a common working vocabulary for talking about the problem. 
+ 
+Here are some common terms that come up in discussion:
+*  Asymptomatic: Someone who has the virus but is not showing outward symptoms of being sick.
+* Carrier: Someone who has the virus and can transmit it to others.
+* Immunity: Someone who cannot contract or transmit the virus.
+* Incubation: The period of time between when a person contracts the virus and when the person starts to show symptoms of being sick.
+* Inoculation: Make someone immune to the virus.
+* Patient Zero: The first person to introduce a virus to a community.
+* Quarantine: A strategy to isolate those who are suspected of carrying a virus
+ 
+## Reference
+This game is a distributed simulation of a viral outbreak. It is modeled after the Thinking Tags participatory simulations developed at MIT Media Lab. Participatory Simulations have been found to enhance student understanding of complex dynamic relationships, inquiry skills, and scientific understanding. (Colella, V. (2000). Participatory Simulations: Building Collaborative Understanding Through Immersive Dynamic Modeling. _Journal of the Learning Sciences, 9(4), 471–500._ http://doi.org/10.1207/S15327809JLS0904_40\)
+