Wizards

Wizards can be used to present information to test takers in a linear series of steps.

The following presents the screens for a wizard.

The demo is 50% 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.

Presentation

A wizard appears over a white #FFFFFF backdrop that takes up the full height and width of the content area. The wizard itself is white #FFFFFF and has a drop shadow.

The default width of a wizard is 75 characters, and the default height is 29x the base font size (see the Typography page for more information). Wizard size can be increased dynamically when needed to accommodate larger content.

Wizard content can be presented in one or two columns.

Navigation

Wizards have their own navigational system composed of:

  • A series of screens, or cards
  • Navigation buttons (Back and Next)
  • A series of dots indicating the test taker’s current position in the wizard

Cards

A card is provided for each major step in a wizard. When the test taker selects one of the wizard navigation buttons (see below), one of two card transitions can occur.

  • If the transition is between two cards of the same size, the current card slides out of view, and the new card slides in.
  • If the transition is between two cards of different sizes, the current card fades out, the wizard resizes, and then the new card fades in.

Navigation Buttons

The wizard Next and Back buttons appear, respectively, at the bottom right and bottom left corners of the wizard. The buttons are styled similarly to the System Toolbar navigational buttons, except that the wizard Next button label is smaller and the button background is a more saturated blue #0068D1 .

On the first card in the wizard, the Back button is hidden. On the last card in the wizard, the Next button’s label changes to indicate what will happen when the test taker closes the wizard (e.g., “Start the task”).

Navigation Dots

The navigation dot array is horizontally centered at the bottom of the wizard. One navigation dot appears for each card in the wizard. Dots have the following states.

  • Default. Dot is gray #949494 .
  • Active. Visible when the card associated with the dot is on screen. Dot darkens.

Typography

Typical text in wizards is ~92% eNAEP's default font size. (See the Typography page for more information.)

Each card has a key title or direction that is blue #2A69A7 and 1.67x the base wizard font size to ensure it is high in the visual hierarchy.

When a card has multiple sub-steps, each step is preceded with a blue #2A69A7 number 1.5x the base wizard font size.

Tool Interactions

Wizards generally interact as expected with the eNAEP system tools, with the following exceptions:

  • Zoom: Unlike other content, which zooms isometrically, wizard content reflows within the wizard as it increases in size. When content exceeds the height of the wizard, a vertical scrollbar appears at the right side of the wizard.
  • Scratchwork. Since the scratchwork tool relies on isometric zoom to function, scratchwork is disabled on wizards.
  • System Navigation Buttons. The Back and Next buttons in the System Toolbar are disabled while a wizard is on screen since the wizard has its own navigational system.