Widgets and Widget Settings

Widgets are the building blocks you place on a scene. They can be purely visual, fully interactive, graded, conditional, or part of a larger activity flow.

The easiest way to choose a widget is to ask one question:

What should the learner do here?

Finding a widget

Every widget lives in one place: Lesson Widgets, the Widgets tab of the left panel beside the canvas. The studio opens it for you whenever you add a scene, since a new scene starts empty. Open it and the cursor lands in the search box automatically, so you can start typing right away:

• Type any part of a widget's name — the search is fuzzy, so "wsr" finds Word Search and "txt" finds Text Input
• Or type what you want students to do. Search also reads each widget's description, so "drag" finds Drop Bucket, "highlight" finds Highlighter, and "aloud" finds Text to Speech — you do not have to already know our name for it. (Give it at least two letters; a single letter appears in almost every description.)
• With the box empty, every widget is listed in two groups: Most Common (the handful you reach for most: Text, Button, Image, Multi Choice, Text Input, Audio, Text To Speech, Container, plus the text presets) and Everything Else, each in alphabetical order
• Click a widget to add it to the canvas, or drag it straight onto the scene

The panel stays open beside the canvas while you place several widgets in a row. When you want the room back, collapse it with the button in its top-left corner (or click the Widgets tab again, or press ⌘ \\, Ctrl on Windows and Chromebooks); it folds to a slim strip of icons, and clicking the widgets icon there reopens it.

Every tile says what students do with it

An icon and a two-word label do not tell you much about Conveyor Belt or Rain Game, and the interesting widgets are exactly the ones you have never met. So hover any tile — or tab to it, if you work from the keyboard — and a small card appears with the widget's name and one sentence describing what students do with it: "Students drag items into the right bins to sort them into groups", "Students tap the correct items as they fall down the screen".

Those are the same sentences the search box reads, so browsing and searching agree with each other. The card disappears while you drag a tile onto the canvas, so it never follows your cursor across the scene.

When a widget is greyed out

Now and then we pause a widget — usually because we are fixing something in it, occasionally because we are retiring it. Here is what that looks like from your side:

• If your lesson doesn't use it, the widget simply isn't in Lesson Widgets — not in the list, and not in search.
• If your lesson already uses it, its tile stays in the list, greyed out. Hover it (or tab to it, or tap it) and it tells you why: it isn't available to add right now.

Nothing happens to the ones already in your lesson. They keep working for your students exactly as before, and you can still select them, open their settings, restyle them, rename them, move them to another scene, and delete them.

What you can't do is make more of them. Adding, duplicating, copying and pasting, copying to another scene, and duplicating a scene or layout that contains one (or saving that scene as a layout) are all paused for that widget — and for Image, so is dropping or pasting a picture onto the canvas. The studio tells you so in a short message at the top of the canvas instead of failing silently. When a selection mixes a paused widget with others, the whole copy is held back rather than quietly leaving one piece out — deselect the paused widget and the rest will copy as usual.

Undo and restoring from History are never affected: if you delete a paused widget by mistake, Undo brings it back.

Ask Berdee follows the same rule when it edits your lesson: it can edit a paused widget for you, and it will tell you if you ask it to add one. Whole scenes it builds for you aren't covered yet, so a new scene can occasionally include a paused widget — it works like any other, and you can delete it.

The kinds of widget

Lesson Widgets groups widgets by how often you reach for them, not by kind, so the groups below are only a way to think about what is available — reach for whichever one answers "what should the learner do here?"

Basic widgets

Use these to shape the page and guide attention.

• Button for navigation, reveals, or simple actions. More detail: Button Widget
• Submit Button for committing graded answers — either as a scene checkpoint or to finalize the whole lesson. More detail: Submit Button Widget
• Text for titles, directions, prompts, and explanations. More detail: Text Widget
• Heading, Subheading, and Body sit beside Text and drop the same widget already sized for that job, so you are not setting the size by hand on every scene. More detail: Text Presets
• Container for grouping related widgets and optionally scoring them as one task. More detail: Container Widget
• Shape for visual structure, emphasis, or decoration. Pick from the shape library in the Configure dialog, which opens as soon as you add one. More detail: Shape Widget

Input widgets

The largest group — anything where a learner gives an answer or does something hands-on. It spans typed answers, selection, and more physical tasks like dragging and sorting:

• Text Input for typed short responses. More detail: Text Input Widget
• Number Input for numeric answers. Set up its range and correct value in the Configure dialog. More detail: Number Input Widget
• Multi Choice for one or more selected answers. Set up its options and correct answers in the Configure dialog. More detail: Multiple Choice Widget
• Checkbox for simple yes or no decisions. More detail: Checkbox Widget
• Dropdown for choosing one option from a list. More detail: Dropdown Widget
• Fill Blank for completing text inline. More detail: Fill Blank Widget
• Long Answer for a longer written response. It isn't available yet: we're holding it back until you can read every student's response to a question side by side. More detail: Long Answer Widget
• Hotspot for tapping areas of a visual to explore or reveal them (it isn't a graded question). More detail: Hotspot Widget
• Find in Picture for a graded "tap every rectangle" question: learners find the things you marked in a picture, and taps on near-misses count as wrong. More detail: Find in Picture Widget
• Matching for pairing ideas or terms. More detail: Matching Widget
• Sorting List for ordering items. More detail: Sorting List Widget
• Drop Bucket for categorizing draggable items. More detail: Drop Bucket Widget
• Highlighter for selecting important language in text. More detail: Text Highlight Widget
• Drawing for sketching, annotating a diagram, or showing work. It isn't available yet: we're holding it back until you can see and grade the drawings. More detail: Drawing Widget
• Flashcard for recall and self-check moments. More detail: Flashcard Widget
• Conveyor Belt for scrolling a track of clickable options past learners — good for ordered or limited option sets. More detail: Conveyor Belt Widget
• Rain Game for fast-paced recognition and response across falling lanes. More detail: Interactive Rain Widget
• Word Search for vocabulary review and spelling practice in a letter grid. More detail: Word Search Widget

Media widgets

Use these to deliver visual and audio content.

• Image for pictures, diagrams, references, and visual prompts. More detail: Image Widget
• Audio for recorded prompts, directions, or listening tasks. More detail: Audio Widget
• Text to Speech for generated spoken text. More detail: Text to Speech Widget
• Video for demonstrations, explanations, or context. More detail: Video Widget

Display widgets

Use these to reinforce pacing and progress.

• Timer for urgency, pacing, or game-like structure. More detail: Timer Widget
• Score for showing progress and outcomes. More detail: Score Widget
• Spin Wheel for random outcomes that trigger per-segment actions (branching, prize wheel, vocabulary roulette). More detail: Spin Wheel Widget

The settings most widgets share

Even very different widgets share a common set of controls. This is useful because once you learn the pattern, new widget types become easier to use.

Name

Every widget has a name, and Berdee keeps names unique across the whole lesson — not just the scene you are on. Add two buttons and you get Button 1 and Button 2; copy one to another scene and the copy becomes Button 3.

That matters more than it sounds. The name is how you find the widget again later: it labels the widget when you pick what a condition looks at, when you choose which widget a score group counts, and on the path chips in the Lesson Graph. Those lists cover every scene in the lesson, so two widgets called "Submit" would be impossible to tell apart.

Rename anything to something you will recognize — Check my answer, Hint panel, Plant diagram — and the rest of the studio reads like your lesson instead of a list of types. Names can be up to 120 characters. If you pick a name that is already in use somewhere in the lesson, Berdee tells you so you can choose another.

To rename a widget: select it, then click its name at the top of the properties panel — the boxed field with a pencil beside it, just under the panel header. Type the new name and press Enter (or click away) to keep it, or press Esc to leave the old one. Moving straight on to another widget keeps your rename as well — you do not have to press Enter first. And if you try to leave the studio with a name still half-typed, Berdee warns you before the page goes — see Saving and auto-save. If the properties panel is closed, click ⛭ Properties on the pill above the selected widget: it opens the panel and puts you straight on the name.

Frame and placement

These settings control where the widget sits on the canvas and how it behaves in the editor.

• Position places the widget on the scene.
• Size controls how much space the widget takes.
• Rotation tilts the widget.
• Layer order decides which widget appears on top when items overlap.
• Locked prevents accidental movement or resizing while you edit.
• Opacity controls transparency. The slider sits under Rotation in the Layout fields.

Rotation and opacity look the same for learners as they do on the canvas, for every widget type. A widget that is locked after the learner answers dims a little further from whatever opacity you set, so a half-transparent widget still reads as "done" once it is locked.

Rotation runs from 0° to 360°, so a small tilt to the left is a number just under 360 (352° is 8° to the left). Click the slider near where you want it, then press ← or → to move 1° at a time. Step-by-step: Tilt and layer photos like a scrapbook page tilts three photos, brings one to the front, and tapes them down with see-through strips.

This group matters because layout is part of instruction. A hotspot only works if it is aligned correctly. A hint panel only feels intentional if it layers above the activity instead of underneath it.

#### Resizing on the canvas

Most widgets resize freely: select one and drag any of the eight square handles around it. Corner handles change width and height together; the handles on each side change one direction at a time. Hold Shift while dragging a corner to keep the widget's proportions, or Alt (Option on a Mac) to resize around the centre instead of the opposite corner. Rotated widgets resize along their own axes, so a tilted widget still grows the way it looks like it should.

Dragging stops at 40 × 24 pixels — small enough for a compact button, large enough to stay clickable on a tablet. The edge you are not dragging stays exactly where it is, so a widget never drifts across the scene while you resize it. The limit is the same whatever zoom level you are working at.

Need something smaller or an exact figure? Type it into the Size fields, which accept any value from 1 pixel up. Widgets sized that way can still be resized by dragging in the other direction.

Text, Button, Submit Button, Checkbox, Text Input, Dropdown, Number Input, Score, and Timer resize differently. None of the nine let you drag height directly: corner handles scale everything proportionally (with a live size badge), and side handles set a width instead. Where they differ is what decides the height. Text, Button, Submit Button, and Checkbox size around their own content — the label or text wraps into the width you set, and the box grows or shrinks to fit it. Text Input, Dropdown, Number Input, Score, and Timer instead derive height from the Font Size setting alone — a placeholder, a chosen option, a live score, or a countdown never resizes the box, only changing the font size does. The minimum size differs by type either way. See Text Widget for the content-sized model, or each widget's own page for the specifics.

Content

This is what the widget says or contains.

Examples:

• The button label
• The prompt text
• The answer choices
• The image source
• The audio source
• The timer length
• The flashcard front and back

Content is the setting group that changes the actual learning material. If the learner reads, sees, hears, or responds to it, it usually starts in content.

Widget-specific content settings

Every widget type has its own content settings in addition to the shared controls above.

Examples:

• Text widgets use Text and Width (Auto width or Fixed width)
• Image widgets use Image Source
• Audio widgets use Audio Source, Auto Play, and Loop
• Video widgets use Video Source, Auto Play, Loop, Show Controls, and Muted
• Timer widgets use Mode, Start Time or Max Time, Auto Start, and Display
• Score widgets use Scope, Format, and Label
• Graded widgets add answer choices, accepted responses, or correctness rules

Almost every widget keeps these settings in a ⚙ Configure dialog rather than the right sidebar — select the widget on the canvas and the button appears just above it. Every graded widget works this way, and so do audio, video, text to speech, shape, button, timer, and score. The sidebar then holds styling, layout, visibility, and behavior. An image has no dialog — its only setup is the picture, so its Choose image button opens the media library directly, and the sidebar's Image Source section lets you swap or remove it.

Text and the Submit Button are the deliberate exceptions: their words stay one click away in the sidebar, because the text of a text box or a button label is something you keep adjusting while you arrange a scene, not a one-time setup decision.

Two shortcuts survive the move, for the edits you make most: double-click an image, audio, or video widget on the canvas to open its media picker straight away, and double-click a button, checkbox, or text box to edit its words in place.

The widget library pages are still the best place to look up the settings for a single widget type. This guide focuses on the shared pattern that repeats across the studio.

Styling

This controls how the widget looks.

Common styling choices include:

• Font size and text color
• Background and border colors
• Corner radius
• Alignment
• Visual emphasis
• Display-specific layout choices

Styling should support the task instead of competing with it. If the widget needs to feel tappable, styling should make that obvious. If the widget is background structure, styling should stay quiet.

Cursor (behind Show more options) sets the mouse pointer learners see over the widget — for example Help on a hint card or Zoom in on a diagram. Leave it on Auto and each widget shows its usual pointer: a hand on buttons and answer choices, a grab hand on things you drag. Any other choice replaces those across the widget; a control that is locked after answering may still show the "not allowed" pointer.

Visibility

Widgets can be:

• Always shown
• Always hidden
• Shown or hidden only when a condition is met

This is one of the easiest ways to create progressive disclosure, hints, feedback, and branching inside a scene.

The canvas always draws every widget so you can select and edit it, even a hidden one. Widgets learners will not see as-is carry a dashed outline and a small label at the top-left corner: Hidden, Shown by rule, or Hidden by rule. Use Preview to see the scene exactly as a learner will.

More detail: Events, Actions, and Conditions

If you want cross-widget logic examples, read Widget State and Actions and Interaction Recipes.

Effects

Widgets can use entrance or attention effects to reinforce a moment. Every widget has an Effects section in its settings panel, so you can add, change, or remove effects on any widget — including effects the assistant added for you.

Use these sparingly. Effects are strongest when they help the learner notice something important, not when everything is moving at once.

Common uses:

• Fade in a success message
• Fly in a new challenge card
• Add a subtle celebration to a score reveal
• Draw attention to a retry button after submission

Effects are widget-level, not scene-level. In practice that means you apply them to the specific item that should gain attention, not to the whole scene container.

Effects play when the lesson actually runs — entrance effects fire as the scene loads and attention effects (like spin or pulse) loop while the widget is on screen. The editor canvas stays still so you can position things precisely; to watch an effect, open Preview & test. What you see in preview is exactly what students see.

You can stack more than one effect on a widget — for example a fly-in entrance plus a gentle pulse. A "Fly In" set to Random picks a consistent direction for that widget based on where it sits on the canvas, so it won't change every time the scene loads. Effects respect each learner's reduced-motion setting: when that's on, widgets settle straight into place instead of animating.

The repeating attention effects — Spin, Pulse, Bounce, Swing, and Tada — each have a Loop forever switch. Leave it on for a continuous attention-getter that keeps moving while the widget is on screen. Turn it off to play the effect a set number of times and then stop: for Spin that's the Rotations count, and for the others a Times count appears so you can choose how many repeats the learner sees. Use a finite count when you want the motion to draw the eye once and then get out of the way.

Entrance effects have no delay: every one starts the moment the scene opens. To bring several widgets in one after another, give each a longer Duration than the last, so they set off together and land in turn. For a step-by-step example, see the tutorial Make a scene come alive with effects.

Behaviors

Some widgets can respond to events like:

• Hover
• Press
• A correct selection
• A wrong selection
• Timer completion
• Drag and drop outcomes

Those behaviors can trigger actions such as navigation, variable updates, answer submission, or feedback.

For feedback that should interrupt the learner until they acknowledge it, use the Display Message action. It shows a modal message over the current scene and can be styled as normal, success, or failure.

The usual pattern is:

1. A learner does something
2. The widget fires an event
3. A condition checks whether the action should happen
4. One or more actions run

Examples:

• A button press reveals a hint
• Submitting answers navigates to a pass or retry scene
• A follow-up prompt appears once an audio clip Has finished (a visibility condition)
• Dropping an item into a bucket updates a variable

Accessibility

Widgets also support accessibility settings such as alt text when the widget needs descriptive support for assistive technologies. Every widget type passes its alt text to screen readers: controls such as inputs, images, and players use it as their own name, and other widgets announce it as the name of the whole widget — for example, "Mammals" for a drop bucket, or "Birdsong plays in the background" for an invisible audio clip.

This matters most for:

• Images
• Decorative vs meaningful media
• Buttons whose visual label is not enough on its own

For a step-by-step walkthrough, see the tutorial Describe your pictures for screen-reader users: it rewrites a photo's description, names an arrow for what it does, and leaves decorative sparkles undescribed.

Grading

Gradable widgets add grading controls on top of the shared settings. Input and interactive widgets — and the spin wheel — arrive with Scoring already on, so a question starts counting toward the score the moment you add it. Turn it off for the support cases described below.

The grading controls live in the Scoring section of a widget's ⚙ Configure dialog:

• Scoring — the On/Off switch at the top of the section
• Points — how much the answer is worth
• Group — an optional grading group for custom grading flows

A widget with Scoring on counts toward both the scene score and the lesson score. Its name, which you edit at the top of the properties panel, is how it's labelled in results and conditions.

Use grading when the learner response should count toward success, branching, or visible score. Leave it off for support widgets, decorative pieces, and media that only delivers the prompt.

Containers add one extra grading idea: aggregation. A scored container can own the scores of its child widgets and contribute one combined result to the scene or lesson score. This is useful when several small answer widgets form one larger task and should not be double-counted individually.

How to choose the right widget

Choose the simplest widget that matches the task

If learners just need to continue, a button is enough.

If they need to choose from options, use multiple choice or dropdown.

If they need to manipulate content spatially, use matching or drop bucket. To let them explore an image, use hotspots. To grade whether they can find things in an image, use find in picture.

Match the widget to the kind of thinking you want

• Recognition tasks work well with multiple choice and dropdowns
• Recall tasks work well with text input and flashcards
• Sequencing tasks work well with sorting
• Categorization tasks work well with drop buckets
• Close reading tasks work well with text highlight

A practical example

For a science lesson on plant parts:

• Use text for the instruction
• Use an image of the plant
• Place hotspots over the stem, roots, and leaves that reveal what each part does
• Number the parts, then check them with a dropdown per number
• Use a button to move to the next scene
• Reveal a score or feedback widget after submission

That is a much stronger fit than forcing the whole task into a single multiple choice question.

How widgets work together

Most strong scenes use several widgets with different jobs instead of one widget doing everything.

A practical structure is:

• One widget gives the prompt
• One or more widgets collect or display the learner response
• One widget controls submission or navigation
• One or more widgets handle feedback, score, or support

Examples:

• Text + image + hotspot for visual exploration
• Audio + text input for transcription
• Video + button + score for a watch-then-check flow
• Text + dropdown + hidden feedback text for guided practice

That is the real strength of the studio. Widgets are not meant to be isolated components. They are meant to work together as a scene-level system.

Recommended next reads

• Choose the Right Widget
• Editing Several Widgets at Once
• Widget Toolbar Actions
• Scene Settings
• Variables
• Events, Actions, and Conditions