This is exam season at UBC. I often find myself in a classroom where there is no clock, or the clock is in a far corner where most students will be unable to see it. To compensate for the lack of time-keeping pieces in our classrooms, our internet-savvy generation relies on the web to provide a solution. There are numerous clocks that you can display, such as those on the Time and Date web site or the The Time Now web site. For example, you can find a digital clock for Vancouver that is simple and convenient and appears as yellow numbers on a black background. Another option is available at TheTimeNow.com.
I would like to display additional information for my students, and I also prefer the look of an old-fashioned analog clock to show the time. Rüdiger Appel has written a beautfiul little SVG script that shows a German railway station clock, a "Bahnhofsuhr". It is available under a free license and I have incorporated it into my own script, which is also availble under a free license (GPL) and is published below. If you like my clock, go to my exam clock to set the start and finish time of the exam, and the new window will show the analog clock along with a dial for the elapsed and remaining exam time. This is what it looks like:
The dial changes color as it approaches the end of the exam. It starts out as a solid green and turns to a yellow-green 20 minutes before the end of the exam. At the 15-minute mark it turns to yellow, and at the 10-minute mark to orange. During the last five minutes, the dial turns to red. An additional field provides instructions such as "START" at the beginning and "STOP" at the end, and "WAIT" before the exam starts. During most of the exam in progress the field shows the current time digitally. And yes, I am on a European 00-23 time scale. The most important feature is that the minutes left in the exam period are shown underneath the dial.
The SVG implementation of my exam dial creates a rectangular image of 240-by-320 pixels that is suitably magnified by a factor of two. The bulk of the code is JavaScript that updates the text and the dial. The SVG script requires some interaction with PHP for setting the start and finish time, provided as variables $hh0, $mm0, $hh1, and $mm1, for hours and minutes, respectively. The heavy lifting in the Javascript is done by the window.setInterval and window.setTimeout functions. These are convenient ways to make the dial and text dynamic, or to provide initial information on start-up. Except for the Javascript, the SVG script is very compact. The only elements that are somewhat more difficult to understand are the path elements in SVG. To make the dial work, the path elements need to be updated every second by calculating the coordinates of the two end points that are moving.
Let me know if you find my exam dial and clock useful, or if you have ideas about how to improve it.
Click here to access the SVG code, then save the file through your web browser.
![[print]](print.png){kind=small}
Recent Blog Entries
- Will tariffs on critical mineral imports help or hinder the energy transition? (March 10)
- The social cost of bitcoin mining in BC (February 8)
- BC Hydro's new peak load (January 22)
- BC has become a net electricity importer in 2023 (21 Dec 23)
- Taking stock of Canada's GHG Emissions at the start of COP28 (30 Nov 23)
- EV adoption rates across Canada (25 Nov 23)
- Why have food prices risen so much? (21 Oct 23)
- EV adoption around the world and BC's evolving ZEV laws (13 Oct 23)
- BC has made it easier for stratas to install EV chargers (8 Oct 23)
- The Americanization of Canadian milk (2 Oct 23)
- Canada suffers second adverse trade ruling over dairy imports (30 Sep 23)
- Could sodium-ion batteries make grid-scale electricity storage more economical? (23 Sep 23)
Topics
Months
Subscribe to RSS feed 
![[Sauder School of Business]](logo-ubc-sauder-2016.png){kind=logo}
![[The University of British Columbia]](logo-ubc-2016.png){kind=logo}