Number Line

The number line response type allows test takers to respond to an item by adding point(s), line segment(s), ray(s), or line(s) to a provided number line.

Presentation

Number Line

The number line is composed of the following elements.

  • A thick black (#000000 ) horizontal line with arrowheads
  • Black (#000000 ) major tick marks, 1.833x the base font size tall
  • Gray (#4D4D4D ) minor tick marks, 1.25x the base font size tall (optional)
  • Tick mark labels (provided for major ticks marks only)

The following example presents a number line.

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

Points & Lines

Points, line segments, rays, and lines have the same behavior and styling as interactive points and lines elsewhere in system (see the Points, Lines, Polygons page), with the following exceptions:

  • Number Line objects are a lighter blue (#0084FF ) to provide more differentiation from the number line, which is thicker than lines found in Coordinate Grids.
  • When the cursor is over line segments, rays, and lines, a gray #575757 border around the entire object is shown rather than focus rings around the attached points. This difference accommodates lines, which do not have points in the Number Line response type.

Default Variant

In the default variant, test takers drag objects to the number line. Objects are provided above the number line in a source tray, as seen in the Matching response type.

Dragging Behavior

  • An invisible bounding box extends approximately 2x the base font size (see the Typography page) above and below the number line. Once a test taker drags an object into this bounding box, the object snaps to the closest tick mark(s) on the number line.
  • While an object is being dragged within the bounding box, the object continues to snap to tick marks, and helper label(s) appear above the object’s point(s) indicating the values of the snapped tick marks.
  • If a test taker drags an object outside the bounding box, the object returns to the source tray.

Controls

  • A “No solution” option is left-justified beneath the number line. The option has the same styling as Multiple-choice options. When the test taker selects the option, any objects on the number line return to the source tray.
  • Undo and Reset buttons are right-justified beneath the number line. 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 number line.
    • The Reset button restores the number line to its initial state.

The following demo presents a number line featuring draggable objects in the source tray. 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.

Points-only Variant

In the points-only variant, test takers may only place points on the number line. Points behave identically to placeable points elsewhere in system (see the Points, Lines, Polygons page) with the following exceptions.

  • The pointer cursor is shown (since the points are interactive but cannot be moved).
  • When an item is single-select (i.e., when only one point may be placed at a time), selecting a location on the number line auto-deletes an existing point.

Controls

Undo and Reset buttons are right-justified beneath the number line. 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 number line.
  • The Reset button restores the number line to its initial state.

Demo shows a multiple-select item.

Additionally, the demo only reflects states and theming. Other functionality not present.

The following demo presents a number line for a multiple-select item.

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

Custom Intervals Variant

In the custom intervals variant, test takers may adjust the number of intervals provided on a number line and then place a point or line segment.

Behavior

  • If test takers are allowed to place segments, a black #000000 pre-populated point is provided.
    • Hovering over the number line shows a translucent blue #0084FF point and a translucent line segment connecting it to the pre-populated point.
    • Selecting a location on the number line causes the blue point and line segment to become fully opaque.
  • If test takers are only allowed to place points, no pre-populated point is provided. The number line behaves identically to the points-only variant.

Controls

  • Controls for the number of intervals are centered above the number line. Depending on the measurement goals of an item, one of three variants may be provided:
    • Remove intervals and Add intervals buttons are provided. Both are styled as small circular primary buttons (see the Buttons page). The Remove intervals button has the minus-thin icon, while the Add intervals button has the plus-thin icon.
    • Remove intervals and Add intervals buttons are provided with a readout of the current number of intervals between them. The readout has a light gray #E5E5E5 background.
    • Remove intervals and Add intervals buttons are provided with a text entry field between them. Test takers can enter the desired number of intervals in the field, which has the same states as Text Entry responses.
  • Undo and Reset buttons are right-justified beneath the number line. 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 number line.
    • The Reset button restores the number line to its initial state.

The following demo presents a number line for the custom intervals variant. 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.

Zoomable Intervals Variant

In the zoomable intervals variant, test takers first select a section of a number line to zoom, and then place a point within the zoomed section.

Zoomable Sections

Zoomable sections begin 10% the width of an interval to the left of each tick mark and end 10% the width of an interval to the right of the subsequent tick mark. Zoomable sections have the following states.

  • Default. Section is transparent.
  • Hover. Visible when the cursor is over the section. Section background becomes a translucent blue rgba(0,133,255,0.3) . The pointer cursor is shown.
  • Selected. A blue #3366CC border appears around the section. A wedge with a light gray #E0E0E0 fill and gray #757575 border connects the section to the zoomed-in view. The zoomed-in view has a light blue #4496e0 border.
  • Disabled. Visible when the section is inactive (e.g., when a modal system tool like Scratchwork is enabled). Unselected sections remain transparent. For selected sections, the section border becomes dark gray #484848 , and the zoomed-in view border becomes gray #949494 .

Hovering or selecting a point in the zoomed-in view causes a smaller version of the point to appear in the same state in the corresponding zoomable section on the main number line.

When an item is single-select (i.e., when only one point may be placed at a time), selecting a location in the zoomed-in number line auto-deletes an existing point.

Controls

Undo and Reset buttons are right-justified beneath the number line. 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 number line.
  • The Reset button restores the number line to its initial state.

The following demo presents a number line with its associated Undo and Reset buttons.

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