Register for InstructureCon25 • Passes include access to all sessions, the expo hall, entertainment and networking events, meals, and extraterrestrial encounters.
So first things first, if you are a school and have not signed up to Canva and registered for the Canva for Education Schools package then you MUST! As a school, you get all the premium tools for free. You can also direct students to join your Canva instance with their school email. You can appoint multiple administrators and have greater control over the access to resources your give to students. Most importantly, Canva Education is COPPA, FERPA and GDPR compliant and promises not to use any data to train AI systems.
So Canva released its Canva Code over the last month and it just landed in our area last week. Canva Code is a vibe coding feature. Vibe coding is where you create the HTML need to make a web-based product just by typing in a prompt.
Vibe coding is not new (although the term is). If you have read any of my other posts, you will have seen me play about with vibe coding using different platforms (MindJoy, ChatGPT and Gemini).
What makes Canva code different are a number of things:
- The formatting and styles of the product are far better than any other tool I have used - this is in part because it uses some UX/UI design featuresas part of the coding (Tailwind CSS amongst other things I think)
- Canva adds in icon images as part of the design (I am not sure where they come from)
- Canva produces designs that you can view and test in Canva (no need to move code to another place and have to save as html etc - so tech skills are manageable)
- Canva has a 2-3 step, button pressing, process to either create a webpage from your resources or to copy the coding to embed on a Canvas page
- When embedding on a Canvas page, you have the option of playing Full Screen - this is a BIG win!
- Canva has a list of pre-made prompts you can use and/or adapt
- Canva often produces the desired feature from one prompt
- Canva just seems to be attuned to what teachers want (I have nothing Scientific to back this up - it just seems to work)
Those of you familiar with vibe coding need to know a few things:
- You cannot (YET) save or export or modify the HTML code that is made
- Each design is saved so you can go back and visit each of the versions and improve them
- Average code length as a starting task is 1000+ lines and the process is not as speedy as other LLMs
- It does not particularly like you leaving the site and getting on with other tasks as the code is being generated
Here is a YouTube video by the amazing Lauren Janoska (aka Canvas Queen) as she goes through how to do it.
'Game changer' is a much over used word but when I think of all the tools that I use to create similar interactions and compare this with them - I don't think Lauren is wrong!
Before I talk some more about the sort of resources you can make, Lauren showed an example 'feedback' activity where students would input data. I have sent Canva a support ticket to clarify where this data would go but believe that if you create some sort of data entry/capture form eg feedback, the responses are saved in the devices Local Storage area and not accessible remotely (see updates).
All the models that I have created using vibe coding have mainly been quiz styles game and nothing that requires any personal/identifying data to be inputted and stored locally.
Some Vibe Coded Activities - Matching Game
Website - CGSE Chemistry Acids and Bases Matching Game
I made a hidden matching game for GCSE Chemistry Acids and Bases. it looks like this:
The initial prompt was - A matching game for CGSE chemistry acids and bases. Can you include chemical equations in the match. The game should be timed with different rounds. Each round should have similar matched pairs but with different terms to build on students recall and retrieval practice. Include some element of addition challenge eg scoreboard with marks added and taken away for mistakes
My first iteration to try to make it a bit more about learning than guessing was to ask a question based on the pair they found. Answer it correctly they get to keep the score, otherwise the pair is hidden back in different places. Here is a question being asked:
The iteration prompt for this was - Can you add in a bit more challenge where they match but they only keep the score if they are asked a question related to the match. If not, they flip over and are rearranged somewhere else on the board.
Finally, I asked it to provide details of the attempts, bonus if you answered it quickly and summary score at the end through the iteration prompt - Can you award bonus points if you complete each round in a certain number of attempts and provide a summary at the end of the game.
Some Vibe Coded Activities - Snakes and Ladders
Website - Snakes and Ladders - Thermodynamics Challenge Game
I wanted to make a multiplayer game linked to a Physics A-Level topic of 1st law of Thermodynamics. This became:
The players are indicated by different dots. When you move, your number position is tracked - which is helpful if you give a time limit for the game and you ask students their 'score' at the end..
When you land on a ladder (the up arrow) or snake (the down arrow) you get asked a question about the topic.
You need to get it right to advance or to avoid dropping down. I am quite happy with the level of questions. They match the topic quite nicely.
There are no iterations for this game, but the brilliant thing is I shared this online and with colleagues and everyone was able to suggestion something - even if they didnt teach Physics!
- Replace the dots with physics icons
- Have a more realistic dice spinning
- Replace the arrows with ladders and snakes
- Get a question wrong and miss a turn
- Make the questions harder the further you go up
- Include help features for the quiz questions eg 50:50, voting, extra turn etc
- Produce a summary at end
- Have sound effects of you moving and going up and down
- Make a player answer a question at 100 to win
- Include Language options
- Have the game based on different topics that you can choose
Some Vibe Coded Activities - Top Trumps
Website - Top Trumps for Circular Motion
I quite like playing Top Trumps as a kid so here is a version of it linked to a Circular Motion topic I am doing. You play against the computer. Each of you has an object that shows circular motion and you are given the radius and period of the objects motion. You then have to decide if 4 linked values - Frequency, angular motion, velocity and centripetal acceleration are greater than or less than the computers object.
Get all 4 correct you score 2 points, 3 scores 1 point, 2 its a tie and 0 points, 1 and the computer scores a point 0 and the computer scores 2 points.
This took about 7 attempts until I was happy. I changed the numbers to scientific notation rather than e.
Here are some printscreens:
Game in action:
Improvements to Make
- Improve the animations (tricky!)
- Have the cards flip over at the start to reveal the objects
- Review of key features at the end
Some Vibe Coded Activities - Confidence/Certainty-Based marking
A very long time ago (almost 20 yrs) I managed a Moodle VLE. One of the plug-ins we had was called CBM which was a confidence-based marking tool developed from ideas by Professor Tony Gardner-Medwin at UCL. It was so clever. Students had a series of questions. They first indicated how confident they were with answering the question before answering it. Depending on their reply, they could score between -6 and 3 points. The idea being to challenge their confidence on what they knew and didn't know and also to identify any misconceptions. More on this is at this website - CBM Help: Certainty-Based Marking
Ive had a go and trying to replicate the plugin as a piece of coding. Its taken a few drafts (currently number 15). Here is a video:
UPDATE 30/5
At time of writing Canva Code is a little more than 6 weeks old, so I am fully expecting many of the issues to be resolved in 6 more weeks time. Courtesy of LinkedIn, here are a few helpful suggestions:
Saving your Interaction
Many thanks to Andrew Caffrey at Canopy for pointing this out. Each interactive you make is saved. To access it again, click on the Canvas AI button then the Code for me button. Then click on the Open Menu icon:
The pop-out menu will show you all the interactions you created in date order:
You can see the prompts you wrote and the different versions:
Saving your Code
Paul Hamilton writes some fantastic stuff on using Canva Code creatively and he has a book of prompts coming out this June. This link shows you how to save your code - https://www.youtube.com/watch?v=hebjji10Gak&feature=youtu.be
Alternatively, thanks to Sethi de Clerq on LinkedIn, "On the website preview window, make sure you are right clicking on the preview and select 'View Frame Source' Then you can take the code anywhere".
Creating Content with Input boxes etc
I received this response from Canva about data inputted which backs up the point earlier in the blog, "To clarify your concern, when a student completes a form or survey created using Canva Code and embedded in a platform like Canvas, that information isn’t stored or collected by Canva in any way.
At this time, we don’t have the capability to store responses from forms or surveys, whether they’re shared as standalone links or embedded externally.
So even if a design includes a “Save your results” button or a PDF print option, the data remains local to the user’s device and is not transmitted or saved by Canva. We understand this can limit how forms are used, especially in an educational context, and we’re actively exploring ways to enhance this experience in the future."
