Turning Lessons into Games: My Journey with Canva Code and Gamification

This is the third in a trilogy of posts about using AI to build web apps, to use as resources in the classroom. My previous creations and experiments have been incredibly varied, whilst today will remain focused on the idea of building educational games, how gamification can help a classroom and how Canva can be used to build these resources.

Introduction

Earlier this year, I began building resources to aid with teaching, mainly simulators and demonstrations to act as a visual representation of more abstract concepts that could be shared with pupils for them to refer back to. However, occasionally I would attempt to build a type of game for the pupils to use as a revision exercise, usually based around answering questions. A good example of this is my OCR GCSE Minesweeper Game which acted as an additional method of knowledge revision, but in a fun and interactive way.

There is a strong need for gamified elements within the classrooms. It feels like almost every lesson, pupils ask to play a Blooket quiz or they ask if they can play games. After making the GCSE Minesweeper Game, I had an idea to try incorporating games that the pupils like, but with educational elements. And as seen with the Minesweeper Game, AI seemed like the quickest way to go, without putting more workload onto an already busy year. That’s where Canva Code enters the story. A tool that let me turn my lesson content into full-on playable games.

Gamification

Gamification refers to taking lesson activities and introduce ‘game’ mechanics to make the lessons more engaging for pupils. Some of the advantages of gamification include:

• Increased engagement with pupils
• Retention through repetition
• Motivation via competition and/or rewards
• Natural differentiation

One way that this can be done by using existing activities and introducing a scoring system and leaderboard. This promotes healthy competition between pupils in the class, and a reward can be offered later.

Another way is to play a game that features educational elements. A great example of this is Blooket, a quiz that implements game modes to make answering questions and revising content more fun for pupils. I’d tried a few of these techniques to try and make my lessons more engaging but to be honest, I wanted to try something more.

Enter Canva Code!

With this growing interest in gamification, I began to explore which tools could help me bring these ideas to life easily… Which is where Canva Code came into play.

I had started using Canva Code, following my experiments with Claude Artefacts, ChatGPT Canvas, and most recently Gemini’s Apps. Despite my experiments with these other models, I still found Canva Code to be the most useful to use for making these tools, and began using it for most of these tasks following the Canva Create event earlier in the year and the early access preview.

My reasons were because Canva provided the most stylised and comprehensive apps. It rarely struggled to create the things I asked, even if sometimes it went in the wrong direction. It didn’t seem to have a limit on how much it can do, with some of my apps reaching a code length of over 1700 lines of code. Other models had limits in how many versions of an app can be created without starting a new chat, or had a limit to how much code could be generated.

Whilst writing this, I did wish to address a problem I have encountered with Canva Code, where sometimes the code stops randomly and the app that’s created is missing some key javascript elements meaning buttons and interactable elements no longer work. I am yet to see a fix for this and it is holding back an exciting idea I’ve had for this technology, but I am hopeful for Canva to identify and remove the bug.

The Game Development Process

The next stage was to identify some games to build. I had initially created minesweeper due to a pupil in the class’ fascination with the game, and thought it would be a rewarding revision approach for them. Building games for lots of pupils to play had to be approached differently.

This idea coincided with our schools unit of using SketchUp, across all KS3 year groups. This meant I could hinge the knowledge content of the games, on SketchUp tools and how they worked.

I started simple, with a Matching Game where pupils 1) match up the tool with its description and 2) match up a scenario with what tool you would use.

I also created a simple ‘Ordering’ Game where the players are presented with different models and steps to complete them, and they have to put them in the right order. I never ended up using this, but it was an interesting result nonetheless and is available on my resources page.

After I had gained a little bit of confidence that my ideas could be realised using the capabilities of Canva Code, I decided to push the limit a bit further and build full-on games. I turned to classic arcade games for inspiration (like I had done with Minesweeper) and built my first true “Game”: The SketchUp Tools Snake Game. Players had to eat the correct fruits that matched the description given of a SketchUp tool. It took quite a few back and forths and refinements to get it how I pictured it in my head, but I was amazed with the results.

Feeling inspired, I built two more SketchUp themed games. One was a Driving Game (secretly inspired by the Hoth scene of The Empire Strikes Back) where players drive around a map to ‘grapple’ tools to then drive over and match them up with their descriptions. This was immensely more complex, it had three levels, with many tools and descriptions. It had a time limited booster to go faster, a minimap in the corner that updated as the players drove around, a scrolling grid (play area) and when complete, showed the players how long they had taken to complete the game. As there wasn’t a way to ‘lose’ the game, the timer would serve as the high-score / competitive aspect. I decided that this would be a feature I would try to bring into all these games, where appropriate.

The final SketchUp game was a version of the classic game ‘Geometry Dash’: SketchUp Dash. Players would navigate infinitely generating terrain, avoiding obstacles and answering SketchUp questions. If they hit an obstacle, fall off, or get a question wrong, they have to restart. Their number of attempts is tracked, as well as their score, which increases every time they answer a question or move a certain amount. I was amazed that this worked as a concept.

To ensure I was experimenting effectively, I also built two games that weren’t SketchUp themed. The first, a HTML tags inspired Fruit Ninja game, where the players have to destroy the correct HTML tag (fruit) and avoid the incorrect ones / bombs. The second, a Binary Conversions inspired version of pacman, where the player has to eat fruit that represent 1s and 0s to create the correct binary number, for the denary number given. This was complete with ghosts to avoid and extra parts to eat to earn extra points.

Prompting

Throughout all of this process, I refined my ‘core prompting phrases’ to control and guide the output towards a desired output. Here are a few of the tricks I learnt to get better control and better outputs over the Canva Code generations.

1. As these games rely on the educational aspect for use in the classroom, I needed to ensure that the information was correct. Before getting Canva Code to generate any code, I asked it to detail what the game would be like and what the educational questions / answers would be. This allowed me to check for hallucinations.
   
   Before you generate any code, I would like you to describe the features of the game in detail, and show me what educational question/answers you are going to use
   
   Using this method, I was able to tackle misconceptions in the design of the game, and any knowledge hallucinations that may arise before the ‘coding’ process began.
   
   
2. After the initial generation of the game, the next steps for refinements and improvements through play testing. Typically, the initial results were very simplified, so (after all the gameplay mechanics had been tested), I would ask Canva Code to improve the style to to make it more modern, incorporating clear colours, clear text, clear graphics and animations. This process led to the very aesthetic designs that you can see in the finished versions.
   
   
3. An early problem encountered with these gamified activities, was the concept of the ‘Game’ itself. My school, and I’m sure others, use a kind of automated system to block games. This included a few of my gamified activities. To contract this, the last iteration was to remove all references to 'game' from the code / webpage, and replace it with 'activity' if needed
   
   This method was enough to allow these websites to pass the content-filtering and be used within the classroom. This method proved easier than getting the IT department to approve each individual ‘game’.

In the Classroom

These games had positive reception from pupils across different classes and year groups. Typically used as a starter or exit activity to reflect on learning, pupils found these to be an engaging method of learning. Many pupils requested more games and even had their own suggestions for ideas.

Some pupils were distracted and decided to play an unblocked version of the original games they were based on (i.e. snake or geometry dash). However, most pupils loved playing the games and getting them to stop playing them to focus on the next activity proved the biggest challenge.

In one class, I presented pupils with the option of two games (the Driving game and SketchUp Dash) and saw that there was a very even split with some pupils choosing the slower and more considered Driving game and some choosing the faster paced SketchUp Dash. I think this is a sign that both of these game were fun for pupils to play.

Reflections

The integration of these games was designed to make the learning more meaningful, accessible, and fun for the pupils. These games weren’t just distractions or addons. They got pupils thinking about the tools that they would need to be using for an independent task, or let them revise content from a previous week.

One of the unexpected strengths of these games was how naturally they supported differentiation. Due to the level-based and self-paced nature of these games, pupils could progress at their own speeds. Some games had helpful hints or varying game modes to go alongside these. Pupils could explore the games at their own leisure whilst other pupils could speedrun through for the most points or the best time.

The visual and interactive nature of the games supported a broader range of learning styles, removing the sometimes text-heavy approaches of traditional worksheets. Pupils with SEND responded well to the gamified elements and it led to some really great lessons for them.

Lessons Learned & Tips

I learned a lot throughout this process, about what works and what doesn’t. Whilst Canva Code is an incredibly powerful tool, there are some limitations in what it can do. So here are some helpful tips if any of you want to try this yourselves.

1. Have a clear idea of what you want to make.
   Decide on your game, decide how the educational aspect is going integrate with the game, and write a clear description of this within the prompt.
   
   
2. Check for any hallucinations.
   AI can make mistakes and use misinformation that can ruin the purpose of these tools. Ask the AI before it starts writing the game to tell you the educational information so that you can fact check it.
   
   
3. Playtest the Game.
   I used one of these games in a lesson before I had completely playtested it for bugs, and there were some. Bugs are not understood well by pupils, and can ruin the enjoyment of a gamified activity. As with any code project, it needs to be checked and refined to iron out these bugs.
   
   
4. Worry about styling after the mechanics.
   As much as we want the game to look good, the mechanics and functionality of the game is far more important. Get a working game with all the features you want and then ask Canva Code to make it look nicer.

Conclusion

I plan to continue building games in a variety of different topics, but try to make them more complex. I’ve tried simple physics simulations, and complex movement mechanics, but I wonder whether simple AI is possible or perhaps longer more detailed games.

These tools have genuinely transformed my these parts of my lessons, and I am excited to keep pushing the boundaries.

I encourage people to try this for themselves, as Canva (and Canva Code) is free for educators. If you make anything, please share it with me as I would love to see them.

A webpage containing all my resources can be found at resources.thetommyverse.com