Course construction ahead….

This fall, I’m teaching a writing intensive undergraduate class. In lieu of writing a term paper or literature review, our class is using blogs for weekly writing and revisions and project websites (for more writing and revisions). Most of the students have not blogged before and are excited to try it out. It’s been really exciting to see the blogs created, read what each person is writing about, and comment on their posts.

I’m basing my course design for the blog use on the work of Laura Gibbs – aka @OnlineCrsLady in many online spaces – who has been teaching this way for many years. If you aren’t familiar with her – take a few minutes to read through one of her sites: Online Course Wiki, Teaching with Canvas, or her posts in the Canvas community. She embodies the spirit of an open educator – shares what she has created, writes about her work, and invites others to use it. As someone who is new to the all-blogging mode of student work, I was grateful to find her!

Also in the spirit of an open educator, Laura has her course on the open web. One difference for my course though, is that the starting point is always our Canvas course. That’s where all of the directions, information, declarations, announcements, etc reside. The blog content flows back into our course via links, embedded posts, a running blog stream, and a variety of other ways. One of the weekly assignments is to comment on other students’ blog posts. Laura, with one of her former students Randy Hoyt, has figured out this neat and fun way to have a random blog post appear on a webpage. When the page is refreshed, a new post appears on the page. She discussed this approach in a webinar-style presentation in April 2017 (post + video link). I wanted to try my hand at setting up something similar for Canvas. The accompanying slide deck provided a good overview of the process. I thought a post of my own to fill in the gaps might be a helpful addition to her work, so here goes…

Step 0: Prep work

  • created Canvas content/pages
  • set up feed reader account with Inoreader, added blogs to it
  • created ‘Introduction’ tag
  • read through the process of creating randomizing content on the Rotate Content website

Step 1: Generate HTML table

I downloaded the Rotate Content randomizer template and updated my text/html editor of choice, Brackets.

Step 2: Enter content in table

As the posts started rolling in, I tagged them and added them to the template provided by Rotate Content. I did some tweaking to the template as I wanted it to be styled in a particular way. I have a very basic knowledge of html, and I found the Try-It editor and help articles by w3schools to be key in figuring out how the final product would look and how to make changes.

While I was waiting for the rest of the posts to be completed (so I could add them to the template), I spent some time doing pre-work for Step 5. In order to have randomized content work of  your own work successfully, it needs to be hosted somewhere. I saw that Laura’s was hosted at her own site, with ‘widgets’ as a subdomain. Since I also have my own domain, I knew I could set up something similar and followed suit.

Step 3: Convert table to script.

After all of the posts were completed, I added them to the table, saved it, and uploaded it to the Rotate Content site to be converted to javascript.

Step 4: Publish the javascript.

I uploaded the javascript files to my website via the File Manager in cPanel.

Step 5: Publish the HTML script page.

After trial and error, I made it to this point. Initially the content worked (sometimes), but other times did not display at all on the website. I finally figured out that I needed to create an .htaccess file to force my site to load over https. This is necessary as otherwise the (insecure) random content would not be able to be displayed within Canvas.

Step 6: Use iframe in Canvas.

I finally got it to work. Here’s the initial version:





hmm…I am not a fan of that extra white space. Plus, some post titles appear centered, while others skew to the left. Also: font mismatch. urgh. Tweaks to the style sheet were added to the list of changes. After some futzing with the style sheet, I am not able to figure out why the font and link colors don’t conform to it. That looks like it will take more digging and reading, which I need to put on the back burner for now.

Step 7: Rinse & repeat

Repeat process for all areas of the course in which I plan to have randomized content. As of now, it is four, but I still have about half of the course to build, so I will probably end up with at least double that number.

Leave a Reply