From 15d12bb2ddf0ac528cfc44822a8b4d84e85a707d Mon Sep 17 00:00:00 2001
From: Joe Haig <joseph.haig@digital.justice.gov.uk>
Date: Fri, 16 Jun 2023 13:47:37 +0100
Subject: [PATCH] Update layout

If colour printing is a problem then the text of the command is now visible.
---
 Scroller/sidescroll.md | 77 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 62 insertions(+), 15 deletions(-)

diff --git a/Scroller/sidescroll.md b/Scroller/sidescroll.md
index 77bbc31..6e00070 100644
--- a/Scroller/sidescroll.md
+++ b/Scroller/sidescroll.md
@@ -4,30 +4,50 @@ In some games, such as Mario, the player's character stays in the middle of the
 
 ## Left-Right scroller starter project
 
-To start, open this starter project and remix:
+Go to the user page https://scratch.mit.edu/users/LPPSteacher1/ and find the 'Left-Right Scroller Start' project. You can find it directly here;
 
 > https://scratch.mit.edu/projects/863782680/editor
 
+Open this project and remix it for yourself.
+
 Notice that this project has one sprite containing the background.
 
 ## Get the background scrolling to the left
 
 The first thing to do is make the background scroll to the the left with this script:
 
-![
+<table>
+  <tr>
+    <td>
+      <img src="./scroll1.svg"\>
+    </td>
+    <td>
+      <pre>
 When flag clicked
 Go to x: [240] y: [0]
 Forever
   Change x by [-5]
-](./scroll1.svg)
+      </pre>
+    </td>
+  </tr>
+</table>
 
 This will get the background scrolling to the left but then it stops when it gets to the edge. To fix this, check its position after x has been changed by adding this inside the 'forever' loop and after the 'change x' block:
 
 
-![
+<table>
+  <tr>
+    <td>
+      <img src="./scroll2.svg"\>
+    </td>
+    <td>
+      <pre>
 If (x position) < [-460] then
   Change x by [925]
-](./scroll2.svg)
+      </pre>
+    </td>
+  </tr>
+</table>
 
 ## Joining it up
 
@@ -35,31 +55,49 @@ At the moment the backgorund is not complete. We need to have two copies of it a
 
 *Change* your script in three ways;
 
-* Use ![When I start as a clone](./when_i_start_as_a_clone.svg) instead of ![When flag clicked](./when_flag_clicked.svg)
-* Remove ![Go to x: [240] y: [0]](./go_to_240_0.svg)
-* Add ![Show](./show.svg) at the start
+* Use ![](./when_i_start_as_a_clone.svg) (`When I start as a clone`) instead of ![](./when_flag_clicked.svg) (`When flag clicked`)
+* Remove ![](./go_to_240_0.svg) (`Go to x: [240] y: [0]`)
+* Add ![](./show.svg) at the start (`Show`)
 
 It should now look like this;
 
-![
+<table>
+  <tr>
+    <td>
+      <img src="./scroll3.svg"\>
+    </td>
+    <td>
+      <pre>
 When I start as a clone
 Show
 Forever
   Change x by [-5]
   If (x position) < [-460] then
     Change x by [925]
-](./scroll3.svg)
+      </pre>
+    </td>
+  </tr>
+</table>
 
 Then create a new script to create the two clones in the correct places;
 
-![
+<table>
+  <tr>
+    <td>
+      <img src="./scroll4.svg"\>
+    </td>
+    <td>
+      <pre>
 When flag clicked
   Hide
   Go to x [240] y [0]
   Create clone of (myself)
   Go to x [-240] y [0]
   Create clone of (myself)
-](.scroll4.svg)
+      </pre>
+    </td>
+  </tr>
+</table>
 
 ## Get a sprite runing along the road
 
@@ -85,14 +123,23 @@ Choose a new sprite to run along the road. It is best to choose a sprite with wa
 
 Add a script to this sprite to make to run through all the cosumes so that it looks as though it is running. Note that we do not need to actually move the sprite.
 
-![
+<table>
+  <tr>
+    <td>
+      <img src="./scroll5.svg"\>
+    </td>
+    <td>
+      <pre>
 When flag clicked
 Go to x: [0] y: [-20]
 Forever
   Next costume
-](./scroll5.svg)
+      </pre>
+    </td>
+  </tr>
+</table>
 
-You might want to slow it down by adding a ![Wait [0.5] seconds](./wait_05_seconds.svg) in the right place.
+You might want to slow it down by adding a ![](./wait_05_seconds.svg) (`Wait [0.5] seconds`) in the right place.
 
 ## Challenges