Canvas is one of the most popular LMSs out there. Many Trinket users use Canvas to teach, so I thought I’d write a little guide about how to add interactive coding exercises to your Pages, Quizes, and Assignments with our embeddable Python Trinkets..
Interactive Code on Canvas in 3 Steps
Putting an interactive Trinket on a Canvas page is simple:
- Grab the embed code of a trinket
- Paste it in the Canvas editor’s HTML view.
- Send your students to the page and get teaching!
Here they are, one by one: 1. Embed code is how interactive elements like Maps, Videos, and our very own Trinkets get into webpages. Luckily, all you have to do is copy and paste it in to the right place, and Canvas and Trinket will do the rest. Here’s how to get embed code when you’re logged in to your free trinket account:
You can also grab embed code from any Trinket you find out on the web, including the ones at the bottom of this post! This feature is great when you find a great example on a colleague’s site. 
Once you’ve got that embed code copied to your clipboard, you’re ready to paste it into the HTML editor. You may find it convenient to have Trinket in on Tab on your browser and Canvas on the other, so you can switch back and forth easily. 2. Pasting into the HTML Editor tells Canvas where you want the interactive Trinket to go. Just click the HTML Editor tab, find the place on your page you want the trinket, and paste.
From the HTML Editor:
3. You’re done! Send your students to the new page during class and everyone will have their own interactive trinket to run and customize! I like to plan hands-on, open-ended activities for class using the trinket and then discuss student work as a class to see the various ways that students have approached the assignment. Now that you know the basics of how to put an interactive trinket into Canvas, let’s explore some of the creative ways you can use this new-found superpower.
Formative Assessment with Interactive Quizzes!
When I say ‘quiz’, you might be thinking multiple choice. And you certainly can put a Trinket in a multiple choice quiz on Canvas. As above, just paste the embed code into the HTML view, just like above.
But you can also use Trinkets and Canvas to ask open-ended, critical thinking questions. Just combine and interactive Trinket with a question that students will need to think or work on for a while and answer in an ‘Essay question’ format.
Summative Assessment Ideas
Ready for some summative assessment? Put an interactive trinket in a Canvas Assignment. Give instructions to customize the code to complete the assignment, then submit the Share link and any comments or reflections. The interactivity opens up several neat possibilities for your teaching. For instance, the assignment could be to use the following circle function, random numbers, and loops to create randomly colored polka dots (click Run): Here’s an example of what a student might submit (click Run): By making this assignment about for loops and random functions qualitative, you have a chance to see how each student approaches the problem and give them feedback. You’ll see an amazing amount of variety in student code for an open-ended assignment like this, and talking about 2 or 3 interesting approaches in class is a great way to help students understand that there really are many ways to creatively approach and solve a problem in programming. For instance, a student might use two for loops, one for each of 5 colors, and one providing random coordinates, and realize that there are more efficient ways to accomplish the same goals. A particularly motivated students might find a way to generate truly random colors via random numbers. I’ve found that students will get inspired by the different prooaches their classmates take and will likely try them out in the next assignment. That’s about it! Ready to get started? Sign up and get going! Already a trinket user? Log in to put trinkets in your Canvas courses and, as always, let us know what you think!
