First batch of skillmap line break adds

docs/projects.md

@@ -123,4 +123,3 @@
 [Hardware](/hardware),
 [How to Make a Game Videos](/how-to-make-a-game),
 [John Park's Workshop](/john-parks-workshop)
-

docs/skillmap/clicker-themed/clickert1.md

@@ -9,17 +9,17 @@ Let's make a clicker game!
 
 
 ## {Step 2}
-**This game will test your speed as you click as quickly as possible to earn points.**  
-⭐ ⭐ ⭐ 
 
+**This game will test your speed as you click as quickly as possible to earn points.**<br/>
+⭐ ⭐ ⭐
 
 Let's prep the stage by adding a background.
 
 ---
 
-- :tree:  Open the ``||scene:Scene||`` category and drag   
-``||scene: set background image to [ ]||``   
-into the ``||loops:on start||``   
+- :tree:  Open the ``||scene:Scene||`` category and drag<br/>
+``||scene: set background image to [ ]||``<br/>
+into the ``||loops:on start||``<br/>
 container that's already in the workspace.
 
 - :mouse pointer:  When you're done, click **Next** to see the next step.
@@ -38,14 +38,14 @@ scene.setBackgroundImage(img`
 
 ## {Step 3}
 
-**Choose your background!**  
+**Choose your background!**<br/>
 🖼 🖼 🖼
 
 ---
 
 
-- :paint brush:  Click the grey box inside  
-``||scene: set background image to [ ]||``  
+- :paint brush:  Click the grey box inside<br/>
+``||scene: set background image to [ ]||``<br/>
 to open the
 image editor and toggle to the **My Assets** tab.
 
@@ -66,7 +66,8 @@ scene.setBackgroundImage(assets.image`TheStage`)
 
 ## {Step 3.5}
 
-**Click the Game Window Tab (Above)**  
+**Click the Game Window Tab (Above)**<br/>
+
 ![Click the Game Window tab to see your scene. ](/static/skillmap/assets/game-win-tab.png "Don't forget to look at your game!")
 
 ---
@@ -76,21 +77,21 @@ Do you see the background you chose?
 
 
 ## {Step 4}
+
 Add a [__*splash screen*__](#splasht "A full-screen message that shows while a program or level is loading") to let the user know to press the
 **Ⓐ** button when they're ready to start playing.
 
 ---
 
 - :circle:  Open the ``||game:Game||`` category and
 drag the  
-``||game: splash [" "]||``  
-block into the bottom of the   
+``||game: splash [" "]||``<br/>
+block into the bottom of the<br/>
 ``||loops:on start||`` container.
 
-- :mouse pointer:  Click inside the empty text area of the  
-``||game: splash [" "]||``  
-block and type a message letting the
-user know they should press (A) to play.
+- :mouse pointer:  Click inside the empty text area of the<br/>
+``||game: splash [" "]||``<br/>
+block and type a message letting the user know they should press (A) to play.
 
 
 ```blocks
@@ -110,14 +111,13 @@ the score when the **Ⓐ** button is clicked.
 
 ---
 
-- :game:  From the ``||controller:Controller||`` category, grab the  
-``||controller: on [A] button [pressed]||``  
-container and drop it into an
-empty spot in the workspace.
+- :game:  From the ``||controller:Controller||`` category, grab the<br/>
+``||controller: on [A] button [pressed]||``<br/>
+container and drop it into an empty spot in the workspace.
 
-- :id card:  From ``||info:Info||``, drag out the  
-``||info:change score by [1]||``  
-block and snap it into  
+- :id card:  From ``||info:Info||``, drag out the<br/>
+``||info:change score by [1]||``<br/>
+block and snap it into<br/>
 ``||controller: on [A] button [pressed]||``.
 
 
@@ -130,7 +130,7 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 
 ## {Step 6}
 
-**Test your game on the game screen**  
+**Test your game on the game screen**<br/>
 🎮 🎮 🎮 
 
 Do you see your score go up each time you press the  **Ⓐ** button?
@@ -143,10 +143,9 @@ the player a clear endpoint.
 
 ---
 
-- :id card:   Open the ``||info:Info||`` category and
-drag the  
-``||info: start countdown [10] (s)||``  
-block into **the bottom** of the  
+- :id card:   Open the ``||info:Info||`` category and drag the<br/>
+``||info: start countdown [10] (s)||``<br/>
+block into **the bottom** of the<br/>
 ``||loops:on start||`` container.
 
 

docs/skillmap/clicker-themed/clickert2.md

@@ -28,9 +28,9 @@ button [__*sprite*__](#sprote "a 2-D image that moves on the screen") to the scr
 
 ---
 
-- :paper plane:  From ``||sprites:Sprites||`` drag out  
-``||variables:set [mySprite] to sprite [ ] of kind [Player]||``  
-and snap it into **the bottom** of the  
+- :paper plane:  From ``||sprites:Sprites||`` drag out<br/>
+``||variables:set [mySprite] to sprite [ ] of kind [Player]||``<br/>
+and snap it into **the bottom** of the<br/>
 ``||loops:on start||`` container.
 
 - :paint brush:  Click the grey square and toggle to **My Assets** 
@@ -51,14 +51,14 @@ mySprite = sprites.create(assets.image`A static`, SpriteKind.Player)
 ## {Step 4}
 
 **Make your button look like it's being pressed
-with each click**  
+with each click**<br/>
 ✨ ✨ ✨
 
 ---
 
-- :paper plane:  From ``||sprites:Sprites||``, grab   
-``||sprites: set [mySprite] image to [ ]||``   
-and snap it into **the bottom** of the  
+- :paper plane:  From ``||sprites:Sprites||``, grab<br/>
+``||sprites: set [mySprite] image to [ ]||``<br/>
+and snap it into **the bottom** of the<br/>
 ``||controller:on [A] button [pressed]||`` container.
 
 - :paint brush:  Click the grey square and toggle to **My Assets** and choose a button in the **down** position.
@@ -83,19 +83,21 @@ Does the button look like it goes down when (A) is pressed?
 
 ## {Step 6}
 
-Right now, the button never goes back up once pressed.  
+Right now, the button never goes back up once pressed.<br/>
 **Let's change that!**
 
 ---
 
-- :game:  Drag another  
-``||controller:on [A] button [pressed]||``  
+- :game:  Drag another<br/>
+``||controller:on [A] button [pressed]||``<br/>
 container into an empty area of the workspace.
 
-- :mouse pointer:  Change ``||controller:[pressed]||`` to ``||controller:[released]||`` using the dropdown menu.
+- :mouse pointer:  Change ``||controller:[pressed]||``<br/>
+to ``||controller:[released]||``<br/>
+using the dropdown menu.
 
-- :paper plane:  Snap a new  
-``||sprites: set [mySprite] image to [ ]||``  
+- :paper plane:  Snap a new<br/>
+``||sprites: set [mySprite] image to [ ]||``<br/>
 block inside, then toggle to **My Assets** and choose the same
 **up** button image that you used for the original sprite.
 
@@ -121,12 +123,12 @@ It also automatically tells you that **you've lost** when time runs out. Let's c
 
 ---
 
-- :id card:  From the ``||info:Info||`` category, grab an  
-``||info:on countdown end||``  
+- :id card:  From the ``||info:Info||`` category, grab an<br/>
+``||info:on countdown end||``<br/>
 container and drop it into an empty area of the workspace.
 
-- :circle:  Now, open the ``||game:Game||`` category and pick  
-``||game: game over <LOSE> ⊕||`` .   
+- :circle:  Now, open the ``||game:Game||`` category and pick<br/>
+``||game: game over <LOSE> ⊕||``.<br/>
 Snap it inside the empty **on countdown end** container.
 
 - :mouse pointer:  Toggle **LOSE** to **WIN**.
@@ -145,7 +147,7 @@ Now add a final celebration with some **game over** effects!
 
 ---
 
-- :mouse pointer:  Click the **+** icon to the right of the  
+- :mouse pointer:  Click the **+** icon to the right of the<br/>
 ``||game: game over <WIN> ⊕||``  block.
 
 - :mouse pointer:  If you want an effect other than confetti, 

docs/skillmap/clicker-themed/clickert3.md

@@ -17,11 +17,11 @@ some flying star [__*projectiles*__](#projected "sprites that moves on their own
 
 ---
 
-- :paper plane:  From ``||sprites:Sprites||``, grab  
-``||variables:set [projectile] to projectile [ ] from [mySprite] with vx [50] vy [50]||``  
-and drop it into **the end** of the  
-``||controller:on [A] button [pressed]||`` container
-already in the workspace.
+- :paper plane:  From ``||sprites:Sprites||``, grab<br/>
+``||variables:set [projectile] to projectile [ ] from [mySprite] with vx [50] vy [50]||``<br/>
+and drop it into **the end** of the<br/>
+``||controller:on [A] button [pressed]||``<br/>
+container already in the workspace.
 
 - :mouse pointer:  Click **Next** to move on to the next instruction.
 
@@ -70,12 +70,12 @@ Does a star come out of your button each time you press the (A) button?
 
 ---
 
-- :calculator:  From the ``||math:Math||`` category, drag out **TWO**  
-``||math: pick random [0] to [10]||``  
+- :calculator:  From the ``||math:Math||`` category, drag out **TWO**<br/>
+``||math: pick random [0] to [10]||``<br/>
 blocks.
 
-- :mouse pointer:  Add the first to the [__*vx*__](#whatVX "horizontal velocity") argument of the  
-``||variables:set [projectile] to projectile [⭐] from [mySprite] with vx [50] vy [50]||``   
+- :mouse pointer:  Add the first to the [__*vx*__](#whatVX "horizontal velocity") argument of the<br/>
+``||variables:set [projectile] to projectile [⭐] from [mySprite] with vx [50] vy [50]||``<br/>
 block.
 
 - :mouse pointer:  Add the second to the [__*vy*__](#whatVY "vertical velocity") argument.
@@ -94,14 +94,14 @@ controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
 ## {Step 6}
 
 
-- :mouse pointer:  Change the range of the first  
-``||math: pick random [0] to [10]||``  
-block (next to **vx**) to pick between
+- :mouse pointer:  Change the range of the first<br/>
+``||math: pick random [0] to [10]||``<br/>
+block (next to **vx**) to pick between<br/>
 **-100** and **100**.  This will scatter stars randomly from side to side.
 
-- :mouse pointer:  Change the range of the second  
-``||math: pick random [0] to [10]||``  
-block (next to **vy**) to pick between
+- :mouse pointer:  Change the range of the second<br/>
+``||math: pick random [0] to [10]||``<br/>
+block (next to **vy**) to pick between<br/>
 **-50** and **-100**.  This will make sure the stars only move upward.
 
 

docs/skillmap/clicker-themed/clickert4.md

@@ -47,11 +47,11 @@ upgrade the power.
 
 ---
 
-- :mouse pointer:  From ``||logic:Logic||``, choose the top
-``||logic:if <true> then||`` container and drag it into the top of your
+- :mouse pointer:  From ``||logic:Logic||``, choose the top<br/>
+``||logic:if <true> then||`` container and drag it into the top of your<br/>
 **on B button pressed** container already in the workspace.
 
-- :mouse pointer:  To compare values, open the ``||logic: Logic||``
+- :mouse pointer:  To compare values, open the ``||logic: Logic||``<br/>
 category and grab a ``||logic: [0] [<] [0]||`` to replace **`<true>`**.
 
 
@@ -163,7 +163,7 @@ controller.B.onEvent(ControllerButtonEvent.Pressed, function () {
 
 **⚡️ Amazing ⚡️**
 
-Now you have a clicker game with a simple shop.  Give it a try on the game screen.
+Now you have a clicker game with a simple shop. Give it a try on the game screen.
 
 Click **Done** to return to the main page where you can share your game
 with family and friends!

docs/skillmap/clicker/clicker1.md

@@ -57,8 +57,8 @@ Let's start building the scoreboard by adding a background color.
 
 ---
 
-► Choose a background color by opening the ``||scene:Scene||`` category and dragging
-``||scene: set background color to [ ]||`` into the ``||loops:on start||``
+► Choose a background color by opening the ``||scene:Scene||`` category and dragging<br/>
+``||scene: set background color to [ ]||`` into the ``||loops:on start||``<br/>
 container that's already in the workspace.
 
 ► When you're done, click **> Next** to see the next step.
@@ -97,7 +97,7 @@ Add a [__*splash screen*__](#splasht "A full-screen message that shows while a p
 
 ---
 
-► Open the ``||game:Game||`` category and
+► Open the ``||game:Game||`` category and<br/>
 drag the ``||game: splash [" "]||`` block into the bottom of the **on start**
 container.
 
@@ -121,11 +121,11 @@ the score when the **Ⓐ** button is clicked.
 
 ---
 
-► From the ``||controller:Controller||`` category, grab the
-``||controller: on [A] button [pressed]||`` container and drop it into an
+► From the ``||controller:Controller||`` category, grab the<br/>
+``||controller: on [A] button [pressed]||`` container and drop it into an<br/>
 empty spot in the workarea.
 
-► From ``||info:Info||``, drag out the ``||info:change score by [1]||`` block
+► From ``||info:Info||``, drag out the ``||info:change score by [1]||`` block<br/>
 and snap it into the new container.
 
 
@@ -144,8 +144,8 @@ the player a clear endpoint.
 
 ---
 
-►  Open the ``||info:Info||`` category and
-drag the ``||info: start countdown [10] (s)||`` block into the bottom of the
+►  Open the ``||info:Info||`` category and<br/>
+drag the ``||info: start countdown [10] (s)||`` block into the bottom of the<br/>
 ``||loops:on start||`` container.
 
 
@@ -160,7 +160,7 @@ info.startCountdown(10)
 
 **🎉 Congrats 🎉**
 
-You have your very own clicker game!  Play it on the game screen and see how many clicks you can get.
+You have your very own clicker game! Play it on the game screen and see how many clicks you can get.
 
 Click **Done** to return to the main page where you can share your game
 with family and friends to compare scores!