Laura Gibbs

Mad Canvas Skills and Google Sites Javascripts: whoo-hoo!

Blog Post created by Laura Gibbs on Mar 3, 2019

So I had a huge ... HUGE ... Google Sites breakthrough this weekend, and it is all thanks to Canvas. I figured out that I could use the same workaround to make javascripts run in Canvas (without special admin permissions) to make those javascripts run in Google Sites!


You can see an example here: it's a Google Site page in my class project (like my students, I have a Google Site for my project) -- Random Hanuman Art. On the left you'll see a Hanuman artwork from South Asia, and on the right a random Hanuman from India, with new art at random whenever the page reloads.


screenshot of Google Sites


Here's the same pair of widgets running a Canvas page: Hanuman Widget. Same here as in the Google Sites page: new images at random each time the page reloads.


canvas course screenshot


That page is inside my Widget Warehouse which is full of randomizing javascript widgets you can take and use in any Canvas course.


Stealth Javascript


Canvas will not let you run javascript (unless you have admin privileges), and Google Sites is also javascript unfriendly (unlike Google Blogger which, I am glad to say, does not require any javascript works around; just call the script and you're good to go, so you will see Hanuman randomizing in my blog sidebars at my class blog).


So, what is the secret? The secret is to host a very simple HTML page with nothing but the script call in your own webspace (or, in the case of Canvas, you can host the page as a Canvas file... at least for now; I worry, though, that future security measures may remove that option).


It sounds weird, but once you get used to the workflow, it's totally doable:


STEP ONE: Create script. I create my script with (a tool that converts HTML tables into randomizing javascripts), and then I upload the javascript into my own webspace. So, for example, here's my HTML table of Indian Hanuman images, and here is the script that randomizes them


STEP TWO: Create HTML page with script. Then I create a simple HTML page which calls the script. This is the HTML page that calls the script of Indian Hanuman images. If you click on that link, you will see the results of the script running, and the script is running there on my server. The results that script returns are just HTML. If you look at the page source, you can see the script call.


STEP THREE: Embed the HTML page. In Canvas, the way you embed a page is with iframe, but with Google Sites it is even easier; you just choose the embed option and paste in the URL of the page; it even gives you a little preview so that you can know what to expect:


Google Sites screenshot of embedding


So, I am pretty excited about this. I don't do a lot with Google Sites, but one of the reasons I have hesitated to make much use of Google Sites was because I was frustrated not being able to use dynamic javascripts. Now that I have figured out how to do that, I feel more in control of the space and more eager to explore, just as I became more eager to work with Canvas when I learned how to include javascript content here.


Final Thoughts


I love javascript! Being able to bring dynamic content into my websites is really important to me, and so is distributed content (i.e., I can keep adding new images to my widget and the new content appears wherever the widget is embedded). I understand that there are security concerns that make platform administrators curtail the use of javascript, so I am really glad to know about this workaround of calling the script in my own webspace while embedding the results elsewhere.


I learned about this workaround from Sharmaine Regisford and James Jones when I first started using Canvas a couple years ago... and — doh!!! — I finally realized the same solution works for Google Sites also. 


P.S. This is the same workaround that makes Twitter widgets possible in Canvas. More about that here: Twitter4Canvas.


P.P.S. This is why I think everyone needs a Domain of One's Own where they can host their own (distributed, dynamic) content. My school uses the awesome Reclaim Hosting: hosting by educators for educators! At my school, it's branded as OUCreate, and it's free for students, staff, and faculty. Reclaim + Canvas: it is a powerful combination.


Reclaim Hosting graphic