Figure Transformation

The figure transformation response type allows students to respond to an item by dragging figures to a coordinate grid.

The following demo presents the figure transformation 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

Test takers can add figures to the grid by dragging them from a source tray, which can be above or to the left of the grid, depending on space constraints. (A demo of the left-aligned variant is shown below.) The source tray has the same styling as those used for the Matching response type.

The following demo presents the figure transformation response type with a left-aligned source tray. The demo has limited functionality for the purpose of showing its themes and styles.

The demo is 67% its actual size. To see a full-size demo, click here.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Draggable Figures

Draggable figures have the following states.

  • Default. Uses the same styling as draggable polygons (see the Points, Lines, Polygons page), except that the borders are thinner.
  • Hover. Visible when the cursor is over the figure. Both fill and border lighten to #0084FF . The move cursor is shown.
  • Active. Visible when the figure is being dragged. Border width increases.
  • Disabled. Visible when the button is inactive (e.g., when a modal system tool like Scratchwork is enabled). Uses the same styling as the disabled state for draggable polygons presented alongside pre-populated objects.

Grid

The grid used for shape builder responses has the same styling as typical Coordinate Grids.

A pre-populated figure may be provided depending on the measurement goals of the item. Pre-populated figures use the standard styling for pre-populated objects (see the Points, Lines, Polygons page), except that, like draggable figures, they have thinner borders.

Controls

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