Updated rock paper scissors (#1444)

* converting RPS into tutorial

* updated tutorial

* need to deal with github throttling

docs/projects/duct-tape-watch.md

@@ -1,4 +1,6 @@
-# Make
+# Duct Tape Watch
+
+![Rock Paper Scissors game on wrist](/static/mb/projects/duct-tape-watch.jpg)
 
 ## Materials
 
@@ -12,13 +14,13 @@
 
 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)
+![Cut and roll the tape](/static/mb/projects/duct-tape-watch/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 a micro:bit](/static/mb/projects/duct-tape-watch/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.
 
@@ -26,14 +28,10 @@ Attach the battery pack to the micro:bit and tape it on the wrist cuff band on t
 
 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)
+![Add wrist fasteners](/static/mb/projects/duct-tape-watch/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)
+![Rock Paper Scissors game on wrist](/static/mb/projects/duct-tape-watch.jpg)
-
-## ~button /projects/rock-paper-scissors/code
-NEXT: Code the game!
-## ~

docs/projects/fashion.md

@@ -25,6 +25,11 @@
   "url": "/projects/step-counter",
   "imageUrl":"/static/mb/projects/step-counter.png",
   "cardType": "side"
+}, {
+  "name": "Duct Tape Watch",
+  "description": "Build a watch from duct tape",
+  "url": "/projects/duct-tape-watch",
+  "imageUrl": "/static/mb/projects/rock-paper-scissors.jpg"
 }]
 ```
 

docs/projects/games.md

@@ -11,7 +11,8 @@ Fun games to build with your @boardname@.
   "name": "Rock Paper Scissors",
   "url":"/projects/rock-paper-scissors",
   "description": "Make the Rock-Paper-Scissors game on your micro:bit and challenge your friends.",
-  "imageUrl":"/static/mb/projects/a4-motion.png"
+  "imageUrl":"/static/mb/projects/a4-motion.png",
+  "cardType": "tutorial"
 }, {
   "name": "Coin Flipper",
   "url":"/projects/coin-flipper",

docs/projects/rock-paper-scissors.md

@@ -1,28 +1,157 @@
-# Rock - Paper - Scissors
+# Rock Paper Scissors
 
-## @description A beginner maker activity, creating the Rock-Paper-Scissors game.
+## Introduction @unplugged
 
-## ~avatar
+![Cartoon of the Rock Paper Scissors game](/static/mb/projects/a4-motion.png)
 
-Make the Rock-Paper-Scissors game on your @boardname@ and challenge your friends.
+Use the accelerometer and the screen to build a **Play Rock Paper Scissors**
+that you can play with your friends!
 
-## ~
+## Step 1 @fullscreen
 
-![Rock Paper Scissors game on wrist](/static/mb/projects/rock-paper-scissors.jpg)
+Add a ``||input:on shake||`` block to run code when when you shake the @boardname@.
 
-## Duration: ~20 minutes.
+```blocks
+input.onGesture(Gesture.Shake, () => {
     
-## Materials
+})
+```
 
-* @boardname@, battery holder and 2 AAA batteries
+## Step 2 @fullscreen
-* Roll of duct tape (maybe 2 rolls if you want another color)
-* Velcro
 
-## Activities
+Add a ``tool`` variable to store a random number computed with ``||math:pick random||``.
 
-* [Make](/projects/rock-paper-scissors/make)  
+When you shake the @boardname@, it should pick a random number from `0` to `2`
-* [Code](/projects/rock-paper-scissors/code)
+and store it in the variable `tool`.
 
-## ~button /projects/rock-paper-scissors/make
+```blocks
-Let's get started!
+let tool = 0;
-## ~
+input.onGesture(Gesture.Shake, () => {
+    tool = Math.randomRange(0, 2)
+})
+
+```
+
+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 @fullscreen
+
+Place an ``if`` block under the ``||math:pick random||`` and
+check whether ``tool`` is equal to ``0``.
+
+Add a ``||basic:show leds||`` block that shows a
+picture of a piece of paper.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    tool = Math.randomRange(0, 3)
+    if (tool == 0) {
+        basic.showLeds(`
+            # # # # #
+            # . . . #
+            # . . . #
+            # . . . #
+            # # # # #
+            `)
+    }
+})
+```
+
+## Step 4 @fullscreen
+
+Click on the **SHAKE** button in the simulator. If you try enough times, you should see
+the paper drawing.
+
+![Shaking a @boardname@ simulator](/static/mb/projects/rock-paper-scissors/rpsshake.gif)
+
+## Step 5 @fullscreen
+
+Click the ``+`` button to add an ``else`` section.
+
+![Adding an else clause](/static/mb/projects/rock-paper-scissors/ifelse.gif)
+
+## Step 6 @fullscreen
+
+Add a ``||basic:show leds||`` block that shows a scissor.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    tool = Math.randomRange(0, 3)
+    if (tool == 0) {
+        basic.showLeds(`
+            # # # # #
+            # . . . #
+            # . . . #
+            # . . . #
+            # # # # #
+            `)
+    } else {
+        basic.showLeds(`
+            # # . . #
+            # # . # .
+            . . # . .
+            # # . # .
+            # # . . #
+            `)
+    }
+})
+```
+
+## Step 7 @fullscreen
+
+Click the ``+`` button to add an ``else if`` section.
+Since ``tool`` can only be ``0``, ``1`` or ``2``, your code is covering all possible cases!
+
+![Adding an else if clause](/static/mb/projects/rock-paper-scissors/ifelseif.gif)
+
+## Step 8 @fullscreen
+
+Add a ``||basic:show leds||`` block with a picture of scissors to the ``else`` part.
+
+```blocks
+let tool = 0;
+input.onGesture(Gesture.Shake, () => {
+    tool = Math.randomRange(0, 3)
+    if (tool == 0) {
+        basic.showLeds(`
+            # # # # #
+            # . . . #
+            # . . . #
+            # . . . #
+            # # # # #
+            `)
+    } else if (tool == 1) {
+        basic.showLeds(`
+            . . . . .
+            . # # # .
+            . # # # .
+            . # # # .
+            . . . . .
+            `)
+    } else {
+        basic.showLeds(`
+            # # . . #
+            # # . # .
+            . . # . .
+            # # . # .
+            # # . . #
+            `)
+    }
+})
+
+```
+
+## Step 9 @fullscreen
+
+Click on the **SHAKE** button in the simulator and check each image is showing up.
+
+![Shaking a @boardname@ simulator](/static/mb/projects/rock-paper-scissors/rpssim3.gif)
+
+## Step 10 @fullscreen
+
+If you have a @boardname@, click on ``|Download|`` and follow the instruction to get the code
+onto your @boardname@. Your game is ready! Gather your friends and play Rock Paper Scissors!
+
+![A @boardname@ in a hand](/static/mb/projects/rock-paper-scissors/hand.jpg)

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

@@ -1,161 +0,0 @@
-# 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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.randomRange(0, 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!

pxtarget.json

@@ -268,6 +268,7 @@
         "extendEditor": true,
         "extendFieldEditors": true,
         "enableTrace": true,
+        "ignoreDocsErrors": true,
         "experiments": [
             "greenScreen",
             "print",