Style Editor

White, black, grey, and blue, all done up in a sans-serif font. That can get boring after awhile. Let the Style Editor come to the rescue! The Item Style Editor is found in the same area of the TAO interface as the Properties Panel in an Item window. It should be noted that this feature is meant only to adjust the appearance of a small number of items. For larger numbers, refer to the CSS SDK section.

Step 1: To access the Style Editor, click on the Style Editor button in the Action Bar above the Properties Panel.

This will turn the Properties Panel into a Style Editor panel. There are two parts to the editor, the Style Sheet Manager at the top, and the Item Style Editor down below.

Step 2: If you have a style sheet ready for upload, click on the Add Style Sheet button. This will provide an interface similar to that of adding a graphic into a Graphic Interaction. In all other cases, if you will be editing styles in a way that is special for this Item only, focus on the Style Editor below.

Creating style sheets are to be handled in a whole other entry.

The Style Editor, meanwhile, has three segments, governing: (1) color, (2) Font, and (3) Item width. These can be adjusted in any order, but for this tutorial, we'll be going in order from top to bottom.

Step 3: Adjust colors as you'd like them.

There are four color swatches that can be changed in accordance with the needs of the user: Background color, Text color, Border color, and Table headings.

Clicking on the swatch opens a color editor panel that consists of a square surrounded by a ring, and a text box below. The ring provides the user with a color wheel that allows changes to the color. The square provides the ability to adjust contrast (left and right) and brightness (up and down). The textbox provides the ability to save a desired specific color setting when it is found as portions of Red, Green, Blue (in RGB hexidecimal-percent of primary color density).

The four swatches cover specific parts of any Item and its interactions. The Background color provides the color backing the entire item. The text color covers all text within the Item and its constituent interactions. The border color governs that of the borders of interactions. Finally, the table heading color swatch provides color to those interactions that use tables (such as Match).

Step 4: Adjust fonts as you'd like them.

There are two font controls governing the font family selection, and the font size. Adjusting the font family involves clicking on the appropriately marked box (which should start out reading Default). There are a number of fonts that are built into the system, and these are divided into "san serif" fonts (fonts without "feet" at the ends of letters), "serif" fonts (those with "feet"), and "monospace" fonts (fonts that resemble a typewriter, with each letter whether it be an "i" or an "m", having the same width as the other). The large number of fonts provides for significant flexibility in Item page design, but within the Item style editor, these are the only fonts that are available. To customize further from this list requires setting up a style sheet.

The other control allows Item authors to change the font size to any size desired. To set a font size, click into the box and type in a number. To adjust further from there, the Item author has the choice of either typing in a new number into the box, or clicking on the bigger or littler font icons. There is no limit to the size of font that can be selected, but of course if the font is set too large it won't properly display.

Step 5: Item width is set so that it adapts to the width of the user's screen. It is highly recommended that you do not use this setting.

Some institutions prefer that students take tests only on specifically designated computers that have a specific screen width. In such cases, there is a theoretical advantage to set the screen width, and as such, TAO caters to such needs by presenting the option to set width on a given Item. However, for most schools, setting a width presents a significant disadvantage in that a width setting that doesn't adapt to screen size means different-sized computer screens will have problems properly displaying Items. In the vast majority of cases, under normal test authoring situations, there really isn't a need to set Items to a specific width. Where this is the case, it's very much to the user's advantage to use only the setting that allows the width of the Item to adapt to the Test-taker's screen.

Step 6: If you don't like any of the settings you've selected, click on the eraser icon on the right of the control (the swatch or the text box), and the Item will be restored to its default setting.

This can be particularly useful if in playing around with the item, the end result turns out to be something unreadable. Default settings are always a click away.