Embedding a Clock Widget into Your Course

Table of Contents

Source: Heavily based off: UofT Engineering Ed Tech Office Article

This guide provides a quick overview of how to add a clock widget to your home page.

Why would you want to add a date and time widget? All dates and times throughout your Quercus courses are displayed according the course’s respective time zone. At UofT, this is Eastern Standard Time. This means that if you’ve set an assignment due date to 11:59 pm (EST), students will see this due date as 11:59 pm regardless of their time zones. Embedding a clock with the course local time on your home page (and/or to assignment descriptions) can help students in other time zones manage their assignment deadlines. We can create this kind of clock using Timeanddate.com.

To add a clock widget to your course home page: #

Visit the webpage here

Visit the Time and Date webpage to select your clock widget style #

Go to Time and Date for a free clock and then:

  1. Click on the “Continue” button.

Select a clock widget in the style of your choice #

Zoom:
  1. For this example, we used the ‘Blue Black’ style from these free clocks from your website. There are multiple styles that you can select from – choose the one you like best!

Choose your widget preferences #

The tool lets you customize the font, size, etc. of the widget – you can play with it until you’re happy with the result.

Make sure to select “Secure web page” or the clock won’t appear in the course.

Screen Shot 2021-02-01 at 2.07.08 PM.png

Copy the HTML embed code that is displayed

After you’ve confirmed all your settings,

  1. Right click with your mouse (or use CTRL+C) to copy the code. In order for you to embed it in your Quercus course, you need to copy all the syntax and paste it in into your code view in Quercus.

Navigate to the Quercus page where you want to add the clock and select “Edit” #

You can add the widget code to any editable page in your Quercus course. Many choose to place it prominently on their course homepage.

Select “Edit” #

Screen Shot 2021-02-01 at 2.12.00 PM.png

When you’ve navigated to the page where you’d like to add it:

  1. Click on the Edit button

In the Rich Content Editor, switch to HTML view. #

Screen Shot 2021-02-01 at 2.15.27 PM.png

Unlike the rich text editor, the code editor shows you the code that is underneath your “pretty” content.

  1. Paste the entirety of your code into the text box. If you have content here already, you can add it where you’d like it to appear on the page, but be careful not to delete other code.
  2. When you’re finished, save your changes.

In the HTML editor, paste the code in the area of the page where you want it to appear. #

  1. Scroll to the end of your rich text editor and look for the “Switch to HTML view” icon button.

View the results on your home page. #

Screen Shot 2021-02-01 at 2.22.48 PM.png
  1. Confirm that the widget is appearing as you’d like. You can repeat these steps, and tweak the styling as needed.

Source: Heavily based off: UofT Engineering Ed Tech Office Article