Time practice sheet for kids
April 14, 2008 at 11:47 PM by Dr. Drang
My second-grader has been learning to tell time, and I wanted to make a set of practice sheets for him. I am, of course, far too lazy to draw the clock faces by hand, or even to use a computer-generated sheet of blank faces and then draw the hands on them. So, following the same principles as my earlier math practice sheet, I made up an HTML document that uses JavaScript’s random number generator to generate a set of clock faces.
My son writes the times below each clock and I (or my wife or my fifth-grader) check his work.
Now, when I say that I “made up” this document, what I really mean to say is that I stole some JavaScript from Mathieu ‘P01’ Henri. He wrote a realtime JavaScript clock program that draws the hands by altering the height and width of some transparent GIFs that contain diagonal lines. I took a good chunk of the JavaScript and some of the CSS and made an HTML file I named “clock-practice.html.” It’s a bit longer than most of the code I post here, and it’s useless without the set of GIFs for the clock face and the hands, so I’ve wrapped them all together in a zip file you can download from here.
One improvement I’ve made over M. Henri’s work is to draw the hour hand at the correct angle. If you look carefully at his work, you’ll see that he doesn’t include the minute in his calculation of the angle of the hour hand. This has the unfortunate effect of keeping the hour hand at a constant position from xx:00 through xx:59, which would be very confusing to a second-grader. (In M. Henri’s defense, he’s using a clock to demonstrate a cute way to draw straight lines at any angle in JavaScript. His focus is not on drawing a clock, per se.)
Every time “clock-practice.html” is loaded or reloaded, it redraws the twelve clock faces with new sets of hands. Whenever I need to make a new set of practice sheets, I repeatedly reload and print the page. To assuage my environmental guilt, I print each page on the back of paper that has already been printed on one side and is headed for the recycling bin.
Update 7/19/10
I’m not sure why I didn’t do it this way the first time, but here’s a direct link to a page that will display the clock faces. No need to download and unzip a set of files; just reload the page to get a new practice sheet.
Also, I’ve updated the link to M. Henri’s post, which broke after he did a major site redesign.
