Laura Gibbs

Semester Countdown Javascript

Blog Post created by Laura Gibbs on Apr 23, 2017

As we get into the end of the semester, I like to make a little countdown widget that I can embed in my class announcements and assignment pages to help remind the students about what they need to do to finish up the class. For today's post, I thought I would write up something about that process since my next CanvasLIVE is about javascripts:

Laura's Widget Warehouse: Canvas-Friendly Javascripts 


GOAL: I want to provide my students with a day-to-day reminder of what they need to do in the class as we get near the end. This needs to happen automatically so that it is not up to me to remember to update the announcement! I know they'll be visiting the class assignment pages (Week 13 - Week 14 - Week 15), and I hope they will be working ahead, so I want the reminder who up automatically on those weekly pages in addition to the class announcements. The javascript will also work in Canvas also, like on a Canvas Syllabus page (although my students are checking in at my class wiki rather than at Canvas for their assignments).


TOOL: is the tool I use to make both randomized and date-based javascripts. It's free ... and no programming is required! (This tool was built over 10 years ago by a genius student of mine; hiring him to build this tool is the best technology investment I have ever made.)


REQUIREMENTS: As I mentioned, no programming is required, but you need to feel comfortable using an HTML editor, and you also need webspace of your own where you can publish the script. For the script to run in Canvas, you need to have enabled https in your webpace. I'm able to do that thanks to the fabulous Domain of One's Own project at my school, hosted by the great people at Reclaim Hosting. I cannot say enough good things about the service they provide! It's also very affordable for individual hosting if you don't want to wait for your school to catch up to the 21st century; an individual hosting account is just $30 per year.


CREATING THE WIDGET. There are basically five steps to creating and deploying a widget with The first time you do it may take a while, but when you get used to the process, it goes very quickly; I can make a new widget like this and get it published in about 30 minutes.


1. Create your content in an HTML table. You can generate your own table or use one generated for you by I personally prefer to generate my own table by doing the work in a spreadsheet; if you don't mind writing some HTML by hand, a spreadsheet is powerful for this type of content array! Here is the HTML table I wrote for my countdown widget, which I really wrote in this spreadsheet. (The content is very repetitive which means I was able to use spreadsheet formulas to generate most of it.)


2. Convert the HTML to a javascript. RotateContent does this for you, and it takes literally just a second. You then download the resulting javascript (.js) file from RotateContent.


3. Publish the javascript file in your own webspace. I do this using the File Manager in my Reclaim Hosting space.


4. Write the HTML snippet to call the script. This is the snippet I am able to use in my class wiki and class announcements blog:

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

For Canvas, the process is more tedious because you have to create a separate HTML page to hold the javascript (you can do that in the Files area of Canvas if you wish, but since I am using this script for multiple classes, I did the HTML page in my own webspace), and then you have to put that HTML page inside an iframe. So, I put that exact same javascript call about into a vanilla HTML page, and then put that page into an iframe:

<iframe src="" width="100%" height="100"></iframe>


Having to define the height for the iframe is a pain because the content height is variable... unfortunately, though, iframe is the only way to get a javascript to work in Canvas; I don't have that problem at my wiki or blog. The CSS is also messed up, so there's a font mismatch in the Canvas iframe display, but that's the price we pay for Canvas security; details about that thanks to James Jones here:

Embedding Remind Widget into Course Page 


5. Paste the HTML snippet wherever you want the script to run. For my blogs and wikis, that it just the script call snippet; for Canvas, it is the iframe snippet. I have the script running in various wiki pages as mentioned above, and in the sidebar of my class announcements, plus on a Canvas syllabus page.


JAVASCRIPT MAGIC. Javascript still feels like magic to me! The widget never sleeps: at midnight each night, it will begin displaying the message for today, alerting students to the ever-fast approaching end of the semester. :-)


Here are some screenshots showing the power of distributed content. I publish the script in one place, and it runs everywhere, as you can see (if you're reading this and it's not Sunday, you'll see the current day if you click the live view... although if you're reading this after the semester is over, the live view won't show the script; I run this script only in the last days of he semester). Plus, if I discover a mistake or want to change the text of the script, I just update the script, and it is fixed everywhere. I don't have to do any other editing, just change the script text.


Blog sidebar: view it live.


blog screenshot


Wiki page: view it live.


wiki screenshot


Canvas Syllabus: Indian Epics page: view it live.


syllabus screenshot


Canvas Syllabus: Myth-Folklore page: view it live.


myth class syllabus