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 Time and Date webpage to select your clock widget style #

Go to Time and Date for a free clock and then:
- Click on the “Continue” button.
Select a clock widget in the style of your choice #

- 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.
Copy the HTML embed code that is displayed

After you’ve confirmed all your settings,
- 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” #
When you’ve navigated to the page where you’d like to add it:
- Click on the Edit button
In the Rich Content Editor, switch to HTML view. #
Unlike the rich text editor, the code editor shows you the code that is underneath your “pretty” content.
- 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.
- 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. #

- 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. #
- 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