Hour of makecode rps (#579)

* local commit

* More reaction fixex

* Local commit

* Convert 'rock paper scissors' to a make project

* Revert the 'reaction time' stuff

* Add image for project page

* Add finished make image in last step

docs/projects/reaction-time/make.md

@@ -18,4 +18,3 @@ That's it!
 Code
 
 ## ~
-

docs/projects/rock-paper-scissors.md

@@ -1,161 +1,28 @@
-# Rock Paper Scissors
+# Rock - Paper - Scissors
 
-## Step 1
+## @description A beginner maker activity, creating the Rock-Paper-Scissors game.
 
-We want the @boardname@ to choose rock, paper, or scissors when you shake it.
+## ~avatar
-Place a ``||input:on shake||`` block so when you shake the @boardname@, it will run part of a program.
 
-```blocks
+Make the Rock-Paper-Scissors game on your @boardname@ and challenge your friends.
-input.onGesture(Gesture.Shake, () => {
 
-})
+## ~
-```
 
-## Step 2
+![Rock Paper Scissors game on wrist](/static/mb/projects/rock-paper-scissors.jpg)
 
-Add a ``weapon`` variable to store a random number computed with ``||math:pick random||``.
+## Duration: ~20 minutes.
 
-When you shake the @boardname@, it should pick a random number from `0` to `2`
+## Materials
-and store it in the variable `weapon`. (This variable is named `weapon` because 
-rock, paper, and scissors are the weapons you use to battle your friends!)
 
-```blocks
+* @boardname@, battery holder and 2 AAA batteries
-let weapon = 0;
+* Roll of duct tape (maybe 2 rolls if you want another color)
-input.onGesture(Gesture.Shake, () => {
+* Velcro
-    weapon = Math.random(3)
-})
 
-```
+## Activities
 
-In a later step, each of the possible numbers (`0`, `1`, or `2`) is matched to its own picture. The picture is shown on the LEDs when its number is picked.
+* [Make](/projects/rock-paper-scissors/make)  
+* [Code](/projects/rock-paper-scissors/code)
 
-## Step 3
+## ~button /projects/rock-paper-scissors/make
-
+Let's get started!
-Place an ``if`` block under the ``||math:pick random||`` and
+## ~
-check whether ``weapon`` is equal to ``0``.
-
-```blocks
-let weapon = 0;
-input.onGesture(Gesture.Shake, () => {
-    let weapon = Math.random(3)
-    if (weapon == 0) {
-    }
-})
-```
-
-## Step 4
-
-In the ``if`` block, place a ``||basic:show leds||`` block that shows a
-picture of a piece of paper.
-
-```blocks
-let weapon = 0;
-input.onGesture(Gesture.Shake, () => {
-    let weapon = Math.random(3)
-    if (weapon == 0) {
-        basic.showLeds(`
-            # # # # #
-            # . . . #
-            # . . . #
-            # . . . #
-            # # # # #
-            `)
-    }
-})
-```
-
-## Step 5
-
-Add an ``else if`` block to the ``if`` block and check whether ``weapon``
-is equal to ``1``.
-
-Click on the gearwheel icon to open up the ``if`` editor; then drag and drop an ``else if`` block in the ``if`` editor.
-
-```blocks
-let weapon = 0;
-input.onGesture(Gesture.Shake, () => {
-    let weapon = Math.random(3)
-    if (weapon == 0) {
-        basic.showLeds(`
-            # # # # #
-            # . . . #
-            # . . . #
-            # . . . #
-            # # # # #
-            `)
-    } else if (weapon == 1) {
-    }
-})
-```
-
-## Step 6
-
-Place a ``||basic:show leds||`` block under the else if and draw a **rock** image on the screen.
-
-```blocks
-let weapon = 0;
-input.onGesture(Gesture.Shake, () => {
-    let weapon = Math.random(3)
-    if (weapon == 0) {
-        basic.showLeds(`
-            # # # # #
-            # . . . #
-            # . . . #
-            # . . . #
-            # # # # #
-            `)
-    } else if (weapon == 1) {
-        basic.showLeds(`
-            . . . . .
-            . # # # .
-            . # # # .
-            . # # # .
-            . . . . .
-            `)
-    }
-})
-```
-
-## Step 7
-
-Add a ``||basic:show leds||`` block with a picture of scissors to the ``else`` part.
-
-You don't need to check if `weapon` is `2` because `2` is the only number left out of `0`, `1`, and `2`.
-That's why you can use an ``else`` instead of an ``else if``.
-
-```blocks
-let weapon = 0;
-input.onGesture(Gesture.Shake, () => {
-    let weapon = Math.random(3)
-    if (weapon == 0) {
-        basic.showLeds(`
-            # # # # #
-            # . . . #
-            # . . . #
-            # . . . #
-            # # # # #
-            `)
-    } else if (weapon == 1) {
-        basic.showLeds(`
-            . . . . .
-            . # # # .
-            . # # # .
-            . # # # .
-            . . . . .
-            `)
-    } else {
-        basic.showLeds(`
-            # # . . #
-            # # . # .
-            . . # . .
-            # # . # .
-            # # . . #
-            `)
-    }
-})
-
-```
-
-## Step 8
-
-Your game is ready! Gather your friends and play Rock Paper Scissors!

docs/projects/rock-paper-scissors/code.md

@@ -0,0 +1,161 @@
+# Rock Paper Scissors
+
+## Step 1
+
+We want the @boardname@ to choose rock, paper, or scissors when you shake it.
+Place a ``||input:on shake||`` block so when you shake the @boardname@, it will run part of a program.
+
+```blocks
+input.onGesture(Gesture.Shake, () => {
+    
+})
+```
+
+## Step 2
+
+Add a ``tool`` variable to store a random number computed with ``||math:pick random||``.
+
+When you shake the @boardname@, it should pick a random number from `0` to `2`
+and store it in the variable `tool`. (This variable is named `tool` because 
+rock, paper, and scissors are the tools you use to challenge your friends!)
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    tool = Math.random(3)
+})
+
+```
+
+In a later step, each of the possible numbers (`0`, `1`, or `2`) is matched to its own picture. The picture is shown on the LEDs when its number is picked.
+
+## Step 3
+
+Place an ``if`` block under the ``||math:pick random||`` and
+check whether ``tool`` is equal to ``0``.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    let tool = Math.random(3)
+    if (tool == 0) {
+    }
+})
+```
+
+## Step 4
+
+In the ``if`` block, place a ``||basic:show leds||`` block that shows a
+picture of a piece of paper.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    let tool = Math.random(3)
+    if (tool == 0) {
+        basic.showLeds(`
+            # # # # #
+            # . . . #
+            # . . . #
+            # . . . #
+            # # # # #
+            `)
+    }
+})
+```
+
+## Step 5
+
+Add an ``else if`` block to the ``if`` block and check whether ``tool``
+is equal to ``1``.
+
+Click on the gearwheel icon to open up the ``if`` editor; then drag and drop an ``else if`` block in the ``if`` editor.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    let tool = Math.random(3)
+    if (tool == 0) {
+        basic.showLeds(`
+            # # # # #
+            # . . . #
+            # . . . #
+            # . . . #
+            # # # # #
+            `)
+    } else if (tool == 1) {
+    }
+})
+```
+
+## Step 6
+
+Place a ``||basic:show leds||`` block under the else if and draw a **rock** image on the screen.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    let tool = Math.random(3)
+    if (tool == 0) {
+        basic.showLeds(`
+            # # # # #
+            # . . . #
+            # . . . #
+            # . . . #
+            # # # # #
+            `)
+    } else if (tool == 1) {
+        basic.showLeds(`
+            . . . . .
+            . # # # .
+            . # # # .
+            . # # # .
+            . . . . .
+            `)
+    }
+})
+```
+
+## Step 7
+
+Add a ``||basic:show leds||`` block with a picture of scissors to the ``else`` part.
+
+You don't need to check if `tool` is `2` because `2` is the only number left out of `0`, `1`, and `2`.
+That's why you can use an ``else`` instead of an ``else if``.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    let tool = Math.random(3)
+    if (tool == 0) {
+        basic.showLeds(`
+            # # # # #
+            # . . . #
+            # . . . #
+            # . . . #
+            # # # # #
+            `)
+    } else if (tool == 1) {
+        basic.showLeds(`
+            . . . . .
+            . # # # .
+            . # # # .
+            . # # # .
+            . . . . .
+            `)
+    } else {
+        basic.showLeds(`
+            # # . . #
+            # # . # .
+            . . # . .
+            # # . # .
+            # # . . #
+            `)
+    }
+})
+
+```
+
+## Step 8
+
+Your game is ready! Gather your friends and play Rock Paper Scissors!

docs/projects/rock-paper-scissors/make.md

@@ -0,0 +1,39 @@
+# Make
+
+## Materials
+
+* @boardname@, battery holder and 2 AAA batteries
+* Roll of duct tape (maybe 2 rolls if you want another color)
+* Velcro
+
+## Steps
+
+### Step 1 - Cut the pieces of tape
+
+Cut 2 Pieces of Duct Tape about 9-10 inches long. Press the sticky sides together to form one piece of tape (this is tricky!). This makes the band of your wrist cuff.
+
+![Cut and roll the tape](/static/mb/projects/rock-paper-scissors/cut-roll-tape.jpg)
+
+### Step 2 - Attach the micro:bit and battery pack
+
+Mount the micro:bit in the center of your wrist cuff band by looping a piece of duct tape around in a circle.
+
+![Attach a micro:bit](/static/mb/projects/rock-paper-scissors/attach-mb.jpg)
+
+Attach the battery pack to the micro:bit and tape it on the wrist cuff band on the opposite side from the micro:bit.
+
+### Step 3 - Add the wrist fasteners the micro:bit
+
+Attach Velcro tabs at the ends of the wrist cuff as fasteners. You may need to try it on your wrist to adjust the size.
+
+![Add wrist fasteners](/static/mb/projects/rock-paper-scissors/wrist-fastener.jpg)
+
+### Step 4 - Decorate it!
+
+Decorate the wrist cuff with stickers, glitter, markers, etc.
+
+![Rock Paper Scissors game on wrist](/static/mb/projects/rock-paper-scissors.jpg)
+
+## ~button /projects/rock-paper-scissors/code
+NEXT: Code the game!
+## ~