Why not celebrate Guy Fawkes/Bonfire Night on November 5th by using J2Code?

This is one of a series of lesson ideas that help teachers use some of the tools in Glow. This lesson idea introduces the concept of computer coding within the context of Guy Fawkes Night and firework displays.


In this lesson idea learners will programme two simple animations using J2Code. The first animation involves programming a helicopter to fly across the computer screen and write a ‘fly by’ advert for a forthcoming firework display. The second animation involves creating the fireworks display.

The coding exercise can be used as a stand-alone activity or as an endpoint to a literacy-based research project where learners are using animations to share their messages and ideas through graphic representation. By doing this they are demonstrating valuable computational thinking skills.


  • To create 2 simple animations using a visual code language.
  • To introduce computational thinking.

Learning Outcomes

  • All children will create a simple animation of a sprite and a firework.
  • Most children will animate a second sprite and make the sprite “speak”.
  • Some children will experiment and make their own animations and interactions.

Learning Intentions

  • To develop an understanding of block coding.
  • To create a simple animation.
  • To write a simple program that accomplishes a specific goal.

Cross curricular / Interdisciplinary learning Links

  • Maths: geometry – position and direction.


Code, Sprite, Action window

Teaching Steps

Step One – Login to Glow and add a link tile

J2Code is not in the App Library but you can add it to your Launch Pad very easily.

Click on ‘App Library’ and then ‘Add Tile’ at the bottom right of the screen.


Fill in the required fields, adding https://www.j2e.com/j2code/ into ‘Address URL’ box. Click on ‘generate thumbnail’ then click ‘OK’.

Add title

You will be asked to confirm whose Launch Pads you would like to install J2Code on.  Click ‘SAVE’ and close the box. You’ve just added your first tile to Glow….well done

Now open J2Code on your Launch Pad (you may have to scroll through a few pages to find it!).

 Step 2 – Open J2Code: Visual

Site name

Explain the context of the activity, learning to code using an online programme.  Ask learners to open J2Code on their Launch Pads and click on the ‘Visual’ tile.

RM Unify

This is the start screen….don’t worry it will all become crystal clear soon!

Please Note: It is important that pupils do not refresh their browser tab or window as this will remove any code.

Step 2 – Move the sprite


Use your mouse to move the sprite (currently a penguin) to the bottom left hand corner of the green square (the ‘action’ window). The ‘action’ window is where you will see your computer animation start to take shape once you have written some code.

As you move the sprite you will notice the ‘x’ and ‘y’ co-ordinates change. Everything that happens in the action window is linked to a co-ordinate.

Step 3 – Change and rename the sprite from a penguin to a helicopter

Click on the sprite button (it currently shows a little picture of a penguin).


A new menu will appear and you can pick from a range of sprites. Find and select the first helicopter sprite.

Now use the ‘+’ button to select the second helicopter sprite. Your screen should now look like this and the penguin will have changed to the helicopter.


Re-name the ‘sprite 1’ to ‘helicopter’ by clicking on the sprite tab along the top of the screen and selecting ‘rename’.

Step 4 – Give your animation a background

The Helicopter (sprite) is just one ‘layer’ of your animation. You can add a new ‘layer’ by clicking on the ‘+’ tab.


Click on the ‘+’ tab and select ‘backgrounds’ from the left hand menu.

Select the picture of the sky and click ‘ok’.

Re-name the tab ‘sky’.


Step 5 – Move your helicopter

To get the helicopter to move we need to add some code using the visual code language. To do this click on the ‘</>’ tab.

We want our helicopter to move from the bottom left of the screen, to the middle of the screen and then turn right and fly across the screen. In order to get it to do this we need to drag in sections of the visual code into the programming window.

Click on ‘motion’ and drag in the block of visual code that says ‘move forward by’

 change the ‘100’ to ‘200’  unify

Now drag in the block of visual code that says ‘turn right by’ – the two blocks of code will slot together like a jigsaw.

Now drag in the block of visual code that says ‘move forward by’.

Re-cap: you have written some code that tells your helicopter to ‘move forward’, ‘turn right’ and ‘move forward’. Now you need to tell it when it should do this.

From the ‘events’ blocks select ‘when space key pressed’ and drag this around your existing move code.

To reset your animation (but not lose the code) to the beginning, just press the square stop button next to the play:


Re-cap: Now you have written some code that tells your helicopter to ‘move forward’, ‘turn right’ and ‘move forward’ when you ‘press the space key’.

You can test your animation by pressing the ‘play button’   and then starting your animation by pressing the space bar.

Step 6 – Review your code so far

One of the nice things about J2Code is that you can review what your code looks like in JavaScript at anytime. Each block is essentially a block of JavaScript. To review your code click on the JS tab.

Step 7 – Add your skywriting

Now we are going to add some writing that will appear after the helicopter makes its 90-degree turn. To do this we are going to select the ‘print “()” at top left of the display’ block.

Drag the block into your program after the ‘turn right by 90-degree command block’. Between the speech marks type your firework display message.

You can test your animation by pressing the ‘play button’   and then starting your animation by pressing the ‘space key’.

Step 8 – Improve your animation

Now we are going to think about improving the animation sequence. The first thing we are going to do is to get the writing to appear in the centre of the screen so it looks like the helicopter has written it. To do this we will change the print block to read ‘centre of the display’.

You can test your animation has changed by pressing the ‘play button’   and then starting your animation by pressing the ‘space key’.

Next, we will get the helicopter to fly in smaller stages rather than just ‘up’ and ‘across’. We will also get it to fly off the screen. To do this we will add more lines of ‘move’ code.

You can test your animation has changed by pressing the ‘play button’    and then starting your animation by pressing the ‘space key’.

Finally, we will improve the look of the helicopter by switching between the ‘helicopter 1’ sprite and ‘helicopter 2’ sprite every time the helicopter moves.

To do this we will introduce a block for the ‘Looks’ menu called ‘switch costume to’. We will add this block in after every ‘move forward’ alternating between ‘helicopter 1’ sprite and ‘helicopter 2’.

You can test your animation has changed by pressing the ‘play button’   and then starting your animation by pressing the ‘space key’.

You have created a great animation is just a few minutes!

Step 9 – Firework Display

Explain that now learners are going to create their ‘firework display’. You might want to look at  some examples on the J2E site: https://www.j2e.com/code/examples/Visual/firework

Ask learners to use the language and skills they have learned to create their own firework display!

Step 10 – Create a Sprite Rocket Firework

Start a new window and select the Sprite 1 Rocket rename it ‘Rocket’

Add the background as Sprite 2 Night Time rename it ‘Night Time’.

Create the code to move the rocket forward 50 x 2.

Now to make your Rocket Sprite disappear (and your firework appear), select and add to the blocks ‘hide sprite’ (it will come back if you press reset).

Your firework is actually a ‘pen’ function which you draw a line, repeat, rotate and enable random colours at speed! It looks just like a Catherine wheel in the night sky! Adding clear at the end makes them all disappear!


Be sure to reset each time and try out the variables. It also works best at high speed.

The final code can look like this (Pupils might need hints).

The JavaScript looks like this:


Ask your learners – What else might they want to add to their display….there are some stars too!

Step 11 – Presentating and Capturing Animations

Encourage pupils in turn to demonstrate their animations to the rest of the class, celebrating each pupil’s work. Ask each pupil to take a screenshot. This image and the code can then be posted in the Glow Newsfeed (remember to use the hashtag #sharemylearning) or saved as an example for an e-portfolio.

If you have access to a camera for video recording, you can record the pupil introducing their animation and the animation itself.

Step 12 – Class Review

Facilitate a structured class discussion regarding how the pupils found creating the animations.

  1. Did you find it easy or difficult? How could we make it easier?
  2. What other animations can we create that may be linked to other projects the school or class is working on?

Next steps to build on (or prepare) for this session

  • Ask the pupils to write down every step they took explaining (in their terms) what they did.
  • Explore the other free resources on j2e.com/j2code
  • Explore Scratch https://scratch.mit.edu/
  • Explore the world of future digital orientated careers and opportunities http://www.digitalworld.net/

Links to the Curriculum for Excellence

The above lesson idea can contribute to gathering evidence for the following Experiences and Outcomes.

Post Comment

Blog Comments

back to top button Let's talk