pxt-arcade 1.7.3 → 1.7.7

package/docs/skillmap/space/space5.md

@@ -9,14 +9,14 @@ This tutorial will show you how to level-up after earning 10 points.
 ![Level Up!](/static/skillmap/space/spacet5.gif "Your patience shall be rewarded")
 
 
-## Step 2
+## 2. Look Around
 **This game is amazing!**
 
-Take a minute to look at each separate chunk of code.  Can you remember what they all do?
+Take a minute to look at each separate chunk of code.  Can you remember what everything does?
 
 ---
 
-► Find the value that sets the speed of your enemy ship. How do you think you can make it go faster or slower?
+- :binoculars: Find the value that sets the velocity of your enemy ship. How do you think you would make it go faster or slower?
 
 
 
@@ -25,32 +25,34 @@ Take a minute to look at each separate chunk of code.  Can you remember what the
     myEnemy = sprites.createProjectileFromSide(assets.image`Spider`, 0, 50)
 ```
 
-## Step 3
+## 3. Speed the Ships
 
 **Leveling-up should make enemy ships faster.**
 
-If we want to use a value for their speed that changes
+If we want to use a value for enemy speed that changes
 during game-play, we're going to need a [__*variable*__](#varied "a label that holds the place for something that can change").
 
 ---
 
-► Under the ``||variables:Variables||`` category, click inside the orange rectangle where it says
+- :align justify: Under the ``||variables:Variables||`` category, click inside the orange rectangle where it says  
 **Make a Variable...**.
 
-► Name your new variable **enemySpeed** and click **Ok**.
+- :mouse pointer: Name your new variable **enemySpeed** and click **Ok**.
 
 
 
-## Step 4
+## 4. Variable Value
 
 **Before we can use the new variable, we need to give it a value.**
 
 ---
 
-► From the ``||variables:Variables||`` category, grab ``||variables:set [enemySpeed] to [0]||``
-and snap it into **the bottom** of the ``||loops:on start||`` container.
+- :align justify: Grab  
+``||variables:set [enemySpeed] to [0]||``  
+and snap it into **the bottom** of the  
+``||loops:on start||`` container.
 
-► Change the value from **0** to **50**.
+- :mouse pointer: Change the value from **0** to **50**.
 
 
 ```blocks
@@ -68,7 +70,7 @@ let enemySpeed = 50
 ```
 
 
-## Step 5
+## 5. Add Velocity
 
 **🚀 Let's Fly 🚀**
 
@@ -77,10 +79,12 @@ to control the enemy ship's **vy** (vertical velocity).
 
 ---
 
-► Go back to the ``||game:on game update every [2000]ms||`` container and find the block that sets-up the
+- :mouse pointer: Go back to the  
+``||game:on game update every [2000]ms||``  
+container that's already in your workspace, and find the block that sets-up the
 ``||variables:myEnemy||`` projectile.
 
-► From ``||variables:Variables||`` grab ``||variables:enemySpeed||`` and snap it in to
+- :align justify: Grab ``||variables:enemySpeed||`` and snap it in to
 replace the **vy** value of **50**.
 
 
@@ -94,15 +98,17 @@ game.onUpdateInterval(2000, function () {
 })
 ```
 
-## Step 6
+## 6. Try it Out
 
 **🕹️ Play your game and make sure it works exactly the same as before 🕹️**
 
+---
+
 You shouldn't notice any difference in the speed of the ship.
 
 
 
-## Step 7
+## 7. Trigger the Change
 
 **👀 Watch the score 👀**
 
@@ -110,9 +116,13 @@ We need code that checks to see **if** the score is **10** every time the player
 
 ---
 
-► Find the ``||sprites:on [sprite] of kind [Projectile] overlaps [otherSprite] of kind [Enemy]||`` container already in your workspace.
+- :binoculars: Find the  
+``||sprites:on [sprite] of kind [Projectile] overlaps [otherSprite] of kind [Enemy]||``   
+container already in your workspace.
 
-► From the ``||logic:Logic||`` category, drag a ``||logic:if <true> then||`` container and snap it into **the bottom** of the
+- :random: Drag out a  
+``||logic:if <true> then||``  
+container and snap it into **the bottom** of the
 **on Projectile overlaps Enemy** container.
 
 
@@ -128,13 +138,15 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
 ```
 
 
-## Step 8
+## 8. Set the Points
 
-► From ``||logic:Logic||``, grab ``||logic:<[0] [=] [0]>||`` and snap it in to the **if statement** to replace **true**.
+- :random: Grab  
+``||logic:<[0] [=] [0]>||``  
+and snap it in to the **if statement** to replace **`<true>`**.
 
-► From ``||info:Info||``, grab ``||info:score||`` and snap it in to replace the **0** to the left of the **=**.
+- :id card: Grab ``||info:score||`` and snap it in to replace the **0** to the left of the **=**.
 
-► Change the **0** on the right of the **=** to **10**.
+- :mouse pointer: Change the **0** on the right of the **=** to **10**.
 
 ```blocks
 sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, otherSprite) {
@@ -149,16 +161,19 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
 ```
 
 
-## Step 8
+## 9. Level-Up
 
 The first thing we should do when the score gets to **10** is give a level-up bonus!
 
 ---
 
-► From ``||info:Info||``, grab ``||info:change score by [1]||`` and snap it inside the empty
-``||logic:if <[score] [=] [10]> then||`` logic container.
+- :id card: Grab  
+``||info:change score by [1]||``  
+and snap it inside the empty  
+``||logic:if <[score] [=] [10]> then||``  
+logic container.
 
-► Change the amount added to the score from **1** to **5**.
+- :mouse pointer: Change the amount added to the score from **1** to **5**.
 
 
 ```blocks
@@ -173,7 +188,7 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
 ```
 
 
-## Step 9
+## 10. Bonus
 
 **📢 Say it LOUD 📢**
 
@@ -181,12 +196,15 @@ Let the player know they've earned a bonus!
 
 ---
 
-► From ``||sprites:Sprites||``, drag ``||sprites:[mySprite] say [":)"]||`` into **the bottom**
-of the ``||logic:if <[score] [=] [10]> then||`` container.
+- :paper plane: Drag  
+``||sprites:[mySprite] say [":)"] ➕||``  
+into **the bottom** of the  
+``||logic:if <[score] [=] [10]> then||``  
+container.
 
-► Change the message to say **"+5 Level-Up Bonus!"**.
+- :mouse pointer: Change the message to say **"+5 Level-Up Bonus!"**.
 
-► Click the **+** to the right of the **say** block and change the length of the display from **500** ms to **2 seconds** (2000 ms).
+- :mouse pointer: Click the ➕ to the right of the **say** block and change the length of the display from **500** ms to **2 seconds** (2000 ms).
 
 
 
@@ -199,12 +217,12 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
     if (info.score() == 10) {
         info.changeScoreBy(5)
         //@highlight
-        mySprite.say("+5 Level-Up Bonus", 2000)
+        mySprite.sayText("+5 Level-Up Bonus", 2000)
     }
 })
 ```
 
-## Step 10
+## 11. Speed It Up!
 
 **Here comes the fun part!**
 
@@ -213,10 +231,13 @@ Time to speed up the enemy ships!
 ---
 
 
-► From ``||variables:Variables||``, grab ``||variables:set [enemySpeed] to [0]||``
-and snap it in to **the bottom** of  the ``||logic:if <[score] [=] [10]> then||`` container.
+- :align justify: Grab  
+``||variables:set [enemySpeed] to [0]||`` 
+and snap it in to **the bottom** of  the  
+``||logic:if <[score] [=] [10]> then||``  
+container.
 
-► Change the value from **0** to **70**.
+- :mouse pointer: Change the value from **0** to **70**.
 
 ```blocks
 let mySprite: Sprite = null
@@ -225,7 +246,7 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
     otherSprite.destroy()
     info.changeScoreBy(1)
     if (info.score() == 10) {
-        mySprite.say("+5 Level-Up Bonus", 2000)
+        mySprite.sayText("+5 Level-Up Bonus", 2000)
         info.changeScoreBy(5)
         //@highlight
         enemySpeed = 70
@@ -233,26 +254,27 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
 })
 ```
 
-## Step 11
+## 12. Play Your Game
 **That's it!  That's all you needed to do.**
 
-Since we already have the ``||variables:enemySpeed||`` variable in place for the projectile's **vy**,
-it will automatically update when we change the speed in another part of the program!
+Since we already have the ``||variables:enemySpeed||`` variable in place for the projectile's **vy**, it will automatically update when we change the speed in another part of the program!
 
 ---
 
-► Play your finished game and see if you can get 10 points to level-up!
+Play your finished game and see if you can get 10 points to level-up!
 
 
 ## Finale
 
 **Congratulations!!**
 
-Click **Done** to return to the main page where you can add this game to your gallery and share with family & friends.
+---
+
+Click **Done** to return to the main skillmap where you can get your completion certificate before completing one last level that teaches you to customize your darts!
 
 
 ```package
-arcade-background-scroll=github:microsoft/arcade-background-scroll/
+arcade-background-scroll=github:microsoft/arcade-background-scroll#926e12eefffd09d453c7cde73f8d6ebd0e666d9d/
 pxt-status-bar=github:jwunderl/pxt-status-bar
 ```
 
@@ -280,6 +302,7 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
 sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
     info.changeLifeBy(-1)
     otherSprite.destroy(effects.disintegrate, 200)
+    scene.cameraShake(4, 500)
 })
 let myEnemy: Sprite = null
 let myFuel: Sprite = null
@@ -290,7 +313,14 @@ scene.setBackgroundImage(assets.image`Galaxy`)
 scroller.scrollBackgroundWithSpeed(0, 10)
 mySprite = sprites.create(assets.image`Rocket`, SpriteKind.Player)
 controller.moveSprite(mySprite)
+
 mySprite.setStayInScreen(true)
+animation.runImageAnimation(
+mySprite,
+assets.animation`Flying Rocket`,
+100,
+true
+)
 
 statusbar = statusbars.create(20, 4, StatusBarKind.Energy)
 statusbar.attachToSprite(mySprite, -25, 0)
@@ -299,11 +329,17 @@ game.onUpdateInterval(5000, function () {
     myFuel.x = randint(5, 155)
     myFuel.setKind(SpriteKind.Gas)
 })
+
 game.onUpdateInterval(2000, function () {
     myEnemy = sprites.createProjectileFromSide(assets.image`Spider`, 0, 50)
     myEnemy.x = randint(5, 155)
     myEnemy.setKind(SpriteKind.Enemy)
-
+    animation.runImageAnimation(
+    myEnemy,
+    assets.animation`Flying Spider`,
+    100,
+    true
+    )
 })
 game.onUpdateInterval(300, function () {
     statusbar.value += -1
@@ -375,7 +411,7 @@ game.onUpdateInterval(300, function () {
 })
 forever(function () {
     if (info.score() == 10) {
-        mySprite.say("+5 Level-Up Bonus", 2000)
+        mySprite.sayText("+5 Level-Up Bonus", 2000)
         info.changeScoreBy(5)
         enemySpeed = 70
     }

package/docs/skillmap/space/space6.md

@@ -9,7 +9,7 @@ This tutorial will show you how to send an array of different darts when you fir
 ![Take a shot!](/static/skillmap/space/spacet6.gif "They'll never know what hit them.")
 
 
-## Step 2
+## 2. Start the Darts
 
 **🎯 Take aim! 🎯**
 
@@ -18,11 +18,13 @@ of darts.
 
 ---
 
-► Expand the ``||statusbars:Advanced||`` category in the toolbox and click
-``||arrays:Arrays||``.
+- :chevron down: Expand the ``||statusbars:Advanced||`` category in the toolbox and click ``||arrays:Arrays||``.
 
-► Drag ``||variables:set [list] to array of [0] [1]||`` into **the top** of the
-``||controller:on [A] button [pressed]||`` container already in the workspace.
+- :list ol: Drag  
+``||variables:set [list] to array of [0] [1]||``  
+into **the top** of the  
+``||controller:on [A] button [pressed]||``   
+container already in the workspace.
 
 
 ```block
@@ -34,16 +36,17 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 })
 ```
 
-## Step 3
+## 3. List of Darts
 
 Right now, we have a **list** of numbers. Let's make it a list of darts.
 
 ---
 
-► Click the name **list** inside ``||variables:set [list] to array of [0] [1]||`` and
-choose "Rename variable..." from the dropdown menu.
+- :mouse pointer: Click the name **list** inside  
+``||variables:set [list] to array of [0] [1]||``   
+and choose "Rename variable..." from the dropdown menu.
 
-► Call your list **darts** and click **Ok**.
+- :mouse pointer: Call your list **darts** and click **Ok**.
 
 ```block
 controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
@@ -54,100 +57,56 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 })
 ```
 
-## Step 4
+## 4. Prepare the Images
 
-► Beneath the ``||statusbars:Advanced||`` category in the toolbox, click
+- :image: Beneath the ``||statusbars:Advanced||`` category in the toolbox, click
 ``||images:Images||``.
 
-► Drag out **3** empty grey image boxes into the workspace (we'll use them in
+- :image: Drag out **3** empty grey image boxes into the workspace (we'll use them in
 the next step).
 
 
 
-## Step 5
+## 5. Dart Images 
 
-► Snap the first two grey image boxes into ``||variables:set [list] to array of [0] [1]||`` to
-replace the numbers **0** and **1**.
+- :mouse pointer: Snap the first two grey image boxes into  
+``||variables:set [list] to array of [0] [1]||``  
+to replace the numbers **0** and **1**.
 
-► Add space for the new image box by clicking the **+** symbol at the right of
+- :mouse pointer: Add space for the new image box by clicking the ➕ symbol at the right of
 the block, then snap the last image box into place.
 
 
 ```blocks
 controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
     let darts = [img`
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
+.
         `, img`
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
+        .
         `, img`
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
-        . . . . . . . . . . . . . . . .
+        .
         `]
     let projectile = sprites.createProjectileFromSprite(assets.image`Dart1`, mySprite, 0, -150)
     projectile.startEffect(effects.ashes)
 })
 ```
 
-## Step 6
+## 6. Choose Wisely
 
 **⤅ Time to choose the darts ⬶**
 
 ---
 
-► Click the first empty grey image box and toggle to **My Assets** to select **Dart1**.
+- :paint brush: Click the first empty grey image box and toggle to **My Assets** to select **Dart1**.
 
-► Click the second empty grey image box and toggle to **My Assets** to select **Dart2**.
+- :paint brush: Click the second empty grey image box and toggle to **My Assets** to select **Dart2**.
 
-► In the final box, draw your own dart!
+- :paint brush: In the final box, draw your own dart!
 
 ---
 
-**Tip:** Keep in mind that the provided darts are both 3px by 4px in size.
-What do you think will happen if you make yours larger or smaller?
+_💡 Keep in mind that the provided darts are both 3px by 4px in size.
+What do you think will happen if you make yours larger or smaller?_
 
 ```blocks
 controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
@@ -162,16 +121,20 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 })
 ```
 
-## Step 7
+## 7. Random Darts
 
 **Tell the computer you want a random dart from the array each time you fire!**
 
 ---
 
-► From ``||arrays:Arrays||``, drag ``||arrays:get random value from [list]||`` in to replace the current
-dart image in the ``||variables:set [projectile] to ...||`` block (just beneath the list you have created.)
+- :align justify: From ``||arrays:Arrays||``, drag  
+``||arrays:get random value from [list]||``  
+in to replace the current
+dart image in the  
+``||variables:set [projectile] to ...||``  
+block (just beneath the list you have created.)
 
-► Click **list** and change it to **darts** using the dropdown menu.
+- :mouse pointer: Click **list** and change it to **darts** using the dropdown menu.
 
 
 ```blocks
@@ -188,7 +151,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 ```
 
 
-## Step 8
+## 8. Play Your Game!
 
 **🎮 Now give your project a try on the game screen 🎮**
 
@@ -201,14 +164,16 @@ If there's anything you don't like, now is a great time to dig in and change it!
 
 **You've done it!!**
 
+---
+
 You've finished your Space Explorer game!
 
 When you're done playing with it, click **Done** to return to the main
-page where you can add this game to your gallery to keep building, then share with family & friends.
+page where you can share with family and friends, then add this game to your gallery to keep building!
 
 
 ```package
-arcade-background-scroll=github:microsoft/arcade-background-scroll/
+arcade-background-scroll=github:microsoft/arcade-background-scroll#926e12eefffd09d453c7cde73f8d6ebd0e666d9d/
 pxt-status-bar=github:jwunderl/pxt-status-bar
 ```
 
@@ -236,6 +201,7 @@ sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, function (sprite, oth
 sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
     info.changeLifeBy(-1)
     otherSprite.destroy(effects.disintegrate, 200)
+    scene.cameraShake(4, 500)
 })
 let myEnemy: Sprite = null
 let myFuel: Sprite = null
@@ -246,7 +212,14 @@ scene.setBackgroundImage(assets.image`Galaxy`)
 scroller.scrollBackgroundWithSpeed(0, 10)
 mySprite = sprites.create(assets.image`Rocket`, SpriteKind.Player)
 controller.moveSprite(mySprite)
+
 mySprite.setStayInScreen(true)
+animation.runImageAnimation(
+mySprite,
+assets.animation`Flying Rocket`,
+100,
+true
+)
 
 statusbar = statusbars.create(20, 4, StatusBarKind.Energy)
 statusbar.attachToSprite(mySprite, -25, 0)
@@ -257,17 +230,22 @@ game.onUpdateInterval(5000, function () {
     myFuel.setKind(SpriteKind.Gas)
 })
 game.onUpdateInterval(2000, function () {
-    myEnemy = sprites.createProjectileFromSide(assets.image`Spider`, 0, enemySpeed)
+    myEnemy = sprites.createProjectileFromSide(assets.image`Spider`, 0, 50)
     myEnemy.x = randint(5, 155)
     myEnemy.setKind(SpriteKind.Enemy)
-
+    animation.runImageAnimation(
+    myEnemy,
+    assets.animation`Flying Spider`,
+    100,
+    true
+    )
 })
 game.onUpdateInterval(300, function () {
     statusbar.value += -1
 })
 forever(function () {
     if (info.score() == 10) {
-        mySprite.say("+5 Level-Up Bonus", 2000)
+        mySprite.sayText("+5 Level-Up Bonus", 2000)
         info.changeScoreBy(5)
         enemySpeed = 70
     }
@@ -339,7 +317,7 @@ game.onUpdateInterval(2000, function () {
 })
 forever(function () {
     if (info.score() == 10) {
-        mySprite.say("+5 Level-Up Bonus", 2000)
+        mySprite.sayText("+5 Level-Up Bonus", 2000)
         info.changeScoreBy(5)
         enemySpeed = 70
     }

package/docs/skillmap/space.md

@@ -1,9 +1,9 @@
-# Space Adventure
+# Create a Space Adventure
 * name: Create a Space Adventure Game
-* description: Learn to make a Galaga-style game by following this short series of tutorials. You will create a rocket that fires projectiles at enemies, design your outerspace view, create amazing animations, and MORE!  What are you waiting for?  Double-click the first level to begin!" 
+* description: Make a Galaga-style game by following this short series of tutorials. You will create a rocket that fires projectiles at enemies, design your outerspace view, create amazing animations, and MORE!  What are you waiting for?  Double-click the first level to begin! 
 * infoUrl: skillmap/educator-info/space-map-info
 * bannerUrl: /static/skillmap/space/spacet6.gif
-* backgroundurl: /static/skillmap/backgrounds/space-comp.gif
+* backgroundurl: /static/skillmap/backgrounds/space-comp.png
 * primarycolor: #2EA9B0
 * secondarycolor: #d6f7fa
 * tertiarycolor: #5d416b
@@ -42,7 +42,7 @@
 * description: Watch out for danger! Add enemies and countdown lives in your game.
 * type: tutorial
 * tags: intermediate, enemies, kinds
-* next: space-activity4, space-activity4a
+* next: space-activity4a
 * url: /skillmap/space/space3
 * imageUrl: /static/skillmap/space/spacet3.gif
 * position: 2 1
@@ -94,7 +94,10 @@
 * kind: completion
 * type: certificate
 * imageUrl: /static/skillmap/certificates/space-cert.png
-* url: /static/skillmap/certificates/design-a-space-explorer.pdf
+* url: /static/skillmap/certificates/space-cert.pdf
 * position: 5 0
+    * map: [Try 80s Rockstar Maze](/skillmap/rockstar)
+    * map: [Try Jungle Monkey Jump](/skillmap/jungle)
+    * editor: [Edit Your Project with a Full Toolbox](/)
 
 

package/docs/skillmap/story/card.md

@@ -249,7 +249,7 @@ let mySprite = sprites.create(img`
 music.playMelody("G B A G C5 B A B ", 120)
 ```
 
-## Intro @unplugged
+## {Intro @unplugged}
 
 Are you ready to make greeting cards for your friends and family?
 
@@ -257,7 +257,7 @@ Follow these quick steps and you'll have one in no time!
 
 ![Greetings](/static/skillmaps/story/card.gif "Happy birthday to you!" )
 
-## Step 1
+## {Step 1}
 
 🎨 This card centers around an artistic background 🎨
 
@@ -391,7 +391,7 @@ scene.setBackgroundImage(img`
 ```
 
 
-## Step 2
+## {Step 2}
 
 💛 Let's add a heartfelt greeting 💛
 
@@ -647,7 +647,7 @@ let mySprite = sprites.create(img`
 
 ```
 
-## Step 3
+## {Step 3}
 
 🎉 Time for a celebration 🎉
 
@@ -905,7 +905,7 @@ let mySprite = sprites.create(img`
 ```
 
 
-## Step 4
+## {Step 4}
 
 Add a personal 🎵 note 🎵 using ``||music:play melody [ ] at tempo [120] (bpm)||``!
 You can create your own song, or choose one from our gallery!
@@ -1161,7 +1161,7 @@ let mySprite = sprites.create(img`
 music.playMelody("G B A G C5 B A B ", 120)
 ```
 
-## Finish
+## {Finish}
 
 Congratulations, you've finished your greeting card!