Components
Created by Smart Sparrow

Fill in the Blanks - Dropdown

The Fill-in-the-Blank widget allows learners to select an answer via a dropdown of options. Multiple dropdowns can be set throughout some text.

Unique ways to use this widget

There are multiple ways you can use this widget. For example:

  • Ask students to define a term using drop downs.
  • Ask them to choose the correct grammatical form of a verb.
  • Ask students to summarize a lesson’s main concepts.
  • Construct a word equation to identify the correct reactants and products in a chemical reaction.

 

Have a play

 

Basic setup instructions

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. You must change the Mode to Config mode to set up the widget.
  4. Enter your text in the widget box and click to add dropdowns where you’d like to insert student responses.
  5. Click on a dropdown to configure the available options and place the green checkmark next to the correct answer.
  6. Before deploying your lesson to students, make sure you switch the widget from Config Mode into Student Mode.

 

Other options

  • The Show Solution CAPI property can be used to display all correct answers to students. You also have the ability to also display the correct answer for each specific dropdown.
  • The Show Validation CAPI property highlights correct answers in green and highlights incorrect answers in red. This can be useful as a hint for students as adaptive feedback. You also have the ability to also display validation for each specific dropdown.
  • The Enabled CAPI property allows you to enable/disable the widget as a whole or any individual dropdown.

 

FAQs

Q: I’ve set up my widget, but when I preview it I can’t complete the activity the way students should. A: This is because you still have the widget set to “Config” mode. Use the edit icon on the Widget’s iFrame to change it to “Student” mode. Whenever you want to make changes to the widget, switch it back to “Config” mode.

Q: Why use the Fill-in-the-Blank widget instead of Dropdown or Text input? A: HTML does not render text the same in every browser. If you try to align drag-and-drop or other inputs with additional text boxes, the formatting is not guaranteed to appear the same for every learner. Using the fill-in-the-blank widget ensures that the inputs and their surrounding text are always properly aligned.

 

Capi Table

Property Purpose Acceptable Inputs Readable Writable
Inputs.{id}.Is Correct
Reports whether the currently selected value is correct/incorrect
Boolean
Inputs.{id}.Show Validation
Show the student if their answer is correct/incorrect
Boolean
Inputs.{id}.Show Solution
Sets the currently selected value to the correct solution
Boolean
Inputs.{id}.Enabled
Enables/disables the drop down
Boolean
Inputs.{id}.User Modified
Reports whether the student has made a change to this input.
Boolean
Inputs.{id}.Selected Index
Reports which option is currently selected. For example, if the first option is selected, this reports 0.
Number
Is Correct
A flag to show if all inputs are correct
Boolean
Show Validation
Show the student if his/her answer is correct/incorrect for all inputs
Boolean
Show Solution
Sets all inputs to their correct solutions
Boolean
Enabled
Enables/Disables for all inputs
Boolean
User Modified
Reports whether the student has made a change to this input.
Boolean
Form Validation
Global form validation switch which enables/disables form style validation for all dropdowns.
Boolean
Inputs.{id}.Is Correct
A flag to show if the input of Input ID is correct/incorrect
Boolean
Inputs.{id}.Show Validation
Show the student if his/her answer is correct/incorrect for input of Input ID
Boolean
Inputs.{id}.Show Solution
Sets the input of {Input ID} to the correct solution
Boolean
Inputs.{id}.Enabled
Enables/Disables the input of Input ID
Boolean
Inputs.{id}.Value
The value that is currently selected/written in the input of Input ID
String
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Custom Css
Custom CSS
String
Persist.Sim ID
Sim ID to persist the widget state under.
String
Persist.Key
Key to persist the widget state under.
String
Inputs.{id}.Is Correct
Reports whether the current value is correct/incorrect
Boolean
Inputs.{id}.Show Validation
Show the student if their answer is correct/incorrect
Boolean
Inputs.{id}.Show Solution
Sets the value to the correct answer
Boolean
Inputs.{id}.Enabled
Enables/disables the text input
Boolean
Inputs.{id}.User Modified
Reports whether the student has made a change to this input.
Boolean
Inputs.{id}.Current Value
Reports what the current value of the text input is
String
Inputs.{id}.Placeholder
Sets the placeholder for the input field
String
Property Purpose Acceptable Inputs Readable Writable
Inputs.{id}.Is Correct
Reports whether the currently selected value is correct/incorrect
Boolean
Inputs.{id}.Show Validation
Show the student if their answer is correct/incorrect
Boolean
Inputs.{id}.Show Solution
Sets the currently selected value to the correct solution
Boolean
Inputs.{id}.Enabled
Enables/disables the drop down
Boolean
Inputs.{id}.User Modified
Reports whether the student has made a change to this input.
Boolean
Inputs.{id}.Selected Index
Reports which option is currently selected. For example, if the first option is selected, this reports 0.
Number
Is Correct
A flag to show if all inputs are correct
Boolean
Show Validation
Show the student if his/her answer is correct/incorrect for all inputs
Boolean
Show Solution
Sets all inputs to their correct solutions
Boolean
Enabled
Enables/Disables for all inputs
Boolean
User Modified
Reports whether the student has made a change to this input.
Boolean
Form Validation
Global form validation switch which enables/disables form style validation for all dropdowns.
Boolean
Inputs.{id}.Is Correct
A flag to show if the input of Input ID is correct/incorrect
Boolean
Inputs.{id}.Show Validation
Show the student if his/her answer is correct/incorrect for input of Input ID
Boolean
Inputs.{id}.Show Solution
Sets the input of {Input ID} to the correct solution
Boolean
Inputs.{id}.Enabled
Enables/Disables the input of Input ID
Boolean
Inputs.{id}.Value
The value that is currently selected/written in the input of Input ID
String
Mode
Mode of the widget
Config
Student
Config JSON
The configuration data for the widget.
String
Custom Css
Custom CSS
String
Persist.Sim ID
Sim ID to persist the widget state under.
String
Persist.Key
Key to persist the widget state under.
String
Inputs.{id}.Is Correct
Reports whether the current value is correct/incorrect
Boolean
Inputs.{id}.Show Validation
Show the student if their answer is correct/incorrect
Boolean
Inputs.{id}.Show Solution
Sets the value to the correct answer
Boolean
Inputs.{id}.Enabled
Enables/disables the text input
Boolean
Inputs.{id}.User Modified
Reports whether the student has made a change to this input.
Boolean
Inputs.{id}.Current Value
Reports what the current value of the text input is
String
Inputs.{id}.Placeholder
Sets the placeholder for the input field
String

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services