Image Layers

The image layers stimulus allows test takers to use one or more switches to alter the appearance of an image.

The following demo presents two cases of image layers being altered by switches.

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

Each image layer control is composed of a switch and a pair of labels, all of which are contained in a 2px gray #949494 border with rounded corners. Each control is typically placed below the center of the image element that it manipulates.

Switches

Switches are used for image layer stimuli rather than buttons to avoid state ambiguity. Each switch has a 3px border and a circular toggle. When the switch is selected, the toggle moves left or right to indicate the state of the switch and the associated image element.

Switches have the following states.

  • Enabled. The default state. Switch color is blue #0084FF . Switch receives the pointer cursor.
  • Disabled. Visible when the switch is inactive (e.g., when a modal system tool like Scratchwork is enabled). Switch color changes to gray #949494 . Switch receives the default cursor.

Switch Labels

Switch labels are approximately 83% the base font size. (See the Typography page for more information about typographical specs.)

Switch labels have the following states.

  • Default. Displayed when the associated switch is in the opposite position. Label color is gray #595959 . Label receives the pointer cursor.
  • Selected. Displayed when the associated switch is in the label’s position. Label color is black #000000 . Label receives the default cursor.

When a label is in the default state, selecting it causes the associated switch to change to the label’s position.