Number Ninjas Coding Animations

Since 2019, I have been volunteering with Frontier College’s Number Ninjas program. I find it very rewarding to get kids excited about math. As one of the Organizational Team Leads, I have the responsibility of running some of our session. Due to the pandemic we’ve had to run all of our games and activities online, usually using the Kahoot platform.

Since coding is being introduced to students as early as grade 1 in the Ontario maths curriculum, I thought I would be uniquely qualified to run a session on coding. There were a number of tricky considerations however: although some of the kids were experienced in languages like Scratch and Python, I couldn’t assume any prior knowledge. And, the Kahoot platform at our price range allows for only multiple choice and true/false questions.

My solution was to design a simple language which was introduced to our learners as we ran the Kahoot. The language controlled a pixel art turtle living on a checkerboard. Then, with some of the tiles colored to match the Kahoot website, we were able to ask questions like the following:

Kahoot Question

Then, thanks to some software engineering I did, I was able to generate animations which demonstrate the solution:

This way, any students who struggled to get the correct answer can see how the turtle and code interact to produce the final result.

I built these animations using Lua in the LÖVE game framework. Given a table like:

{
  {id = "rotate", value="counter-clockwise"},
  {id = "forward", value = 1},
  {id = "rotate", value = "clockwise"},
  {id = "forward", value = 1},
  {id = "rotate", value = "counter-clockwise"},
  {id = "forward", value = 1}
}

My animation program could create what was displayed above. My program also supports recursively nested if-statements (depending on what color tile the Turtle is standing on) and repeated iteration (repeat the following instructions n times). For example, the following program:

{
  {id= "forward", value = 2},
  {id = "backward", value = 1},
  {id = "if", value = "white", nest = {
    {id = "rotate", value = "clockwise"},
    {id = "forward", value = 1},
    {id = "if", value = "black", nest = {
      {id = "rotate", value = "counter-clockwise"},
      {id = "backward", value=1}
    }}
  }}
}

Generates the following animation:

I’ve run the coding session a couple of times. Getting the difficulty at the right level is challenging due to the wide breadth of prior experience. I’ve found that nested if-statements are a little too much to introduce in one 45 minute session - but often kids can grasp movement, rotation, and repetition without too much difficulty! Determining the outcome of programs is not the only skill they develop through these exercises; I have asked them questions about whether two different programs result in the same outcome and the majority answered correctly. This implies some meta level of understanding about programs: that two programs can do the same thing despite having different instructions.

I believe exercises and animations like this are a great way to expose kids to coding in a group session. There’s nothing to replace actual programming experience with something like Scratch, but that can be very difficult in the remote setting because of the technical setup, troubleshooting, etc. Just the exercise of reasoning about programs can be a nice soft introduction to coding without having to worry about syntax or semantics.