Writing Editor

The writing assessment is presented in the writing editor environment. This environment contains two panels: one for the writing task and one for the editor toolbar and writing area.

The following demo presents the writing editor, which can be opened by selecting the arrow below the Next button.

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.

Panel Divider

The writing editor environment panels are separated by a gray #EEEEEE divider with a dark gray #BBBBBB border and a drop shadow.

Two Panel Size buttons are located at the top of the divider. They can be used to switch between three views:

  • Full-screen task: The writing task takes up the full width of the screen, and the divider sits on the screen’s right edge. This is the initial view when the test taker enters a writing block.
  • Split-screen: The writing task is positioned on the left and takes up approximately 42% of the screen. The writing editor is positioned on the right and takes up approximately 57% of the screen. (The remaining 1% of the screen is taken up by the divider.)
  • Full-screen editor: The writing editor takes up the full width of the screen, and the divider sits on the screen’s left edge.

The Panel Size buttons have the following states.

  • Enabled. The default state. The button’s background is blue #246BB2 , and its icon is white #FFFFFF . The left button has the chevron-left icon. The right has the chevron-right icon.
  • Hover. Visible when the cursor is over the button. The background color is lightened to #008EFA . The pointer cursor is shown.
  • Disabled. Visible when the button is inactive. The button’s opacity is reduced to 30%.

Task Panel

The task panel contains the writing task that the test taker must complete. The panel has a top margin such that task content begins approximately 1.3x the base font size below the bottom of the Panel Size buttons to avoid overlap.

At higher zoom levels, the task panel’s width and height remain constant while the panel content increases in size, causing scrollbars and the scroll indicator to appear, as specified on the Navigation and Indicators pages, respectively.

Editor Toolbar

The editor toolbar appears above the writing area. It provides access to all writing editor tools and dialogs.

Presentation

The editor toolbar has a background gradient (#F9F9F9 to #F5F5F5 ) and a bottom gray #D5D5D5 border. Like the writing area and dialogs, it is set in the Arial typeface. The toolbar is arranged into three groups, each including a set of related controls.

  • Edit
    • Cut (cut icon)
    • Copy (copy icon)
    • Paste (paste icon)
    • Select all (select-all icon)
    • Undo (undo icon)
    • Redo (redo icon)
  • Format
    • Bold (bold icon)
    • Italic (italic icon)
    • Underline (underline icon)
    • Decrease indent (decrease-indent icon)
    • Increase indent (increase-indent icon)
    • Small font size (font-size-small icon)
    • Medium font size (font-size-med icon)
    • Large font size (font-size-large icon)
  • Tools
    • Spell check (spell-check icon)
    • Spell check options (cog icon)
    • Thesaurus (thesaurus icon)

Controls are presented both within dropdown menus and as buttons, except for the Spell Check Options dialog, which is only presented in the Tools menu. Dropdown menus and associated buttons are grouped together to convey that they provide redundant functionality. Control groups are separated by a vertical gray #909090 divider.

Dropdown Menus

Dropdown menus are composed of a menu label, which opens the menu when selected, and the menu body.

Menu labels have the following states.

  • Enabled. The default state. Menu label has a gray border and text (#909090 and #666666 , respectively), rounded corners, and a downward pointing caret on its right side.
  • Hover. Visible when the cursor is over the menu label. The label’s background changes to a light blue #CDE6F7 , its border and caret change to a dark blue #2A8DD4 , and its text darkens to #494949 . A subtle drop shadow appears, and the pointer cursor is shown.
  • Active. Visible when the test taker presses down on the menu label. The background darkens to #9DCEF1 , and the drop shadow is removed.
  • Toggled on: Visible when the associated menu body is open. Background becomes white #FFFFFF , text becomes black #000000 , and the caret points upward. The bottom border is removed so that the menu label appears connected to the menu body.
  • Disabled. Visible when the button is inactive (e.g., when a modal system tool like Scratchwork is enabled). Text, border, and caret lighten.

Menu bodies have a white #FFFFFF background, a blue #2A8DD4 border, rounded corners, and a drop shadow when visible. Each option in a menu body has the following states.

  • Enabled. The default state. Option icon and label are left-justified, while the keyboard shortcut, if present, is right-justified. The label is black #000000 , and the keyboard shortcut is dark gray #777777 .
  • Hover. Background changes to light blue #CDE6F7 . The pointer cursor is shown.
  • Disabled. Icon, label, and keyboard shortcut lighten.

Menu bodies typically hang right when open; however, if a menu body would extend past the right edge of the content area, the menu body hangs left. Only one dropdown menu may be open at a time. A dropdown menu and the context menu cannot be open at the same time.

Buttons

Writing editor toolbar buttons use the bare style described on the Buttons page.

The functionality of the font formatting buttons (Bold, Italic, Underline) is closely related, so the buttons are visually grouped. When two or more adjacent buttons are toggled on, rounding of the continguous corners is removed so that the buttons appear connected.

Writing Area

The writing area is where test takers compose their responses. It has a white #FFFFFF fill, a gray #C9C9C9 border, and a subtle drop shadow. Like the editor toolbar and the dialogs, it is set in the Arial typeface. Both its margins and its initial height and width are set such that a test taker can type the approximate amount of text that would fit on an 8.5"x11" page set in 12pt Arial. If the test taker types more than will fit in that space, the writing area grows vertically to accommodate the additional text.

The writing area is surrounded by a background with a gray gradient (#E0E0E0 to #CCCCCC ) to differentiate it from the editor toolbar.

As the test taker scrolls down in longer responses, a drop shadow fades in below the editor toolbar to better differentiate the white writing area from the light gray toolbar.

At higher zoom levels, the writing area’s size increases, causing scrollbars to appear around it, as specified on the Navigation page. (The scroll indicator does not appear since the writing area contains the test taker’s response.)

Dialogs

The writing editor includes three dialogs:

  • Spell check: Provides suggestions for misspelled words and allows test takers to correct or ignore misspellings.
  • Spell check options: Allows test takers to set preferences for spell check behavior.
  • Thesaurus: Provides synonyms for words the test taker selects and allows the test taker to replace a selected word with a chosen synonym.

Presentation

Writing editor dialogs are presented differently than system Dialogs to convey their particular functionality and to better associate them with the rest of the writing editor user interface (UI).

Writing editor dialogs have a light gray #F9F9F9 background, a dark gray #909090 border, rounded corners, and a drop shadow to differentiate them from surrounding content. Button and background text is dark gray #555555 to better emphasize the dialog’s input fields, whose text is black #000000 . Like the editor toolbar and the writing area, writing editor dialogs are set in the Arial typeface.

All writing editor dialogs have a top blue #246BB2 bar that contains the dialog’s title. A Close button appears at the right side of the title bar. The Close button has the following states.

  • Enabled. The default state. The button’s background is light gray #F9F9F9 , and its cross icon is dark gray #909090 .
  • Hover. Visible when the cursor is over the button. The icon and border colors are darkened, and the pointer cursor is shown.

Buttons in writing editor dialogs typically have dark gray borders and labels (#909090 and #666666 , respectively). However, the button that triggers the dialog’s primary action (Change for spell check, Replace for thesaurus) has a blue #246BB2 background and white #FFFFFF label for emphasis.

Behavior

Writing editor dialogs can be moved around the content area by dragging the title bar. The move cursor is shown when hovering over the title bar to help convey this functionality. Dialogs cannot be moved on top of the System Toolbar. When a writing editor dialog is first opened, it appears at the center of the content area. Once the test taker moves a dialog, its position is retained if it is closed and re-opened.

Writing editor dialogs are non-modal (i.e., the test taker can interact with other UI elements while a dialog is on screen). Only one dialog at a time may be open. When the test taker switches to full-screen task view, any open dialogs automatically close.

Information Flags

Information Flags are used in the writing editor environment in two cases:

  • When the test taker first enters a writing block, an information flag appears to the left of the visible Panel Size button to indicate how to view the writing editor. Once the button is pressed, the flag disappears. The flag reads:

Tap this button to open the writing panel.

  • When the test taker first opens a dialog, an information flag appears to the dialog’s left to indicate that the dialog can be dragged by its title bar. Once the test taker clicks or drags the dialog, the flag disappears. It does not reappear while the test taker is in the same block. The flag reads:

You can move this window by dragging the blue bar.

Context Menu

The context menu appears when test takers right-click the writing area. When any other area of the screen is clicked or right-clicked, the context menu closes. It also closes when the test taker presses Escape.

The context menu has a white #FFFFFF background, a gray #949494 border, and a drop shadow to differentiate it from the writing area.

The context menu has the following options when a correctly spelled word is right-clicked:

  • Cut
  • Copy
  • Paste
  • Bold
  • Italic
  • Underline
  • Small font size
  • Medium font size
  • Large font size
  • Synonyms

The “Synonyms” option has a right-facing caret to indicate that it provides access to a submenu. The submenu contains up to five synonyms (depending on the available synonyms in the thesaurus) and a link to the thesaurus dialog. When it appears, the submenu fades in and animates right slightly.

When an incorrectly spelled word is right-clicked, up to five spelling suggestions (depending on the available suggestions in the spell checker) are shown in the context menu, followed by an “Ignore all” option.

Context menu options have the following states.

  • Enabled. The default state. Option icon (if present) and label are left-justified. The label is black #000000 .
  • Hover. Background changes to light blue #CDE6F7 . The pointer cursor is shown.
  • Disabled. Icon and label lighten.

Both the context menu and its submenus will not overflow the content area. For example, if a test taker right-clicks the lower-right corner of the writing area, the context menu will appear above the cursor and far enough left such that it is entirely visible.

Max Character Limit

The test taker can enter up to 10,000 characters in the writing area. If the test taker attempts to enter or paste more than the maximum number of characters, entry/pasting is prevented, and the Max-character Limit modal dialog is displayed. (See the Dialogs page for information about dialog styles and behavior.) Content of the dialog:

You have reached the maximum amount you can type.

To type something else, you must remove some of what you already typed.