Small zookeeper changes (#3450)

docs/skillmap/zoo.md

@@ -38,8 +38,9 @@
 * type: tutorial
 * description: It's aquarium time! Let's go to the ocean exhibits and design some sea creatures.
 * url: /skillmap/zoo/zoo2a
-* imageurl: /static/skillmap/zoo/activity2-2.png
+* imageurl: /static/skillmap/zoo/zoo2a.gif
 * tags: easy, movement, random
+* next: zoo-activity3
 
 ### zoo-activity3
 * allowcodecarryover: false
@@ -57,7 +58,7 @@
 * type: tutorial
 * description: It's feeding time! Grab your bucket of bamboo and head over to the panda enclosure.
 * url: /skillmap/zoo/zoo4
-* imageurl: /static/skillmap/zoo/activity4.png
+* imageurl: /static/skillmap/zoo/zoo4.gif
 * tags: easy, overlaps, events
 * next: zoo-activity5
 
@@ -67,7 +68,7 @@
 * type: tutorial
 * description: Quail! Everywhere! Use code to catch these speedy birds!
 * url: /skillmap/zoo/zoo5
-* imageurl: /static/skillmap/zoo/activity5.png
+* imageurl: /static/skillmap/zoo/zoo5.gif
 * tags: intermediate, overlaps, destroy
 * next: zoo-complete
 

docs/skillmap/zoo/zoo1.md

@@ -5,7 +5,9 @@
 
 ![A banner saying "ZOO" with a giraffe looking up at it](static/skillmap/zoo/zoo-welcome.png)
 
-Hello there rookie! First day on the job, huh? No worries, 
+Hello there rookie! First day on the job, huh? 
+
+No worries, 
 we'll show you the zookeeper ropes. First things first, 
 click that green **OK** button to see the **Keeper's Hut**.
 
@@ -21,6 +23,8 @@ block into the ``||loops:on start||`` container.
 
 ▶ 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.
+
 ```blocks
 let mySprite = sprites.create(img`
     . f f f . f f f f . f f f . 
@@ -78,6 +82,7 @@ let mySprite = sprites.create(img`
     . . . . f f f f f f . . . . 
     . . . . f f . . f f . . . . 
     `, SpriteKind.Player)
+    //@highlight
 controller.moveSprite(mySprite)
 ```
 
@@ -111,6 +116,7 @@ let mySprite = sprites.create(img`
     . . . . f f . . f f . . . . 
     `, SpriteKind.Player)
 controller.moveSprite(mySprite)
+//@highlight
 scene.cameraFollowSprite(mySprite)
 ```
 
@@ -120,7 +126,9 @@ scene.cameraFollowSprite(mySprite)
 
 You're all ready for your first task. 
 
-Click on the **Finish** button to head out to the **Zoo**!
+Click on the **Finish** button to head out to the **Zoo**!  
+
+
 
 
 ```customts

docs/skillmap/zoo/zoo2.md

@@ -15,6 +15,8 @@ into ``||loops:on start||``.
 
 ▶ 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.
+
 ```blocks
 let mySprite = sprites.create(img`
     . . . . . . 5 5 5 . . . . . . . 
@@ -69,6 +71,7 @@ let mySprite = sprites.create(img`
     . . . . . 4 . . . . 4 4 4 . 4 . 
     . . . . 4 4 . . . . 4 4 . . . 4 
     `, SpriteKind.Player)
+    //@highlight
 mySprite.setVelocity(50, 50)
 ```
 
@@ -87,7 +90,7 @@ Use them to replace the numbers next to the **vx** and **vy**.
 movement each time you reload!
 
 ---
-**Hint:** Don't forget to try random numbers!
+**Hint:** Don't forget to try negative numbers!
 
 
 ```blocks
@@ -109,6 +112,7 @@ let mySprite = sprites.create(img`
     . . . . . 4 . . . . 4 4 4 . 4 . 
     . . . . 4 4 . . . . 4 4 . . . 4 
     `, SpriteKind.Player)
+    //@highlight
 mySprite.setVelocity(randint(-50, 50), randint(-50, 50))
 ```
 
@@ -148,6 +152,7 @@ let mySprite = sprites.create(img`
     . . . . 4 4 . . . . 4 4 . . . 4 
     `, SpriteKind.Player)
 mySprite.setVelocity(randint(-50, 50), randint(-50, 50))
+//@highlight
 mySprite.setBounceOnWall(true)
 ```
 
@@ -170,7 +175,7 @@ What's going on? Hold on, we're getting a report from the penguin department —
 penguins did *what*? 
 
 ## Step 7
-**🚨 OH NO!🚨**
+**🚨 OH NO🚨**
 
 You better get over there!
 

docs/skillmap/zoo/zoo2a.md

@@ -14,6 +14,8 @@ into the ``||loops:on start||`` container.
 ► 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.
+
 ```blocks
 let mySprite = sprites.create(img`
     . . . . . . . . . . . . . . . . 
@@ -70,6 +72,7 @@ let mySprite = sprites.create(img`
     . . . . . . . . . . . . . . . . 
     . . . . . . . . . . . . . . . . 
     `, SpriteKind.Player)
+    //@highlight
 mySprite.vx = 50
 ```
 
@@ -103,6 +106,7 @@ let mySprite = sprites.create(img`
     . . . . . . . . . . . . . . . . 
     `, SpriteKind.Player)
 mySprite.vx = 50
+//@highlight
 mySprite.setBounceOnWall(true)
 ```
 
@@ -117,7 +121,7 @@ mySprite.setBounceOnWall(true)
 and drag it to the end of the ``||loops:on start||`` container. 
 
 ► Replace **x** with **y** using the dropdown menu.  
-This will change the **vertical position** of the fish on the screen.
+This will change the position of the fish in the up/down direction.
 
 
 ```blocks
@@ -141,6 +145,7 @@ let mySprite = sprites.create(img`
     `, SpriteKind.Player)    
 mySprite.vx = 50
 mySprite.setBounceOnWall(true)
+//@highlight
 mySprite.y = 0
 ```
 
@@ -151,7 +156,12 @@ mySprite.y = 0
 use it to replace the **0** next to ``||sprites:y||``. 
 
 ► Try replacing **0** and **10** with larger numbers
-to see how they affect the fish!
+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.
 
 
 ```blocks
@@ -175,6 +185,7 @@ let mySprite = sprites.create(img`
     `, SpriteKind.Player)    
 mySprite.vx = 50
 mySprite.setBounceOnWall(true)
+//@highlight
 mySprite.y = randint(10, 110)
 ```
 
@@ -193,6 +204,7 @@ Let's give your sea critter a few friends!
 chunk of code up into the empty **repeat** container. 
 
 ```blocks
+//@highlight
 for (let index = 0; index < 4; index++) {
     let mySprite = sprites.create(img`
         . . . . . . . . . . . . . . . . 

docs/skillmap/zoo/zoo3.md

@@ -1,5 +1,3 @@
-### @flyoutOnly true
-
 
 # Penguins!
 

docs/skillmap/zoo/zoo4.md

@@ -94,6 +94,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
         . . . . 6 7 6 . 7 7 6 6 . . . . 
         . . . . 6 6 6 . . 7 6 . . . . . 
         `, SpriteKind.Food)
+        //@highlight
     mySprite.setPosition(randint(10, 150), randint(10, 110))
 })
 ```
@@ -139,6 +140,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
         . . . . 6 6 6 . . 7 6 . . . . . 
         `, SpriteKind.Food)
     tiles.placeOnRandomTile(mySprite, sprites.castle.tilePath5)
+    //@highlight
     panda.follow(mySprite)
 })
 ```
@@ -174,13 +176,15 @@ and put it in the **on overlaps** container.
 Grab it and drag it down to replace **mySprite** in the **destroy** block.
 
 ► Press the plus icon on the block to add an effect that will play when the 
-panda starts munching. Both **spray** and **disintegrate** work well here!
+panda starts munching. Both **spray** and **disintegrate** work well here!  
+
 
 
 ```blocks
 
 }
 sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
+    //@highlight
     otherSprite.destroy(effects.spray, 500)
 })
 ```
@@ -192,7 +196,8 @@ sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSpr
 That panda's getting a full meal!
 
 Give your game a try in the simulator and when you're done, 
-click **Finish** to continue your zoo journey.
+click **Finish** to continue your zoo journey.  
+
 
 
 

docs/skillmap/zoo/zoo5.md

@@ -38,6 +38,7 @@ change it to ``||sprites:Quail||``.
 namespace SpriteKind {
     export const Quail = SpriteKind.create()
 }
+//@highlight
 sprites.onOverlap(SpriteKind.Player, SpriteKind.Quail, function (sprite, otherSprite) {
 })
 ```
@@ -62,6 +63,7 @@ namespace SpriteKind {
 }
 let mySprite: Sprite = null;
 sprites.onOverlap(SpriteKind.Player, SpriteKind.Quail, function (sprite, otherSprite) {
+    //@highlight
     otherSprite.follow(mySprite)
 })
 ```
@@ -113,6 +115,7 @@ namespace SpriteKind {
     export const Quail = SpriteKind.create()
 }
 scene.onOverlapTile(SpriteKind.Quail, assets.tile`myTile`, function (sprite, location) {
+    //@highlight
     sprite.destroy()
 })
 ```
@@ -158,7 +161,7 @@ scene.onOverlapTile(SpriteKind.Egg, assets.tile`myTile`, function (sprite, locat
 Can you clear all of the eggs before they hatch into more quail?
 
 Once you're done playing, click **Finish** to go back to the map where you can share
-this game with family and friends!
+this game with family and friends!  
 
 
 ```template