Widget Library

Number Input Widget

6 min readUpdated

Capture numeric answers through either a text field or a slider.

Use number input when the learner should produce a quantity, estimate, measurement, or calculation result.

For young learners (K–1) filling in an expression or equation, use a number sentence: numbers are tapped on a big pad, so no device keyboard appears.

Select the widget and click the floating ⚙ Configure button to open its setup dialog — layout, range, step, and the correct value all live there. See Configuring a Number Input Question for the full walkthrough.

Settings to know

  • Layout switches between a typed number field and a slider.
  • Smallest Answer sets the lowest value learners can enter (previously labeled Min).
  • Largest Answer sets the highest value learners can enter (previously labeled Max). It sits beside Smallest Answer so the allowed range reads as one pair. The range holds for typed answers too: if a learner types 25 into a field that goes up to 10, the field changes to 10 when they leave it and shows "Use a number from 0 to 10."
  • Step controls the interval the slider and the − / + buttons move by. A typed answer doesn't have to land on a step — with Step 1, a learner can still type 2.5.
  • Show Step Buttons (input layout) shows − and + buttons on either side of the field so younger learners can tap to step the value up or down by the Step amount, staying within Smallest Answer and Largest Answer. It sits right below Step, is on by default, and can be turned off for a plain field.
  • Show Value (slider layout) shows the slider's current number beside the track and updates it as the learner drags, so an exact answer like 9 on a 0–20 slider isn't guesswork. It's on by default; turn it off for "estimate without seeing the number" activities, and give those a Tolerance.
  • Default Value sets where the learner starts: where the slider's handle sits, and where the − / + buttons start counting from when the field is empty. It is not an answer. See Blank and untouched answers.
  • Placeholder (input layout) sets the hint text shown in the empty field — for example ? or Enter a number 1-10. It can include variables, like Enter a number up to {{ maxGuess }}. The field starts empty so this hint is visible, and the canvas shows it the same way (with {{ maxGuess }} as written — learners see the variable's value).

Sizing a number input

A number input sizes itself around its text, the same way text inputs do:

  • Drag a corner to scale the whole field — the number, the padding, and the − / + buttons grow together, and a badge shows the text size as you drag.
  • Drag a side handle to set how wide the field is. Width is the useful signal: a narrow box says "one or two digits", a wide one invites a longer figure.
  • Height is automatic. A number input is one line tall at its text size, so changing the Font Size setting resizes the field. It never gets smaller than a comfortable tap target, so learners on tablets can always hit it — and neither do the step buttons.

The field never changes size while a learner types, and the range, step, and placeholder never affect it — what you lay out is what they see.

Text, Button, Submit Button, Checkbox, Text Input, Dropdown, Number Input, Score, and Timer all size themselves this way. Other widgets still resize freely in both directions.

Fields you made before this update keep their exact size until you resize one or change its font size. When you do, the field settles into its automatic height right under your pointer — one undo puts it back. If a row of fields should match, select them all and drag one side handle so they update together.

Grading setup

Number input supports grading. The grading controls are in the Scoring section of the ⚙ Configure dialog.

  • Scoring (the On/Off switch at the top of the section) turns grading on or off for the response.
  • The widget's name is the readable label for this answer in results and conditions. Rename it at the top of the properties panel — see Widgets and widget settings.
  • Points sets how much the response is worth.
  • While Scoring is on, the response counts toward both the scene score and the lesson score.
  • Group lets you include the response in a custom grading group.
  • Correct Value is the target answer, set at the top of the Configuration section.
  • Tolerance sits right below Correct Value and sets how far a learner's answer can be from it and still count as right. A tolerance of 0 requires an exact match; a tolerance of 2 accepts anything within two of the target (for a correct value of 10, that's 8–12).

Tolerance is especially useful for estimation or measurement tasks, where an answer that is close should still earn credit. Step-by-step: Accept close-enough answers to a number question. Both ends count: for 2.5 with a tolerance of 0.1, both 2.4 and 2.6 are right.

If no answer a learner can give could be marked right — the Correct Value is outside Smallest Answer–Largest Answer, or a slider's steps skip over it — the ⚙ Configure dialog warns you before you save.

When a typed answer counts

A typed answer is recorded when the learner presses Enter or leaves the field (taps or clicks somewhere else). Either one checks the answer, so a scene that shows feedback or moves on when the answer is right reacts as soon as they press Enter. You don't need an instruction like "tap outside the box" on the scene.

Blank and untouched answers

  • An empty field is a skipped question and earns no points. It is not graded as the Default Value.
  • A slider nobody moved is graded where its handle sits — its Default Value — when the lesson is submitted. A learner who agrees with the starting position doesn't have to wiggle it. It still doesn't count as answered until they move it, so it can't trigger Is answered or pass a scene on its own.
  • A Set value or Reset action records an answer, the same as pressing − / +. Reset empties a typed field (a skipped answer again) and puts a slider back at its Default Value.

How to set up the content

Set a realistic range first. Then choose the layout: use an input for precise answers and a slider for quick estimates or scale judgments.

Useful setting combinations

  • Input layout + no tolerance:

Best for exact calculation answers.

  • Input layout + some tolerance:

Best for estimates, measurements, and rounded answers.

  • Slider layout + Smallest and Largest Answer:

Best for rating scales, estimates, and predictions.

  • Slider layout + Show Value off + some tolerance:

Best for "estimate where it goes" activities, where seeing the number would give the answer away.

  • Step value greater than 1:

Best when learners should count by a fixed interval.

Strong use cases

  • Solve a math problem and enter the result.
  • Estimate a value on a scale.
  • Make an ungraded estimate, then show the student their own number beside the real one. Save it with Set Variable → Widget property → Current value, and show it on a later scene with {{ estimate }}. Step-by-step: Reveal how close a student's estimate was.
  • Choose a rating or confidence level with a slider.

Great pairings with other widgets

  • Pair number input with text to explain the unit or scale.
  • Pair it with image for graph or measurement tasks.
  • Pair it with button when learners should confirm before checking. Step-by-step: Open a treasure chest with a secret code, where a Try the code button explains a wrong code.
  • Pair it with score in multi-question numeric practice scenes.

Learn by doing

Was this article helpful?