Ruler
The ruler stimulus allows test takers to move and rotate an on-screen ruler to measure a virtual object.
Ruler Styling
The ruler has a gray #D3D3D3 background and black #000000 tick marks and tick labels. Major tick marks are 2px wide; minor tick marks are 1px wide.
The cursor is set to move when positioned over the ruler to indicate that it can be moved via dragging.
Ruler Handles
The ruler has a rotation handle on either end and a drag handle below its center. Handles are styled as primary circular filled buttons. (See the Buttons page for more information.)
The drag handle has the move icon (as specified on the Icons page), and the cursor is set to move .
The rotation handles have the rotate-left and rotate-right icons, and the cursor is set to ns-resize.
The following demo presents the on screen ruler with its associated rotate-left, move, and rotate-right icons.
To view alternative presentations and styling, use the Change Theme
and Read Aloud 
buttons in the upper-right of the screen.
A gray
#949494border indicates the area in which the ruler can be dragged.A Reset button, styled as a small secondary filled button (see the Buttons page for more information), is provided at the upper-right corner of the draggable area. Selecting the button restores the ruler to its initial position and orientation.