Dialogs

Dialogs are used to convey information to test takers or solicit an action. Depending on the purpose of a given dialog, it may be modal or non-modal.

Dialogs typically have rounded corners and a drop shadow to differentiate them from the main content area.

Dialog buttons typically use the primary style but may use the secondary style when an interaction hierarchy is desired. (See the Buttons page for more information about button styles.) Dialog buttons remain enabled when Text-to-speech is on.

Any multimedia playing when a dialog opens is paused.

Modal Dialogs

A modal dialog requires the test taker to interact with it before it can be dismissed; while the dialog is on screen, the test taker cannot return to the main content area. As such, modal dialogs are used to convey critical information or to solicit an action from the test taker.

To increase initial salience, a modal dialog fades in and animates down to a centered position when it is invoked. In addition to the general dialog styling, modals are presented over a semi-transparent white rgba(255,255,255,0.8) backdrop to emphasize that the main content area is inaccessible. The backdrop covers the entire screen other than the System Toolbar so that test takers can use system tools while the dialog is open.

When a dialog contains information not intended for test takers (e.g., an item accession number is provided in the Item Error dialog to support troubleshooting), the information is presented at a smaller font size in the lower left corner.

When a dialog solicits an action that cannot be undone (e.g., the End of Section dialog, the SBT Submit Confirmation dialog), a warning icon is provided at the upper left corner of the dialog.

Select the View Dialog button below each description to launch the associated modal dialog. Modal dialogs do not have a Close button and cannot be dismissed by hitting Escape on the keyboard. Rather, test takers must complete the dialog’s primary action (e.g., selecting the OK button) to dismiss it.

The following demo presents dialogs that can each be viewed by selecting the "View Dialog" button.

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

Non-modal Dialogs

Non-modal dialogs allow test takers to interact with the main content area and the dialog simultaneously. This makes them useful for providing information that must be referenced across multiple screens, especially when it must be compared to information in the main content area. Currently, only SBTs use non-modal dialogs.

Non-modal dialogs are typically invoked by selecting a button in the main content area. The button is labeled to indicate the nature of the dialog’s information, and is usually located to the upper left or right of the related content. When a non-modal dialog opens or closes, an animation plays to tie it to the button that invoked it:

  • A scale is applied so that the dialog appears to grow out of the button (when opened) or shrink into the button (when closed).
  • Dialog opacity changes between 0 (in closed state) and 1 (in open state).
  • The dialog translates from the position of the activation button to its most recent position.

Non-modal dialogs have a Close button at their upper-right corner. They can also be closed by hitting Escape on the keyboard or by selecting the button that invoked them. Close buttons have the following states.

  • Default. Button consists of a dark gray #333333 cross-thin icon.
  • Disabled. Visible when the button is inactive (e.g., when a modal system tool like Scratchwork is enabled). Icon lightens to #909090 .

Test takers can reposition non-modal dialogs by dragging any spot on the dialog other than the Close button.

When a test taker navigates to the first screen on which a non-modal dialog is offered,

  • The dialog automatically opens, and the test taker is given the opportunity to close it.
  • The initial position of the dialog should avoid overlap with essential information in the main content area.

The following demo presents a non-modal dialog 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.