Interactive Clock with analog and digital display

Introduction

The clock activity covers three topics, the first demonstrates how to tell the time using an analogue clock. The second mode uses the the clock hands as a way of learning angles. The third mode uses the clock as a way to help understand fractions.The clocked can be altered to change colors and its overall styling. Note in this activity different controls are shown depending on the current mode

Common Controls

The controls above the mode selector are always displayed. At the top you will see a digital clock, below are three buttons. Click the 12 button to display in normal 12 hour format with AM/PM. Click 24 button to change to the 24 hour format. Often you won't want to display the time at all, click off and the digital clock will disappear.

The clock can be used to display the current time (based on the clock of the computer you are using). Click the real time to toggle this feature. This is useful as children can observe how the clock changes throughout the day. For random time problems click the random button and the clock hands will spin to produce a random time. So this is great for lots of quick fire questions.

When the clock is not showing the actual real time, then small handles appear at the end of the hands, these and dragged into position.

Time mode controls.

First select time mode, below are a set of controls. These can be used in time problems or to view how much time has elapsed when showing the actual real time. The first one displays the hours passed. The second one the minutes that have passed. Underneath reset button sets both back to zero.

So a brief example of how to use them would be click random time. Now ask what the class what time will be in say 1hour and 25 minutes. To demonstrate this click reset, so both minutes and hours are zero. Now drag the clock hand forward until the hours is 1 and the minutes is 25. The clock now displays the answer to the initial problem.

Angles mode

Clocks have always been a useful way to teach about angles. This clock has angle measurements built in. First set the mode to angles, to get the control set.

In angles mode you will now see a protractor button click it to toggle the display of the protractor. Next is the auto toggle button, click to turn it on and you will notice the protractor lines up automatically to measure the angle. Move the clock hands and the protractor will follow. Below the protractor button is a slider use this to change the size of the protractor. When measuring angles the large clock hands can be made thin for better accuracy by clicking thin. To display the angle click Ang, and click Arc to display the angle arc. When dragging the minute hand it currently snaps to the nearest minute, turn this feature off by clicking snap. Finally the type of angle can be changed using the select control. So you can choose the angle between the hour hand and minute hand, both clockwise and anti-clockwise. Or measure the angle of the second hand from 12 o'clock. This works very well with the realtime setting as children can see a full angle of 360° turned every minute. This helps learning of key angles such as 0°, 90°, 270° etc. Also conversions such as 30 secs * 6 = 180°

Fractions mode

Select fraction on the mode control to use the clock to teach fractions. Time statements such as 'a quarter past', 'half past' and 'a quarter to' obviously are linked to fraction.

In the fraction mode a circle sector is painted from 12 o'clock to the minute hand position. Two large fractions are displayed the fraction of an hour shows the unsimplified fraction of minutesÃ·60. The simplified fraction is the same fraction cancelled down when possible.

The simple button toggles removal of the hour and second hands to give a simplified view. You can also click thin to toggle the thinner clock hands. The clock is divided according to the divider lines control. The default setting is auto, this divides the clock according to the fraction displayed. Essentially the clock is divided depending on the simplified fraction. However you can turn off auto mode and divide the clock according to the number selected.

Percentages can also be shown by clicking to toggle the percentage display.

Styling the Clock

Select the style mode to access controls. So for example to change the colour of the numbers, click numbers followed by a colour from the colourpicker. To remove the numbers completely click 'X' in the colour picker. You can do this with other parts of the clock too, which obviously can make reading the clock more difficult.

Related activities

Further lessons on the telling the time involve comparison of two different times the two clocks activity is excellent in this regard and can also generate time questions.

To expand on the angles try Basic angles which can be used to examine types of angles such as acute,obtuse and reflex. It can also so be used to create many different types of random angle problems.

Having seen a circular fraction in this activity, the interactive fraction wall can also be used for further teaching of fractions.

Digital Clock, change format by clicking the buttons below
Show digital clock with 12 hour format
Show digital clock with 24 hour format
Off
Hide the digital clock
Toggle the display of the protractor.
Random
Click to move the clock hands to a random time.
Select the mode to display controls for Time, Angles or Style
Use with the reset button to track hours passed
Use with the reset button to track minutes passed
Reset hours and mins to zero
Auto
Toggle auto protractor, when on the protractor will position itself to measure the selected angle type.
Select the type of angle to display. Note seconds works only when showing the real time
Thin
Toggle thin hands, when measuring angles with the protractor it useful to turn this on.
Angle
Toggle display of the number of degrees for the selected angle type.
Toggle display of the angle arc for the selected angle type.
Toggle real time, when on the current time is show, when off drag the hands to set the time.
Toggle snap to minute, when on the minute hand snaps to the nearest minute when dragged.
Select total divider lines, or auto to match simplified denominator
Click to toggle fraction of the 60 minutes
3
Click to toggle simplified fraction
4
Click to toggle percentage display
Simple
Toggle simple view, only show minute hand, without rim
Use the colour picker to change selected colour
Choose the line cap for the graduation lines
Choose the line cap for clock hands
Set the width of the minor graduation lines
Set the width of the major graduation lines
Click to view instruction videos Close the activity View information about the activity Pan and zoom (using mouse/mousewheel)