Widget Library

Dropdown Widget

4 min readUpdated

Let learners choose one answer from a compact list when you want to save space or repeat the same pattern several times.

Use a dropdown when the learner should choose one option from a list but you do not want all choices visible at once.

Select the dropdown on the canvas and click the floating ⚙ Configure button to open its setup dialog — the placeholder, options, and answer key all live there. See Configuring a Dropdown for the full walkthrough.

Settings to know

  • Placeholder tells learners what kind of choice to make.
  • Options are the choices learners can select. Drag the grip handle beside an option to reorder the list.
  • Randomize order shuffles the options on each scene load so their position can't give away the answer.

For each option, set the visible label and mark whether it counts as a correct answer. You can mark more than one option correct — the learner picks a single option, so any option you mark is accepted as correct.

Sizing a dropdown

A dropdown sizes itself around its text, the same way text boxes do:

  • Drag a corner to scale the whole control — the text, the padding, and the arrow grow together, and a badge shows the text size as you drag.
  • Drag a side handle to set how wide the control is. The width is yours to choose: a wide dropdown suits long option labels, a narrow one keeps a worksheet tight.
  • Height is automatic. A dropdown is one line tall at its text size, so changing the Font Size setting resizes the control. It never gets smaller than a comfortable tap target, so learners on tablets can always hit it.

Long option labels don't change the width — they shorten with an ellipsis, so your layout stays put no matter what you name an option. On most devices the open list uses the same font as the control; some phones and tablets use their own system menu instead.

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.

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

Grading setup

Dropdown 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 dropdown.
  • 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 dropdown is worth.
  • While Scoring is on, the dropdown counts toward both the scene score and the lesson score.
  • Group lets you include the dropdown in a custom grading group.

Responding to a pick

Use Behaviors to respond as soon as a learner chooses. On Wrong Selected runs each time they pick an option you didn't mark correct, so every wrong guess gets your hint. On Correct Selected runs each time they pick one you did. The Give instant feedback on a wrong pick idea sets up a "try again" message in one click. Details: Events, Actions, and Conditions.

If grading is on, mark at least one option correct. With none marked, no pick can ever be right. If the scene needs this answer before learners can move on, Berdee won't publish the lesson until you fix it, because nobody could get past it.

How to set up the content

Use the placeholder to tell the learner what kind of choice to make, such as "Choose a verb tense" or "Select the matching term". It shows faded until the learner picks, so it never looks like an answer that's already chosen. Keep options short enough to scan quickly.

Useful setting combinations

  • Short placeholder + 3 to 6 options:

Best for compact checks inside a larger scene.

  • Dropdown + fill-in sentence text:

Best for grammar, vocabulary, and cloze-style decisions.

  • Grading on + one or more correct options:

Best for quick self-checks; mark several when more than one answer is acceptable.

  • Selected value condition:

Best when a choice should reveal a matching explanation or next step.

Strong use cases

  • Grammar or vocabulary checks inside a worksheet-style layout.
  • Choosing labels for repeated diagrams or categories. _Example: Label a diagram with dropdowns, where four dropdowns label the parts of a volcano._
  • Compact review forms with several short decisions.
  • Ungraded choices the lesson uses later. Switch Scoring off, and a Set Variable action with Widget property can copy the dropdown's Selected value into a variable. _Example: Build a silly story from words students pick, where three dropdowns fill in a story on the next scene._

Great pairings with other widgets

  • Pair dropdowns with text to build sentence-completion tasks.
  • Pair a dropdown with an image so learners label parts of a visual.
  • Pair it with button for submit-on-demand scenes.
  • Pair it with score in a multi-question review screen.

Learn by doing

Was this article helpful?