Become a Javascript Wizard in Canvas: HTTPS is the key

I’m taking a break today from the series of posts on Grading to share something fun: a Gaudium Mundo javascript for Latin holiday songs during the month of December. My school won’t let me teach Latin, but that doesn’t stop me from making javascripts and sharing them at my Bestiaria Latina blog.

In this post, I’ll explain the double-hack that mere mortals need to display javascripts inside Canvas. All it requires is the magic of HTTPS webspace so that you can host both the javascript and also the HTML webpage that you will use to sneak the javascript into Canvas. Here’s how it works:

1. Create your javascript. I use the wonderful free tool RotateContent.com to create my javascripts; I’ll write up a post later about just how that works. Zero programming required! You just create an HTML table of the content you want to use (date-based or random), and thenĀ RotateContent generates the script for you. For Gaudium Mundo, I made two scripts: one 400 pixels wide, and one 200 pixels wide. New songs appear automatically each day of December; I don’t have to do anything. It’s automatic! šŸ™‚

2. Create an HTML webpage. Next, I create a vanilla HTML webpage which does nothing more than call the script. You can see the page here: Gaudium Java. When I said vanilla, I wasn’t kidding! All it does is call the script.

3. Use iframe in Canvas. Then, all you have to do is use iframe to embed the contents of the HTML page where you want it inside a Canvas page. For example, here I split the page and made the script display in the right-hand column: Javascript: Gaudium Mundo.

screen-shot-2016-12-02-at-10-37-53-am

If you are a Latin teacher and want to use my script and page, go ahead; I am glad to share! You will find the iframe code there on theĀ Canvas page,Ā and if you want the script for use in a blog where javascripts are allowed without the extra layer of the iframe, you can get the javascript here.

And whether or not you are a fan of Latin holiday songs, I hope this might inspire other Canvas users who have access to HTTPS webspace to experiment with creating javascripts and displaying them inside Canvas. It is a fun and easy way to add dynamic content to your classes! Plus, you can choose to share your scripts with others if you want. For more examples, see my Writing Motivation widget in Canvas, and … of course … the Growth Mindset cats in Canvas.

screen-shot-2016-12-02-at-10-36-08-am

Thanks as always to Reclaim Hosting for putting the magic power of HTTPS under my control. We can all be javascript wizards in Canvas this way!

screen-shot-2016-12-02-at-10-34-28-am

Crossposted at OU Canvas Community.


Here’s the script in action:

css.php