It seems like every exam I’ve given I scramble to find a clear and easy-to-use clock and countdown timer. (I like to project these in the lecture hall so students can pace themselves (or panic, as appropriate, when time is running short).) So I whipped up one of my own. Displays current time on the left, and the remaining time in a “1h 2m” remaining format. Also sweeps out a decreasing arc of brain as the time decreases.
Feel free to use, adapt, steal as you please.
There are a few things that could use tweaking.
This is not great for at least the following reasons:
- It causes a delay before running the contents of the interval function
- It is not the most reliable timer, possibly running over the expected time
That said, (1) I’m mostly going to use it for timing 75 minute chunks, so starting 5 seconds late doesn’t matter much. And, (2) I tested it a few times while doing other things on my computer and it was accurate enough. Maybe picked up a few seconds over the course of an hour, but not more than a minute. Perhaps in the future I will switch to a setTimeout() version that calculates time remaining by comparing the target time to the current system time.
Image loading after page loading is a little annoying on something so minimal. Probably should add an image preloader.
I’d also like to eventually allow you to upload your own image.
On the plus side, I was happy to find out how easy it was to play around with SVG (which I used in making the overlay mask). SVG + JS = Magic. Seriously.
Anyway, as my mother says: “Good enough!”