{"id":343,"date":"2017-07-14T21:30:44","date_gmt":"2017-07-14T21:30:44","guid":{"rendered":"http:\/\/drdrphd.com\/blog\/?p=343"},"modified":"2020-07-09T04:17:14","modified_gmt":"2020-07-09T04:17:14","slug":"brain-timer","status":"publish","type":"post","link":"https:\/\/drdrphd.com\/blog\/brain-timer\/","title":{"rendered":"Brain Timer"},"content":{"rendered":"

\"Brain<\/a>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.<\/p>\n

http:\/\/drdrphd.com\/braintimer\/<\/a><\/p>\n

Feel free to use, adapt, steal as you please.<\/p>\n

<\/p>\n

—<\/p>\n

There are a few things that could use tweaking.<\/p>\n

I went the simplest possible route and used a JavaScript setInterval() function.<\/p>\n

This is not great for at least the following reasons:<\/p>\n

    \n
  1. It causes a delay before running the contents of the interval function<\/li>\n
  2. It is not the most reliable timer, possibly running over the expected time<\/li>\n<\/ol>\n

    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. \u00a0Maybe picked up a few seconds over the course of an hour, but not more than a minute. \u00a0Perhaps in the future I will switch to a setTimeout() version that calculates time remaining by comparing the target time to the current system time.<\/p>\n

    Image loading after page loading is a little annoying on something so minimal. \u00a0Probably should add an image preloader.<\/p>\n

    I’d also like to eventually allow you to upload your own image.<\/p>\n

    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.<\/p>\n

    Anyway, as my mother says: “Good enough!”<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,64],"tags":[67,66,65,68,69,70,71],"class_list":["post-343","post","type-post","status-publish","format-standard","hentry","category-code","category-teaching","tag-brain-clock","tag-brain-timer","tag-clock","tag-code","tag-coding","tag-javascript","tag-svg","wpautop"],"_links":{"self":[{"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/posts\/343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":6,"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":404,"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/posts\/343\/revisions\/404"}],"wp:attachment":[{"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/media?parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/categories?post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/drdrphd.com\/blog\/wp-json\/wp\/v2\/tags?post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}