Widget Library

Clock Widget

7 min readUpdated

Give students an analog clock to read, set and turn, for telling time to the hour and half hour, with an optional digital clock.

The clock is an analog face with an hour hand and a minute hand. Students read the time it shows, turn the hands to show a time, or turn them freely and watch the time change. It covers Grade 1 time: hours and half hours.

Berdee draws the clock exactly, so the hour hand at 4:30 is really halfway between 4 and 5. That matters, because where the hour hand goes is the skill. The attempt page tells you which mistake a student made ("half past the next hour", "hands swapped"), not just that the answer was wrong.

For counting down or timing an activity, use the timer instead.

Select the widget on the canvas and click the floating ⚙ Configure button to set it up. The dialog asks things in order:

  1. What students do: pick one of the four modes below.
  2. The time: turn the small clock with the A half hour earlier and A half hour later buttons, or pick the Hour and Minutes.
  3. The mode's own setup: How students answer (Read), or How the hands turn (Set and Explore).
  4. What the clock looks like: which hands, the numbers, a digital clock and shading.

Settings most lessons never change are under More options at the bottom.

Four modes

Each mode in What students do is tagged Graded or Not graded.

ModeWhat students doTag
ShowLook at a time on the clock. Ask about it with another widget.Not graded
ReadRead the clock and choose the time, or type it on a number pad.Graded
SetTurn the hands to show a time, then tap Done.Graded
ExploreTurn the hands freely and watch the time change.Not graded

Show

The clock shows the time and nothing moves. Use it as the picture a question is about, such as "Is it time for lunch?" with a multiple choice beside it.

Two settings help children see half past:

  • Shade the part the minute hand has passed shades the face from 12 round to the minute hand, so half past is half the face.
  • Show a digital clock puts the time in digits beside or below the face, for matching analog to digital.

Read

Students read the clock and give the time. Under How students answer:

  • Choose the time: students tap one of 2 to 4 times. Under Times to choose from, the time that matches the clock is marked ✓ Right, and it follows the clock when you change the time. If another choice already showed the new time, that choice takes the old time, so no two choices are ever the same. Use the time, the next hour and half past the next hour fills in the choices the curriculum recommends. For 4:30 that's 4:30, 5:00 and 5:30, because children who follow the hour hand's bigger number read 4:30 as "half past 5". Write the times as shows them as 4:30 or as half past 4.
  • Type the time: students tap the hour box and an hour key (10, 11 and 12 are single keys), then the minutes box and its keys. The ":" is printed. Minutes keys offers 00 and 30 only, or Any two digits. Students can also type with a keyboard.

Each tap of a time, and each Done on the pad, is one try.

Set

Students turn the hands to show the time, then tap Done. Each Done is one try, and a wrong answer keeps the hands where the student put them.

Under How the hands turn:

  • Snap: the hands land on Half hours (o'clock and half past) or Hours only.
  • A hand that can't move: fix the hour or the minute hand at the time, so students turn only the other one. For "the hour hand is on the 3; put the minute hand where it goes for 3 o'clock", fix the hour hand.
  • The hands move: Together, like a real clock (turning the minute hand from 12 to 6 moves the hour hand halfway to the next number), or One at a time, so students place the hour hand themselves. With a fixed hand they always move one at a time.
  • What's right (with a fixed hand): This time only, or Any time that fits for "show a time when the minute hand is on the 6", where any half past is right.
  • Say each hand's name when it's tapped: on by default. Tapping a hand says "hour hand" or "minute hand", never the time. Turn it off when you're checking whether students can tell the hands apart.

The clock never says or shows the time in Set or Read, because that would give the answer away. That's also why a digital clock isn't offered there.

Explore

Students turn the hands freely and the time follows: with Show a digital clock on, the digits change as the hands turn, and a screen reader hears each new time ("4:30, half past 4"). The hands always move together. Explore isn't graded, but the attempt page still shows where the student left the hands.

Turning the hands

Every way of turning a hand works by tapping alone:

  • Tap, then tap: tap a hand to pick it up (it gets a thick outline and a grip on its tip), then tap the number it should point to. For the hour hand halfway, tap the gap between two numbers.
  • Drag: drag a hand by its tip. It snaps to the nearest half hour (or hour) when it's let go.
  • Step buttons: the arrow buttons under the clock move the time a half hour (or an hour) earlier or later. They're always there, for children who can't yet tap a number.
  • Keyboard: Tab to a hand, then use the arrow keys to turn it one step. Home turns it to 12.

What the clock looks like

  • Hands: Both hands, Hour hand only (the way Grade 1 starts: "the hour hand is on the 4, so it's about 4 o'clock") or Minute hand only (Show only, since students can't read the hour without the hour hand).
  • Show the numbers: turn it off for a face with only tick marks, for students who know where each number goes.
  • Tick marks (under More options): every minute, every hour, or none.
  • The digital clock sits (under More options): below or beside the face. It also places Read's typed boxes.

The hour hand is always shorter and thicker than the minute hand, so the two are never told apart by colour alone. Their colours, and the face, background and number colours, are under Style & Layout in the sidebar. A lesson's theme never changes the hand colours.

Before you publish

The dialog lists anything that would stop the clock working, and publishing waits until it's fixed. For example:

  • the time isn't one the hands can reach (4:15 when the hands snap to half hours);
  • the pad's 00 and 30 keys can't type the time;
  • the hand the question needs is hidden, such as Read with only the minute hand;
  • Any time that fits without a fixed hand;
  • fewer than 2 or more than 4 times to choose from, none of them the clock's time, or two the same;
  • a digital clock in Read or Set.

It also warns, without blocking, when the face is too small for students to tap each number on a tablet, when the pad's keys are too small, or when a colour is hard to see against the face. Make the widget bigger, or pick a darker colour.

On the attempt page

Each answer gets a line and a small picture of the clock: the student's hands for Set and Explore, and the clock they read for Read. The line names the mistake the curriculum looks for:

  • "Set 4:30 · showed 5:30 (half past the next hour), then 4:30 ✓"
  • "Read 6:30 · wrote 6:30 ✓"
  • "Read half past 2 · chose half past 3 (half past the next hour), then half past 2 ✓"

The mistakes it names are hands swapped, half past the next hour, hour hand on a number at half past and minute hand on the hour number.

Logic

The clock fires On Hands Change each time a student turns a hand or taps a step button (Set and Explore), and On Answer each time they tap Done or choose a time (Set and Read). See Events, actions, and conditions.

Conditions can read its Hour (1–12), Minute (0–59), Time (h:mm), Hour hand position (minutes since 12, so the hour hand on the 3 is 180), Minute hand position (the minute mark, so the minute hand on the 3 is 15), Hands swapped, Done taps, Is correct and Is answered. In Set and Read, the time is the one the student showed or gave, never announced. For example, on On Answer with Hands swapped is true, play "The short hand shows the hour." Its actions are Reset, Set the time (jumps the hands, for a worked example) and Turn the hands to (turns them forward at a steady pace). See Widget properties and methods.

Was this article helpful?