RotateContent.com:
Turn HTML Tables into Javascripts for Distributed Content Everywhere
URL: Domains.LauraGibbs.net
by Laura Gibbs (@OnlineCrsLady). URL: Domains.LauraGibbs.net
This is a Guide for my presentation at Domains on June 11, 2019. It is also a Guide you can use anytime anywhere to learn about randomizing content widgets built with the free RotateContent.com tool... this tool was built by an OU student back in 2003 (not a typo!), and it is still going strong. :-)
The Google Doc version is open for comments and/or if you prefer that viewing mode. There is also a Suggestion Box. Or you can find me online at Twitter @OnlineCrsLady. Ping me with any questions!
Table of Contents
RotateContent.com Randomizers in Action
The Five Powers of Random and of Widgets
New RotateContent.com for the New Millennium?
More Advanced RotateContent.com User Tips
Include Links that Lead to More
Using Spreadsheets to Quickly Generate Table Rows
A Quick History of RotateContent.com
This is an all-purpose Guide to the free online tool, RotateContent.com, which you can use to turn HTML tables into javascripts in order to display random content in any webpage where javascript is allowed. Plus, using iframe you can even sneak the javascript into webpages where javascript is not allowed, such as inside Canvas LMS.
You don't have to know any javascript; you just have to be able to use an HTML editor. Alternatively, you can use a spreadsheet. Basically, you just have to know how to type! The RotateContent.com tool does all the hard work of actual coding for you.
I've prepared this Guide for the Domains19 conference in June 2019, but it is meant to be a freestanding document that you can use anytime to learn about javascript widgets and to start creating your own.
My goals for the conference presentation:
Listen and Learn | Hands-on Learning |
5 min.: View some RotateContent.com javascripts in action. | |
10 min.: Tour the Canvas Widget Warehouse, learn more about RotateContent.com features. | 10 min.: Build your own custom Magic 8-Ball script using RotateContent.com. |
5 min. Brainstorm, share, question-and-answer. |
To get things started, I want to quickly show you some examples of randomizing scripts in action in some of my webspaces. All these scripts (and their images too) are hosted in my Reclaim space, and that Reclaim-hosted content is then deployed in these other spaces. Screenshots below are static; click on the link to see what the widgets serves up for you at random.
Randomizers work great in blog sidebars! Here are some examples:
Made for Domains: Magic 8-Ball and Tarot
There's a Magic 8-Ball in sidebar of OU Digital Teaching. Later in this presentation, you'll have a chance to make your own Magic 8-Ball. There's a Tarot card randomizer that I made there also. In fact, I made two Tarot decks: one with the cards right-side up, and one with the option of cards reversed for those of you who want to explore that other side of the deck. (It freaks some people out, but hey, it is part of the Tarot tradition.)
Class Announcements: A blog... inside Canvas
There are a lot of different randomizing widgets in the sidebar of my Class Announcements blog, with Growth Mindset cats at the top. Each different cat has a link to a blog post with more details. Check out that blog sidebar for more randomizers. I use that external blog as my Canvas homepage; same blog, two classes: Myth-Folklore and India.
The blog inside Canvas:
Different cats in those screenshots because it's a random cat whenever the page loads, either inside Canvas or as a freestanding blog.
Browsing the Freebookapalooza Library
Randomizers are great for really large amount of content, like the 1000+ books at my Freebookapalooza of free full-text books online. You can see a 200-pixel-wide widget in the sidebar that shows a random book (it links to a post at the blog), and in the blog pages there is a 400-pixel-wide version of the same widget; you can see different randomizers for the main areas Africa - India - Native American - Pacific. (Each book links to a post at this blog.)
In the India Page space, there's a script with just the India books. In the sidebar, there's a script that displays a script at random (because, yes, you can build a randomizer of randomizers) drawing on all the areas of the Freebookapalooza Library.
Browing the ACK Comic Books in OU's Library!
I use a similar approach at the Amar Chitra Katha comic books blog where I share all the comic books in the OU Library that are relevant to my Indian Epics course, with a 200-pixel-wide randomizer in the sidebar, plus some 400-pixel-wide randomizers on the blog pages for the subareas: Ramayana - Mahabharata - Krishna - Divinities - Legends - Folktales. Yes, we have the complete ACK collection (shout-out to the awesome people at OU Libraries!), and the randomizers help surface those titles for the students to see/browse.
So, for the Divinities Page, there's a 400-pixel-wide randomizer of just those comic books, while the randomizer in the sidebar is showing comic books from any of the areas, 200-pixel-version. As you'll see later, you can manage all this content in a single spreadsheet so spitting out these different scripts for different widths doesn't take more than just a few minutes.
My Big Brer Rabbit Project
At the Brer Rabbit blog, there's a 400-pixel-wide random illustration on the homepage, and a 200-pixel-wide version of the widget in the sidebar that appears on every page. There is just one image file; I configure the scripts with different widths (see Advanced Tips below for image management strategies; the spreadsheet approach makes that super-easy).
You can also use javascript in any other kind of webpage, not just in blog posts and blog sidebars.
For example, on the homepage of my course wiki you can see a student project displayed at random, linking to students' past class projects. I've got literally hundreds of student projects in the archive, so the powers of randomization are working great here to surface all that content. I use this widget all over the place in my different course webspaces because constantly surfacing the student projects is the best way I can support and inspire current students working on their own projects:
On the weekly assignment pages at the wiki (here's a typical week), I include a random graphic, each of which links to a blog post at one of the class-related blogs (writing support blog, reading support, etc.). The students look at these assignment lists repeatedly each week; this way there are inspiring or thought-provoking graphics so that the page is different each time.
I also use randomizers in the specific assignment pages at the wiki for students commenting on each other's blogs and on their websites; I use a spreadsheet to update these widgets weekly. The script stays the same; I just update the content weekly. I don't have to change the webpage — I just update the script. I have approximately 90 students in my classes, and randomization is a great way to spread the comments around so that everybody, overall, gets the same number of comments:
This class wiki is almost as old as the randomizer tool itself! The randomizer tool dates back to 2003 (more on the history below), and I've been using PBWiki since 2005. One of the reasons I chose PBWiki as a space back then (obviously way before Domains came to my school) was because it is so javascript-friendly. I know I should move the content to a new space, but comfortable inertia has kept me at PBWorks, happily randomizing, all these years.
And... there are even ways to sneak the javascript into javascript-hostile environments like Canvas and other LMSes. Read on...
Javascripts are not allowed directly in Canvas LMS, but don't let that stop you! You can host the script in a vanilla webpage in your own webspace, and then iframe that page in Canvas LMS. (Thanks to Sharmaine Regisford for teaching me this sneaky Canvas hack.)
So, for example, here are those random growth mindset cats in a Canvas Page. The Canvas course is open, so just click and go; see what cat pops up for you there! (This is a resource class where I share information about growth mindset and feedback with students across my different classes, along with anyone else who is interested.)
You can also include javascripts in any area of Canvas that has the rich text editor, such as the Syllabus. Here's my Indian Epics course syllabus which displays an image at random each time: India.MythFolklore.net. (The syllabus never changes... but the images are always changing.)
I've also got a Canvas Widget Warehouse for anyone who wants to use my scripts in Canvas; I'll say more about that later.
The same iframe solution that works in Canvas also works at Google Sites! Here's an example at my class project for Indian Epics last spring; there's a random South Asian Hanuman on the left, and an Indian Hanuman on the right: Hanuman in the Ramakien - Random Art.
Take a look and see what Hanuman images you see. Each one links to its own post at the Indian Epics Images blog where you can learn more.
And now... if you would like to quickly create a simple randomizer of your own, I've got some options here for creating and deploying a Magic-8 Ball. Divination by randomness! To see how it works,I also put an English version in the sidebar of my Digital Teaching blog.
I've also created a Latin version for the sidebar of my Latin blog: Bestiaria. (The ancient Romans would have loved this; so much cleaner than cutting up sheep or chickens in order to inspect their entrails as in their divination practices...)
Customizing the 8-Ball. You can use the classic responses or change them to whatever you want. You can also have way more than 20 possibilities; you are not limited by the physical icosahedron as in the physical Magic 8-Ball.
Here are three different ways you can play with the possibilities:
Option 1. Edit HTML file. Then, convert HTML into javascript. You can then use the javascript in a blog post, blog sidebar, webpage, wherever! I've put those classic responses (from Wikipedia) in an HTML file which you can copy and edit. Change some or all responses, add more options, fewer options, whatever you want; step by step details below.
Option 2. Edit spreadsheet. (This is my preferred method.) After editing the spreadsheet, copy the resulting column of HTML code into an HTML file, and convert that file into javascript. I've put the classic reponses in a spreadsheet you can copy and edit as you desire. See the step by step details below.
Option 3. Skip the editing (Steps 1-5 below) and just use my javascript file so you can focus on using the javascript in a blog post, etc. Here's the code you can use to insert my Classic Magic 8-Ball javascript. See below for details; you can skip straight ahead to Step 6!
To give you a sense of the process, I've made a video of how to take the content you create (I've used the spreadsheet option) and turn that into a javascript which you can publish in a blog or other webspace. It literally just takes two minutes. YouTube link (with audio & captions).
STEP BY STEP DETAILS:
That works a little differently for each option:
HTML: Right-mouse click and save the file to your desktop so you can open and edit using the HTML editor of your choice:
Spreadsheet: From the File menu, choose the Make-a-Copy option:
Classic Magic 8-Ball Spreadsheet.
You can type text, and you can also use HTML tags for formatting if you want.
HTML: Save the edited file when you are done.
Spreadsheet: When you are done, you need to copy the left column of the spreadsheet into an HTML file, which you can create with a plain text editor, or just use editpad.org if you don't have a handy plain text editor. Copy the left column, paste into the plain text editor, and save the file with an .html suffix.
You should now have an edited HTML file on your computer. To convert the HTML to javascript, go to RotateContent.com and select the javascript option. Choose your file, and then click the "convert" button.
You will then see the link to your javascript (.js) file. Right-mouse click and save the javascript file to your desktop.
Log in to your domain and upload the file with the File Manager (you can put the file wherever is convenient for you). You can also upload the HTML file if you want for future reference, but that is not necessary for the script to work.
You can use the script anywhere that javascripts are allowed. For example, you can use it in a blog post: Magic 8 blog post. Here is the HTML code you need to call the script:
<script src="URL OF YOUR SCRIPT" type="text/javascript"></script>
If you want to just use my script, you can do that; scripts are totally shareable! Here's how that works for my 8-Ball script, hosted at my Reclaim space: just copy and paste this snippet and insert it in your own webspace if you want:
<script src="https://widgets.lauragibbs.net/domains/magic8classic.js" type="text/javascript"></script>
If you want to use my Latin Sphaerula Divinatoria, you would use this snippet instead (different file name):
<script src="https://widgets.lauragibbs.net/domains/latin8ball.js" type="text/javascript"></script>
This 8-Ball script is only returning the random bits of text, the bits of text from the HTML file. The rest of the presentation (the 8-Ball image, the horizontal rules, etc.) is static content around the dynamic content. For example, in my Bestiaria sidebar, I put the script in-between two horizontal rule lines, with the random content centered, and also bolded and italicized. You can also build scripts that have images, formatting, etc., but for the purposes of this demonstration, I chose a text-only approach to the script content (for more about scripts with images and other multimedia, see below).
One of the most powerful things about javascripts is not just that they are dynamic content... they are also content that you can share! So, in addition to building scripts for your own use, you can share your scripts with others (see above, where I shared the script URL for my 8-Ball).
I am not a fan of the closed-off world of the LMS, but you can use javascripts and other dynamic content to liven up LMS pages, so I created an open Canvas course to share all my public widgets. Here is the address: Javascript Widget Warehouse. On the homepage, you can see a random script display (and yes, you can make randomizers of randomizers; more about that below).
For each script, I am both hosting the script in my Reclaim space, and I am also hosting a vanilla HTML page which calls the script. To get the script to work in Canvas, people can just iframe the HTML page, and I provide that code snippet. So, people can use the javascript if they want (in a blog or other webpage that allows javascript), OR they can use the iframe version in Canvas.
For example, here's the page where I share the Growth Mindset Cats. You can see the script in action there, and it has all the links and information needed to deploy the cats in your own Canvas Page.
I also provide a link to the source table so that people can also adapt that for their own purposes: leave some cats out, add cats of their own, etc. If they do that, though, then they also need a place to host the resulting javascript and HTML page. Canvas will not let you run the actual javascript; that has to happen in your own space.
Which is why every Canvas user needs Reclaim Hosting..........!
The same strategy used for these javascripts also allows you to embed dynamic Twitter widgets in Canvas too if you want. Here is a step-by-step guide to Twitter4Canvas.
Here are some ideas to think about:
Random keeps site content fresh.
If you have pages that students visit repeatedly (syllabus, calendar, etc.), a randomizing script can make sure there is something new each time the page loads. You never know what will prompt someone's curiosity!
Random adds an element of fun and mystery.
Mystery! That's why I made Magic 8-Ball and Tarot examples. Many cultures have used randomness for divination, like the sortes Virgilianae. From sortes to sorcery: magic! More info: Bibliomancy.
Random is a way to surface large amounts of content.
There's nothing like a long list of links to stifle the browsing experience, especially for the links way on down the list. Randomizing widgets are a way to surface content more effectively than a long list of static links.
Javascript widgets are distributed content.
If you want to update a script (fixing errors, adding content, etc.), you update the script once, and the updated content appears everywhere. It's a great example of POSSE in action: Publish (on your) Own Site, Syndicate Elsewhere.
Javascript widgets are shareable content.
Syndication can mean across your sites but also across other people's sites too! If you share your script address with others, they can display your content in their own space, and they will get the updated version of the content automatically as you maintain and update your scripts.
In short: instead of using an HTML table as a kind of kludge to maintain a data array, what if there were a randomizer feature that was available through a true content management system?
As you can see, the HTML table is just a throw-away part of this system, a way to provide the creator with a familiar interface in which to organize the content in a way that can be converted into an array. That's why it is actually just as easy, or maybe even more easy, to put the content into a spreadsheet, using the structure of the spreadsheet to provide that array-like interface.
Either way, though, the HTML file and the spreadsheet are just primitive hacks (remember, we created this system back in 2003!) so that users without any coding skills can get content into a javascript array.
So........ imagine adding that option into a content management system which already has structured content and a good user interface for managing that content. I personally think it would be very cool (VERY COOL) if a content management system made it easy to create javascript randomizers in order to distribute the content widely!
If anybody is interested in working on something like that, I am glad both to contribute content and to be a guinea-pig user in the experiment. :-)
*** Whoo-hoo: Bryan Ollendyke has already got some ideas about randomizing HAX: see his tweet. :-)
I will list out here some of my favorite strategies and lessons learned from many years using this tool for many purposes.
Almost all of my javascript widgets include links to blog posts where people can get more information. Yes, I use widgets as a kind of "eye candy" ... but I'm always optimistic that when something really does grab a student's attention for whatever reason, they can click and learn more, either with a link to a blog or a link to a specific blog post. My goal is not just to surface the content of the widget itself, but to surface all the content to which the widget connects.
Remember to use absolute links and not relative links. That means the whole address. If you use an HTML editor to create your raw source file for the javascript, you may have to disable any relative-link default options in your HTML editor in order to make sure any links in the file include the full http address and path.
You can use iframe to get around javascript restrictions in LMSes and other restricted websites such as Google Sites, etc. I showed some examples above, and here is more specific information about how it works; let's take that Growth Mindset Cats Canvas widget for example. The text snippet that you can paste into any Canvas page looks like this:
<iframe src="https://widgets.lauragibbs.net/canvas/gmcatsjava.html" width="450" height="800"></iframe>
As you can see, it's an iframe, and the webpage that the frame holds is a webpage in my Reclaim Hosting space. The webpage looks like this (click the link; you'll probably see a different random cat):
In other words, it's nothing but the content returned by the script. Here's the HTML view of that page:
Literally all the page does is to call and run the script, but that's actually important. The script is running inside my Reclaim Hosting space; the script is not running in Canvas. All that Instructure's server receives is the HTML content that the javascript returns. Canvas is okay with that, even if Canvas refuses to let instructors include javascripts directly.
Yes, there are drawbacks to the iframe workaround. Two drawbacks in particular:
Height. If you use widgets where the content has variable height (like images), you probably are going to have to set the height value to an artificially large size to accommodate the tallest possible image.
CSS. The iframe means that the CSS is not going to apply to the contents of the widget. With a javascript, style tags and CSS from the page work on the displayed content, but not so in an iframe.
But hey, those design limitations are a small price to pay for being able to bring dynamic content from outside into the otherwise extremely static world of the LMS!
In addition to getting around javascript barriers, you need to make sure you are using https for script addresses and media assets.
So, for example, if you are trying to develop content that will display in an environment like Canvas, it is essential that you use https for the iframe page, along with the script and all the assets (like image files) that are being called by the script.
Also, keep in mind that links in the scripts should also be https OR you should open the links in a new tab. As a general rule, I configure the links to always open in a new tab because you never know just what kind of environment in which people might be using your scripts. In Canvas, for example, the Pages spaces is a terrible place in which to open webpages (students cannot even see the URL of the page), so I'd recommend configuring all links in a script to open in a new tab.
As mentioned above, you need to use absolute links and https to make sure your images will display properly when the script runs.
In addition, you can also think about being strategic with image width formatting. As mentioned above, I often create two different versions of a script: one with images that are 200 pixels wide to display in a typical blog sidebar, and one with images that are 400 pixels wide to display in the body of a blog post or webpage.
To do that, I use the "width" parameter in the img tag. I start by making sure all my images are at least 400 pixels wide. Then, I am free to use the width parameter to set the width to 200 pixels or 400 pixels as needed. In fact, it's easy to take an HTML file and do a find-and-replace to switch the image width parameter. You can also do find-and-replace in the resulting javascript file. Either way works!
I usually include 200 or 400 in the file names in order to remind me what's what. For example, here are the growth mindset cat scripts:
https://widgets.lauragibbs.net/gmcats/growth200.js
https://widgets.lauragibbs.net/gmcats/growth400.js
I create almost all my scripts using spreadsheets instead of an actual HTML editor. You already saw a simple example of that in the Magic 8-Ball above, where the spreadsheet had two columns: one column for the content you type in, and a column where I used a "concatenate" formula to add the HTML wrapper to each content row.
For more elaborate examples, you can have multiple columns of content where you manage separate items column by column: text, link, image src file, etc., adjusting the concatenation formula as needed to string the variable content with the generic HTML that formats the row. You can also use the spreadsheet to manage other information about the content that is not even relevant to the javascript (I use these spreadsheets to manage my workflow in projects, for example).
To see how that works, here's my Tarot spreadsheet. For each card, I have the name of the card, the URL of the Wikipedia article about that card, plus the URL of the image file from Wikipedia that I'm hosting, plus the widget of the image (same for all rows) and the general information page for the widget (same for all rows).
You really can put any kind of content inside the HTML table cells, and that includes calls to other scripts. Which means you can create a randomizer that displays another randomizer at random. This can actually be very useful! Remember the Freebookapalooza example above? I have scripts for the different areas of the library: Africa, India, etc. Then, to display books from the whole library at random, I created a script that randomizes those individual randomizers. Here's the HTML table (you'll see it displaying random content in each cell), and here's what the script itself looks like; each item in the array is itself a randomizing javascript:
Randomness at random! That's also how the randomizer works on my weekly course content pages, choosing at random a randomizer that I built for each of the class support sites.
You can also create date-based content, and you can repurpose your date-based content as random content too if you want! So, for example, you can make a "Something of the Day" or "Something of the Week" type of javascript. Instead of displaying at random, the content displays based on the date.
Date-based content is very similar to the random content. The only difference is that in the left-hand column of the HTML table there is a date instead of the word "random." The RotateContent.com site will generate the HTML files you need for that, based on daily or weekly content, content for a specific year or perpetual (i.e. good for year after year), etc. Just follow the steps at the RotateContent.com site for Date-Based Content: Fixed Date and Perpetual.
In addition, you can randomize the date-based content if you want to provide both a date-based and a random version of the same content. The key to that is adding a variable to the script call; here's an example of how that works:
<script type="text/javascript"> var display = "random" </script>
<script type="text/javascript" src="https://widgets.lauragibbs.net/gmcats/growth400.js"></script>
In addition to date-based content that you create, you can use RotateContent.com to create a date-based progress meter. You can see how that works here: Progress Meter. And you can also get a sense of how old this system is because the graphics for the Progress Meter come from the Windows XP graphics collection. Yep, Windows XP was all the thing back in 2003 when Randy created this website. For more about the history of RotateContent, read on!
Back in 2003, I was looking for a tool for sharing both daily and random content with students at our course website and in my blogs. I hired a genius former student, Randy Hoyt, to build a tool that would translate content in an HTML table (which I knew how to create) into a javascript (which I did not know how to create).
Within just a few weeks, Randy came up with a very elegant solution that's still going strong over 15 years later at RotateContent.com, the online home of the conversion tool which Randy continues to host, making it free for all to use. THANK YOU, Randy! There are a few things that look a little weird there now, but what site doesn't look a little weird after 15 years, right? Main point: it still works great, and I create new scripts with it all the time (including each week for my classes, randomizing the newest blog posts for commenting).
And if you're curious, Randy is now a maker of board games at FoxTrot Games!
I hope people will ask questions. Then I can write FAQs! Even just AQs for any question asked, frequent or not. :-)
To ask questions, you can leave a comment at the Google Doc version of this Guide, ping me at Twitter (@OnlineCrsLady), use the Suggestion Box, or send me an email (laurakgibbs@gmail.com).
I'll be doing a presentation on Tuesday... but all the materials you need are right here in the Guide, so you definitely feel free to go weaponize your website with Jenn Hill from UMW, or hear the Blaxites story from sava saheli singh and Tim Maughan. You can ambush me anytime at Domains or at Twitter to hear me preach the gospel of random. :-)
This is the proposal I submitted (I'm including it here to make sure I remembered to include everything promised there, since I'm guessing that in 20 minutes we won't actually get through it all...)
RotateContent.com: Turn HTML Tables into Javascripts for Distributed Content Everywhere
Speaker: Laura Gibbs
If you can type, you can create a javascript with RotateContent.com! This is a free browser-based tool created by a University of Oklahoma student at the dawn of time, i.e. the year 2003 — and it’s still going strong (thank you, Randy Hoyt!).
How it works: you type content into an HTML table with as many rows as you want (as few as two, or hundreds of rows). The content of each row can be any kind of HTML code: text, images, iframe-embedded content (like video, or whole webpages), or even other javascripts. You then upload the HTML table to RotateContent.com which converts the content into a javascript that “rotates the content” either at random or based on dates you have supplied (“video of the day” or “image of the week,” etc.). The date-based content can be for a specific year, or it can be for a perpetual calendar that repeats year after year. You download the javascript, upload it to your own webspace (thank you, Reclaim Hosting!), and you can then use that script anywhere javascript is accepted: blog posts, blog sidebars, webpages, or even in an LMS like Canvas. If/when you update the script, the updated content appears everywhere.
Even better: others can use your script too! Just share the script address with them and they can use the script to display your content in their own webpages, blogs, etc.
And if you prepare an iframe version of the script which you host in your webspace, then people can use your script even in environments that do not accept javascript. That’s how people can use your javascript-delivered content in Canvas LMS for example, or in other webspaces where iframe is allowed but javascripts are not.
My goals for the presentation:
• Show examples of RotateContent.com random and date-based scripts delivering text, images, video, and also other javascripts in blogs, webpages, and in Canvas LMS.
• Guide people through the process of creating a RotateContent.com javascript: you can make a Magic-8-Ball script in just a few minutes, or whatever randomized content tool you are inspired to create.
• Tour my Canvas Widget Warehouse where I’m hosting scripts for people to use in Canvas LMS or any situation where iframe is allowed, but javascript is not.
• Explore the power of random content for sharing massive quantities of digital stuff and also for promoting student engagement in online course spaces.
• Brainstorm about how an enterprising genius person who knows how to code (that is not me!) could build an even more streamlined version of this tool for the modern era, perhaps even hosting the javascript content and iframe version for those teachers out there who do not have their own webspace.