Inline-choice
The inline-choice response type allows test takers to respond to an item by selecting options from a dropdown list. Menu options can include images, MathML, or styled (italic, bold, underlined) text.
Dropdown Buttons
Inline-choice dropdown menu buttons have the following states.
- Default. Button has a thin gray
#595959
border, rounded corners, and a gray#595959
caret at its right side. The button contains no text. - Selected. Visible when an option has been selected from the dropdown menu. The button is populated with the content of the selected option.
- Hover. Visible when the cursor is over the button. Border color and caret color are darkened, and a drop shadow is added. The
pointer
icon is shown. - Disabled. Border color and caret are dimmed to indicate that the dropdown is inactive, but selected content, if present, remains at default color.
Dropdown Menus
An inline-choice dropdown menu opens when the test taker selects the associated button. The menu closes when the test taker selects the button again, selects a menu option, or taps or clicks elsewhere on the screen. The menu animates down when opened but disappears immediately when closed.
When the menu would be cut off by the bottom of the browser window, it opens above the associated button rather than below.
When the associated button becomes disabled, the menu automatically closes.
Only one dropdown menu may be open at a time.
Dropdown Options
Inline-choice dropdown options have the following states.
- Unselected. This is the default state.
- Selected. Visible when the test taker has previously selected an option and re-opens the dropdown menu. Background color changes to a light blue
#D6EBFF
. - Hover. Visible when the cursor is over the option or when the option has focus. Text color (if option content is text) changes to white
#FFFFFF
, and background changes to medium blue#0068D1
. Thepointer
cursor is shown. Hover state overrides selected state.
Note: The following demo presents an item featuring the in-line choice dropdown menus.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Note: Demo does not include TTS behavior for inline-choice dropdown menus. See the Text-to-speech page for a description of TTS behavior.
Layout details:
A Clear Answer button is provided at the bottom left of the response area. The button is styled as a small secondary filled button (see the Buttons page for more information).