Pages

March 8, 2020

BTBGuide: Dynamic Content: Javascript Randomizers




In the Joys of the Sidebar post, I mentioned a lot of different kinds of randomizers: text randomizers for student-to-student advice, image randomizers for the Mindset Cats (and more), and video randomizers (which is actually a meta-randomizer: randomizing several different video randomizers). Those randomizers are what I call dynamic content because the content changes each time the page reloads.

I build these randomizing javascripts myself using a free online tool, Rotate Content. This tool was built by a former student, Randy Hoyt! (He's now a board game developer; check out his work at Foxtrot Games.) I just put the content-to-be-randomized into an HTML table, row by row, and the Rotate Content tool converts the HTML file into a javascript.

Here are the three main advantages I see with random content:

Random keeps site content fresh. If you have pages that students visit repeatedly (like our blog homepage in Canvas!), 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 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. I've got hundreds of past student projects to share, for example, and hundreds of pieces of student-to-student advice. The randomizer is the best way to get all that content on display.

Random adds an element of fun and mystery. It's like a game, or something even more ancient and profound: divination. Many cultures have used randomness for divination, like the sortes Virgilianae. That Latin word sortes is the origin of our word "sorcery" — yes, it's magic! Find out more about divination with books: Bibliomancy.

In that spirit, here's a Tarot card randomizer, a larger version of the same widget running in the sidebar here. More about this Tarot script (and the gorgeous artwork by Pamela Colman-Smith): Tarot Card Javascript. I've chosen the version here which includes the cards upside-down as well as right-side-up:




To learn more about these randomizing javascripts, here's a blog I created for a CanInnovate presentation which I made in 2019: Javascript Magic in Canvas. Randomizing Widgets, No Coding Required.

Slides. Here's a link to the Slides file and also a link to the full-screen view.