Turning Lessons into Games: My Journey with Canva Code

Introduction

During our first Teach First in-person training day, we were given a talk from Becci Peters about a unique use of LLM models, specifically Claude.ai. This use was creating generated artefacts, React-based webpages that can be shared with the public via a URL. During the training day we were encouraged to build a tool for teaching, and I built a small Binary number converter widget.

Although only given 10 minutes or so to write a Prompt and generate a widget, I could already see the potential, combining this feature with my own experience of prompt engineering. All I needed was a useful application for this tool in the classroom, and at the end of Term 1, an opportunity presented itself.

Claude AI Artefacts

I used these technology to build a searching and sorting algorithms Visualiser for use with my Year 11 pupils. The wonderful features of this widget is being able to pick which sort or sort, enter or generate a dataset and then see the algorithm in action. These provided a wonderful demonstration of these algorithms for the pupils to watch and engage with.

However, I saw potential. I have found that pupils sometimes struggle with the tag-based structure of HTML programming. I needed a simpler interface for pupils to program in HTML. I looked at programs like Scratch and Trinket.io that provide block-based programming. I therefore used Claude to build a drag-and-drop ‘code editor’ for HTML. Pupils can drag the blocks together to build their websites, add images by dragging an image onto the screen and even apply CSS styling via a list on the side of the page. This was the pot realised although there were so problems faced.

The main problem faced was with the Context Window (context-length) in generations. Claude had a limit on the amount of content (code) the LLM chatbot can generate, and sometimes the code would stop in the middle of the code or not let me prompt the chat any further.

The solution to this was to create new versions of the tool, with my changes and additions added to the prompt. In other words, regenerate the tool with the changes in a new chat window. This worked but felt incredibly clunky to use and made tweaking and refining the tool quite challenging.

ChatGPT Canvas

This process soon became available for ChatGPT through their Canvas feature. This worked a lot better for creating a back-and-forth prompting process and meant I could guide the tool creation much more successfully. I used this to build ‘The Binary Game’; a worksheet I had designed that I instead gamified into a web widget that the pupils could play. This was a fantastic little creation and the pupils responded really well to it.

Canva Code

This changed everything!

Most recently Canva brought out a feature in their Canva Create event called “Canva Code”, where uses can ask Canva to create a webpage / web widget and then it can be used in a design and published to a webpage. Immediately after trying it, the widgets I was able to create were vastly superior to ChatGPT’s Canvas or Claude’s Artefacts. These apps were built using Tailwind for styling, and could create animations, intractable elements and so much more. I’ve been creating tools ever since, with this as my go-to creator, instead of Claude or ChatGPT.

So far these have included a ‘Packet Switching Simulator’, an improved version of my ‘Searching and Sorting Algorithm Visualiser’ and an ‘interactive web design demo’. I’ve put the ‘Packet Switching Simulator’ into my lesson when teaching networks to Year 7 pupils, and they loved it. It’s already on version 3, as I’ve kept thinking of changes and improvements to make to it. Also with this network’s topic, I built a ‘Network Bandwidth Simulator' to show more devices and data affect the speed of the network.

So far I have not noticed a context or generation limit and have been able to generate apps with upwards of 1200 lines of code. There’s also been no limit to the number of prompts I have been able to send, with upwards of 12 back and forths for my ‘interactive web design demo’ app.

Conclusion

This is the best use of AI models in teaching, in my opinion. Taking an idea we have and want to show to our pupils, and making it a reality, quickly and easily. To build this ourselves would take far too long, alongside the normal teacher workload, so this speeds up creating more interactive and engaging lessons. I cannot wait to try this more and take it even further.

Since my last post about using AI to build interactive webpages to help teaching, I've experimented with creating even more resources that I wish to detail here for your own use. These were built using CanvaCode, by far the best solution for creating these interactive pages, at present.

Networks (Topology) Builder - Game

A game that invites users to connect components together to create different networks. The later levels focus on Network Topologies such as Star, Bus, Ring, etc.). A great visual tool for understanding how network Topology can be arranged.

Computer Science (OCR) Revision Minesweeper - Game

For the pupils who enjoy playing games, this game features OCR multiple choice questions built into the traditional game of minesweeper. Questions are asked for each square revealed and as a 'save yourself from losing' last chance.

HTML Drag-and-Drop Block-Based Editor - Version 2

(original / alternative)

The same tool (a drag-and-drop editor for HTML) in two different versions. When building this refined version of my earlier Claude widget, I tried two different approaches that led to different user interfaces of the same toolset.

Ciphers (Encryption/Decryption) Visualiser

A helpful webpage for encrypting and decrypting messages to teach pupils about Ciphers and network security Encryption. The Caesar Cipher is the main focus with other more complex ciphers also available.

Number System Explorer

Calling back to my first test on that Teach First Training Day, this is a more refined converter between different number systems, including Binary, Hexadecimal, octal, and Base64. This fits well into a lesson / unit on data representation.

Final Comments

I've learnt even more about developing these interactive webpages using Canva Code. Feel free to use and experiment with these tools (or similar) and please share your own experiences with me.