Widget Library

Button Widget

4 min readUpdated

Use generic buttons to move a learner forward, reveal content, reset work, or trigger non-submission actions inside a scene.

The button widget is the simplest way to make a scene respond. Use a regular button for navigation, reveal/hide actions, retry/reset flows, media controls, and other actions that are not submitting scored answers.

For graded answer submission, use a Submit button instead of a regular button. Submit buttons are designed to run the submit answers action and work with scored scenes.

Where the settings live

Select the button on the canvas and click the floating ⚙ Configure button to open its setup dialog — the label and click scoring live there, next to a live preview. The right sidebar keeps Style & Layout (font, colors, border radius, the Width mode, size and position).

Shortcut: double-click the button on the canvas to edit its label in place, the same way you would a text box. Use it when all you want is different wording.

Settings to know

  • Label sets the text shown on the button.
  • Double-click the button on the canvas to edit the label in place, or use the Label field in the ⚙ Configure dialog. Labels are single-line — pasted line breaks become spaces — but a long label wraps neatly inside a narrower button.
  • New buttons size themselves around their label, the same way text boxes do:
  • Corner handles scale the label text — drag a corner and the whole button grows or shrinks proportionally (a small badge shows the live text size).
  • Side handles set the button's width — the label wraps at that width and the height adjusts to fit.
  • The Width control in the Properties panel switches between Auto width (the button hugs its label) and Fixed width (you choose the width; the label wraps).
  • Want a bigger tap target than the label needs? With Fixed width, set a larger Height — the button keeps your height as extra padding around the label, even when you edit the label later.
  • Buttons keep a minimum size in the lesson canvas so young learners can tap them reliably. (The on-screen size students see still depends on their device's screen size.)
  • Buttons in lessons made before this change keep their exact size and look until you edit a label or resize one — then it adjusts to fit its text. Undo restores the old size in one step.
  • A label with a variable like {{score}} is sized using the variable's name, not its value — if the live value can be long, choose Fixed width so the button doesn't overflow.

Grading setup

Buttons can be scored when you want learners to earn points just for taking an action — clicking a "Play Sound" control, opening a hint, or pressing a "Try Again" button. Turn Scoring on in the ⚙ Configure dialog, then set:

  • Points per click — how many points the learner earns each time they press the button. Defaults to 1.
  • Max points — the total number of points this button is worth across the whole attempt. Defaults to 1.

Each press awards Points per click, up to Max points. Once a learner has reached the maximum, further presses do nothing toward the score. Max points is also what this button contributes to the scene and lesson totals shown in the score widget.

What a scored button does and doesn't do:

  • A press is not an answer, so Reset answers never clears it. A scored Try Again button wired to reset answers keeps the point it just earned, and points from a Show Hint button survive a reset from any other button.
  • It doesn't move the learner on by itself. A scene whose only scoring is a scored button never counts as "correct", so its Progression never auto-advances — add a navigate action (for example, on a Continue button) to move on. On a scene that also has questions, the button's points still count toward a Cumulative scene score.
  • Submitting the scene freezes its points, not the button. After a Submit button checks the scene, the button keeps working — its actions (navigate, reveal, play, reset) still run — but further presses earn nothing.
  • **Don't score a button on the Closing Scene.** Reaching the ending locks every score, so presses there never count and the button would add 0 out of its Max points. The studio shows a hint on the button and a publish warning.

For graded answer submission (multiple choice, fill-in-the-blank, matching, etc.), still use a Submit button wired to submit answers — those check learner responses against a correct answer, while a scored regular button is a "press to earn" mechanic.

How to set up the content

Use a label that tells the learner exactly what happens next, such as "Check Answer", "Show Hint", or "Continue". Avoid vague labels like "Next" when the button is doing something more specific.

Useful setting combinations

  • Label Continue + navigate action:

Best for moving to the next scene without grading.

  • Label Try Again + reset answers action:

Best for practice a learner can redo: clears every answer on the scene that hasn't been submitted. Reset can't take back a submitted answer, so a scene that offers Try Again checks answers with a condition (for example "every question Is correct") rather than a Submit button — Let students check their work and start over builds one. If the button is scored, its own points are kept — reset answers clears answers, not button presses.

  • Label Reveal Hint + Show action on a hidden text widget:

Best for support that learners control.

  • Label Play Audio + Play action on an audio widget:

Best when the audio player itself should stay visually quiet.

Strong use cases

  • A "Start Challenge" control that begins a timed activity.
  • A "Reveal Explanation" control after a learner attempts a problem.
  • A "Continue" control that moves from an ungraded instruction scene to the first task.

Great pairings with other widgets

  • Pair a button with an image to reveal a diagram only after the learner is ready.
  • Pair a button with text to show a hidden hint or worked example.
  • Pair a button with score to move learners to a results scene after a Submit button checks their work.
  • Pair a button with timer to start or reset a challenge flow.

Learn by doing

Was this article helpful?