Interactive Teaching Clock

This interactive clock features movable hands and operates in three main modes to teach different concepts: telling time, understanding angles, and learning fractions. The clock’s colors and overall style can also be customized. Note that the available controls change depending on the selected mode.

Common Controls

The controls located above the mode selector are always visible.

At the top, a digital clock can be switched between formats: click the 12 button for a standard 12-hour display with AM/PM, or the 24 button for a 24-hour format. To hide the digital display completely, click off.

You can sync the clock to your computer’s current time by toggling the real time button. This is useful for observing how the clock hands move throughout the day. For practice problems, click the random button to spin the hands to a random time, which is great for quick-fire questions.

When not in “real time” mode, small handles appear on the clock hands, which can be clicked and dragged to set the time manually.

Time Mode Controls

First, select time mode to access a set of controls for time-based problems. These can be used to solve elapsed time problems or to track time passing when in “real time” mode.

The hours display shows the hours that have passed.
The minutes display shows the minutes that have passed.
The reset button sets both displays back to zero.

For example, to solve a problem like “What time will it be in 1 hour and 25 minutes?”, first set a random time. Then, ask the class the question, press reset, and drag the clock hands forward until the displays show 1 hour and 25 minutes. The clock will now display the correct answer.

Angles Mode

Clocks are a useful tool for teaching angles. To begin, set the mode to “Angles” to reveal its specific controls.

In this mode, you can toggle a protractor on and off. For automatic measurements, turn on the auto toggle; the protractor will then snap into place to measure the angle as you move the hands.

Additional controls in this mode include:

Thin: Makes the clock hands thinner for more accurate angle measurement.
Ang: Shows or hides the numerical angle value.
Arc: Shows or hides the angle arc.
Snap: Toggles whether the minute hand snaps to the nearest minute.
Angle Type: A select menu to measure the angle between the hands (clockwise or anti-clockwise) or from the 12 o’clock position.

Using the real time setting in this mode is a great way to show the second hand turning a full 360° each minute, helping to visualize key angles like 90°, 180°, and 270°.

Fractions Mode

Select “Fractions” from the mode control to use the clock for teaching fractions. This visually connects time-related phrases like “a quarter past” or “half past” to their fractional equivalents.

In this mode, a circle sector is drawn from the 12 to the minute hand. Two fractions are displayed:

Fraction of an hour: The unsimplified fraction (minutes/60).
Simplified fraction: The same fraction reduced to its lowest terms.

You can simplify the view by clicking the simple button, which removes the hour and second hands. The divider lines control changes how the clock face is segmented. In “auto” mode, it divides based on the simplified fraction, but you can also select a specific number of divisions. Click the percentage button to show the percentage equivalent.

Styling the Clock

Select the “Style” mode to customize the clock’s appearance. For example, to change the color of the numbers, click numbers and then select a color from the color picker. To hide a clock element entirely, select the ‘X’ in the color picker. Hiding parts of the clock can be used to create more challenging time-reading problems.

For lessons on elapsed time and comparing two different times, the Two Clocks Activity is an excellent resource.
To expand on angles, the Angle Rules angles at a point, intersection and on a straight line.
After exploring circular fractions here, the Interactive Fraction Wall is a great next step for teaching fractions.