Javascript Magic in Canvas: Randomizing Widgets, No Coding Required!
Laura Gibbs
Online Instructor | University of Oklahoma
laurakgibbs@gmail.com | @OnlineCrsLady | MythFolklore.net
During the presentation, you can access the live slidedeck via�CanInnovate.LauraGibbs.net
#CanInnovate19
CanInnovate.LauraGibbs.net
I can't use widgets in these slides, but you can see some widgets in action here:
That's a blog embedded in Canvas, so you can see widgets in the blog posts and in the blog sidebar.
Plus, you can browse that Canvas site, which is a Widget Warehouse, with javascript widgets to copy-and-paste.
#CanInnovate19
RotateContent.com
I make these widgets with an online tool built by a former student, Randy Hoyt:
This tool is over 15 years old, and still going strong, free for anyone to use.
It takes content in an HTML table, and then it creates a Javascript that displays the content at random.
#CanInnovate19
Instead of Big Data...
I love Star Trek, but I'm no fan of
big data
surveillance
personalization
predictive algorithms
So I would like to present an alternative:
#CanInnovate19
The Power of Random
Random content provokes curiosity because random things are fun and UN-predictable.
Randomization lets you share lots of content in a small space.
Randomizers keep content fresh automatically, without you having to update content manually.
In this presentation, I will focus on random widgets that you can use in Canvas.
#CanInnovate19
From HTML to Javascript
For example, here is the HTML table with the Magic 8-Ball responses, and the resulting Javascript.
And here's the Magic 8-Ball in action!
#CanInnovate19
What kind of HTML content...
RotateContent.com can randomize any kind of HTML that you can think of:
text...
links...
images...
videos...
video playlists...
javascripts...
I'll show examples of all of these in the following slides.
#CanInnovate19
Randomize Text
Remember the Magic 8-Ball?
There are 20 classic responses.
I created a randomizer with those 20 responses, just the text.
The text displays at random, while the image stays the same: Magic 8-Ball.
#CanInnovate19
Randomize Links
I use randomizers to assign students to comment on each other's blog posts. The randomizer means that the effort is spread equally throughout the class, without having to make groups.
#CanInnovate19
Randomize Images
Here's a Tarot Card randomizer.
I made a version where the cards are always right-side up.
But I also made a version that includes reverses!
See it in action in the blog sidebar at CanInnovate.LauraGibbs.net.
#CanInnovate19
Text and Links for Images
When I use images, I transcribe text in the image for accessibility.
And for curiosity, I include a link; in this case, the link goes to a post at the Mindset Cats blog.
My hope is always that people will be curious about an image, so that they will click, and learn more!
#CanInnovate19
Alt-Text Tag for Images
The alt-text tag can also increase accessibility for images.
To see how that works, you can use the Collusion browser extension.
#CanInnovate19
Randomize Videos
You can create video randomizers by
using the embed option at YouTube (and also at other video sharing sites).
Here's a Byte-Sized Canvas video randomizer, available as 200-pixels
or 400-pixels.
#CanInnovate19
Randomize Video Playlists
YouTube lets you embed videos, and it also lets you embed playlists. So, you can randomize playlists.
Here's a widget that randomizes playlists: Random Playlists.
There are 8 different playlists there, and they load at random.
#CanInnovate19
Randomize Randomizers
You can put any kind of HTML content in the RotateContent table, including javascripts. That means you can randomize randomizers!
As an example, here are Random Cats. This shows four of my cat widgets at random: Mindset Cats, Shakespearean Cats, GrammarCatz, and Latin LOLCats.
#CanInnovate19
... you can even randomize Twitter!
I created a widget that displays Twitter accounts at random;; I put about 20 different Twitter magazine accounts in this randomizer:
And yes, it works in Canvas! :-)
#CanInnovate19
Special Bonus: Twitter widgets too!
Yes, you really can display Twitter accounts in Canvas!
All the details about how to do that here:
#CanInnovate19
Javascripts in Canvas???
No, Canvas doesn't like javascript. But it likes iframes just fine!
So that's the trick:
Create an HTML page with the script.
Then iframe that page in Canvas!
That's how I get random images in my Canvas Syllabus page, for example.
#CanInnovate19
Canvas Widget Warehouse
The Canvas Widget Warehouse is a place where I have created Canvas-friendly iframe code to share.
I can also create Canvas-friendly versions of other widgets that I've made; just let me know.
Just copy the iframe and insert it in the "embed" Canvas rich text editor:
#CanInnovate19
Contact me with questions!
Do you have your own webspace? You can create your own widgets! Here's how: Create Your Own Randomizers.
I'm not going to get into lots of technical details here... but I am glad to brainstorm and also to troubleshoot!
I'm at Twitter @OnlineCrsLady, or you can email me: laurakgibbs@gmail.com.
#CanInnovate19
And a huge THANK YOU
to Michelle Pacansky-Brock and to the ONE Online Network of Educators for this great event,
and to Randy Hoyt for this amazingly powerful and very long-lived tool. Check out Randy's board game company, Foxtrot Games too:
#CanInnovate19
plus a SHOUT-OUT for Reclaim Hosting!
I'm able to host and share these widgets thanks to Reclaim Hosting and their "Domain of One's Own" program, which we call OUCreate at my school. Reclaim Hosting offers individual hosting plans also!
#CanInnovate19