Update step 3

en/step_2.md

@@ -35,8 +35,8 @@ Add this function to the list of things to `draw()` in every frame.
 ---
 language: python
 line_numbers: true
-line_number_start: 23 
-line_highlights: 25
+line_number_start: 25 
+line_highlights: 27
 ---
 
 def draw():
@@ -52,19 +52,11 @@ def draw():
 **Test:** Run your code and you should see a black square. 
 --- /task ---
 
-**Tip**: The three numbers in `background(0, 0, 0)` are red, green and blue values. If you'd like your version of space to be a different colour, try changing these numbers to any whole number between 0 and 255.
 
---- task ---
-
-Display an image of a planet.
 
-The `image()` function needs the following data:
+--- task ---
 
-- image filename
-- x coordinate
-- y coordinate
-- image width
-- image height
+Add a line of code to display an image of a planet.
 
 --- code ---
 ---
@@ -78,6 +70,14 @@ def draw_background():
     image(planet, screen_size/2, screen_size, 300, 300)
 --- /code ---
 
+The `image()` function needs the following data:
+
+- image filename - we have already loaded the planet image
+- x coordinate - we have already set the screen size
+- y coordinate
+- image width
+- image height
+
 --- /task ---
 
 --- task ---
@@ -102,8 +102,8 @@ If you want to change the planet image, change `planet.png` in the code to the f
 ---
 language: python
 line_numbers: true
-line_number_start: 18 
-line_highlights: 23
+line_number_start: 17 
+line_highlights: 22
 ---
 def setup():
     # Set up your animation here
@@ -115,4 +115,3 @@ def setup():
 
 --- /task ---
 
---- save ---

en/step_3.md

@@ -1,50 +1,54 @@
-## Liftoff!
-
-<div style="display: flex; flex-wrap: wrap">
-<div style="flex-basis: 200px; flex-grow: 1; margin-right: 15px;">
-Each time a new frame is drawn, the rocket needs to move up the screen to create an animation effect.
-</div>
-<div>
-
-![A rocket flying at a steady speed from the bottom to the top of the screen.](images/fly.gif){:width="300px"}
-
-</div>
-</div>
-
---- task ---
+## Lift off!
 
 The starter project has a rocket image provided for you. 
 
 ![Image of the rocket in the code editor image gallery.](images/rocket_image.png)
 
---- /task ---
-
 --- task ---
-
 Add code to the `setup()` function to load the rocket image into a `rocket` global variable. 
 
+<div class="c-project-code">
+
 --- code ---
 ---
 language: python
 filename: main.py
 line_numbers: true
-line_number_start: 20
-line_highlights: 24, 26
+line_number_start: 18
+line_highlights: 22, 24
 ---
 
 def setup():   
-    # Setup your animation here   
+    # Set up your animation here   
     size(screen_size, screen_size)   
     image_mode(CENTER)   
     global planet, rocket   
     planet = load_image('planet.png')    
     rocket = load_image('rocket.png')    
 
+--- /code ---
+--- /task ---
+
+--- task ---
+
+Add a `rocket_position` global variable to keep track of the rocket's `y` position. 
+
+--- code ---
+---
+language: python
+line_numbers: true
+line_number_start: 6 
+line_highlights: 8
+---
+
+# Setup global variables    
+screen_size = 400    
+rocket_position = screen_size  
+
 --- /code ---
 
 --- /task ---
 
-### Make the rocket fly
 
 The `y` position of the rocket will start at 400 (the screen height) and then decrease by 1 each time a new frame is drawn.
 
@@ -67,28 +71,26 @@ rocket_y = screen_size  # Start at the bottom
 
 --- /code ---
 
+The `rocket_position` is set to the `screen_size` at the start so that the rocket appears right at the bottom edge of the screen. 
+
 --- /task ---
 
 --- task ---
 
-Define a `draw_rocket()` function to change the rocket's `y` position and redraw it.
-
-`rocket_y -= 1` is a shorter way of saying `rocket_y = rocket_y - 1`.
+Define a `draw_rocket()` function to make the rocket appear on the screen.
 
 --- code ---
 ---
 language: python
-filename: main.py
 line_numbers: true
-line_number_start: 11 
-line_highlights: 12-16 
+line_number_start: 9 
+line_highlights: 10-12 
 ---
 
 # The draw_rocket function goes here   
 def draw_rocket():   
-    global rocket_y  # Use the global rocket_y variable    
-    rocket_y -= 1  # Move the rocket    
-    image(rocket, width/2, rocket_y, 64, 64)    
+    global rocket_position      
+    image(rocket, width/2, rocket_position, 64, 64)    
 
 
 --- /code ---
@@ -97,21 +99,20 @@ def draw_rocket():
 
 --- task ---
 
-Call your new `draw_rocket()` in the `draw()` function so that the rocket gets redrawn every frame.
+Call the `draw_rocket()` function.
 
 --- code ---
 ---
 language: python
-filename: main.py
 line_numbers: true
-line_number_start: 33 
-line_highlights: 36 
+line_number_start: 28 
+line_highlights: 31 
 ---
 
-def draw():   
-    # Things to do in every frame   
-    draw_background()   
-    draw_rocket()   
+def draw():
+    # Things to do in every frame
+    draw_background()
+    draw_rocket() 
 
 
 --- /code ---
@@ -120,10 +121,42 @@ def draw():
 
 --- task ---  
 
-**Test:** Run your code to check that the rocket starts at the bottom of the screen and moves up each frame.
+**Test:** Run your code and check that the rocket appears at the bottom of the image. 
 
-![Animation of the rocket flying half way up the screen.](images/rocket_fly.gif)
 
 --- /task ---
 
---- save ---
+
+Each time a new frame is drawn, you need to move the rocket one pixel up the screen to create an animation effect.
+
+
+--- task ---
+
+The `rocket_position` of the rocket will start at 400 (the screen height) and then decrease by 1 each time a new frame is drawn.
+
+--- code ---
+---
+language: python
+line_numbers: true
+line_number_start: 8 
+line_highlights: 11
+---
+
+# The draw_rocket function goes here   
+def draw_rocket():   
+    global rocket_position     
+    rocket_position = rocket_position - 1    
+    image(rocket, width/2, rocket_position, 64, 64)    
+--- /code ---
+
+--- /task ---
+
+
+--- task ---
+
+**Test:** Run your code to check that the rocket blasts off from the bottom of the screen.
+
+
+![A rocket flying at a steady speed from the bottom to the top of the screen.](images/fly.gif){:width="300px"}
+
+--- /task ---