Zones

The zones response type allows test takers to respond to an item by selecting regions of an image. The response image for a zones item can be of any type, including line art and photographs, provided the selection areas are visible.

Presentation

Zones selection areas have the following states.

  • Default. There is no visual indicator for selection areas by default.
  • Selected. A dashed yellow #FFFF00 and blue #1F8FFF outline and a translucent blue rgba(51, 153, 255, 0.2) fill are applied.
  • Hover. Visible when the cursor is over the selection area. A translucent blue rgba(51, 153, 255, 0.2) fill is applied to unselected areas, or its opacity is increased to 40% for selected areas. The pointer cursor is shown.
  • Focus. The simple dotted outline used to indicate focus elsewhere in the system (see the Indicators page for more information) is not easily visible on all images, so a white #FFFFFF and black #000000 dotted line is used.

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

Single-select Variant

The following demo presents Clear Answer buttons associated with a single-select zones item and a single-select zones item with tiles, respectively.

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

Multiple-select Variant

The following demo presents a Clear Answer button associated with a multiple-select zones item.

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