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.
To add a clock widget to your course home page:
1. Build your clock widget (for free)
1.1. Visit the Time and Date webpage to select your clock widget style
Go to Time and Date for a free clock and then:
- Select on the "Continue" button.
1.2. 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!
1.3. 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.
1.3.1. 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.
2. 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.
2.1. Select "Edit"
When you've navigated to the page where you'd like to add it:
- Select on the "Edit" option.
2.2. 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.
2.3. 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.
3. 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.
Looking for other widget options?
These instructions depict just one option. There's lots out there!
- Want to add some text to your clock? Try using the code below.
<h4 style="text-align: center;"><strong><span style="text-decoration: none;">Current time at the University of Toronto</span>: </strong></h4>
<p style="text-align: center;"><iframe src="https://freesecure.timeanddate.com/clock/i7de5he2/n250/tlca/fc25355a/ftb/tt0/th2/ts1/ta1/tb4" width="218" height="34"></iframe></p>- You can also choose a widget which incorporates text.
Need help adding the clock to your page or modifying the embed code to suit your needs? Contact us as [email protected]