January 12, 2020

Advice Randomizer for Spring 2020

There is a little experiment for this semester that I am really excited about: an advice randomizer for the sidebar of my announcements blog. You can see it in action here, and this is a screenshot (that's a random cat above the random advice):

The contents of the randomizer come from an advice Padlet that students fill out at the end of the semester (see the Padlet; there's a link to the Padlet there in the sidebar too), and the randomizer is a way I can re-use that advice, presenting it to students in tiny snippets every time they look at the announcements blog. Since that blog is our Canvas homepage, they will see it often! (see screenshot below of blog in Canvas)

This is yet another example of why I find randomizers really helpful. When you have a TON of content you want to share with students, randomization lets you present that content in small pieces, iteratively, in a way that is much more effective than a giant document to scroll through. If I were to give my students a 10,000 word document which contains the text of all the advice in the randomizer, that would not really be very useful. The Padlet is a great way to collect the information, but a poor way to present it as soon as scrolling is involved. I was really excited when I realized how easy it would be to turn the Padlet text into a randomizer, and I've written out the instructions below for anyone else who wants to try something like this or a similar text-based randomizer.

How to Make Your Own

NOTE: I wasn't sure at what level to write these instructions, and it also varies based on which specific tool you want to use. For the actual creation of the javascript I use, a free web-based tool that one of my students created long ago (over 15 years ago!) and which is still going strong. The basic idea is that you upload an HTML table in a file, and the tool then randomizes the content of the table, row by row. To create the table, I use a spreadsheet which I paste into an HTML file afterwards, but you can also do the work in the HTML file directly (RotateContent will even generate the file for you!). I just find working in spreadsheets congenial, and I created a spreadsheet you can copy if you want.

After you make your own randomizing javascript, you need some webspace where you can host your widget. I use webspace from Reclaim Hosting (they are AWESOME; plans start at $30/year). You might also have some webspace available through your school. If you are stuck without any space you can find, let me know, and I can host your javascript for you.

Anyway, if there is anything in these instructions (written admittedly in haste; everybody's busy at this time of the year!), let me know and I'll fill in more details, add screenshots, adapt to your specific circumstances, etc. Easiest way to contact me is at Twitter: @OnlineCrsLady, or you can email me:


Here's how to make your widget:

1. Copy the Advice spreadsheet. You can change the title of the spreadsheet to whatever you want.

2. Paste in your advice snippets row by row in Column B. Make as many new rows as you need, and copy the contents for Column A and C. If you have your text all in a plain text file, with a line break between each snippet, you can paste that in all at once; Sheets will put each new line of text in a new row of the spreadsheet; that's the main reason I use spreadsheets to create my widgets. So powerful!

3. Now you are going to make an HTML file. You need a plain text editor; if you don't have a plain text editor you use, you can use online. In your spreadsheet, use Select-A to highlight all the columns and rows, Control-C to copy, and then Control-V to paste into the plain text editor. (What I actually do is to create the HTML file in my Reclaim space and use their editor.)

4. Save the file as advice.html (or whatever name you want to use). Make sure you use .html as the suffix.

5. Go to (you are skipping to Step 4) and choose "javascript" as the option, and then choose your HTML file, and convert template. Then right-mouse click when the file is ready, and save-link-as to your computer (the default file name will be advice.js if you uploaded a file name advice.html). If you're curious what the file looks like, just click on that link; you will see the actual javascript file displayed in your browser (it's kind of cool-looking... and hey, you have a javascript now, without having had to write a line of code!).

6. Now you need to upload that javscript file to wherever you will be hosting it. Just how that works depends on where you are hosting your files. I keep all my scripts in a subdomain at my Reclaim site which I call "widgets," so that means my file address is:

You need to know your file address for the next step. And the address should be https if possible (many web environments now require https for embedded content).

7. And here is how you put the javascript into a webpage; you just put your file name in the blank:

<script type="text/javascript"> var display = " " </script><script type="text/javascript" src="___"></script>

So that means I use this HTML snippet to display my randomizer:

<script type="text/javascript"> var display = " " </script><script type="text/javascript" src=""></script>

You can paste that in wherever HTML and javascripts are accepted. I use them in blog posts, in blog sidebars, and in the pages of our class wiki. Here it is below, for example:

Javascript in Canvas... that's harder. Canvas does not allow javascripts directly like this (unless you are a system administrator, and I'm not...), so the way to get around that is to create another HTML page which you upload as a Canvas File and then you iframe that in a Canvas Page. If I should provide step by step instructions for that, let me know.

[Of course if Canvas really were a "learning management system" there would be a way to host real files and use real scripts... but Canvas only lets you do what it lets you do, and it doesn't let you do much. That's a separate topic.]

Since I love to use blogs, the way I get around the Canvas problem is by using my blog inside Canvas: the javascript is fine here in my blog, and then I just iframe my blog itself into Canvas to make it the home page. You can see how that works in the mythology class: (course is open). I have lots of randomizers in my blog sidebar, and they all work fine in Canvas since they are not really "in" Canvas, but instead just in my blog... and Canvas, thank goodness, does not try to control what I put in my blog. :-)

Lots more information here: You can use any/all HTML in that spreadsheet. So, for example, to make the different colored backgrounds in mind, I just picked some colors to use as background-color style for each row at random (I was inspired to do that because the Padlet uses colors like that).