Ten Frame Widget
Give learners 5-frames and 10-frames with two-color counters to show, build, and split numbers.
A ten frame is the counting tool from every K–1 math classroom: a row of 5 squares (a 5-frame) or two rows of 5 (a 10-frame), filled with counters, one per square. It turns a number into a picture with structure. Learners see 4 as "one less than a full 5", 7 as "a full 5 and 2 more", and 10 as "both rows full", which is how they move from counting by ones to seeing numbers in parts.
Counters are two-color: red on one side, yellow on the other. Flipping some of them shows how a number splits, for example 5 = 3 red + 2 yellow.
Select the ten frame on the canvas and click the floating ⚙ Configure button to set it up. The frames, mode, target, counters and scoring all live there, with a live preview.
Three modes
- Build asks learners to make something with counters: "Show 4", "Fill the 5-frame", or "Show 5 with 3 red and 2 yellow". It is graded.
- Show displays a number for learners to read, for example 7 as a full row plus 2. Learners can't change it. Pair it with a number input or multiple choice to ask "How many?".
- Explore is free play: place, flip and remove counters. It is never graded.
Show and Explore never count toward a score and never record an answer, so the Configure dialog hides the Scoring section for them and the student's attempt page doesn't list them.
How learners use it
- Place a counter: tap an empty square, or drag a counter from the tray onto a square. Tapping the tray drops a counter into the next empty square. Dragging is never required.
- Flip a counter: tap it to turn it red ↔ yellow (when flipping is on).
- Remove a counter: tap it, then tap its ×, or press Remove in the tray, or drag it back to the tray. Clear empties the whole frame.
- Keyboard: Tab moves into the frame as one stop. Arrow keys move between squares, Enter or Space places or flips a counter, and Delete removes it.
When a frame is full it glows softly. The tray shows how many counters are left.
Settings
| Setting | What it does |
|---|---|
| Frame | A 5-frame (one row of 5) or a 10-frame (two rows of 5). |
| Number of frames | 1 to 6 frames. Two 10-frames show numbers up to 20, like 13 as "10 and 3 more". |
| Mode | Build, Show or Explore (see above). |
| Target (Build) | A number (exactly that many counters), Fill it (every square), or Red + yellow (a number with a set number of red counters). |
| Fill in order (Build) | Counters must fill the squares left to right, top row first. A counter tapped into a later square slides to the first empty square, so learners learn the rule instead of losing the point. |
| Counters in the tray | How many counters learners can use. Give more than the target so learners must stop at the right number. |
| Counters shown and Arrangement (Show) | How many counters to display, and whether they sit in order, scattered (press Shuffle the squares for a different scatter), or split by color. |
| Counters | Two-color (red and yellow), One color, or Picture, which uses an image from your library as the counter (ducks, apples). Only two-color counters flip. |
| Speak the count | Says "one… two… three…" as each counter lands, and the color when one flips. It uses the device's built-in voice. |
| Show the numeral when done (Build) | After a correct build, the number appears in the tray to connect the quantity to its numeral. |
Worked example: "Show 4"
- Add a text widget that says Show 4. and, if you like, a text to speech widget that reads it aloud.
- Add a Ten Frame from the toolbox. It starts as a 5-frame in Build mode.
- Click ⚙ Configure. Under Target, choose A number and set Counters to 4.
- Leave Counters in the tray at 5, so a learner has one extra and must stop at 4.
- Turn on Show the numeral when done to show "4" once the frame is right.
- Add a submit button to grade the scene, as for any other question.
For "Show 5 with 3 red and 2 yellow", choose Red + yellow, set Counters to 5 and Red counters to 3. For "Show 13", set Frame to 10-frame, Number of frames to 2, and the target to 13.
Grading
In Build mode, the widget is correct when the counters match the target: the number of counters, plus the red count for a Red + yellow target, plus no gaps when Fill in order is on. Points are all or nothing. The squares a learner filled are sent to Berdee, and the grade is worked out there from the lesson, so it can't be faked from the learner's device. On the student's attempt page you see what they built, for example "5 counters: 3 red, 2 yellow".
If a target can't be reached, the Configure dialog explains the problem and the lesson can't be published until it's fixed. That covers a target of 0, a target bigger than the frames, a tray with fewer counters than the target, more red counters than the target, and a red + yellow target with flipping turned off (counters land red, so only a flip makes a yellow one). The dialog also warns when the squares are smaller than 44 pixels, which is too small for young fingers.
Behaviors and logic
The ten frame reports these for conditions and variables:
- Count, Red count, Yellow count and Empty squares
- Is full
- Is correct and Is answered
Its On Counters Change event runs every time a learner places, flips, moves or removes a counter, so a scene can react as they work. It doesn't run when a behavior calls Fill, Reset or Clear. For example, add a Display Message behavior with the condition _Count = 5_ that says "Now flip 2 of them!". On Correct runs when a build becomes correct.
Its actions are Reset and Clear (both empty the frame) and Fill, which places a number of counters in order. Use Fill on a button to demonstrate before learners try.
Accessibility
- Squares are large, well above the 44-pixel touch size, and every drag has a tap alternative.
- Screen readers hear the state, for example "5-frame, 3 of 5 squares filled, 2 red, 1 yellow", and each change is announced.
- Color is never the only cue: the yellow side of a counter has a ring, the red side is solid.
- Animations respect the device's reduced-motion setting.
Make the widget big enough that squares stay easy to tap. The squares shrink to fit the widget, so several 10-frames need a larger widget than one 5-frame.