eReader

Blocks of discrete items in the reading assessment are presented in the eReader environment, which has two key features that differentiate it from the Default environment:

  • The stimulus takes up the full width and height of the content area below the System Toolbar.
  • Items are presented in an item panel, accessed via the Show Questions button.

Show Questions Button

The Show Questions button appears immediately below the System Toolbar and is aligned to the right edge of the content area with a margin 3.85x the base font size (see the Typography page for more information). The button is housed in the same area as the stimulus tabs (see below), which has a light gray #E9E9E9 background to visually connect it to the toolbar above.

The Show Questions button has the following states.

  • Default. Button has a drop shadow, rounded corners, a blue #0076D2 background, and white #FFFFFF content. The chevron-circle-down icon appears on the left, and the label “Show Questions” appears on the right, left justified.
  • Panel Open. Visible when the item panel is open. Icon rotates 180º, and button label changes to “Hide Questions.”
  • Hover. Visible when the cursor is over the button. Background changes to a lighter blue #008EFA , and the drop shadow increases. The pointer cursor is shown.
  • Disabled. Visible when the button is inactive (e.g., when a modal system tool like Scratchwork is enabled). Background color changes to light gray #DDDDDD , and content changes to dark gray #888888 .

Item Panel

When invoked, the panel animates out from the Show Questions button. A 20% opaque black #000000 backdrop appears over the content area while the item panel is open. The item panel can be closed by selecting the backdrop or the Show Questions button.

The item panel has a drop shadow to better differentiate it from the stimulus content underneath, and it has a tail at its top to connect it to the Show Questions button. Right and bottom margins (1.67x the base font size) separate the item panel from the edges of the content area to help the test taker recognize that the stimulus remains beneath the item panel.

The width of the item panel can expand and contract item-by-item to provide more item layout options:

  • Small (Default). Approximately 30x the base font size; most items are presented in the small-width layout.
  • Medium. Approximately 44x the base font size.
  • Large. Approximately 56x the base font size.

A row of item tabs (whose behavior and styling are defined on the Navigation page) is positioned at the top of the item panel.

The following demo presents a reading passage with an item panel that activates when the Show Questions button is selected.

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.

Stimulus Tabs

When a reading block contains more than one stimulus, stimulus tabs are provided immediately below the System Toolbar, aligned to the left side of the content area. Stimulus tab styling and behavior match those of item tabs, as described on the Navigation page.

The following demo presents a reading passage with associated stimulus tabs.

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.