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.

Layout details:

  • Each dropdown menu is as wide as its widest value.
  • The baseline of the selected option is the same as that of the surrounding line of text.

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).

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 . The pointer 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.