Transformable Objects
Transformable objects can be resized, rotated, and/or translated by test takers. The transformations available vary depending on the measurement goals of a given item.
Translation
Test takers can move translatable objects by dragging them. The move cursor is shown when hovering over a translatable object.
The following demo presents a translatable object that can be dragged throughout its container.
To view alternative presentations and styling, use the Change Theme 
and Read Aloud 
buttons in the upper-right of the screen.
Resizing
Test takers can resize objects by dragging their associated sizing handle(s).
Single-direction
When an object cannot be rotated or translated and can only be resized in one direction, a circular sizing handle is provided. The handle appears centered on the draggable side of the object.
Single-direction sizing handles have the following states.
- Default. Handle has a blue
#004696border and a white#FFFFFFfill. - Hover. Visible when the cursor is over the handle. A focus ring appears around the handle. (See the Indicators page for more information about focus rings.)
- Active. Visible when the test taker is dragging the handle. Handle scales up 133%.
- Disabled. Visible when the handle is inactive (e.g., when a modal system tool like Scratchwork is enabled). Border becomes dark gray
#AAAAAA, and fill becomes light gray#E5E5E5.
When the handle provides vertical resizing, the ns-resize cursor is shown on hover. When the handle provides horizontal resizing, the ew-resize cursor is shown on hover.
The following demo presents an object that can only be resized in a single direction.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Multi-direction
When an object can be resized in both directions, or when it is rotatable, square sizing handles are provided. Multi-direction sizing handles have a gray #333333 border and a white #FFFFFF fill.
Vertical and horizontal multi-direction sizing handles have the same cursors as their single-direction counterparts. Diagonal sizing handles have the nesw-resize or nwse-resize cursor as appropriate.
The following demo presents an object that can be resized in multiple directions.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Rotation
Test takers can rotate an object by dragging its associated rotation handle. The handle is centered above the associated object and is connected to the object by a dashed line. The handle has a gray #333333 border and a white #FFFFFF fill. A rotation cursor is shown on hover.
The following demo presents a rotatable object.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Transformable objects are currently only used in SBTs in IICs.