Add 'Binary' lesson to csintro. (#434)

docs/SUMMARY.md

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

docs/courses/csintro.md

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

docs/courses/csintro/binary.md

@@ -0,0 +1,30 @@
+# Binary
+
+This lesson presents the concept of binary digits and base-2 notation.  Students will learn how data is stored digitally and how it can be read and accessed.
+
+## Lesson objectives
+
+Students will...
+* Understand what a bit and byte are and how they relate to computers and the way information is processed and stored.
+* Learn to count in Base-2 (binary) and translate numbers from Base-10 (decimal) to binary and decimal.
+* Apply the above knowledge and skills to create a unique program that uses binary counting as an integral part of the program.
+
+## Lesson structure
+
+* Introduction: Bits and Bytes
+* Unplugged Activity: Binary Vending Machine
+* Micro:bit Activity: Binary Transmogrifier
+* Project: Make a Binary Cash Register
+* Assessment: Rubric 
+* Standards: Listed
+
+## Lesson plan
+
+1. [**Overview**: Bits, bytes, binary](/courses/csintro/binary/overview)
+2. [**Unplugged**: Binary vending machine](/courses/csintro/binary/unplugged)
+3. [**Activity**: Binary transmogrifier](/courses/csintro/binary/activity)
+4. [**Project**: Make binary a cash register](/courses/csintro/binary/project)
+
+## Related standards
+
+[Targeted CSTA standards](/courses/csintro/binary/standards)

docs/courses/csintro/binary/activity.md

@@ -0,0 +1,162 @@
+# Activity: Binary transmogrifier
+
+Guide the students through building a binary transmogrifier (converter) that converts between binary (base-2) and decimal (base-10) numbers. Let them figure out a pattern that will allow them to do the conversion on the fly.
+
+![Transmogrifier cartoon](/static/courses/csintro/binary/transmogrifier.png)
+Calvin & Hobbes
+
+Tell the students that they will be building a binary transmogrifier with the micro:bit. 
+The user will be able to use the buttons to enter binary 0s and 1s and will be able to press A+B at any time to display the decimal equivalent of the number that has been entered. 
+
+## Create the Variables
+Students will need to create a number variable to hold the running decimal total.
+They should also create a string variable to hold the current binary number.
+
+* From the Variables menu, make and name these two variables: decimal, binary.
+
+>![Make a variable](/static/courses/csintro/binary/make-a-variable.png)
+
+>![Name a variable](/static/courses/csintro/binary/name-a-variable.png)
+
+## Initialize the Variables
+When the program starts up, you should initialize your variables to starting values. 
+* `decimal` = `0`
+* `binary` = `""` (empty string)
+This also tells the micro:bit what type of variable it is. Use the empty string value found in the **Text** toolbox drawer, under the **Advanced** menu.
+
+![Select text on block menu](/static/courses/csintro/binary/select-text-blocks.png)
+
+```blocks
+let binary = ""
+let decimal = 0
+```
+
+By setting the binary variable to an initial value of “ “ you tell the micro:bit that it is a string variable: a literal string of characters. This is important because you will be adding to this string character by character.
+
+## Transmogrify Me!
+We are ready to start entering numbers. Remember that binary numbers are calculated based on the number of place values (“bits”) and as you enter 1s and 0s, the value changes. One way to calculate the decimal value is to wait until the user presses A+B, and then calculate the entire number based on the value of the string.
+
+However, a much simpler method is to calculate the decimal number “on the fly”, which is to say, every time the user presses a 1 or a 0, calculate the current decimal value of that string so you only have to deal with one 0 or 1 at a time.
+
+## What’s the Pattern?
+This is a table of the first fourteen binary numbers and their decimal equivalents. Your goal is to use this table to figure out how to calculate a new correct decimal value based on whether a user enters a 0, or a 1 as the next number in the string.
+
+```
+Binary  Decimal Binary  Decimal
+===============================
+    1      1     1000      8
+   10      2     1001      9
+   11      3     1010     10
+  100      4     1011     11
+  101      5     1100     12
+  110      6     1101     13
+  111      7     1110     14
+```
+For example, imagine you are the micro:bit. If the first number the human enters is a 1, you automatically know the new decimal value is a 1. If the second number that is entered is a 0, then your decimal value goes from 1 to 2. However, if the second number is also a 1, then your new decimal value goes from 1 to 3.
+
+At that point, you either have a 10, or a 11 in your binary string. Let’s take 10 as an example. The decimal value of binary 10 is 2. If the third number entered is a 0, then your new decimal value goes from 2 to 4. If the third number entered is a 1, then your new decimal value goes from 2 to 5. 
+
+If, on the other hand, you have 11 in your binary string, then your decimal value is 3. If the third number entered is a 0, then your new decimal value goes from 3 to 6. If the third number entered is a 1, then your new decimal value goes from 3 to 7. 
+
+See if you can spot a pattern that will help you figure out, for any given decimal value, what the new decimal value should be if the user enters a 0, or if the user enters a 1.
+
+![Binary number patterns](/static/courses/csintro/binary/binary-patterns.png)
+
+## Pseudocode
+Recall from our Algorithms lesson that it is a good idea to write out your algorithm in plain English, before you start coding in MakeCode. This is called pseudocode. The Input for this program will be the buttons. Try to write out what should happen when each of the buttons is pressed.
+
+Here is one possible solution. Your own pseudocode might be different and that’s okay.
+
+When Button A is pressed:
+1. Add a “1” to the end of the binary string.
+2. Show the current value of the binary string.
+3. Update the decimal value with the total.
+
+When Button B is pressed:
+1. Add a “0” to the end of the binary string.
+2. Show the current value of the binary string.
+3. Update the decimal value with the total.
+
+When Buttons A+B are pressed:
+1. Show the current value of the decimal string.
+
+## Coding Steps
+* From the Input Toolbox drawer, drag 3 of the ‘on button A pressed’ event handlers to your coding workspace
+* Leave one block with button 'A’. Use the drop-down menus in the other 2 blocks to choose button ‘B’, and button ‘A+B’
+
+```block
+input.onButtonPressed(Button.A, () => {
+    
+})
+input.onButtonPressed(Button.B, () => {
+    
+})
+input.onButtonPressed(Button.AB, () => {
+    
+})
+```
+
+Let’s work on what to do when button A is pressed. 
+* Button A represents a binary “1”. Our first task is to join a “1” to the existing string variable called binary.
+* From the Text Toolbox drawer (under the Advanced menu), drag the 'join' block to your programming workspace
+* Next, use the 'set' variable block to assign the value of the 'binary' variable to the 'join' block
+* Join the 'binary' variable and “1” by entering them into the appropriate slots in the 'join' block
+* And show the binary value on the screen so that when users press a button they can see the entire binary string
+	
+```block
+let binary = ""
+input.onButtonPressed(Button.A, () => {
+    binary = binary + "1"
+    basic.showString(binary)
+})
+```
+
+* Finally, you will need to update the current decimal value with the value of the entire binary string. This is pretty straightforward if you have been keeping track of the decimal value every time someone presses a button. The pattern is as follows: _(spoiler alert!)_
+
+>* Whenever someone enters a 0, the new decimal value is twice the previous value. 
+>* If someone enters a 1, the new decimal value is twice the previous value, plus 1.
+
+* For Button A, you will need to use the multiplication Math block and your binary variable block to create the proper formula. You will need to put that formula inside another Math addition block in order to add one to the result.
+
+```block
+let binary = ""
+let decimal = 0
+input.onButtonPressed(Button.A, () => {
+    binary = binary + "1"
+    basic.showString(binary)
+    decimal = decimal * 2 + 1
+})
+```
+
+* Your Button B algorithm is similar, although you will be joining a “0” to the binary variable and you are just multiplying the decimal variable by 2.
+* Your Button A+B algorithm just uses a Show block to show the value of the decimal variable.
+
+Here is the completed program.
+
+```blocks
+let binary = ""
+let decimal = 0
+input.onButtonPressed(Button.A, () => {
+    binary = binary + "1"
+    basic.showString(binary)
+    decimal = decimal * 2 + 1
+})
+input.onButtonPressed(Button.B, () => {
+    binary = binary + "0"
+    basic.showString(binary)
+    decimal = decimal * 2
+})
+input.onButtonPressed(Button.AB, () => {
+    basic.showNumber(decimal)
+})
+decimal = 0
+binary = ""
+```
+
+## Try it out!
+Have someone else try your program out. Then think about how the program might be improved. 
+Here are some additional modifications you might try:
+* Add a way to clear the binary and decimal values so you can start over.
+* Add a way to erase the previous value.
+* Create a decimal-binary converter that allows you enter a decimal value and see the binary equivalent when you press A+B.
+

docs/courses/csintro/binary/overview.md

@@ -0,0 +1,30 @@
+# Introduction
+Most everyone who uses a computer has heard the terms, kilobyte (kB), Megabyte (MB), Gigabyte (GB) and even Terabyte (TB), usually when referring to the size of computer files and hard drives as well as download speeds. Bandwidth or connection rates are measured in bits/second. But what is a bit and what is a byte and what do they have to do with computers?
+
+Picture a basic room light. The light is either on or it is off. You control the current state of the light by flipping a switch that has only two settings, down (light off) and up (light on). The earliest computers used a series of mechanical switches to control the flow of electricity through their circuits, turning each one on or off. The on/off states of the circuits was used to represent and even store information. The smallest unit of information, representing the state of one switch, is known as a bit.
+
+A bit is a binary digit and has only two possible values, zero or one. The value of the bit represents the current state of a single switch. If the switch is off, then the bit has the value zero. If the switch is on, then the bit has the value one. 
+
+A bit can only represent two different values, zero or one. To represent larger pieces of information, bits are strung together in sequences of 8 called bytes. 
+
+A byte is a sequence of binary digits made up of 8 bits.
+
+A byte can represent any value from 00000000 through 11111111, for a total of 256 different possible values. Each digit in a byte can be thought of as representing an individual switch that is either off (zero) or on (one). 
+
+Modern computers rely on transistors, which pack millions of tiny switches into a chip smaller than your thumb, but information is still represented in essentially the same way: as a series of ones and zeros. By using binary, computers can represent information simply and efficiently using a system that is very effectively modeled in digital circuitry.
+
+![Binary numbers shown on a monitor](/static/courses/csintro/binary/binary-numbers.jpg)
+Binary numbers on a terminal monitor
+
+## Review
+* A Bit is a binary digit with two possible values, zero or one
+* A Byte is a sequence of 8 bits and has 256 possible values from 00000000 through 11111111
+* A kilobyte (kB) is 1,024 bytes or 2^10 bytes
+* A Megabyte (MB) is 1,048, 576 bytes or 2^20 bytes
+* A Gigabyte (GB) is 1,073,741,824 bytes or 2^30 bytes
+* A Terabyte (TB) is 1,099,511,627,776 bytes or 2^40 bytes
+	
+## Notes 
+* The ones and zeros of bits and bytes can be used to represent letters, numbers, and even different keys on a computer keyboard. 
+* A bit can be used to hold a Boolean (true/false) value.  A value of zero represents ‘false’ and a value of one represents ‘true’.
+	

docs/courses/csintro/binary/project.md

@@ -0,0 +1,93 @@
+# Project: Make a binary cash register
+
+The unplugged activity uses a vending machine as a model for creating different combinations of binary place values. We found that for n coins, there is one and only one way to make every number between 0 and 2^_n-1_.
+
+For this project, students should invent a paper and cardboard version of the binary counter, then program it to display the decimal value of those numbers.
+
+Materials
+* Cardboard or heavy paper
+* Copper tape - sources:
+>https://www.adafruit.com/product/1128<br/>https://www.sparkfun.com/products/10561
+* 3 quarters or other heavy coins
+* Scissors
+* Duct tape
+
+![micro:bit cash register](/static/courses/csintro/binary/microbit-cash-register.png)
+Binary micro:bit Cash Register
+
+## Tips
+This is one possible design for a binary cash register. We used coins and copper tape on a piece of cardboard. Normally, the coins are flipped up (“off” or 0) and to indicate “on” or 1, the coin is flipped so it lays flat across both pieces of copper tape, completing the circuit so the micro:bit can detect that that pin has been activated, and calculates and displays the decimal value of the binary number that is indicated by the coins.
+
+Copper tape is a thin, flexible strip of copper with an adhesive back. You can sometimes find copper tape at the hardware, sold as slug tape, to keep slugs out of your garden. Usually, copper tape can conduct electricity even through the sticky side but if you are sticking one piece of copper tape to another, be sure to go over the connection with your fingernail, pressing it down firmly.
+
+Because the micro:bit only has three pins, this binary register is limited to three place values. Students might use variables to represent each of the three place values, or they can simply keep a running total by adding the appropriate amount when each of the three pins is pressed.
+
+You can stick the micro:bit into place using some sticky tape, or you can create an actual holder. The copper tape connections are delicate though, so be careful when plugging and unplugging the power cable from the board.
+
+![Binary cash register project](/static/courses/csintro/binary/binary-cash-register.jpg)
+An implementation of the Binary Cash Register
+
+## Extra Mods
+* Write some code that will display the number in binary when you press the A button. 
+* Think of a way to create more place values, perhaps by using a second micro:bit and a Radio connection.
+
+## Optional Project: Build a Binary Wristwatch
+* Write a program that will display the correct time (once set) on the micro:bit. 
+* The 3-4 numbers displayed will be in binary (not decimal).
+* To make the strap of the wristwatch, put 2 pieces of duct tape back-to-back, and use velcro tabs as the fasteners
+
+![Binary wrist watch project](/static/courses/csintro/binary/binary-wrist-watch.jpg)
+
+## Reflection
+Have students write a reflection of about 150–300 words, addressing the following points:
+
+* What were the Variables that you used to keep track of information?
+* What mathematical operations did you perform on your variables? 
+* What information did you provide?
+* Describe what the physical component of your micro:bit project was (e.g., an armband, a wallet, a holder, etc.)
+* How well did your prototype work? What were you happy with? What would you change?
+* What was something that was surprising to you about the process of creating this project?
+* Describe a difficult point in the process of designing this project, and explain how you resolved it.
+
+## Assessment
+
+**Competency scores**: 4, 3, 2, 1
+
+### Binary display
+
+**4 =** All binary numerals display correctly.<br/>
+**3 =** At least 2 binary numerals display correctly.<br/>
+**2 =** At least 1 binary numeral displays.<br/>
+**1 =** No binary numerals display correctly.
+
+### micro:bit program
+
+**4 =** micro:bit program:<br/>
+`*` Uses binary in a way that is integral to the program<br/>
+`*` Uses mathematical operations to add, subtract multiply, and/or divide variables<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 3 or more of the required elements.
+
+### 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. 
+
+## Additional Questions to Ponder
+* How could you use a row of flashlights to represent a number to someone else far away? 
+* How might you use those flashlights to send a message?
+	
+## Resources
+
+[Math is fun: Binary number system](https://www.mathsisfun.com/binary-number-system.html)
+
+

docs/courses/csintro/binary/standards.md

@@ -0,0 +1,9 @@
+# Standards
+
+## CSTA K-12 Computer Science Standards
+
+* CT.L1:3-05 Demonstrate how 0s and 1s can be used to represent information.
+* CT.L1:6-03 Demonstrate how a string of bits can be used to represent alphanumeric information.
+* CT.L2-14 Examine connections between elements of mathematics and computer science, including binary numbers, logic, sets and functions.
+* CT.L3B-07 Discuss the interpretation of binary sequences in a variety of forms (e.g., instructions, numbers, text, sound, image).
+* CPP.L1:6-06 Implement problem solutions using a block-based visual programming language.

docs/courses/csintro/binary/unplugged.md

@@ -0,0 +1,140 @@
+# Unplugged: Binary vending machine
+
+In this activity, students will explore the concept of binary numbers by experimenting with a very odd vending machine that only accepts Base-2 coins and doesn’t give change! In the process, students will become familiar with an alternate numbering system, in this case binary (Base-2). Students will learn how binary relates to decimal, and will be able to convert between the two systems.
+
+## Materials
+* Paper
+* Pencil
+* Set of ‘coins’ - these could be checkers/chess pieces, cardboard rounds, or even post-it notes
+* Vending machine visual (optional) 
+
+## Pre-activity preparation
+Gather or create small counters or ‘coins’ in the following denominations: 1, 2, 4, 8, 16, 32
+Plastic white poker chips work well as coins. You can write the denominations onto one side of the coins with a whiteboard marker.  You can also use small index cards or paper squares. Make sure to leave one side of each coin blank.
+
+Amount: One set of coins (with one coin of each of the first four denominations in it) for each student or each pair of students.
+
+Hold onto the 16 and 32 unit coins for later.
+
+### ~hint
+**Tip**
+
+If you have time, create on a poster board, on the whiteboard, or on paper as a handout, a big rectangle representing a vending machine. Draw in different items for purchase that would appeal to the students. Have the different items priced differently from 1 unit to 15 units.  This is particularly good to have for younger and more visually oriented students.
+
+You can also just make a very simple vending machine diagram like the one below:
+
+![Vend-o-matic diagram](/static/courses/csintro/binary/vendomatic.jpg)
+### ~
+## Introduction
+Ask the students the following questions to spark discussion:
+* Have any of them bought anything in the last 24 hours? _Usually they have bought a snack or perhaps lunch._
+* Did any of them use cash? 
+* What bills or coins did they use? 
+* What are the core denominations of money in the United States?
+
+Lead the students to realize that our core monetary denominations, like our number system are based on ten.
+* 1 penny
+* 1 dime = 10 pennies
+* 1 one dollar bill = 10 dimes (or 100 pennies)
+* 1 ten dollar bill = 10 one dollar bills
+* 1 hundred dollar bill = 10 ten dollar bills
+	
+Our money system is based on our number system, the decimal system. The _deci-_ prefix means ‘one tenth’. Each place value in the decimal is one tenth of the place value to its left.
+
+**Example:** The amount eleven is written in decimal notation as 11. 
+There is a numeral one in the ‘tens place’ and a numeral one in the ‘ones place’.
+The leftmost numeral one in the ‘tens place’ represents one ten.
+The next numeral one represents an amount that is one tenth the amount of the place value to its left; in this case, one tenth of ten, or one.
+
+But what is it like to use a different monetary system? A monetary system that has a base other than ten?
+
+## Process
+* Give a set of the coins you prepared earlier to each student or pair of students
+* Remember to hold onto the 16-unit and 32-unit coins for now
+* Present the following scenario:
+
+>* There is a vending machine that sells items of all prices
+* However, the machine cannot give change
+* Therefore, you must pay for everything in exact amounts 
+* You have one of each coin: 1, 2, 4, 8.
+
+**Questions**
+
+* What is the price of the least expensive item you can buy? (1 unit)
+* What is the price of the most expensive item you can buy? (15 units) 
+* What else can you buy? What coin(s) would you use to do this?
+* What is the price of something you cannot buy, because you don’t have exact change? 
+	
+Here is where students will start to figure out the different combined sums of different coins. 
+You can also prompt them by saying, for example, “It’s impossible to buy something that costs 11 units, isn’t it?” Someone will immediately point out that you CAN buy an 11-unit item with 8 + 2 + 1. 
+
+You can now have the students write down how they could pay, what coin(s) could they use to purchase each of the items priced 1 unit through 15 units with the coins they have OR have a whole class discussion with you keeping track of their methods of payment on the whiteboard.
+
+There will soon be a general agreement among the students that:
+* You can make every amount between 1 unit and 15 units with the 4 coins in their set
+* There is only one way to make each of those amounts.
+
+Have students line up the coins in their set from greatest to least denomination, left to right.
+
+**Questions**
+
+* What do you notice about the denominations as they increase from right to left? _Each amount is double (or times 2 or twice) the denomination before it (to its right)._
+* If we added one more coin to your set of coins that is greater than the 8 unit coin, what is the next logical coin denomination? 16. Why? _Because 16 is ‘2 times’ greater than 8._
+	
+Hand out the 16 unit coins, one to each student or pair of students.
+
+**Questions**
+
+* What is the new maximum price you could pay for an item? _31_
+* What combinations of coins can you use to pay for an item priced from 16 units to this new maximum price? 
+	
+Once again, you can now have the students write down how they could pay, what coin(s) could they use to purchase each of the items priced 16 units through the new maximum price with the coins they have, OR have a whole class discussion with you keeping track of their methods of payment on the whiteboard.
+
+Again, there will soon be a general agreement among the students that:
+* You can make every amount between 16 units and the new maximum with the 5 coins now in their set.
+* There is only one way to make each of those amounts.
+	
+**Questions**
+
+* If we added one more coin to your set of coins that is greater than the 16 unit coin, what is the next logical coin denomination?  32. Why? _Because 32 is ‘2 times’ greater than 16. _
+	
+Hand out the 32 unit coins, one to each student or pair of students.
+
+**Questions**
+
+* What is the new maximum price you could pay for an item? _63_
+* What combinations of coins can you use to pay for an item priced from 32 units to this new maximum price? 
+
+![Coins representing binary digits](/static/courses/csintro/binary/coins-as-digits.jpg)
+From coins to binary notation - the number 45
+
+Once students are comfortable making combinations of numbers, encourage them to use ones and zeroes to represent the numbers instead. This number system uses the number 2 as its base (each place is two times the one before it.) It is called the Base-2 system, or binary system. The number system we are normally familiar with is the Base-10 system, or decimal system (each place is ten times the one before it.)
+
+With their coins in a line in descending order from right to left on a piece of paper, ask students to represent a given number by keeping face up the coins they would use to make this amount and flipping over or putting face down the coins not used.
+
+**Example:** Ask them to represent the number 45. _See image above._
+
+They should have the 32, 8, 4, and 1 coins face up and the 16 and 2 coins face down.
+Ask the students to place a numeral 1 above the coins that are face up and a numeral zero over the coins that are face down.
+
+The ones and zeros they just drew are the binary number version of the amount represented by the flipped-up coins. For the example: 45 in Base-10 = 101101 in Base-2
+
+Practice translating numbers from Base-10 to Base-2
+The students can now use this same method to translate other numbers from Base-10 to Base-2.
+
+**Examples:**
+>22 (_1 0 1 1 0_ )<br/>
+37 (_1 0 0 1 0 1_ )
+
+Practice translating numbers from Base-2 to Base-10 
+Next, have the students use the above method in reverse to translate numbers from Base-2 to Base-10. 
+* Start with all the coins face up in a line from greatest to least denomination from left to right.
+* Write the ones and zeros representing the binary number being translated above the coins.
+* Flip to face down any coin with a zero above it.
+* Add up the remaining face up coins.
+
+**Examples:**
+>0 1 0 1 0 (_10_ )<br/>
+1 1 0 1 1 0 (_54_ )
+	
+