Points, Lines, Polygons

Interactive points, lines, and polygons can be moved and/or placed on Coordinate Grids or a Number Line in various response types (e.g., Line & Point Graph, Polygon Graph).

Draggable

In some response types, points, lines, or polygons are prepopulated, and test takers are only allowed to move them.

Draggable points have the following states.

  • Default. The default color for points is blue #0855B2 , though other colors may be used to differentiate multiple sets of points (e.g., in Line & Point Graph).
  • Hover. Visible when the cursor is over the point. A focus ring appears (see Indicators for more information), and the move cursor is shown.
  • Active. Visible when the point is being dragged. The point scales up to 133% the default size.
  • Disabled. Visible when the point is inactive (e.g., when a modal system tool like Scratchwork is enabled). Blue points become gray #949494 . Points of other colors become different shades of gray to maintain the relative luminance of the original colors.

Draggable lines and polygons have the following states.

  • Default. The default color is blue #0855B2 , though other colors may be used to differentiate multiple sets of objects. Polygons have a light blue #0084FF fill at 25% opacity.
  • Hover. Visible when the cursor is over the object. All points attached to the object receive a focus ring, and the move cursor is shown.
  • Active. Visible when the object is being dragged. All lines and points that compose the object scale up to 133% their default size.
  • Disabled. Visible when the object is inactive. If the object is blue, all points, lines, and fills that compose the object become gray #949494 . Objects of other colors become different shades of gray to maintain the relative luminance of the original colors.

Note: If a draggable object is presented in an interaction that can contain pre-populated objects (see below), its disabled gray is darker (#484848 ) to ensure that the two kinds of objects are differentiable.

The following demo presents the focus state behavior for provided points, lines, and polygons.

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

Placeable

In some response types (e.g., Number Line), interactive points can be placed but not moved. In such cases, points behave as follows.

  • Hovering over a location where a point can be placed causes a focus ring (see Indicators for more information) and a ghost point to appear. These indicators convey that a point will be placed when the test taker selects the location. The ghost point is 50% opaque and 133% the size of the default point.
  • Selecting the location causes the point to be placed. Placed points have the same styling as the default state of draggable points (see above).
  • Hovering over a point immediately after the point has been placed causes no change in state. To delete the point, the test taker must move the cursor off and then back on the point. This behavior is designed to prevent accidental deletion.
  • If the cursor has been moved off a placed point, hovering over the point again causes a red #d50000 cross icon with a white #FFFFFF outline to appear over the point. This indicator conveys that the point will be deleted if the test taker selects it.
  • Selecting a placed point once it displays the deletion indicator causes the point to be deleted. The point reverts to the default hover state (50% opacity, 133% default size) to convey that selecting it again will cause it to be re-placed.

The following demo presents the behavior of interactive points on a grid.

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

Draggable & Placeable

In some response types (e.g., Line & Point Graph), interactive points can be placed and moved. In such cases, points behave as described for placeable-only points, with the following exceptions.

  • Hovering over a placed point causes a focus ring to appear, and the move cursor is displayed.
  • Selecting a placed point causes it to scale up to 133% default size. The point can be moved by dragging it.

This difference in behavior from placeable-only points is needed to support movement of points. To delete placeable-and-movable points, the test taker must select an Object Delete button provided in the surrounding interaction.

Delete Mode

For draggable-placeable points, the test taker can use the Object Delete button to enter or exit delete mode. (The test taker can also hit the Escape key to exit Delete mode.)

The Object Delete button has a red #D50000 cross-thin icon followed by a “Delete” label. The button uses the small secondary button style (see the Buttons page), with an additional set of states shown when in Delete mode:

  • Delete mode default. Button background becomes blue #0855B2 , and label becomes white #FFFFFF . Icon receives a white border.
  • Delete mode hover. Visible when the cursor is over the button. Button background lightens to #0075E3 . The pointer cursor is shown.
  • Delete mode active. Visible when the test taker presses down on the button. Button background darkens to #0060AC .

When in Delete mode, the cursor becomes the same red cross as is shown in the Object Delete button when it is hovered anywhere in the interaction’s response area.

Note: The points in the demo below are not movable.

The following demo presents the behavior of Object delete.

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

Pre-populated

Depending on the measurement goals of a given item, a pre-populated object may be provided. Test takers cannot move, drag, or otherwise manipulate a pre-populated object. Pre-populated points and lines are gray #767676 . Pre-populated polygons have a gray #383838 fill at 20% opacity. When a modal system tool (e.g., Scratchwork) is active, pre-populated objects lighten to #949494 to differentiate them from disabled interactive objects.

The following demo is an example of Pre-Populated Line Segment and Polygon.

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