Grid

The grid and SQ choice response types allow test takers to respond to an item by selecting from an array of options presented in a tabular format.

  • The first column contains the option label (either text or image).
  • Subsequent columns contain the category names and the options, selectable via radio button or checkbox (see the Checkboxes & Radios page for more information).

Layout details:

  • Left and right margins differentiate the table from stem and stimulus text.
  • The table can take up the full width of the content area in which it resides.
  • Option label column width varies to accommodate content.
  • Option columns are all the same width. By default, they are 6.25x the base font size by default, but they may be set to 8.33x or 11.67x if needed to accommodate longer words.
  • Option labels are left-justified. Category names are centered.

Option rows are zebra striped. In odd rows, option label cells are light blue #D6EBFF , and option cells are a darker blue #F5FAFF . In even rows, both option label cells and option cells are white #FFFFFF .

A Clear Answer button is provided beneath the option table, and is aligned to the left side of the table. The button is styled as a small secondary filled button (see the Buttons page for more information).

Option States

Grid option cells have the following states. Colors match those of the Multiple-choice response type.

  • Default. Options are surrounded by a light gray #CCCCCC border.
  • Hover. Visible when the cursor is over the option row. The border for the entire row becomes blue #7FBFFF . The pointer cursor is shown over the entirety of each option cell because test takers can click or tap anywhere in a cell to select its option.
  • Selected. The border for the entire row becomes bright blue #198CFF to indicate that (at least) one selection per row is required, and the selection state of the radio button/checkbox is toggled.
  • Disabled. Visible when the option is inactive (e.g., when a modal system tool like Scratchwork is enabled). The option cell background and selection indicator are dimmed.

The following demos present a single-select grid item variant and a multiple-select grid item variant.

Single-select Variant

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Multiple-select Variant

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.