Arrays updates (#488)

* Rewrote introduction and objectives

Took out old placeholders in Objectives and rewrote Introduction to be
more complete.

* Removed stock photo

* Added new Array Sorting Animations and Cover image

* Added missing activity

* Added maker component to rubric.

docs/courses/csintro/arrays.md

@@ -1,13 +1,17 @@
 # Arrays
 
-This lesson covers storing and retrieving data in an ordered fashion using Arrays. Introduces JavaScript as an alternate way of creating and modifying code. Uses a melody as a list/array of notes.
+![Cover image](/static/courses/csintro/arrays/cover.jpg)
+
+This lesson introduces the fundamental concept of storing and retrieving data in an ordered fashion using Arrays. We'll also look at JavaScript as an alternate way of creating and modifying code. We'll look at the structure of a Melody as a list of notes.
  
 ## Lesson objectives
 Students will...
-* Explain the steps they would take to sort a series of numbers
-* Recognize three common sorting algorithms
-* Learn
-* Apply
+* Explain the steps they would take to sort a series of numbers.
+* Recognize three common sorting algorithms.
+* Practice creating Arrays.
+* Practice storing and retrieving values in Arrays.
+* Learn common Array operations such as setting and getting values by index.
+* Demonstrate understanding and apply skills by creating a musical instrument that uses a micro:bit and a program that correctly and effectively uses Arrays to store data.
  
 ## Lesson structure
 * Introduction: Arrays

docs/courses/csintro/arrays/activity.md

@@ -1,9 +1,11 @@
-## Activity: Headband charades
+## Activity: Headband charades and starry starry night
+
+![Starry Night](/static/courses/csintro/arrays/starry-night.png)
 
 Create an array of words that can be used as part of a charades-type game.
 This activity is based on a very popular phone app invented by Ellen DeGeneres (https://bits.blogs.nytimes.com/2013/05/03/ellen-degeneres-iphone-game/).
 
-![Heads up game](/static/courses/csintro/arrays/heads-up-game.jpg)
+![Heads up game](/static/courses/csintro/arrays/headband-charades.png)
 	
 * Create a new variable and give it a name like arrayWords.
 * Insert a 'set' variable block into the 'on start' block. 
@@ -187,3 +189,99 @@ basic.pause(100)
 basic.showNumber(1)
 basic.showString(arrayWords[index])
 ```
+
+![Random stars](/static/courses/csintro/arrays/starry-night.gif)
+
+## Activity: Starry starry night
+
+In this micro:bit activity, we will create a set of random constellations on the micro:bit screen. We will use an array filled with numbers to tell us how many stars (dots) should be in each constellation.
+
+Review the use of the random block in the Math category.
+
+* Create a block that will plot a single dot at a random location on the screen by choosing a random number from 0 to 4 for the x axis and a random number from 0 to 4 for the y axis.
+
+```blocks
+led.plot(Math.random(5), Math.random(5))
+```
+
+Next, let’s create a loop that will repeat the above code five times, for a constellation with five stars.
+
+```blocks
+for (let index = 0; index <= 4; index++) {
+    led.plot(Math.random(5), Math.random(5))
+    }
+```
+
+Note that to keep things simple we don’t check for duplicates, so it’s possible you may end up with fewer than five visible stars. That’s okay.
+
+Next, let’s create an array with five numbers in it. We will loop through the array and create five separate constellations, using the numbers in the array to represent the number of stars in each of the five constellations.
+
+To create an array, you need to set the value of a variable to the array.
+
+* From the Variables Toolbox drawer, drag out the ‘set item’ block and attach a ‘create array with number’ block to it.
+* Then click on the blue Gear icon and add four more values to the block, for a total of five.
+
+![Gear icon on array block](/static/courses/csintro/arrays/gear-values.png)
+
+You can put the Gear view away by clicking on the Gear again. You can drag additional numbers out of the Math category and snap them to the open slots in the Create array with block. Go ahead and change them to some random values, then attach the whole thing to the ‘on start’ event handler block.
+
+Now, when the micro:bit starts, it will create an array with those five values. Let’s create the constellations when the A button is pressed. Looking at our loop, instead of repeating 0 to 4 times, we actually want to use the value from the array to figure out how many stars to create.
+
+* Drag the ‘get value from list’ block from the Arrays Toolbox drawer and replace the 4 with that block.
+
+You should see that there are more stars printed now, although there is an extra star; if the first value in the array is 5, you will actually see 6 stars because the loop runs when index is 0.
+
+To fix this, we need to do a little math by subtracting 1 from whatever the value in the array is. You can use a Math operation block to do this.
+
+**Note:** Be sure to hit Refresh a few times on the simulator, because sometimes some stars get hidden behind other stars.
+
+![Random stars](/static/courses/csintro/arrays/random-stars.png)
+
+The above code takes the first value in the array and creates that many stars at random locations. Now, all we need to do is iterate through the entire array and do the same thing for each of the values. We will put the above code inside another loop that will run the same number of times as the length of the array (in this case, 5). You should also use a 'pause' block and a 'clear screen' block in between each constellation.
+
+Finally, you might attach the code that shows the constellations to an 'on button A pressed' event handler. 
+
+Here is the complete program.
+
+```blocks
+let list: number[] = []
+input.onButtonPressed(Button.A, () => {
+    for (let i = 0; i <= list.length - 1; i++) {
+        for (let j = 0; j <= list[i] - 1; j++) {
+            led.plot(Math.random(5), Math.random(5))
+        }
+        basic.pause(1000)
+        basic.clearScreen()
+    }
+})
+list = [5, 2, 1, 3, 4]
+```
+
+## Traversing an array
+
+Traversing an array means proceeding through the elements of the array in sequence. Note that there is a special loop in the Loops Toolbox drawer called ‘for element value of list’. This loop automatically takes each element of your array in turn and copies it into a variable called value.
+
+![index loop](/static/courses/csintro/arrays/for-index.png)
+
+The following code is useful for printing out the values of the elements in your array:
+
+```blocks
+input.onButtonPressed(Button.B, () => {
+   for (let value of list) {
+       basic.showNumber(value)
+   }
+   basic.clearScreen()
+})
+```
+
+However, note that value holds a copy of the element in the array, so changing value doesn’t affect the original element.
+
+If you run the code below, then print out the array again, you will see that it is unchanged.
+
+```blocks
+input.onButtonPressed(Button.A, () => {
+   for (let value of list) {
+       value += 1
+   }
+})
+```

docs/courses/csintro/arrays/overview.md

@@ -58,5 +58,3 @@ There are some good array sorting videos:
 * Bubble-sort with Hungarian folk dance: https://youtu.be/lyZQPjUT5B4
 * Select-sort with Gypsy folk dance: https://youtu.be/Ns4TPTC8whw
 * Insert-sort with Romanian folk dance: https://youtu.be/ROalU379l3U
-
-![Folk dance sorting](/static/courses/csintro/arrays/folk-dance-sorting.png)

docs/courses/csintro/arrays/project.md

@@ -101,10 +101,17 @@ Have students write a reflection of about 150–300 words, addressing the follow
 **2 =** Array skips values or has other problems with storing and/or retrieving elements.<br/>
 **1 =** Array doesn't work at all or no array present.
 
+### Maker component
+
+**4 =** Tangible component is tightly integrated with the micro:bit and each relies heavily on the other to make the project complete.
+**3 =** Tangible component is somewhat integrated with the micro:bit but is not essential.
+**2 =** Tangible component does not add to the functionality of the program.
+**1 =** No tangible component.
+
 ### micro:bit program
 
 **4 =** The program:<br/>
-`*` Uses at least one array in a fully integrated and  meaningful way<br/>
+`*` Uses at least one array in a fully integrated and meaningful way<br/>
 `*` Compiles and runs as intended<br/>
 `*` Meaningful comments in code<br/>
 **3 =** Uses an array in a tangential way that is peripheral to function of project and/or program lacks 1 of the required elements.<br/>
@@ -113,11 +120,7 @@ Have students write a reflection of about 150–300 words, addressing the follow
 
 ### Collaboration reflection
 
-**4 =** Reflection piece includes:<br/>
-`*` Brainstorming ideas<br
-`*` Construction<br/>
-`*` Programming<br/>
-`*` Beta testing<br/>
+**4 =** Reflection piece addresses all prompts.<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/arrays/unplugged.md

@@ -10,6 +10,8 @@ In this activity, you will demonstrate different kinds of sorting methods on you
 
 * Have up to ten students (the Sortees) stand up at the front of the classroom. Ask another student to volunteer to be the Sorter.
 * Mix up the order of the papers and give each student a piece of paper with a number on it. They should hold the paper facing outward so their number is visible. Each of these students is like an element in an array.
+
+![Illustration of line of students representing an array](/static/courses/csintro/arrays/sorts-people.png)
  
 ## Initial Sort
 
@@ -45,6 +47,8 @@ Compare the first two students. If the student on the right is smaller than the
 >2. Add one to counter
 5. Repeat steps 2 through 4 as long as counter is greater than zero.
  
+![Bubble Sort Animation](/static/courses/csintro/arrays/bubble-sort.gif)
+
 #### In MakeCode:
 
 **Note:** Press B to display the array visually. The length of each vertical bar represents each number in the array, from left to right. Press A to sort the array using Bubble Sort. Press A + B to generate new random numbers for the array.
@@ -111,7 +115,9 @@ Take the first student on the left and consider that person’s number the small
 1. Find the smallest unsorted value in the array.
 2. Swap that value with the first unsorted value in the array.
 3. Repeat steps 1 and 2 while the number of unsorted items is greater than zero.
- 
+
+![Selection Sort Animation](/static/courses/csintro/arrays/selection-sort.gif)
+
 #### In MakeCode:
 
 **Note:** The inner loop gets smaller as the sorting algorithm runs because the number of unsorted items decreases as you go. The index that the inner loop starts at needs to change as the number of sorted items increases, which is why we have to use a separate counter (item) and compute j every time through the inner loop.
@@ -185,7 +191,9 @@ Take the first student on the left and consider that person sorted. Next, take t
 1. For each element in the unsorted section of the list, compare it against each element in the sorted section of the list until you find its proper place.
 2. Shift the other elements in the sorted list to the right to make room.
 3. Insert the element into its proper place in the sorted list.
- 
+
+![Insertion Sort Animation](/static/courses/csintro/arrays/insertion-sort.gif)
+
 #### In MakeCode:
 
 ```blocks
@@ -245,4 +253,4 @@ j = 1
 In 2008, Illinois Senator Barack Obama was interviewed by Google’s CEO Eric Schmidt, who asks him a computer science interview question. Watch as the interview doesn’t go exactly as planned…
 
 https://www.youtube.com/watch?v=k4RRi_ntQc8
-[Barak Obama interviewed by Eric Schmidt](https://www.youtube.com/watch?v=k4RRi_ntQc8)
+[Barack Obama interviewed by Eric Schmidt](https://www.youtube.com/watch?v=k4RRi_ntQc8)