I used AI to build vital tools for teaching.

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 https://scratch.mit.edu/ 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-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 https://chatgpt.com/ 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 https://www.canva.com/ 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.

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

(This is also my first time posting on CAS blogs, so I welcome any feedback and comments 🙂. Thank you for reading.)