Conveyor belt widget

Conveyor belt is a game-style widget where options scroll continuously across or down the widget frame and learners click the correct ones as they pass. It is well suited to fluency drills, quick vocabulary recognition, and math-fact practice where keeping up with the pace is part of the challenge. Use it to add variety and energy to a scene without moving away from graded work — it supports full scoring, three correctness modes, and both text and image content.

Adding it to a scene

Open Lesson Widgets, find Conveyor Belt (or type belt in the search box), and drag or click it onto the canvas. A default belt appears with ten text options, Option 1 through Option 10, with Option 1 marked correct. Replace them with your own. Resize the widget frame to control how many options are visible at once — a wider frame shows more items side by side; a taller frame gives each item more height.

Configuring options

Select the belt on the canvas and click the floating ⚙ Configure button to open its setup dialog — the options, belt motion, and scoring all live there. See Configuring a Conveyor Belt for the full walkthrough.

Each option can carry both a text label and an image. The Mode toggle (Text / Images) at the top of the Content section controls which is displayed; switching modes never erases the other field, so you can flip back without losing your work.

• In Text mode, type a label for each option directly in the list.
• In Images mode, use the image picker for each option to attach a photo or illustration.

You can add up to 50 options and delete any that you no longer need. When scoring is on, each option shows a Correct toggle next to it — mark the ones that count as correct answers.

Direction and speed

Direction sets whether the belt scrolls horizontally or vertically.

• Horizontal scrolls left or right. Use Scroll From to choose which side items enter from.
• Vertical scrolls up or down. Use Scroll From to choose whether items enter from the top or bottom.

Speed (px/s) (10–400) controls how fast the belt moves. Start around 80 for most audiences and increase it once learners are comfortable. Faster speeds raise difficulty; slower speeds reduce cognitive load and work better for emerging readers or learners using assistive technology.

Picking options

A learner picks an option by tapping it. A pick is final: every option comes around again on the next loop, and tapping one that's already picked does nothing. It can't be un-picked, and it doesn't fire On Press Correct or On Press Incorrect a second time.

Correctness modes

Correctness Mode decides what counts as a correct answer, and when the belt ends.

• All correct — the learner must pick every option marked correct without picking any incorrect one. The belt ends once every correct option has been picked, even if the learner picked a wrong one along the way (the answer is then marked wrong). Use this for comprehensive recall tasks.
• At least one — picking any correct option, with no incorrect picks, is correct. The belt ends on the first correct pick, even after a wrong one (the answer is then marked wrong). Use this when a single good example is enough.
• At most one — the first pick ends the belt, right or wrong. If it was a correct option the learner passes; if not, they don't. Use this for binary recognition drills where you want exactly one decision.

When the belt ends, it keeps scrolling but its options can't be tapped anymore. Every picked option is outlined green or red, On Belt Complete fires, and the belt's Is complete property turns true, so you can use it in a condition (for example, to show a Next button only once the belt is done).

Give learners a way on after a wrong pick

Because a pick is final, one wrong tap makes the belt's answer wrong for good in every correctness mode. A scene that moves on only "when correct" (the scene's automatic advance) then never moves on for a learner who slipped, and they're left tapping a belt that can't pass. The studio's publish check warns about this as One Wrong Tap Leaves the Scene Stuck.

To fix it, give the scene a way forward that doesn't need a correct answer:

• Add a Continue or Next button that goes to the next scene. To keep it out of the way until the belt is done, show it only when the belt's Is complete is true.
• Or add a Navigate to Scene action to the belt's On Belt Complete, which fires when the belt ends whether the answer was right or wrong.

With At most one, the very first tap is the answer. Make sure learners understand the stakes before they start. Pairing it with a Text widget that reads "Tap the first correct option you see" helps set expectations.

Scoring

Scoring Mode controls how points are assigned.

• Whole — the belt is worth a fixed number of Points. The learner earns all of them for a correct answer and none otherwise.
• Per option — each correct option the learner picks is worth Points per option. The belt is worth that times the number of correct options, and the Scoring section shows the total ("Worth up to 6 points."). The Points field is hidden in this mode, because it isn't used. With At most one or At least one, the belt ends after one pick (or one correct pick), so it's worth one option's points. Wrong picks cost nothing in this mode: a learner who picks every option still earns every correct option's points. A wrong pick only means the belt isn't marked correct, which matters for Is correct conditions and for On Belt Complete logic. If wrong guesses should cost the learner, use Whole instead.

Switch Scoring on (the On/Off switch at the top of the Scoring section) to include the belt in the score. While Scoring is on, it counts toward both the scene score and the lesson score. Use Group to include it in a custom grading group.

Feedback

Feedback controls when the colored outline appears on a picked option.

• Immediate — a green outline appears on a correct pick and a red one on an incorrect pick, right away. It fades after the Feedback Duration (ms) (100–2000) you set.
• Deferred — no outline appears during play.

Either way, when the belt ends every picked option is outlined with its result and stays that way, so learners see the full picture at once.

You can change the outline colors with Correct Feedback Border and Incorrect Feedback Border, and its thickness with Feedback Border Width, in the Style & Layout section of the right sidebar.

Background image and styling

Use the Style & Layout section of the right sidebar to set a Background Image behind the scrolling track, and adjust Cell Background, Cell Text Color, Cell Border Radius, Cell Gap, and the option Font. The canvas shows option text in the font you choose and image options as their pictures. These controls let you match the belt's appearance to the rest of your scene without writing any CSS.

Accessibility

The conveyor belt includes several built-in accommodations.

Pause / Resume control — a Pause button appears in the lower-right corner of the widget during runtime. Learners can tap or click it at any time to stop the belt, then resume when ready. Pausing does not affect scoring or the options already picked. This satisfies WCAG 2.1 SC 2.2.2 (Pause, Stop, Hide) and is especially important for learners who need more time to read each option or who find continuous motion distracting.

Reduced motion — when a learner's device has the "reduce motion" system preference enabled, the belt switches automatically to a static grid of all the options with no animation. If the widget frame is too small to show every option, learners can scroll the grid to reach the rest. The Pause button is hidden in this mode because there is nothing to pause. Learners can still click options normally and scoring works identically.

Keyboard — all option cells and the Pause button are reachable by Tab. Press Enter or Space to pick the focused cell. Cells display a visible focus ring that meets contrast requirements, and a screen reader announces a picked option as "selected" — the colored outline alone isn't enough, and with Deferred feedback there is none until the end.

Touch targets — each cell is at least 44 × 44 px regardless of frame size, meeting the WCAG touch-target minimum.

Moving content tradeoff — scrolling content is more demanding than static content for many learners. Use conveyor belt when the motion is meaningful (pace is part of the challenge) rather than decorative. If pace is not part of the learning goal, Multiple Choice or Interactive Rain may serve the task better.

Tips

• Start with fewer options at a slower speed. Ten options at 80 px/s is a good baseline. Add more or increase speed only after confirming learners can manage the cognitive load.
• Moving content is demanding. Conveyor belt works best as one focused activity in a scene, not as a background element behind other tasks. Avoid placing it alongside other animated widgets.
• At most one is a great attention-check. Use it for a single "Tap the verb" or "Tap the prime number" moment at the start of a scene before moving to deeper work.
• Pair with a Text widget to give learners the rule before the belt starts. Once the belt is visible, there is no time to read a long prompt.
• Per-option scoring rewards partial progress. If learners might not finish the belt before a scene transition, per-option scoring gives them credit for the correct options they did find.

Great pairings with other widgets

• For a step-by-step build, see the tutorial Build a conveyor-belt math game with a live score: students tap every multiple of 3, a score counts each find, and a Next button appears once the belt is complete.
• Pair conveyor belt with text to give the task rule before the belt appears.
• Pair it with score for arcade-style progress feedback.
• Pair it with timer when you want external time pressure in addition to the belt's natural pace.
• See also Interactive Rain for a falling-item variant and Multiple Choice for a static-option alternative when pace is not part of the task.
• See Flashcard for self-paced recall without scoring pressure.