Equation Editor

The Equation Editor is an on-screen keyboard that provides access to mathematical symbols not available on the physical keyboard.

The Equation Editor appears at the bottom of the content area. It is divided into two sections.

  • The tabs area contains the Close button and the tabs used to navigate between button areas.
  • The button area displays the symbol buttons associated with the currently selected tab.

Presentation (Grades 4 & 8)

The tab area has a thin top border (#B6BDC3 ) and a light blue gradient background. The button area has a dark gray #373737 background.

Tab States

  • Default. Tab has an off-white #F2F2F2 background and a thin gray #7C7C7C border. Tab labels are dark gray #373737 .
  • Hover. The pointer cursor is shown.
  • Selected. Visible when the associated button area is on screen. Tab text changes to white #FFFFFF , and tab background changes to the same gray #373737 as the button area. The default cursor is shown.
  • Disabled. Visible when all the symbol buttons for a given tab are disabled because the Equation Editor has been opened on a Numeric Entry item. Tab opacity is reduced to 50%, and the label becomes gray #CCCCCC .

Close Button States

  • Default. Button has a blue gradient background, a white label, and a white #FFFFFF down-arrow icon surrounded by a dark blue #255571 circle.
  • Hover. Button background darkens. The pointer cursor is shown.

Symbol Button States

  • Default. Button background is white #FFFFFF , and button label is gray #555555 .
  • Hover. The pointer cursor is shown.
  • Disabled. Button opacity reduces to 30%.

Symbol buttons are organized into rows.

Presentation (Grade 12)

The tab area has a thin top border (#ABB3BA ) and a light blue #C8D1DA background. The button area has a dark blue #192129 background.

Tab States

  • Default. Tab has a medium blue #3C6E9F background and a thin darker blue #454C54 border. Tab labels are white #FFFFFF .
  • Hover. Visible when the cursor is over an unselected tab. Background darkens to #315B81 . The pointer cursor is shown.
  • Selected. Visible when the associated button area is on screen. Tab background changes to the same dark blue #192129 as the button area. The default cursor is shown.
  • Disabled. Visible when all the symbol buttons for a given tab are disabled because the Equation Editor has been opened on a Numeric Entry item. Tab opacity is reduced to 50%, the background becomes #526E89 , and the label becomes gray #CCCCCC .

Close Button States

  • Default. Button has a white #FFFFFF cross icon and a blue #1F4C7A background.
  • Hover. Button background darkens to #183B5D . The pointer cursor is shown.

Symbol Button States

  • Default. Button background is white at 90% opacity rgba(255,255,255,0.9) , and button label is gray #444444 .
  • Hover. Button background opacity increases to 100%, and button label darkens to #111111 . The pointer cursor is shown.
  • Disabled. Button opacity reduces to 30%.

Symbol buttons are organized into groups separated by 1-pixel vertical white borders with 50% opacity rgba(255,255,255,0.5) . There is no border between the last button group and the Backspace button.

Default Behavior

Opening and Closing

The Equation Editor can be opened and closed by selecting the Equation Editor button in the System Toolbar. It can also be closed by selecting the Close button at its upper right.

When the Equation Editor is toggled on or off, it animates up or down (respectively) to help the test taker notice the change in state.

The Equation Editor never overlays content. Rather, it reduces the available height for the content area when it is on screen.

Interaction with Text Entry Fields

The Equation Editor’s symbol buttons are disabled by default. They become enabled when the test taker clicks a text entry field or presses a key while the text entry field has focus. To indicate to keyboard users which text entry field will be populated by symbols selected in the Equation Editor, a light green #EBFBE5 background and dark green #008117 dashed border is applied to the currently active field. The field remains active, and the equation editor buttons remain enabled until the test taker clicks elsewhere on the screen or selects another user interface element via the keyboard. (Selecting any part of the equation editor does not deactivate the field or disable the buttons.)

If a text entry field has focus when the Equation Editor is opened, the field retains focus and becomes active for equation editor entry, and the content area automatically scrolls to ensure that the text entry field remains visible.

Behavior with Numeric Entry

Numeric Entry is a text entry response type specific to SBTs. Because cognitive Numeric Entry items (see the Text Entry page) only allow test takers to enter numeric characters, periods, commas, and minus signs, only the Equation Editor buttons for those symbols enable when a Numeric Entry text field is selected. Also, the More Symbols tab, if present, disables when a Numeric Entry item is selected.

Grade 4 Variant

Select the Math Keyboard button in the upper-left corner of the demo to launch the math keyboard.

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.

Grade 8 Variant

Select the Math Keyboard button in the upper-left corner of the demo to launch the math keyboard.

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.

Grade 12 Variant

Select the Math Keyboard button in the upper-left corner of the demo to launch the math keyboard.

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.