Box-and-whisker

The box-and-whisker response type allows test takers to respond to an item by placing and manipulating interactive box plots. Placement may be omitted based on the measurement goals of a given item.

The following demo presents the box-and-whisker response type. The demo has limited functionality for the purpose of showing its themes and styles.

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

Source Tray

When box plot placement is enabled in an item, a source tray is provided above the graph (see below). The source tray has the same styling as those used for the Matching response type. Box plot(s) in the source tray do not have sizing handles to help test takers understand that they must drag plots to the graph to manipulate them.

Graph

Box-and-whisker graphs include the following elements.

  • Title (optional*). Centered above graph. Bolded and in all caps.
  • Graph border. Thick gray #CCCCCC line that bounds the graph.
  • Major vertical grid lines. Thick gray #757575 lines that establish the major intervals of the x-axis.
  • Minor vertical grid lines (optional*). Thin light gray #949494 lines that establish the minor intervals of the x-axis.
  • Horizontal grid lines. Thin, dashed light gray #949494 lines that establish where box plots can be placed.
  • x-axis. Thick black #000000 line at the bottom of the graph.
  • Axis name (optional*). Centered beneath the x-axis.
  • Axis ticks. Short gray #757575 lines along the x-axis indicating the increments at which the major vertical grid lines appear.
  • Axis tick labels. Appear immediately below each axis tick.

* When an item in a pure mathematical context includes an xy-plane, a title and axis names are not provided.

Box Plots

Box plots have the following states.

  • Default. Box has a light blue #B8E2FF fill and dark gray #333333 borders. Whiskers are the same shade of gray.
  • Hover. Visible when the cursor is over the box plot (but not the sizing handles). Box fill darkens to #72C1F7 , and borders and whiskers become black #000000 . The move cursor is shown.
  • Active. Visible while the box plot is being dragged. Borders and whiskers thicken.
  • Disabled. Visible when the box plot is inactive (e.g., when a modal system tool like Scratchwork is enabled). Box fill becomes light gray #949494 , and borders and whiskers become dark gray #484848 .

Controls

A single-direction sizing handle is vertically centered on each of the following elements of each box plot that has been prepopulated or placed in the graph. (See the Transformable Objects page for more information about sizing handles.)

  • Lowest observation line
  • Lower quartile line
  • Median line
  • Upper quartile line
  • Highest observation line

Undo and Reset buttons are right-justified beneath the graph. Both buttons use the small secondary filled button style. (See the Buttons page for more information.)

  • The Undo button reverts the last change to the graph.
  • The Reset button restores the graph to its initial state.