Fingers Widget
Show a number on drawn hands, or let learners raise fingers to show a number, from 0 to 10 (or 20 with a partner's hands).
Showing a number on your fingers is one of the first ways children connect a number to a quantity. The Fingers widget draws hands in Berdee, each finger up or down, so the number is always exactly right. A generated picture of "a hand with 3 fingers up" often has the wrong count; these hands never do.
Learners can read a number on the hands, raise fingers to show a number, or act out a story ("4 frogs on a log, then one jumps away") by putting fingers down or up.
Select the widget on the canvas and click the floating ⚙ Configure button to set it up. The mode, hands, numbers, look and scoring all live there, with a preview.
Berdee can't see a child's real fingers, and it never uses the camera. Raising fingers on the drawn hands checks that a child connects the number to a finger pattern. Keep saying "Show me on your fingers" in the lesson, then "Now show it on the hands", and watch the real thing in class.
Three modes
- Show me asks learners to raise fingers to show a number, then tap Done. It is graded.
- Act it out starts with some fingers up. As the story changes the number, learners put fingers down or up to match, then tap Done. It is graded.
- Show displays a number on the hands for learners to read. Learners can't change it. Turn on Count up to raise the fingers one at a time as the count is spoken, which is a good way to count to 10 together.
Show never counts toward a score and never records an answer, so the Configure dialog hides the Scoring section for it.
How learners use it
- Raise or lower a finger: tap it. A raised finger stands up; a lowered finger folds down behind the palm.
- + and −: big buttons under the hands. + raises the next finger in counting order and − lowers the last one raised. They're there for children who can't yet tap one finger accurately.
- Done: a big check button. Nothing is judged until the learner taps it, so reaching 3 on the way to 4 never counts as an answer. A wrong Done leaves the hands as they are, so the child fixes them instead of starting over.
- Keyboard: Tab moves into the hands as one stop. Arrow keys move between fingers, Space or Enter raises or lowers one, and the + and − keys work too.
Any fingers count. If the answer is 3, the index, middle and ring fingers are right, and so are a thumb on one hand and two fingers on the other.
Settings
| Setting | What it does |
|---|---|
| Mode | Show me, Act it out or Show (see above). |
| Hands | One hand (0 to 5), Two hands (0 to 10), or Two children (0 to 20): one child's 10 fingers beside a partner's, for teen numbers as "10 and some more". |
| Fingers up (Show) | How many fingers are up, in counting order. To pick exactly which fingers, tap them in the preview. Use counting order goes back. |
| Count up (Show) | When the scene starts, the fingers go up one at a time as the count is spoken. |
| Start with (Act it out) | How many fingers are up when the scene starts. |
| Answer | How many fingers must be up for a right answer. |
| Check | When Done is tapped (the default) grades only when the learner taps Done. As soon as it matches grades every change, so the scene can move on the moment the count is right. |
| Show + and − buttons | The big buttons under the hands. |
| Counting order | Index finger first (the default) or Thumb first. Families count differently, and any fingers are right either way; this only sets the order +, Count up and the starting fingers use. |
| View | Like your own hands draws the backs of the hands, the way children see their own hands held up. Like a friend's hands draws the palms. |
| Skin tone | The hands' skin tone. It's set once for the lesson: changing it here changes every Fingers widget in the lesson. |
| Speak the count | Says the new count each time a finger goes up. It uses the device's built-in voice. |
| Show the numeral | Off, After a right answer, or Always: the number of raised fingers appears beside the buttons. |
Worked example: "Show 3"
- Add a text widget that says Show 3 on your fingers. and a text to speech widget that reads it aloud.
- Add Fingers from the toolbox. It starts in Show me mode with two hands and an answer of 3.
- Click ⚙ Configure. For a group up to 5, set Hands to One hand.
- Leave Check at When Done is tapped, so a child who passes 3 on the way to 4 isn't graded on 3.
- Set the scene to move on when correct, or add a submit button, as for any other question.
For "Show 7", use two hands and set the answer to 7. For a teen number like 17, use Two children in Show mode: one child shows all 10 fingers and the partner shows 7.
Worked example: the frog story
- Set Mode to Act it out, Start with to 4 and Answer to 3.
- Narrate: "4 frogs sit on a log. One jumps away. Show how many are left."
- Learners see 4 fingers up and put one down, then tap Done.
Asking "which hand shows 3?"
To have learners pick a hand, put three Fingers widgets in Show mode side by side (for example 2, 3 and 4), and place a hotspot over each one. Mark the hotspot over the 3 as correct. Each hand is drawn exactly, so the question is always fair.
Grading
In Show me and Act it out, the widget is correct when as many fingers are up as the answer, on any hand, in any combination. Points are all or nothing. The fingers a learner raised 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 showed, for example "Showed 3 (left index, left middle, left ring) ✓ first try", or "Showed 4, then 3 ✓ · 2 tries". With When Done is tapped, the Attempts column counts Done taps: a right first Done is 1 attempt.
The lesson can't be published while the answer is more than the hands can show (6 on one hand), while a story starts on its own answer, or while Show me 0 is set to check as soon as it matches (it would be right before the child does anything). The Configure dialog also warns when the fingers are too narrow to tap easily; make the widget bigger.
Behaviors and logic
The Fingers widget reports these for conditions and variables:
- Fingers up, Left hand count and Right hand count
- Is correct and Is answered
- Done taps: how many times the learner tapped Done
Its On Fingers Change event runs every time a learner raises or lowers a finger. It doesn't run when a behavior calls Set count, Count up or Reset. On Done runs on every Done tap, after Is correct and Done taps update: for example, a Display Message with the condition _Fingers up = 4_ that says "Count them again."
Its actions are Set count (raise a number of fingers in counting order, for a demonstration), Count up (raise the fingers one at a time with the count spoken) and Reset.
Accessibility
- Every finger is a button that a screen reader names, like "Left hand, index finger, up". Each hand says its count ("Left hand, 2 fingers up"), and every change is announced.
- Up and down look different by shape, never by color. Skin tone is only how the hands look.
- +, − and Done are large buttons, and everything can be done by tapping; nothing needs a drag.
- The fingers' movement respects the device's reduced-motion setting.
- With Speak the count on, a screen-reader user hears each count twice (the voice and the announcement). Turn it off for those learners if that's distracting.