If you are a reader of my more recent blogs, you will know that I have been using AI chatbots to create interactive games, sometime before it became trendy and we called it Vibe Coding!
The latest vide coding feature on the block comes from Canva and boy is it an impressive start. Granted you cannot (yet) download the code and tweak it but you can grab the embed code and add it to your Canvas page via the HTML editor.
Many teachers over on LinkedIn are quite rightly very excited by it especially with a recent post from Jo Muirhead - https://www.linkedin.com/posts/ugcPost-7316574512743886852-gsWP?utm_source=share&utm_medium=member_d... and Lauren Janoska (aka Canvas Queen) - https://www.linkedin.com/posts/lauren-canvasqueen_canva-code-has-absolutely-blown-my-mind-ugcPost-73...
Having an iframe embed code created for you makes this process so much easier. Without it, the process is approximately as follows:
- Make the game and copy the html code
- Open Notepad (or similar) and paste in the code
- Save as a .html file by adding it to the end of your filename
- Go to your Canvas course and upload the html file to Files
- Find the file in File, right click on it and choose Copy Link
- Go online to an iframe generator site
- Paste in the link and generate the iframe
- Copy the iframe
- Go back to Canvas and make a new page
- Go to the HTML editor and paste in the code
- Save and Preview the game
- Adjust height and width where necessary
A 12-step process and you are more than likely going to need a drink after this!
Anyway, on to something I spotted today..
I've recently been creating some interactive fiction/text adventure games with my students using the amazing open source software Twine - www.twinery.org .
I made a Canvas course to help with video and links, but I wanted to have some examples from a previous class to inspire them. I prepared myself to go through the aforementioned steps for each game I wanted to share.
The games were in a different course in an assignment I created for students to upload them. I went into the course and SpeedGrader and prepared to work my way through each file, download it to my computer.
Anyway, clicked on the first user and could not believe what I saw. The game was embedded on the screen and played as if on the Twine website.
As you can see from the printscreens, we are not talking about some static html. There is javascript a-plenty!
It was the same for every single game and all of them uploaded as html files using an assignment feature.
So, my question is this...
If Canvas can do this for assignments, why can we not have this as a feature where they are visible as resources?
How amazing would it be!!
The response to AI from Canvas has been measured - I fear that the potential of something like vibe coding may not be fully utilised if things like this are not addressed.
What do you think?
