pxt-arcade 1.7.3 → 1.7.7

package/docs/skillmap/story/story4.md

@@ -490,7 +490,7 @@ controller.right.onEvent(ControllerButtonEvent.Pressed, function () {
 
 ```
 
-## Introduction @showdialog
+## {Introduction @showdialog}
 
 Short stories are fun to read and fun to write!
 
@@ -500,7 +500,7 @@ share anywhere we like.
 ![Here's the story](/static/skillmap/story/story-activity-4.gif "How mystical!" )
 
 
-## Step 2
+## {Step 2}
 
 The base code for a two-line story is already in the workspace.
 Let's build on it to create a new short story worth sharing.
@@ -516,16 +516,16 @@ Example 3: An alien in the grocery store
 ```
 
 
-## Step 3
+## {Step 3}
 
 **Now add your setting and main character to the story.**
 
 ---
 
-► Click on the image box in the ``||scene:set background image to []||``
+- :mouse pointer:  Click on the image box in the ``||scene:set background image to []||``
 block and draw your scene.
 
-► Click on the image box in the
+- :mouse pointer:  Click on the image box in the
 ``||variables:set [mySprite] to sprite [ ] of kind [Player]||``
 block and design your main character.
 
@@ -781,7 +781,7 @@ mySprite = sprites.create(img`
 ```
 
 
-## Step 4
+## {Step 4}
 
 **📚 Explain your set-up 📚**
 
@@ -790,11 +790,11 @@ what are they avoiding?
 
 ---
 
-► Look for the first ``||game: show long text [" "] [bottom]||`` block inside
+- :mouse pointer:  Look for the first ``||game: show long text [" "] [bottom]||`` block inside
 the **on A button pressed** container
 and click in the text area.
 
-► Use this space to add your first sentence or two.
+- :mouse pointer:  Use this space to add your first sentence or two.
 
 ```block
 let mySprite2: Sprite = null
@@ -836,7 +836,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 ```
 
 
-## Step 5
+## {Step 5}
 
 **🎭 Create some drama 🎭**
 
@@ -844,10 +844,10 @@ What happens now? Something should throw your characters off course or surprise
 
 ---
 
-► Look for the second ``||game: show long text [" "] [bottom]||`` block
+- :mouse pointer:  Look for the second ``||game: show long text [" "] [bottom]||`` block
 and click in the text area.
 
-► Use this space to add your drama.
+- :mouse pointer:  Use this space to add your drama.
 
 ```block
 let mySprite2: Sprite = null
@@ -889,7 +889,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 
 
 
-## Step 6
+## {Step 6}
 
 **📕 Show the story 📕**
 
@@ -898,11 +898,11 @@ Let's update the scene and the characters.
 
 ---
 
-► Add some code into the ``||controller:on [A] button [pressed]||`` container after the second **show long text** block.
+- :mouse pointer:  Add some code into the ``||controller:on [A] button [pressed]||`` container after the second **show long text** block.
 
-► Consider updating **mySprite** with a ``||sprites: set [mySprite] image to [ ]||`` block, adding a second sprite (**mySprite2**), or swapping out the background.
+- :mouse pointer:  Consider updating **mySprite** with a ``||sprites: set [mySprite] image to [ ]||`` block, adding a second sprite (**mySprite2**), or swapping out the background.
 
-► You may also want to change character positions using a couple of
+- :mouse pointer:  You may also want to change character positions using a couple of
 ``||sprites:set [mySprite] position to x [0] y [0]||`` blocks.
 
 
@@ -963,7 +963,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 
 ```
 
-## Step 7
+## {Step 7}
 
 **😲 The reaction 😲**
 
@@ -972,7 +972,7 @@ How does the main character react?
 
 ---
 
-► Add another ``||game:show long text [" "] [bottom]||`` block to the bottom
+- :mouse pointer:  Add another ``||game:show long text [" "] [bottom]||`` block to the bottom
 of the **on A button pressed** container and add another line
 describing the next thing that happens.
 
@@ -1036,7 +1036,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 ```
 
 
-## Step 8
+## {Step 8}
 
 **🌳 Change of scene 🌳**
 
@@ -1045,7 +1045,7 @@ on someone's face by drawing a new image?  Did the characters move to a new loca
 
 ---
 
-► Change the background, your sprites, and their positions again to
+- :mouse pointer:  Change the background, your sprites, and their positions again to
 illustrate the changes happening in the story.
 
 
@@ -1263,7 +1263,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 })
 ```
 
-## Step 9
+## {Step 9}
 
 **🎬 The conclusion 🎬**
 
@@ -1272,9 +1272,9 @@ one last time if it helps illustrate your ending.
 
 ---
 
-► Add another **show long text** block to finish out your story.
+- :mouse pointer:  Add another **show long text** block to finish out your story.
 
-► Consider changing the background, **mySprite** (or any other sprite
+- :mouse pointer:  Consider changing the background, **mySprite** (or any other sprite
 you added to the story), and their positions to make the ending as satisfying
 as possible.
 
@@ -1758,7 +1758,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 
 ```
 
-## finish
+## {finish}
 
 **And that's it!**
 

package/docs/skillmap/zoo/zoo1.md

@@ -11,19 +11,21 @@ No worries,
 we'll show you the zookeeper ropes. First things first,
 click that green **OK** button to see the **Keeper's Hut**.
 
-## Step 1
 
-**🏠 Home sweet home 🏠**.
+## 2. Make a Sprite
+
+**🏠 Home sweet home 🏠**   
 Let's get you set up in your new place!
 
 ---
 
-▶ From the ``||sprites:Sprites||`` category, drag the ``||variables:set [mySprite] to sprite [ ] of kind [Player]||``
+- :paper plane:  From the ``||sprites:Sprites||`` category, drag the  
+``||variables:set [mySprite] to sprite [ ] of kind [Player]||``   
 block into the ``||loops:on start||`` container.
 
-▶ Click the grey box to open the **image editor** and draw yourself in your best zookeeper outfit!
+- :paint brush:  Click the grey box to open the **image editor** and draw yourself in your best zookeeper outfit!
 
-▶ Click **> Next** when you're ready to see the next step.
+- :mouse pointer:  Click **Next** when you're ready to see the next step.
 
 ```blocks
 let mySprite = sprites.create(img`
@@ -46,21 +48,19 @@ let mySprite = sprites.create(img`
     `, SpriteKind.Player)
 ```
 
-## Step 2
+## 3. Move Around
 
-**🕰 Time to get moving 🕰**
+**🕰 Time to get move 🕰**  
 
 ---
 
-▶ From the ``||controller:Controller||`` category, drag
-``||controller:move [mySprite] with buttons ⊕||``
+- :game:  From the ``||controller:Controller||`` category, drag  
+``||controller:move [mySprite] with buttons ⊕||``  
 into the bottom of the ``||loops:on start||`` container.
 
 ---
 
 This will allow you to move your sprite around the screen.
-Try it on the game screen using the arrow keys on your keyboard
-or by clicking the joystick.
 
 
 ```blocks
@@ -86,14 +86,27 @@ let mySprite = sprites.create(img`
 controller.moveSprite(mySprite)
 ```
 
-## Step 3
+## 4. Try It
+
+**Click the Game Window Tab (Above)**  
+![Click the Game Window tab to see your scene. ](/static/skillmap/assets/game-win-tab.png "Don't forget to look at your game!")
+
+---
+
+Try moving around the game screen!  Your zookeeper will move with the joypad or the arrow keys on your keyboard.
 
-**👀 Take a look around the room 👀**
+
+
+## 5. Look About
+
+**Take a look around the room**  
+👀 
 
 ---
 
-▶ From the ``||scene:Scene||`` category, drag ``||scene:camera follow sprite [mySprite]||`` into the bottom
-of the ``||loops:on start||`` container and use the arrow keys to
+- :tree:  From the ``||scene:Scene||`` category, drag  
+``||scene:camera follow sprite [mySprite]||``  
+into the bottom of the ``||loops:on start||`` container and use the arrow keys to
 check out the hut!
 
 ```blocks
@@ -120,10 +133,12 @@ controller.moveSprite(mySprite)
 scene.cameraFollowSprite(mySprite)
 ```
 
-## Step 4
+## Finale
 
 **🐯 Fantastic! 🐯**
 
+---
+
 You're all ready for your first task.
 
 Click on the **Done** button to head out to the **Zoo**!

package/docs/skillmap/zoo/zoo2.md

@@ -1,23 +1,26 @@
 # First Exhibit: By Land
 
 
-## Step 1
+## 1. Make an Animal
 
-**Your very first exhibit! Exciting, huh?**
+**Your very first exhibit!**  
+Exciting, huh?
 
 Hm... it does look a little empty.  
 Well, what's your favorite animal? Let's invite them over!
 
 ---
 
-▶ From the ``||sprites:Sprites||`` category, drag ``||variables:set [mySprite] to sprite [ ] of kind [Player]||`` 
+- :paper plane:  From the ``||sprites:Sprites||`` category, drag  
+``||variables:set [mySprite] to sprite [ ] of kind [Player]||``   
 into ``||loops:on start||``. 
 
-▶ Click the grey box in the new block and draw your animal using the **image editor**!
+- :paint brush:  Click the grey box in the new block and draw your animal using the **image editor**!
 
-▶ Click **> Next** when you're ready for the next step.
+- :mouse pointer:  Click **> Next** when you're ready for the next step.
 
 ```blocks
+//@highlight
 let mySprite = sprites.create(img`
     . . . . . . 5 5 5 . . . . . . . 
     . . . . 5 5 5 5 5 5 5 . . . . . 
@@ -38,19 +41,20 @@ let mySprite = sprites.create(img`
     `, SpriteKind.Player)
 ```
 
-## Step 2 
-
-**🦓  Take your animal for a walk! 🐆**
+## 2. Move Around 
 
+**Take your animal for a walk!**
+🐆 🦓
 ---
 
-▶From ``||sprites:Sprites||``, grab
-``||sprites:set [mySprite] velocity to vx [50] vy [50]||`` 
-and drag it into the **end** of the ``||loops:on start||`` container. Your animal friend
-should start moving! 
+- :paper plane: From ``||sprites:Sprites||``, grab  
+``||sprites:set [mySprite] velocity to vx [50] vy [50]||``  
+and drag it into the **end** of the ``||loops:on start||`` container. 
 
-▶ Try changing the numbers next to **vx** and **vy**
-and watch the game screen to see what happens.
+Your animal friend should start moving! 
+
+- :mouse pointer:  Try changing the numbers next to **vx** and **vy**
+and watch the game screen to see what happens!
 
 ```blocks
 let mySprite = sprites.create(img`
@@ -75,22 +79,22 @@ let mySprite = sprites.create(img`
 mySprite.setVelocity(50, 50)
 ```
 
-## Step 3
+## 3. Random Mosey
 
 The same old path gets boring after a while.  
 **Let's add some randomness!**
 
 ---
 
-▶ Go to the ``||math:Math||`` category and grab two 
-``||math:pick random [0] to [10]||`` value blocks. 
-Use them to replace the numbers next to the **vx** and **vy**. 
+- :calculator:  Go to the ``||math:Math||`` category and grab two   
+``||math:pick random [0] to [10]||``   
+value blocks. 
 
-▶ Change the numbers inside the **random** blocks to see different kinds of 
-movement each time you reload!
+- :mouse pointer:  Use the two **random** value blocks to replace the numbers next to the **vx** and **vy**. 
 
----
-**Hint:** Don't forget to try negative numbers!
+- :mouse pointer:  Change the numbers inside the **random** blocks to see different kinds of movement each time you reload!
+
+_💡 Don't forget to try negative numbers!_
 
 
 ```blocks
@@ -116,18 +120,18 @@ let mySprite = sprites.create(img`
 mySprite.setVelocity(randint(-50, 50), randint(-50, 50))
 ```
 
-## Step 4 
+## 4. Bounce 
 
-**When the animal hits the edge of the enclosure they stop moving!**
+**When the animal hits the edge of the enclosure it stops moving!**
 
 Let's fix that. 
 
 ---
 
-▶ Open the ``||sprites:Sprites||`` category, then grab ``||sprites:set [mySprite] bounce on wall <ON>||`` 
+- :paper plane:  Open the ``||sprites:Sprites||`` category, then grab  
+``||sprites:set [mySprite] bounce on wall <ON>||``  
 to snap in at the **end** of the program.
 
----
 
 Now your animal can explore the entire exhibit!
 
@@ -156,7 +160,18 @@ mySprite.setVelocity(randint(-50, 50), randint(-50, 50))
 mySprite.setBounceOnWall(true)
 ```
 
-## Step 5 @showdialog
+## 5. Try It
+
+**Click the Game Window Tab (Above)**  
+![Click the Game Window tab to see your scene. ](/static/skillmap/assets/game-win-tab.png "Don't forget to look at your game!")
+
+---
+
+Watch your animal move around!
+
+
+
+## 6. Something's Happening @showdialog
 
 ![A clipboard with a checklist. One item is checked off](/static/skillmap/zoo/zoo-clipboard.png)
 
@@ -165,7 +180,7 @@ mySprite.setBounceOnWall(true)
 The other kids at the zoo are going to 
 love it...WHOA! What's that sound?
 
-## Step 6 @showdialog
+## 7. WooWoo @showdialog
 
 ![A rotating red siren](/static/skillmap/zoo/siren.gif)
 
@@ -174,10 +189,10 @@ love it...WHOA! What's that sound?
 What's going on? Hold on, we're getting a report from the penguin department — the
 penguins did *what*? 
 
-## Step 7
+## Finale
 **🚨 OH NO🚨**
 
-You better get over there!
+You better click **Done** and get over there!
 
 
 

package/docs/skillmap/zoo/zoo2a.md

@@ -1,20 +1,20 @@
 # First Exhibit: By Sea
 
-## Step 1
+## 1. Welcome
 
-**🐙 Welcome to the aquarium! 🐙**
+**🐙 Welcome to the aquarium! 🐙**  
 We're so excited to have you designing this exhibit.
 
 ---
 
-► To start, go to the ``||sprites:Sprites||`` category and drag
+- :paper plane:  To start, go to the ``||sprites:Sprites||`` category and drag
 ``||variables:set [mySprite] to sprite [ ] of kind [Player]||``
 into the ``||loops:on start||`` container.
 
-► Click the grey box and use the **image editor** to
+- :paint brush:  Click the grey box and use the **image editor** to
 draw your favorite sea animal.
 
-▶ Click **> Next** when you're ready for the next step.
+- :mouse pointer:  Click **Next** when you're ready for the next step.
 
 ```blocks
 let mySprite = sprites.create(img`
@@ -37,20 +37,21 @@ let mySprite = sprites.create(img`
     `, SpriteKind.Player)
 ```
 
-## Step 2
+## 2. Move It
 
-**🐡 Just keep swimming! 🐡**
+**Just keep swimming!**
 
 ---
 
-▶ In ``||sprites:Sprites||``, find
-``||sprites:set [mySprite] [x] to [0]||``
+- :paper plane:  In ``||sprites:Sprites||``, find  
+``||sprites:set [mySprite] [x] to [0]||``  
 and drag it into the **end** of the ``||loops:on start||`` container.
 
-▶ Click **x** then choose ** vx (velocity x)** from the dropdown menu.
+- :mouse pointer:  Click **x** then choose ** vx (velocity x)** from the dropdown menu.
 
-▶ Try changing the **0** in the textbox to something else
+- :mouse pointer:  Try changing the **0** in the textbox to something else
 *(either positive or negative)*.
+
 You should see your fishy friend start to move on the game screen.
 
 ```blocks
@@ -76,13 +77,14 @@ let mySprite = sprites.create(img`
 mySprite.vx = 50
 ```
 
-## Step 3
+## 3. Bounce
 
 **Let's teach our fishy friend to do a flip!**
 
 ---
 
-► Open ``||sprites:Sprites||``, then snap ``||sprites:set [mySprite] bounce on wall <ON>||``
+- :paper plane:  Open ``||sprites:Sprites||``, then snap  
+``||sprites:set [mySprite] bounce on wall <ON>||``  
 to the end of the program and check out your exhibit on the game screen!
 
 ```blocks
@@ -111,16 +113,18 @@ mySprite.setBounceOnWall(true)
 ```
 
 
-## Step 4
+## 4. Random
 
 **Let's make the aquarium more exciting with some** **_randomness_**.
 
 ---
 
-► Grab a **new** ``||sprites:set [mySprite] [x] to [0]||`` block
-and drag it to the end of the ``||loops:on start||`` container.
+- :paper plane:  Grab a **new**  
+``||sprites:set [mySprite] [x] to [0]||``  
+block and drag it to the end of the ``||loops:on start||`` container.
+
+- :mouse pointer:  Replace **x** with **y** using the dropdown menu.
 
-► Replace **x** with **y** using the dropdown menu.
 This will change the position of the fish in the up/down direction.
 
 
@@ -149,19 +153,19 @@ mySprite.setBounceOnWall(true)
 mySprite.y = 0
 ```
 
-## Step 5
+## 5. Replace Values
 
-► From the ``||math:Math||`` category, grab a
-``||math:pick random [0] to [10]||`` value block and
+- :calculator:  From the ``||math:Math||`` category, grab a  
+``||math:pick random [0] to [10]||``   
+value block and
 use it to replace the **0** next to ``||sprites:y||``.
 
-► Try replacing **0** and **10** with larger numbers
+- :mouse pointer:  Try replacing **0** and **10** with larger numbers
 to see how they affect your new friend!
 
----
 
-**Hint:** The screen height only goes from **0** to **120** so numbers outside
-that range will hide your aquatic animal.
+_💡 The screen height only goes from **0** to **120** so numbers outside
+that range will hide your aquatic animal._
 
 
 ```blocks
@@ -189,19 +193,29 @@ mySprite.setBounceOnWall(true)
 mySprite.y = randint(10, 110)
 ```
 
+## 6. Try It
+
+**Click the Game Window Tab (Above)**  
+![Click the Game Window tab to see your scene. ](/static/skillmap/assets/game-win-tab.png "Don't forget to look at your game!")
+
+---
+
+Watch your friend swim!
+
+
+
+## 7. Add More
 
-## Step 6
-**This is awesome...**but it's looking a little lonely in that aquarium.
-Let's give your sea critter a few friends!
+**This is awesome...**but it's looking a little lonely in that aquarium. Let's give your sea critter a few friends!
 
 ---
 
-► In ``||loops:Loops||``, find the
-``||loops:repeat [4] times||`` loop container and snap it into the **top** of the
-**on start** container.
+- :redo:  In ``||loops:Loops||``, find the  
+``||loops:repeat [4] times||``  
+loop container and snap it into the **top** of the  
+``||loops:on start||`` container.
 
-► Grab the first block of code beneath the new loop and use it to drag the whole
-chunk of code up into the empty **repeat** container.
+- :mouse pointer:  Grab the first block of code beneath the new loop and use it to drag the whole chunk of code up into the empty **repeat** container.
 
 ```blocks
 //@highlight
@@ -230,7 +244,7 @@ for (let index = 0; index < 4; index++) {
 }
 ```
 
-## Step 7 @showdialog
+## 8. What's Up? @showdialog
 
 **🌟 Great work 🌟**
 
@@ -240,7 +254,7 @@ Now it's feeding time, so let's
 get over to — **OH NO! What's this?**
 
 
-## Step 8 @showdialog
+## 9. WooWoo @showdialog
 
 ![A rotating red siren](/static/skillmap/zoo/siren.gif)
 
@@ -249,8 +263,9 @@ get over to — **OH NO! What's this?**
 What's going on? Hold on, we're getting a report from the penguin department — the
 penguins did *what*?
 
-## Step 9
-**🚨 You better click "Done" and get over there!🚨**
+## Finale
+**You better click "Done" and get over there!**  
+🚨 🚨 
 
 
 

package/docs/skillmap/zoo/zoo3.md

@@ -2,25 +2,26 @@
 # Penguins!
 
 
-## Step 1 @showdialog
+## 1. Help! @showdialog
 
 ![A dirt path with a penguin looking up at a wooden sign. Several penguins are hiding in the bushes.](static/skillmap/zoo/zoo-penguins.png)
 
-**Thank goodness, you're here!** Penguins are *everywhere*!
+**Thank goodness, you're here!**   
+Penguins are *everywhere*!
 
 They're running around outside of their enclosure. You have to help!
 They're eating all the ice cream and sliding down the street!
 
-## Step 2
+## 2. Troubleshoot
 
 Look through the code and figure out how to put the penguins back into their
 icy paradise.
 
-► Can you figure out how to move the penguin spawn point?
+- :binoculars:  Can you figure out how to move the penguin spawn point?
 
 ---
 
-When you've helped the penguins back into the exhibit click **Done**
+Once you've helped the penguins back into the exhibit click **Done**
 to continue to other parts of the zoo.
 
 
@@ -29,8 +30,8 @@ let penguin: Sprite = null
   penguin.x = 10
 ```
 
-Look at this block in particular. What is it doing? Where does
-**x=10** put the penguins on the screen?
+☝ Look at this block. What is it doing?   
+Where does **x=10** put the penguins on the screen?