System Toolbar

The system toolbar appears at the top of all assessment content and contains all cross-item tools and features. It cannot be obscured by other user interface (UI) elements (e.g., modal dialog backdrops) to ensure that its features are always accessible.

The toolbar has a light gray #EEEEEE background and a gray #BFBFBF bottom border.

System toolbar buttons use the bare button style, except for the Back and Next buttons, which use variants of the secondary filled and primary filled styles, respectively. (See the Buttons page.)

Layout

The toolbar is divided into the following groups, which are separated by gray #BFBFBF vertical dividers.

  • Help (question-circle icon)
  • Visual presentation features
    • Change Theme (change-theme icon)
    • Zoom Out (zoom-out icon)
    • Zoom In (zoom-in icon)
    • Change Language (lang-esp / lang-eng icon)
  • Additional tools
    • Read Aloud (read-aloud icon)
    • Scratchwork (scratchwork icon)
    • Equation Editor (equation-editor icon)
    • Calculator (calculator icon)
  • Timer (timer icon)
  • Progress bar (only available for linearly navigated blocks [e.g., scenario-based tasks, SQ blocks])
  • Navigation
    • Back (arrow-left icon)
    • Next (“Next” label and arrow-right icon)

The progress bar has an off-white #FCFCFC background and a gray #AAAAAA border. The progress indicator is green #0BA951 .

The item accession number and block title for the content currently on screen are shown in the center of the toolbar, superimposed on the NAEP logo. For scenario-based tasks, the scene ID displays next to the accession number, separated by a hyphen.

The following Demo represents a visual presentation of system toolbar.

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.

Button Trays

The scratchwork tools (Pencil, Highlighter, Eraser, Clear Scratchwork) and the remaining block time are presented in collapsible trays. Test takers may expand or collapse these trays by pressing the associated buttons.

The following Demos represent Button Trays

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