How to add randomly rotating content in the sidebar or on Canvas?

Authoradmin / Posted onLeave a comment

Screen with black background and coloured writing in HTML code
Oh yes, HTML and JavasScript today, oh my! (but tiny baby steps only)
Image by James Osborne from Pixabay

Table of Contents

Level 1: Inside Canvas

Ok, hopefully I have convinced you that randomly rotating content is good for teachers and students alike, and you want to see this in action.

Look at the Growth Mindset Cat on the right. Refresh the page, and hey: there’s a new cat! This is something I learned from my friend Laura Gibbs, and I highly encourage you to explore her Catalog of Widgets, where she has many more you can borrow.

But how does it all work? Simples! I copy a piece of HTML code that has a piece of JavaScript embedded inside it, and I put that inside a widget on my website. Or inside a Canvas page.

Try it yourself: Create a page in Canvas, click on the </> symbol to open the HTML editor. Copy the following code exactly:

<iframe src="https://widgets.lauragibbs.net/canvas/gmcatsjava.html" width="450" height="800"></iframe>

Save the page, and you have your own growth mindset cats! If you now publish the page, your students can enjoy a free random Growth Mindset Cat, too. Mine LOVE them.

Level 2: In the sidebar of your own blog/website

You have a blog and want the cats in the sidebar? Sure! Laura handily provides this code:

<script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://widgets.lauragibbs.net/gmcats/growth200.js"></script>

Just add it to the right space in your widgets. On WordPress with the new Widget Area, I used a “Custom HTML” block and added the paragraph tags. Go ahead, copy-paste for your WordPress widgets:

<h5>Growth Mindset Cat says:</h5>
<p><script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://widgets.lauragibbs.net/gmcats/growth200.js"></script></p>
<p> Click on "blog post" to find out more; refresh the page for a different cat. (Cats courtesy of Laura Gibbs.)</p>

And here is the HTML block to add the Hexagrams from the Book of Changes (Yi jing):

<h5>From the <em>Book of Changes</em></h5>
<p><script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://hacks.tinekedhaeseleer.net/yijing-150.js"></script></p>
<p>Click on the name of the hexagram to read the English translation with Chinese text. Refresh the page for a random new hexagram.</p>

Level 3: Creating my own randomly rotating content

The example with the cats and the hexagrams, and all of Laura’s widgets, are readily available for re-use, including on Canvas. But how do I use this trick to get my students’ blogs or other content randomly rotating on my site?

Here I assume you have a little bit of technical knowledge about how a blog or website works, or are prepared to learn if you want to follow along.

If you want to have a different explanation of the same “tricks”, check out Laura’s original guide to creating rotating content. Scroll down for the video she created to walk you through the process, I found it very helpful.

  1. The very first time I created my own random content, I created a subdomain to host JavaScript files. It could be bunnies.tinekedhaeseleer.net for all the website cares about. That’s a “once and done” step, as long as it has a https bit at the front when you create it.
    • I now have a place to host a JavaScript file, which I need to do later on in step 6. That will require me to go into the file manager in the C-panel (control panel) of my Bergbuilds Domain of One’s Own. It was a bit scary the first time, but I’m now in there all the time like a pro and if I can do it, so can you!
  2. There are different ways to proceed next, but here’s what I do: I edit a spreadsheet, using the template created by Laura for a Magic 8-ball. For student feedback, I copy and edit this other spreadsheet; I replace URL with the link of the blog post, and xx with the students’ names. If you try this at home: only add content to the right, yellow column. The left, grey column will automatically adjust.
Spreadsheet I use to quickly add the URLs for student blog posts
  1. I copy the left column from the spreadsheet into a texteditor (I use Sublime Text), and save the file as HTML, usually something like “271-12.html” (meaning: course HST271, week 12 blog posts).
  2. Now the magic happens: I go to the website Rotate Content Tool, step 4, select “JavaScript on your own server”, and upload my little HTML file with the “Choose File” button. Next I click on “Convert Template”.
  3. A new webpage appears. I right-click on the “Download Script File” button, and select “Save Link As…” from the menu that appears. This file is in JavaScript (.js) format. I make sure to remember where I saved it because I’ll need it again.
  4. Now I go to the file manager in the C-panel, find the subdomain I created, and upload the file “271.12.js”.
  5. For now, I’ll just show how to display the rotating content in Canvas, or in the sidebar of my website. I only need to adjust the Growth Mindset Cats script we saw earlier in level 2.

<script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://hacks.tinekedhaeseleer.net/271-12.js"></script>

or for the sidebar:

<h5>Random student posts from week 12:</h5>
<p><script type="text/javascript"> var display = " " </script><script type="text/javascript" src="https://hacks.tinekedhaeseleer.net/271-12.js"></script></p>

Note how the link points to https://hacks.tinekedhaeseleer.net/271-12.js: that means it’s a JavaScript file, hosted on my subdomain “hacks”. I had to find out the hard way you really have to use https for this to work. The last bit, 271-12.js should look familiar: that’s the javafile I just uploaded!

I found this video from Laura really useful to visualize all those steps:

A video walk-through of steps 2-7, made by Laura

Have a go at creating some random content for your blog sidebar, or for your Canvas page (or other LMS that accepts <iframe> tags). And please share how you’re getting on!

Good to know

  • As I pointed out in a Tuesday Tech Tip to my students a while back, all of this sounds complicated, but it’s like driving a shift stick car: you stop thinking about all the different steps once you’ve done it a few times.
  • Reminder: If you want to have a different explanation of the same “trick”, check out Laura’s original guide to creating rotating content. Often it helps to get a different tutorial on the same content.
  • If I want to add the random content inside a WordPress blog post or page, I need to do a tiny bit more work, but I’ll keep that for next week!

Thank you:

  • To the one and only Laura Gibbs, who taught me everything I know about this topic, and how to use it in my teaching. The internet wouldn’t be half as fun without you 😘.
  • Also thank you to Tim Clarke of the Instructional Design and Digital Learning Team at Muhlenberg College, who’s always ready to help me with technical things, including my very first “level 3” random content project.
About this blog series

This post is part of a series explaining the digital tools I use for teaching courses online, face-to-face, and mask-to-mask.

If you like this post, please explore the others in the series, and sign up for new posts in the sidebar, under the Growth Mindset Cats 😀, add the blog to your RSS reader, or check back on Monday, 3pm CET/9am EST, so you’ll never miss a post!

Leave a comment with questions and requests for other similar content. Thank you! 😽

Leave a Reply

Your email address will not be published. Required fields are marked *