Using existing scopes

To avoid conflicts with the design of TAO’s user interface all rules must be prefixed like this:

html body div.qti-item

There is only one exception that we will address when talking about background colors and images.

Item-wide styles

Use the following selector for item-wide styles:

html body div.qti-item {

    font-family: Helvetica, Arial, sans-serif;

    background-color: #ddd;

}

Pre-defined scopes

All TAO QTI interactions share the same basic HTML structure. PCI interactions, in contrast, follow their own patterns.

<div class="qti-interaction qti-blockInteraction qti-associateInteraction">

These class names allow you to target for instance all Associate Interactions at once:

html body div.qti-item .qti-assosciateInteraction {

    font-family: Helvetica, Arial, sans-serif;

    background-color: #ddd;

}

Another possibility would be to target all interactions, but none of the text blocks:

html body div.qti-item .qti-interaction {

    font-family: Helvetica, Arial, sans-serif;

    background-color: #ddd;

}