1EdTech QTI 3 Standardized Shared Vocabulary and CSS Classes

1EdTech QTI 3 Standardized Shared Vocabulary and CSS Classes

Final Release
Spec Version 3.0
Final Release
Document Version: 1.0
Date Issued: 18 December 2023
Status: This document is made available for adoption by the public community at large.
This version: https://www.imsglobal.org/spec/qti/v3p0/guide/

IPR and Distribution Notice

Recipients of this document are requested to submit, with their comments, notification of any relevant patent claims or other intellectual property rights of which they may be aware that might be infringed by any implementation of the specification set forth in this document, and to provide supporting documentation.

1EdTech takes no position regarding the validity or scope of any intellectual property or other rights that might be claimed to pertain implementation or use of the technology described in this document or the extent to which any license under such rights might or might not be available; neither does it represent that it has made any effort to identify any such rights. Information on 1EdTech's procedures with respect to rights in 1EdTech specifications can be found at the 1EdTech Intellectual Property Rights webpage: http://www.imsglobal.org/ipr/imsipr_policyFinal.pdf .

The following participating organizations have made explicit license commitments to this specification:

Org name Date election made Necessary claims Type
HMH September 16, 2019 No RF RAND (Required & Optional Elements)

Use of this specification to develop products or services is governed by the license with 1EdTech found on the 1EdTech website: http://www.imsglobal.org/speclicense.html.

Permission is granted to all parties to use excerpts from this document as needed in producing requests for proposals.

The limited permissions granted above are perpetual and will not be revoked by 1EdTech or its successors or assigns.

THIS SPECIFICATION IS BEING OFFERED WITHOUT ANY WARRANTY WHATSOEVER, AND IN PARTICULAR, ANY WARRANTY OF NONINFRINGEMENT IS EXPRESSLY DISCLAIMED. ANY USE OF THIS SPECIFICATION SHALL BE MADE ENTIRELY AT THE IMPLEMENTER'S OWN RISK, AND NEITHER THE CONSORTIUM, NOR ANY OF ITS MEMBERS OR SUBMITTERS, SHALL HAVE ANY LIABILITY WHATSOEVER TO ANY IMPLEMENTER OR THIRD PARTY FOR ANY DAMAGES OF ANY NATURE WHATSOEVER, DIRECTLY OR INDIRECTLY, ARISING FROM THE USE OF THIS SPECIFICATION.

Public contributions, comments and questions can be posted here: http://www.imsglobal.org/forums/ims-glc-public-forums-and-resources .

© 2023 1EdTech™ Consortium, Inc. All Rights Reserved.

Trademark information: http://www.imsglobal.org/copyright.html

Abstract

This document details the use of QTI related classes and custom attributes. By using a shared vocabulary across implementers, the presentation and behavior of delivered assessments can be far more interoperabile. The shared CSS is provided as a convenient resource for implementers and is not intended to be strictly used as provided. The provided CSS does follow the intent of the class and attribute descriptions, as provided in the Shared CSS section.

1. SECTION 1: Shared Vocabulary

Shared Vocabulary in QTI increases the visual presentation interoperability of QTI content across delivery platforms. It does not assume any particular CSS usage, though Section 2 of this document does provide possible stylesheet markup, as used by implementers of QTI. Some classes and data-attributes are required to be supported for certain QTI application certifications, which are listed in the acceptance criteria and certification checklists for specific capabilities of the application certifications.

1.1 GENERAL PURPOSE CLASSES

1.1.1 Accessibility Classes

1.1.1.1 Class = qti-keyword-emphasis

Some candidates might benefit from having key (cognitively important) words in the content brought to their attention, to help them better understand the meaning of the content. In QTI 3, you would use the QTI 3 specific class "qti-keyword-emphasis" on the element that you would like to have emphasis. The emphasis is intended to be limited to those candidates who have been assigned the keyword-emphasis support in their PNP.

Keyword Emphasis in a Candidate PNP

<?xml version="1.0" encoding="UTF-8"?>
<access-for-all-pnp xmlns="http://www.imsglobal.org/xsd/qtiv3p0/imsafa3p0pnp_v1p0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.imsglobal.org/xsd/qtiv3p0/imsafa3p0pnp_v1p0 
    https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqtiv3p0_afa3p0pnp_v1p0.xsd">

 <keyword-emphasis />

</access-for-all-pnp>

Keyword Emphasis in an qti-assessment-item

<qti-assessment-item>
…
<qti-item-body>
…
<qti-prompt id="prompt1">Indicate which of the following statements are 
  <span class="qti-keyword-emphasis">accurate</span>.</qti-prompt>
…
</qti-item-body>
</qti-assessment-item>

While there is no specific recommended approach as to how to emphasize words, the expectation is that the words within the "qti-keyword-emphasis" class would appear to be different, with greater emphasis than the surrounding text, and that the emphasis would only be presented to those candidates who are intended to see this extra emphasis for special words. For words intended to be emphasized for all candidates, use more traditional HTML techniques to indicate the emphasis (strong, em, etc.).

1.1.1.2 Class = qti-visually-hidden
Semantics Example CSS Definition

Completely hide, or visually-hide, an element.

A completely hidden element is neither visually-perceptible nor "visible" to assistive technology.

A common use-case for qti-hidden is to have dormant content loaded in the delivery system's DOM, but imperceptible to sighted and non-sighted candidates.

A visually hidden element is not visually perceptible. However, it is "visible" to assistive technology.

A common use-case for qti-visually-hidden is to use this class in conjunction with another adjacent DOM element that is aria-hidden. The visually-hidden element is visible to assistive technology, but invisible to sighted candidates. The aria-hidden element is hidden from assistive technology but visible to sighted candidates.

 
.qti-hidden {
  display: none;
}
.qti-visually-hidden {
  position:fixed !important;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  height: 1px;
  width: 1px;
  border: 0;
  margin: -1px;
}

Example: qti-hidden

<p class="qti-hidden">I am content that is completely hidden from sighted and non-sighted users.</p>

Example: span's that are qti-visually-hidden and aria-hidden together

<p>Jane paid <span class="qti-visually-hidden">25 dollars</span> <span aria-hidden="true">$25.00</span>
for the taxi fare.</p>
1.1.1.3 Data-attribute = data-qti-suppress-tts

To suppress text-to-speech (i.e., to hide content from assistive technology like screen readers) the accepted web practice and the QTI 3 recommended practice is to use the aria-hidden="true" attribute in the element you are trying to hide and prevent that content from being read aloud.

There are unique use cases in assessment contexts where you (at the direction of assessment programs) may wish to suppress text-to-speech for specific kinds of text-to-speech users, which AfA 3.0 refers to as the spoken support. In QTI 3, if you wish to suppress some content from being read aloud to candidates, use the special "data-qti-suppress-tts" attribute and use the standardized QTI 3 vocabulary (computer-read-aloud, screen-reader, all), which correlates to the spoken reading-type vocabulary.

Note that no existing screen readers natively support these attributes, and delivery engines will likely need to make specific delivery code modifications to enable this capability to work as intended. The QTI shared vocabulary is the interoperable method for expressing the concept of differentiated text-to-speech suppression.

Below is an example of using the text-to-speech (TTS) suppression attribute to suppress the labels being read aloud for a screen-reader candidate. The label information is only useful for candidates who can see where the text is associated with graphic. The computer-read-aloud candidate typically only has visible text read aloud to them, so we could suppress the read aloud of the long description.

<qti-assessment-item ...>
…
<qti-item-body>

  <p>Below is a figure with <span  data-qti-suppress-tts="computer-read-aloud">12</span> boxes.</p>

  <div id="figure1-with-labels">
    <img id="figure1" height="165" width="250" src="figure1.svg"
     alt="Figure showing Rectangle ABCD 
     divided into 12 equal area boxes. 4 of the boxes are shaded." 
     aria-describedby="long-description-figure-1" />

    <span id="labelA" data-qti-suppress-tts="screen-reader">Point A</span>
    <span id="labelB" data-qti-suppress-tts="screen-reader">Point B</span>
    <span id="labelC" data-qti-suppress-tts="screen-reader">Point C</span>
    <span id="labelD" data-qti-suppress-tts="screen-reader">Point D</span>

    <div id= "long-description-figure-1" class="qti-visually-hidden long-description"
       data-qti-suppress-tts="computer-read-aloud">\
      <p>Rectangle ABCD...the long description goes here...</p>
    </div>
  </div>

  <qti-prompt>In the figure above, what fraction of the rectangle <em>ABCD</em> is 
shaded?</qti-prompt>
…
</qti-item-body>
1.1.1.4 Data-attribute = data-qti-aria-*

This custom attribute is a backup for instances where the QTI element does not support the use of ARIA attributes (but does support data-attributes), or where the QTI version may lag behind the W3C's updated versions of WAI-ARIA, or to implement proposed ARIA attributes for upcoming releases of WAI-ARIA.

To use this shared vocabulary, use the "data-qti-aria-" prefix, then add the new ARIA attribute name to the custom attribute. For example, "data-qti-aria-new-aria="somevalue".

1.1.1.5 Data-attribute = data-qti-a11y-content-role

This custom attribute is used to provide semantic indicators for accessibility specific content. Below are the shared vocabulary of this QTI-related custom element.

  • screen-reader-orientation
    Screen Reader User Orienting Information: This attribute value identifies objects that contain user guidance specific to users of screen readers, that identifies or describes information that a sighted test taker can glean from simply looking at the item, enabling users to more equitably orient to the task.
  • long-description
    This attribute identifies objects that contain structured extended (or long) text description for images or other visual content. The objects with this attribute are referenced via aria-describedBy or data-qti-aria-details.

NOTE: There is existing shared-vocabulary for not visually displaying information that implies it is accessibility related information: class="qti-visually-hidden" — this of course only means that it is not on screen and the structure of the content is via HTML and/or ARIA information.

1.1.2 Inline Text

1.1.2.1 Class = qti-underline
Semantics Example CSS Definition
Underline an element 
.qti-underline {
   text-decoration: underline;
}
<p>Look at the <span class="qti-underline" >text</span> in the picture.</p>
   Look at the text in the picture
1.1.2.2 Class = qti-italic
Semantics Example CSS Definition
Italicize an element 
.qti-italic {
   font-style: italic;
}
<p>Look at the <span class="qti-italic" >text</span> in the picture.</p>
   Look at the text in the picture

1.1.3 Layout

A common assessment presentation requirement is to arrange item stimuli, stems, and interactions into standard layouts which minimize scrolling and cognitive load while also supporting common user interface patterns about how content is displayed.  Historically, this requirement has led authoring and delivery systems to implement such presentation layouts in ways that may impede interoperability.  To address this common requirement, QTI 3 introduces shared "layout" CSS class names and definitions.  By implementing these layout CSS class names and definitions, delivery and authoring platforms can achieve a wide range of flexible, responsive, standardized, interoperable item presentation user interfaces.

The QTI 3 shared Layout CSS class design and styles emulate well-known modern CSS presentation frameworks which define responsive layout grids in terms of "rows", each of which contains twelve "columns", each of which can be defined individually or grouped together to equal twelve total columns in each row.  

Figure 1 Such row and column definitions can be visualized in the following diagram which contains five rows, each having twelve total columns.
There are 5 rows of boxes each filling the entire width of the area. Row 1 shows 12 equal sized boxes. Row 2 shows 3 equal sized boxes. Row 4 shows 2 boxes, where the first box is half the size of the second box. Row 5 shows 2 equal sized boxes. Row 6 shows one box.

The first row above is divided into twelve individual columns.  The second row contains twelve columns grouped into three four-column groupings.  The third row contains twelve columns grouped into one four-column grouping, and one eight-column grouping.  The fourth row contains twelve columns grouped into two six-column groupings.  The fifth row contains one twelve-column grouping which encapsulates all of the columns in a single row.

Furthermore, rows and columns may be nested inside column groupings so long as the total number of nested columns equals the number of columns in the parent container column grouping.  

Rows and column groupings are specified on <div> elements in the qti-item-body and are defined with the following class names:

1.1.3.1 Class = qti-layout-row

This class is used in conjunction with qti-layout-col-*.

1.1.3.2 Classes = qti-layout-col-*

* = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Example: Item Body with one layout row, and two six-column (qti-layout-col6) groupings

<qti-item-body>
<!-- Define one row which will contain two, six-column groupings -->
  <div class="qti-layout-row">
<!-- Define six-column grouping for the stimulus -->
  <div class="qti-layout-col6">
    <p>Look at the text in the picture.</p>
    <p>
      <img alt="NEVER LEAVE LUGGAGE UNATTENDED" src="images/sign.png"/>
    </p>
  </div> <!-- /stimulus qti-layout-col6 -->
<!-- Define six-column grouping for the stem and interaction -->
  <div class="qti-layout-col6">
    <qti-choice-interaction max-choices="1" response-identifier="RESPONSE">
      <qti-prompt>What does it say?</qti-prompt>
      <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
      <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
      <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
      </qti-choice-interaction>
    </div> <!-- /stem + interaction qti-layout-col6 -->
  </div> <!-- /row -->
</qti-item-body>
Figure 2 The item's stimulus is placed in the leftmost six-column grouping while the stem and interaction are placed in the rightmost six-column grouping. Note: qti-item-body borders added to demonstrate full width of a qti-layout-row.
On the left is some text and an image. To the right and halfway across the width of the area is the prompt and response choices.

Example: Item Body with two layout rows, each row with different column groupings

<qti-item-body>
<!-- First row contains eight-column + four-column groupings -->
  <div class="qti-layout-row">
<!-- Define eight-column grouping for the stimulus -->
  <div class="qti-layout-col8">
    <h4>Where is London?</h4>
      <hr/>
      <p>The picture to the right illustrates four of the most popular
        destinations for air travelers arriving in the United
        Kingdom: London, Manchester, Edinburgh and Glasgow. Please
        <span class="qti-underline">choose London</span>.
      </p>
  </div> <!-- /stimulus qti-layout-col8 -->
<!-- Define four-column grouping for the first row's interaction -->
  <div class="qti-layout-col4">>
    <qti-hotspot-interaction max-choices="1" response-identifier="RESPONSE">
      <object data="images/uk.png" height="280" type="image/png" width="206">UK Map</object>
      <qti-hotspot-choice coords="77,115,10" identifier="A" shape="circle"/>
      <qti-hotspot-choice coords="118,184,10" identifier="B" shape="circle"/>
      <qti-hotspot-choice coords="150,235,10" identifier="C" shape="circle"/>
      <qti-hotspot-choice coords="96,114,10" identifier="D" shape="circle"/>
      </qti-hotspot-interaction>
  </div> <!-- /interaction qti-layout-col4 -->
  </div> <!-- /first row -->
<!-- Second row contains one twelve-column grouping spanning the entire row -->
 <div class="qti-layout-row">
<!-- Define twelve-column grouping for the stem + interaction -->
  <div class="qti-layout-col12">
    <hr />
    <qti-match-interaction max-associations="4" response-identifier="RESPONSE_PLAYS">
      <qti-prompt>Match the following characters to the Shakespeare play in which they appeared:</qti-prompt>
      <qti-simple-match-set>
        <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
        <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
        <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
        <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
      </qti-simple-match-set>
      <qti-simple-match-set>
        <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
        <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
        <qti-simple-associable-choice identifier="T" matchMax="4">The Tempest</qti-simple-associable-choice>
      </qti-simple-match-set>
    </qti-match-interaction>
  </div> <!-- /qti-layout-col12 -->
 </div> <!-- /second row -->
</qti-item-body>

The first row contains column groupings of 8 and 4. A stimulus is placed into the eight-column grouping on the left. A hotspot interaction is placed into the four-column grouping to the right of the stimulus. The second row contains one twelve-column grouping spanning the entire width of the second row. A match interaction and stem are placed into the second row's twelve-column grouping.

Figure 3 Note: qti-item-body borders added to demonstrate full width of a qti-layout-row.
2 interactions are shown. The first interaction has text filling two thirds of the width area, and the response area to the right filling one third of the width area. The bottom interaction fills the full width.
1.1.3.3 Classes = qti-layout-offset-*

* = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11

Column groupings within a row can be "offset" (from left to right) from the beginning of a row, or from a column grouping to the left.  One row should never contain column groupings plus offsets that exceed twelve; i.e., the maximum number of columns in a row.

Column offset definitions can be visualized in the following diagram which contains three rows, each having twelve total columns.  The first row contains a three-column grouping offset by two columns from a four-column grouping.  The second row contains a three-column grouping offset by one column, plus a second three-column grouping offset by two columns.

Figure 4 The third row contains one six-column grouping offset by three columns.
3 rows of boxes are showing boxes demonstrating offsets.

Example: Item Body with one layout row, and two three-column (qti-layout-col3) groupings, the first of which is offset by three columns

<qti-item-body>
<!-- Define one row which will contain two, six-column groupings -->
 <div class="qti-layout-row">
<!-- Define three-column grouping for the stimulus, offset by three columns -->
  <div class="qti-layout-col3 qti-layout-offset3">
    <h4>Where is London?</h4>
    <hr/>
      <p>The picture to the right illustrates four of the most popular
       destinations for air travelers arriving in the United
       Kingdom: London, Manchester, Edinburgh and Glasgow. Please
       <span class="qti-underline">choose London</span>.
      </p>
  </div> <!-- /stimulus qti-layout-col3 qti-layout-offset3 -->
<!-- Define three-column grouping for the interaction -->
  <div class="qti-layout-col3">
    <qti-hotspot-interaction max-choices="1" response-identifier="RESPONSE">
      <object data="images/uk.png" height="280" type="image/png" width="206">UK Map</object>
      <qti-hotspot-choice coords="77,115,10" identifier="A" shape="circle"/>
      <qti-hotspot-choice coords="118,184,10" identifier="B" shape="circle"/>
      <qti-hotspot-choice coords="150,235,10" identifier="C" shape="circle"/>
      <qti-hotspot-choice coords="96,114,10" identifier="D" shape="circle"/>
    </qti-hotspot-interaction>
  </div> <!-- /interaction qti-layout-col3 -->
 </div> <!-- /row -->
</qti-item-body>

The item's stimulus is placed in the leftmost three-column grouping which is offset by three columns, while the interaction is placed in an adjacent three-column grouping. This creates the visual impression of a six-column grouping that is horizontally centered in a row.

Figure 5 Note: qti-item-body borders added to demonstrate full width of a qti-layout-row.
An indented column of text is shown to the left of an image in the response area.
1.1.3.4 Class = qti-display-inline-block

Some assessment platforms use a “Fraction” item-types. This is often implemented as two qti-text-entry-interactions in a table. To display this as an inline interaction with text on either side they set display:inline-block.

Sample item where a fraction with one text entry box above a line, and a second text entry box below the line, is shown within a line of text. 
<div class="fraction_numeric_response">
  <p>Four of the eight pieces represent</p>
  <table class="qti-display-inline-block qti-valign-middle fraction_entry" role="presentation">
    <tbody>
      <tr class="pad6">
        <td class="qti-align-center cell-bbottomblack">
        <textEntryInteraction aria-label="numerator"
          class="qti-align-center qti-input-width-4"
          expectedLength="3" format="###" patternMask="-?(\d{0,3})"
          responseIdentifier="RESPONSE_numerator"/>
          </td>
        </tr>
        <tr class="pad6">
          <td class="qti-align-center">
          <textEntryInteraction aria-label="denominator"
            class="qti-align-center qti-input-width-4"
            expectedLength="3" format="###" patternMask="-?(\d{0,3})"
            responseIdentifier="RESPONSE_denominator"/>
          </td>
        </tr>
    </tbody>
  </table>
  <p>of the pie.</p>
</div>

1.1.4 Alignment

1.1.4.1 Classes = qti-align-left | -right | -center
Semantics Example CSS Definition
Horizontal alignment, left, center, and right. 
.qti-align-left {
   text-align: left;
}
.qti-align-center {
   text-align: center;
}
.qti-align-right {
   text-align: right;
}

<table class="qti-fullwidth qti-bordered">
  <tbody>
    <tr>
      <td class="qti-align-left">I am left-aligned</td>
    </tr>
    <tr>
      <td class="qti-align-center">I am center-aligned</td>
    </tr>
    <tr>
      <td class="qti-align-right">I am right-aligned</td>
    </tr>
  </tbody>
</table>
Figure 6 Note: Table border added for effect.
3 short sentences are shown on 3 different lines. The first line has the text starting at the far left. The second line is in the middle of the line (centered). The third line has the text ending at the far left.
1.1.4.2 Classes = qti-valign-top | -middle | -baseline | -bottom
Semantics Example CSS Definition
Vertical alignment, top, middle, baseline, and bottom. 
.qti-valign-top {
   vertical-align: top;
}
.qti-valign-middle {
   vertical-align: middle;
}
.qti-valign-baseline {
   vertical-align: baseline;
}
.qti-valign-bottom {
   vertical-align: bottom;
}

<!-- Please see definition of qti-bordered class -->
<p class="qti-bordered">
  <img class="qti-valign-top" src="image/png" hspace="4" vspace="0" width="4" height="28"/>
  I am top-valigned.</p>
<p class="qti-bordered">
  <img class="qti-valign-middle" src="image/png" hspace="4" vspace="0" width="4" height="28"/>
  I am middle-valigned.</p>
<p class="qti-bordered">
  <img class="qti-valign-baseline" src="image/png" hspace="4" vspace="0" width="4" height="28"/>
  I am baseline-valigned.</p>
<p class="qti-bordered">
  <img  class="qti-valign-bottom" src="image/png" hspace="4" vspace="0" width="4" height="28"/>
  I am bottom-valigned.</p>
Figure 7 Note: Paragraph borders and 28px images added for effect.
4 short sentences are shown within boxes. The first sentence shows the text at the top of the box. The second sentence shows the text middle of the box. The third sentence shows the text at the bottom, with the descenders of the letters dropping below. The fourth sentence shows the text at the bottom of the box, with the descenders within the box.
1.1.4.3 Class = qti-fullwidth
Semantics Example CSS Definition
Set the width of the element to 100% of the width of the element's container. 
.qti-fullwidth {
   width: 100%;
}

<table class="qti-fullwidth qti-bordered">
  <tbody>
    <tr>
      <td class="qti-align-left">I am left-aligned</td>
    </tr>
    <tr>
      <td class="qti-align-center">I am center-aligned</td>
    </tr>
    <tr>
      <td class="qti-align-right">I am right-aligned</td>
    </tr>
  </tbody>
</table>
Note: Table border added for effect.  Table expands to 100% width of its container.
1.1.4.4 Classes = qti-text-indent-1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

A class to indicate an indent where the suffix of the class name has the number of rem (root-em) units to indent the block.

1.1.5 Vertical Writing

The following shared vocabulary is for the presentation of QTI 3 content containing vertical Chinese, Japanese, Korean, or Mongolian text.

1.1.5.1 Writing Mode

The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.

Class Purpose
.qti-writing-mode-vertical-rl Set the writing-mode to vertical-rl. Typical for CJK vertical text.
.qti-writing-mode-vertical-lr Set the writing-mode to vertical-lr. Typical for Mongolian vertical text.
.qti-writing-mode-vertical-tb Set writing-mode to horizontal. This is the browser default.
1.1.5.2 Float Classes

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

Class Purpose
.qti-float-left Float the element left.
.qti-float-right Float the element right.
.qti-float-none Remove a float.
.qti-float-clearfix::after Clearfix Hack to apply to a container of floated content that overflows the container.
.qti-float-clear-left  
.qti-float-clear-right  
.qti-float-clear-both  
1.1.5.3 Text Orientation Classes

Explicitly set the rendering of Latin characters in vertical "writing mode".

Class Purpose
.qti-text-orientation-upright By default, when writing mode is vertical, Latin characters are rendered sideways. To override this, set the text-orientation CSS property “upright”.
.qti-text-combine-upright-all There are conditions in vertical writing where Latin characters are presented in a combined upright orientation; e.g., the “5012” and the “GI” characters. 
<p>是有<span class="qti-text-combine-upright-all">5012</span>
<span class="qti-text-combine-upright-all">GI</span>的話</p>
Both Latin and GI characters are upright

There are conditions in vertical writing where Latin characters are presented in a combined upright orientation; e.g., the “5012” and the “GI” characters. For this, use text-combine-upright: all.

1.1.6 Element Appearance

1.1.6.1 Class = qti-hidden & Class = qti-visually-hidden
Semantics Example CSS Definition

Completely hide, or visually-hide, an element.

A completely hidden element is neither visually-perceptible nor "visible" to assistive technology.

A common use-case for qti-hidden is to have dormant content loaded in the delivery system's DOM, but imperceptible to sighted and non-sighted candidates.

A visually hidden element is not visually perceptible.  However,  it is "visible" to assistive technology.

A common use-case for qti-visually-hidden is to use this class in conjunction with another adjacent DOM element that is aria-hidden.  The visually-hidden element is visible to assistive technology, but invisible to sighted candidates.  The aria-hidden element is hidden from assistive technology but visible to sighted candidates.

 
.qti-hidden {
   display: none;
}
.qti-visually-hidden {
   position:fixed !important;
   overflow: hidden;
   clip: rect(1px 1px 1px 1px);
   height: 1px;
   width: 1px;
   border: 0;
   margin: -1px;
}

Example: qti-hidden

<p class="qti-hidden" >I am content that is completely hidden 
 from sighted and non-sighted users.</p>

Example: span's that are qti-visually-hidden and aria-hidden together

<p>Jane paid <span
 class="qti-visually-hidden">25 dollars</span>
  <span aria-hidden="true">$25.00</span>
 for the taxi fare.</p>
1.1.6.2 Class = qti-bordered & Class = qti-well
Semantics Example CSS Definition

qti-bordered adds a visual border to an element.

qti-well adds a "well" to an element.  A "well" is a UI convention of adding visual importance to an element.  Increased visual importance is usually achieved by adding both a border and background + foreground colors to the element.  The background color should be chosen by the delivery platform so as not violate WCAG AA guidelines for foreground color textual contrast.

 
.qti-bordered {
   border: 1px solid #888888;
   padding: 2px;
}
.qti-well {
   min-height:20px;
   padding:19px;
   margin-bottom:20px;
   background-color:#f5f5f5;
   border:1px solid #e3e3e3;
   border-radius:4px;
   box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

<div>
  <p>Ho hum. I am a non-bordered paragraph.</p>
  <p class="qti-bordered">Look at me! I am a bordered paragraph.</p>
  <p>I am yet another non-bordered paragraph.</p>
</div>
<div>
  <p>Ho hum. I am a non-bordered paragraph.</p>
  <p class="qti-well">Look at me! I am in a well!</p>
  <p>I am yet another non-bordered paragraph.</p>
</div>
Figure 8 Example of qti-bordered. The second paragraph is bordered.
3 paragraphs are shown. The second paragraph is surrounded by a line.
Figure 9 Example of qti-well. The second paragraph is in a well.
3 paragraphs are shown. The second paragraph is inside a box with the text indented.

1.1.7 List Styles

1.1.7.1 Default Styling
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.2 .qti-list-style-type-none
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.3 .qti-list-style-type-arabic-indic
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.4 .qti-list-style-type-armenian
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.5 .qti-list-style-type-bengali
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.6 .qti-list-style-type-cambodian
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.7 .qti-list-style-type-circle
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.8 .qti-list-style-type-cjk-earthly-branch
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.9 .qti-list-style-type-cjk-heavenly-stem
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.10 .qti-list-style-type-cjk-ideographic
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.11 .qti-list-style-type-decimal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.12 .qti-list-style-type-decimal-leading-zero
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.13 .qti-list-style-type-devanagari
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.14 .qti-list-style-type-disc
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.15 .qti-list-style-type-georgian
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.16 .qti-list-style-type-gujarati
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.17 .qti-list-style-type-gurmukhi
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.18 .qti-list-style-type-hebrew
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.19 .qti-list-style-type-hiragana
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.20 .qti-list-style-type-hiragana-iroha
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.21 .qti-list-style-type-kannada
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.22 .qti-list-style-type-katakana
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.23 .qti-list-style-type-katakana-iroha
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.24 .qti-list-style-type-khmer
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.25 .qti-list-style-type-korean-hangul-formal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.26 .qti-list-style-type-korean-hanja-formal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.27 .qti-list-style-type-korean-hanja-informal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.28 .qti-list-style-type-lao
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.29 .qti-list-style-type-lower-alpha
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.30 .qti-list-style-type-lower-armenian
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.31 .qti-list-style-type-lower-greek
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.32 .qti-list-style-type-lower-latin
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.33 .qti-list-style-type-lower-roman
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.34 .qti-list-style-type-malayalam
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.35 .qti-list-style-type-mongolian
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.36 .qti-list-style-type-myanmar
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.37 .qti-list-style-type-oriya
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.38 .qti-list-style-type-persian
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.39 .qti-list-style-type-simp-chinese-formal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.40 .qti-list-style-type-simp-chinese-informal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.41 .qti-list-style-type-square
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.42 .qti-list-style-type-telugu
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.43 .qti-list-style-type-thai
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.44 .qti-list-style-type-tibetan
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.45 .qti-list-style-type-trad-chinese-formal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.46 .qti-list-style-type-trad-chinese-informal
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.47 .qti-list-style-type-upper-alpha
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.48 .qti-list-style-type-upper-armenian
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.49 .qti-list-style-type-upper-latin
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth
1.1.7.50 .qti-list-style-type-upper-roman
ol
  1. First
  2. Second
  3. Third
  4. Fourth
    1. First
    2. Second
    3. Third
    4. Fourth
      1. First
      2. Second
      3. Third
      4. Fourth
ul
  • First
  • Second
  • Third
  • Fourth
    • First
    • Second
    • Third
    • Fourth
      • First
      • Second
      • Third
      • Fourth

1.2 INTERACTION CLASSES

The following table summarizes the shared vocabulary used in QTI interactions.

Classes or attributes in italics are used in more than a single interaction type.

Interaction Classes Custom Attributes
qti-choice-interaction

qti-labels-none
qti-labels-decimal qti-labels-lower-alpha
qti-labels-upper-alpha

qti-labels-suffix-none
qti-labels-suffix-period
qti-labels-suffix-parenthesis

qti-orientation-horizontal
qti-orientation-vertical

qti-input-control-hidden

qti-choices-stacking-1
qti-choices-stacking-2
qti-choices-stacking-3
qti-choices-stacking-4
qti-choices-stacking-5

data-max-selections-message   ="any text"

data-min-selections-message   ="any text"
qti-text-entry-interaction qti-input-width-1
qti-input-width-2
qti-input-width-3
qti-input-width-4
qti-input-width-6
qti-input-width-10
qti-input-width-15
qti-input-width-20
qti-input-width-25
qti-input-width-30
qti-input-width-35
qti-input-width-40
qti-input-width-45
qti-input-width-50
qti-input-width-72		 data-patternmask-message   ="any text"
qti-extended-text-interaction

qti-height-lines-3

qti-height-lines-6

qti-height-lines-15

qti-counter-up

qti-counter-down

 data-patternmask-message   ="any text"
qti-inline-choice-interaction qti-input-width-1
qti-input-width-2
qti-input-width-3
qti-input-width-4
qti-input-width-6
qti-input-width-10
qti-input-width-15
qti-input-width-20
qti-input-width-25
qti-input-width-30
qti-input-width-35
qti-input-width-40
qti-input-width-45
qti-input-width-50
qti-input-width-72		 data-prompt    ="any text"
qti-match-interaction

qti-match-tabular

qti-header-hidden (only relevant when qti-match-tabular)

qti-choices-top
qti-choices-bottom
qti-choices-left
qti-choices-right

data-first-column-header  = "any text"

data-max-selections-message   ="any text"

data-min-selections-message   ="any text"
qti-gap-match-interaction

qti-gap-placement

qti-choices-top
qti-choices-bottom
qti-choices-left
qti-choices-right

qti-input-width-1
qti-input-width-2
qti-input-width-3
qti-input-width-4
qti-input-width-6
qti-input-width-10
qti-input-width-15
qti-input-width-20
qti-input-width-25
qti-input-width-30
qti-input-width-35
qti-input-width-40
qti-input-width-45
qti-input-width-50
qti-input-width-72

data-choices-container-width   = " x" (pixels)

data-max-selections-message   ="any text"

data-min-selections-message   ="any text"
qti-graphic-gap-match-interaction

qti-selections-light

qti-selections-dark

qti-unselected-hidden

qti-choices-top
qti-choices-bottom
qti-choices-left
qti-choices-right

data-choices-container-width    ="x" (pixels)

data-max-selections-message   ="any text"

data-min-selections-message   ="any text"
qti-hottext-interaction qti-input-control-hidden

data-max-selections-message   ="any text"

data-min-selections-message   ="any text"
qti-hotspot-interaction

qti-selections-light

qti-selections-dark

qti-unselected-hidden

data-max-selections-message   ="any text"

data-min-selections-message   ="any text"
qti-order-interaction

qti-orientation-horizontal
qti-orientation-vertical

Level 3 Conformance(when implementing min/max) :

qti-choices-top
qti-choices-bottom
qti-choices-left
qti-choices-right

data-choices-container-width    ="x" (pixels)

Level 3 Conformance (when implementing min/max):

data-max-selections-message   ="any text"

data-min-selections-message   ="any text"
qti-media-interaction

 

data-qti-media-player-controls ="x" values:

  • none
  • default
  • play
  • rewind
  • captions
  • audioDescription

data-qti-media-player-pause-delay ="x" )seconds(

data-qti-media-player-pause-duration ="x" )seconds(

data-qti-media-player-pause-count ="x" )integer >0(

1.2.1 Choice Interaction

1.2.1.1 Choice Label

For explicit choice labeling, use the class attribute as follows:

Values
qti-labels-none No labels displayed.
qti-labels-decimal Display numeric characters 1, 2, 3, …
qti-labels-lower-alpha Display lowercase characters a, b, c, …
qti-labels-upper-alpha Display uppercase characters A, B, C, …

In the absence of choice labeling, delivery systems should render platform defaults.

Example: Demonstrates class="qti-labels-none"

<qti-choice-interaction class="qti-labels-none" max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 10 Expected Rendering: No visual labels.
3 response options, each with a circular button with no numbers, letters, or punctuation associated with the buttons.

Example: Demonstrates class="qti-labels-decimal"

<qti-choice-interaction class="qti-labels-decimal" max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 11 Expected Rendering: Visual labels are numeric.
numeric visual labels

Example: Demonstrates class="qti-labels-lower-alpha"

<qti-choice-interaction class="qti-labels-lower-alpha" max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 12 Expected Rendering: Visual labels are lowercase alphabetic.
3 response options, each with a circular button. Next to each circle is an ascending alphabet letter in lowercase.

Example: Demonstrates class="qti-labels-upper-alpha"

<qti-choice-interaction class="qti-labels-upper-alpha" max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 13 Expected Rendering: Visual labels are uppercase alphabetic.
3 response options, each with a circular button. Next to each circle is an ascending alphabet letter in uppercase.
1.2.1.2 Choice Label Suffix

For explicit choice suffix labeling, use the class attribute as follows:

Values
qti-labels-suffix-none No character is displayed after the choice label.
qti-labels-suffix-period A period "." character is displayed after the choice label.
qti-labels-suffix-parenthesis A right parenthesis ")" character is displayed after the choice label.

In the absence of choice suffix labeling, delivery systems should render platform defaults.

Example: Demonstrates class="qti-labels-suffix-none"

<qti-choice-interaction class="qti-labels-suffix-none" max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 14 Expected Rendering: No visual label suffix.
3 response options, each with a circular button. Next to each circle is an ascending alphabet letter in uppercase, and there is no punctuation after each letter.

Example: Demonstrates class="qti-labels-suffix-period"

<qti-choice-interaction class="qti-labels-suffix-period" max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 15 Expected Rendering: A period "." visual label suffix.
3 response options, each with a circular button. Next to each circle is an ascending alphabet letter in uppercase, and there is a period character immediately after each letter.

Example: Demonstrates class="qti-labels-suffix-parenthesis"

<qti-choice-interaction class="qti-labels-suffix-parenthesis" max-choices="1"  response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 16 Expected Rendering: A right parenthesis ")" visual label suffix.
3 response options, each with a circular button. Next to each circle is an ascending alphabet letter in uppercase, and there is a right parenthesis “)” character immediately after each letter.
1.2.1.3 Combining Choice Label and Choice Label Suffix

It is possible to combine choice label and choice label suffix classes in order to make explicit the desired presentation of the label.  In the absence of choice labeling and choice suffix labeling, delivery systems should render platform defaults.

Example: Demonstrates class="qti-labels-lower-alpha qti-labels-suffix-parenthesis"

<qti-choice-interaction class="qti-labels-lower-alpha qti-labels-suffix-parenthesis"
 max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 17 Expected Rendering: Visual labels lowercase alpha with a right parenthesis ")" visual label suffix.
3 response options, each with a circular button. Next to each circle is an ascending alphabet letter in lowercase, and there is a right parenthesis “)” character immediately after each letter.

Example: Demonstrates class="qti-labels-decimal qti-labels-suffix-period"

<qti-choice-interaction class="qti-labels-decimal qti-labels-suffix-period"
 max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 18 Expected Rendering: Visual labels numeric with a period "." visual label suffix.
3 response options, each with a circular button. Next to each circle is an ascending number, and there is a period “.” character immediately after each number.
1.2.1.4 Choice Orientation

For explicit choice visual orientation, use the class attribute as follows:

Values
qti-orientation-vertical Choices are displayed from top to bottom, vertically.
qti-orientation-horizontal Choices are displayed from left to right, horizontally.

When displaying horizontally-oriented lists of choices, delivery systems are not expected to display more than five choices in any row.  

Example: Demonstrates class="qti-orientation-vertical"

<qti-choice-interaction class="qti-orientation-vertical"
 max-choices="1" shuffle="false"  response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 19 Expected Rendering: Choices are displayed from top to bottom, vertically.
3 response options, each with a circular button, each option on its own line, one above the next response option.

Example: Demonstrates class="qti-orientation-horizontal"

<qti-choice-interaction class="qti-orientation-horizontal"
 max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 20 Expected Rendering: Choices are displayed from left to right, horizontally. Note: a maximum of 5 choices displayed in any row.
3 response options, each with a circular button where each option is in the same horizontal row, one immediately to the right of the next one. The text in the options wraps to a second line immediately below the first line of the same option.
1.2.1.5 Choice Stacking

For explicit choice stacking, use the class attribute as follows:

Values
qti-choices-stacking-1 Choices are stacked in 1 column.
qti-choices-stacking-2 Choices are stacked in 2 columns.
qti-choices-stacking-3 Choices are stacked in 3 columns.
qti-choices-stacking-4 Choices are stacked in 4 columns.
qti-choices-stacking-5 Choices are stacked in 5 columns.

By default, with vertical orientation, default stacking = 1. With horizontal orientation, default stacking equals the number of choices; e.g., if there are 4 choices then default stacking is 4 when orientation is horizontal. Furthermore, when orientation is horizontal, no delivery system is expected to stack more than 5 choices in a single row.  In the absence of an orientation class (horizontal or vertical), stacking is implicitly horizontal.

Example: Demonstrates class="qti-choices-stacking-1"

<qti-choice-interaction class="qti-choices-stacking-1"
 max-choices="0" response-identifier="RESPONSE">>
  <qti-simple-choice fixed="false" identifier="H">Hydrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="He">Helium</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="C">Carbon</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="O">Oxygen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="N">Nitrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="Cl">Chlorine</qti-simple-choice>
</qti-choice-interaction>
Figure 21 Expected Rendering: Choices are displayed in one column.
6 response options, each with a circular button, each option on its own line, one above the next response option.

Example: Demonstrates class="qti-choices-stacking-2"

<qti-choice-interaction class="qti-choices-stacking-2"
 max-choices="0" response-identifier="RESPONSE">
  <qti-simple-choice fixed="false" identifier="H">Hydrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="He">Helium</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="C">Carbon</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="O">Oxygen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="N">Nitrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="Cl">Chlorine</qti-simple-choice>
</qti-choice-interaction>
Figure 22 Expected Rendering: Choices are displayed in two columns.
6 response options, each with a circular button. There are 2 columns of responses, 3 options in each column. The option order is left to right, top to bottom.

Example: Demonstrates class="qti-choices-stacking-3"

<qti-choice-interactionclass="qti-choices-stacking-3"
 max-choices="0"    response-identifier="RESPONSE">
  <qti-simple-choice fixed="false" identifier="H">Hydrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="He">Helium</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="C">Carbon</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="O">Oxygen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="N">Nitrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="Cl">Chlorine</qti-simple-choice>
</qti-choice-interaction>
Figure 23 Expected Rendering: Choices are displayed in three columns.
6 response options, each with a circular button. There are 3 columns of responses, 2 options in each column. The option order is left to right, top to bottom.

Example: Demonstrates class="qti-choices-stacking-4"

<qti-choice-interaction class="qti-choices-stacking-4"
 max-choices="0"    response-identifier="RESPONSE">
  <qti-simple-choice fixed="false" identifier="H">Hydrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="He">Helium</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="C">Carbon</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="O">Oxygen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="N">Nitrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="Cl">Chlorine</qti-simple-choice>
</qti-choice-interaction>
Figure 24 Expected Rendering: Choices are displayed in four columns.
6 response options, each with a circular button. There are 4 columns of responses, 2 options in the first two columns, and one option the last two columns. The option order is left to right, top to bottom.

Example: Demonstrates class="qti-choices-stacking-5"

<qti-choice-interaction class="qti-choices-stacking-5"
 max-choices="0"    response-identifier="RESPONSE">
  <qti-simple-choice fixed="false" identifier="H">Hydrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="He">Helium</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="C">Carbon</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="O">Oxygen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="N">Nitrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="Cl">Chlorine</qti-simple-choice>
</qti-choice-interaction>
Figure 25 Expected Rendering: Choices are displayed in five columns.
6 response options, each with a circular button. There are 5 columns of responses, 2 options in the first columns, and one option the last 4 columns. The option order is left to right, top to bottom.
1.2.1.6 Combining Orientation and Choice Stacking

Combining an orientation class with a stacking class is used to explicitly set the visual order of the choices.  Horizontal stacking must result in a "Z" order of the choices, while vertical stacking must result in a so-called, "Reverse N" visual order of the choices.  

Please see the examples below.

Example: Demonstrates class="qti-choices-stacking-3 qti-orientation-horizontal"

<qti-choice-interaction class="qti-choices-stacking-3 qti-orientation-horizontal"
 max-choices="0" response-identifier="RESPONSE">
  <qti-simple-choice fixed="false" identifier="H">Hydrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="He">Helium</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="C">Carbon</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="O">Oxygen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="N">Nitrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="Cl">Chlorine</qti-simple-choice>
</qti-choice-interaction>
Figure 26 Expected Rendering: Choices are displayed in three columns, Choices are in "Z" order.
6 response options, each with a rounded square button. There are 3 columns of responses, 2 options in each column in two rows. Read as rows (left to right) the option order for the first row is A, B, C; the second row is D, E, F.

Example: Demonstrates class="qti-choices-stacking-3 qti-orientation-vertical"

<qti-choice-interaction class="qti-choices-stacking-3 qti-orientation-vertical"
 max-choices="0" response-identifier="RESPONSE">
  <qti-simple-choice fixed="false" identifier="H">Hydrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="He">Helium</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="C">Carbon</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="O">Oxygen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="N">Nitrogen</qti-simple-choice>
  <qti-simple-choice fixed="false" identifier="Cl">Chlorine</qti-simple-choice>
</qti-choice-interaction>
Figure 27 Expected Rendering: Choices are displayed in three columns because of the stacking class, and choices are in so-called, "Reverse N" order as a result of the explicit vertical specification.
6 response options, each with a rounded square button. There are 3 columns of responses, 2 options in each column in two rows. Read as rows (left to right) the option order for the first row is A, C, E; the second row is B, D, F.

Example: Demonstrates class="qti-choices-stacking-2 qti-orientation-vertical"

<qti-choice-interaction class="qti-choices-stacking-2 qti-orientation-vertical"
               max-choices="1" shuffle="false" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 28 Expected Rendering: Choices are displayed in two columns, Choices are in "Reverse N" visual order.
3 response options, each with a circular button. There are 2 columns of responses, 2 options in the first column and 1 option in the second column. Read as rows (left to right) the option order for the first row is A, B; the second row is C.

Example: Demonstrates class="qti-choices-stacking-2 qti-orientation-horizontal"

<qti-choice-interaction class="qti-choices-stacking-2 qti-orientation-horizontal"
 max-choices="1" shuffle="false" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 29 Expected Rendering: Choices are displayed in two columns, Choices are in "Z" visual order.
choices in 2 columns
1.2.1.7 Choice with No Input Control

To specify choice rendering with no input control (radio/checkbox), use the class attribute as follows:

Values
qti-input-control-hidden Hide the input controls of the choices.

When input controls are hidden, delivery systems should ensure that choice presentation follows WCAG 2.0 AA (or better) guidelines for text and images. Hidden in the context of input controls is intended to mean that the controls are only visually hidden – the controls MUST be available programmatically (available for assistive technology).

Example: Demonstrates class="qti-input-control-hidden"

<qti-choice-interaction class="qti-input-control-hidden" ;max-choices="1" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 30 Expected Rendering: Choices without input controls (all choices unselected).
3 response options with no buttons are presented though there are uppercase ascending letters next to each choice. Each response option is surrounded by a thin blue line where the whole response option becomes the 'button.'
Figure 31 Choices without input controls (second choice selected).
3 response options with no buttons are presented and there are no letters or numbers next to any of the choices. Each response option is surrounded by a thin blue line where the whole response option becomes the 'button.'

Note: The above two examples include choice labels (A., B., etc.).  This is not a part of the expected rendering when qti-input-control-hidden is specified.  Delivery platforms may choose a different labeling style except in the case where shared labeling vocabulary is specified.

Example: Demonstrates class="qti-input-control-hidden qti-labels-none"

<qti-choice-interaction class="qti-input-control-hidden qti-labels-none" max-choices="1" 
  shuffle="false" response-identifier="RESPONSE">
  <qti-simple-choice identifier="ChoiceA">You must stay with your luggage at all times.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceB">Do not let someone else look after your luggage.</qti-simple-choice>
  <qti-simple-choice identifier="ChoiceC">Remember your luggage when you leave.</qti-simple-choice>
</qti-choice-interaction>
Figure 32 Expected Rendering: Choices without input controls and no labels.
no input controls and no labels
1.2.1.8 Choice Interaction Custom max|min-choices Messages

To specify custom max-choices or min-choices messages, use a data- attribute as follows:

Values
data-max-selections-message Custom message to be rendered by the delivery platform upon violation of the max-choices constraint.
data-min-selections-message Custom message to be rendered by the delivery platform upon violation of the min-choices constraint.

In the absence of such custom message overrides, delivery systems should render platform defaults.

1.2.1.9 Vertical Writing for Choice

The following is vocabulary to instrument delivery applications' rendering of interactions in the context of vertical writing content.

Values
qti-writing-orientation-vertical-rl Display choices in a vertical orientation, from right to left, choice labels with upright orientation, and choice descriptions with writing mode vertical-rl

The following example is a rendering with qti-writing-orientation-vertical-rl in qti-choice-interaction rendered with choices flowing from right to left, with labels rendered upright and horizontally, and with writing mode vertical-rl on the choice descriptions.

all text, including the choices are rendered vertically

An example using qti-writing-orientation-vertical-rl, qti-choices-stacking-3, and qti-labels-cjk-ideographic:

all text rendered vertically and choices are stacked a maximum of 3 choices displayed vertically.
Values
qti-writing-orientation-vertical-lr Display choices in a vertical orientation, from left to right, choice labels with upright orientation, and choice descriptions with writing mode vertical-lr

The above is typically used for rendering Mongolian content.

Values
qti-labels-cjk-ideographic Display labels with list-style-type cjk-ideographic characters

The following example renders cjk-ideographic labels rendered horizontally in an upright orientation:

The choice labels are presented horizontally within a vertical column

The following example renders qti-input-control-hidden, qti-choices-stacking-2, and qti-labels-cjk-ideographic:

The choice labels are presented horizontally within a vertical column

According to QTI best practices, a QtiChoiceInteraction has a default orientation of “vertical”. In other words, a vertically-oriented QtiChoiceInteraction, in the absence of a writing orientation class, should present the choices in order from top to bottom as in the following example:

default browser rendering of choice interaction content

However, when we add the qti-writing-orientation-vertical-rl class to the above interaction, we are effectively rotating the presentation 90 degrees clockwise and changing the choice labels' orientation to upright as demonstrated in the following diagram.

Using the qti-writing-orientation-vertical-rl the choices rotate 90 degrees and are right to left

When a QtiChoiceInteraction has an explicit orientation of “horizontal”; e.g., class=”qti-orientation-horizontal” a delivery application is expected to present the choices in order “horizontally”, from left to right, as demonstrated in the following example:

using the explicit class of qti-orientation-horizontal renders the options from left to right in a horizontal row

And when we add the qti-writing-orientation-vertical-rl class to the above interaction, we are again effectively rotating the presentation 90 degrees clockwise and changing the choice labels' orientation to upright as demonstrated in the following diagram:

using the explicit class of qti-orientation-horizontal renders the options from left to right in a horizontal row

1.2.2 Text Entry Interaction

The bulk of the shared vocabulary for this interaction adds further definition to the presentation width of the input element by utilizing the class attribute.

1.2.2.1 Input Width

For input element width definition, use the class attribute as follows:

Values
qti-input-width-1 Input element width at least 1 character.
qti-input-width-2 Input element width at least 2 characters.
qti-input-width-3 Input element width at least 3 characters.
qti-input-width-4 Input element width at least 4 characters.
qti-input-width-6 Input element width at least 6 characters.
qti-input-width-10 Input element width at least 10 characters.
qti-input-width-15 Input element width at least 15 characters.
qti-input-width-20 Input element width at least 20 characters.
qti-input-width-25 Input element width at least 25 characters.
qti-input-width-30 Input element width at least 30 characters.
qti-input-width-35 Input element width at least 35 characters.
qti-input-width-45 Input element width at least 45 characters.
qti-input-width-50 Input element width at least 50 characters.
qti-input-width-72 Input element width at least 72 characters. (Intended to be interpreted as the full width of a tablet.)

The input element widths are intended to provide a general visual impression, and are not expected to exactly match the width of the designated characters. By default, in the absence of any shared vocabulary, the presentation width of the input element is left to the implementer.

Example: Demonstrates various "qti-input-width-1 | 2 | 3 | 4 | 6 | 10 | 15 | 20 | 72" classes (a subset of the classes detailed above).

<p>qti-input-width-1: <qti-text-entry-interaction class="qti-input-width-1"
     expected-length="15" response-identifier="RESPONSE1"/></p>
<p>qti-input-width-2: <qti-text-entry-interaction  class="qti-input-width-2"
     expected-length="15" response-identifier="RESPONSE2"/></p>
<p>qti-input-width-3: <qti-text-entry-interaction class="qti-input-width-3"
     expected-length="15" response-identifier="RESPONSE3"/></p>
<p>qti-input-width-4: <qti-text-entry-interaction class="qti-input-width-4"
     expected-length="15" response-identifier="RESPONSE4"/></p>
<p>qti-input-width-6: <qti-text-entry-interaction class="qti-input-width-6"
     expected-length="15" response-identifier="RESPONSE5"/></p>
<p>qti-input-width-10: <qti-text-entry-interaction class="qti-input-width-10"
     expected-length="15" response-identifier="RESPONSE6"/></p>
<p>qti-input-width-15: <qti-text-entry-interaction class="qti-input-width-15"
     expected-length="15" response-identifier="RESPONSE7"/></p>
<p>qti-input-width-20: <qti-text-entry-interaction class="qti-input-width-20"
     expected-length="20" response-identifier="RESPONSE8"/></p>
<p>qti-input-width-72: <qti-text-entry-interaction class="qti-input-width-72"
     expected-length="72" response-identifier="RESPONSE9"/></p>
Figure 33 Expected Rendering: Visual input widths at least a minimum number of characters wide.
9 different rows, with different text entry boxes representing the different widths expressed in the shared vocabulary classes. The text boxes are empty.
Figure 34 With Characters Entered.
9 different rows, with different text entry boxes representing the different widths expressed in the shared vocabulary classes. The text boxes are filled with M characters equal to the class name width (e.g. qti-input-width-10 has 10 M characters in the box).
1.2.2.2 Custom Pattern Mask Message

To specify a custom pattern mask message, use a data- attribute as follows:

Values
data-patternmask-message Custom message to be rendered by the delivery platform upon violation of the pattern mask constraints.

Example: Demonstrates data-patternmask-message

<p> qti-input-width-6, pattern-mask=([0-9.]{0,6}), data-patternmask-message:<br />
<div role="math">
 <math xmlns="http://www.w3.org/1998/Math/MathML">
   <mrow> <mn>14</mn> <mo class="sign">×</mo>
   <mrow> <mi>tan</mi> <mo>⁡</mo> <mfenced>
   <mrow> <mn>67</mn> </mrow> </mfenced> </mrow>
   </mrow>
 </math> = <qti-text-entry-interactionclass="qti-input-width-6" expected-length="6"
 pattern-mask="([0-9.]{0,6})" data-patternmask-message="Maximum of 6 digits or a decimal
 point permitted"  response-identifier="RESPONSE"/>
  </div>
</p>
Figure 35 Expected Rendering: Display the custom message when invalid input entered.
A math problem is shown with a text entry box. The box has 6 numbers in it with a pop up box pointing to the text entry box that says, 'Maximum of 6 digits or a decimal point permitted.'
1.2.2.3 Vertical Writing for Text Entry
Values
qti-writing-orientation-vertical-rl Display the interaction in a vertical orientation with writing mode vertical-rl (right-to-left)

The following example shows a vertically-oriented qti-text-entry-interaction rendered inline with surrounding vertical text, and inner text is displayed with writing mode vertical-rl:

a text entry interaction with a vertical input box

The following examples shows a Text Entry interaction with vertical orientation with various qti-input-width(s):

a text entry example where the input boxes are different heights
Values
qti-writing-orientation-vertical-lr Display the interaction in a vertical orientation with writing mode vertical-lr (left-to-right)

1.2.3 Extended Text Interaction

The shared vocabulary for the extended text interaction is intended to provide more precision when describing:

  1. Interaction height
  2. Character counter behavior
  3. Plain or Rich Text options
  4. A custom pattern-mask message
  5. Placeholder text

Responsive design implies that delivery systems should display an input area (typically, this will be a <textarea> or <div> html element) that has a width equal to 100% of the interaction's encapsulating container. Consequently, there is no shared vocabulary for overriding the width of this interaction.

1.2.3.1 Interaction Height

For input area height definition, use the class attribute as follows:

Values
qti-height-lines-3 Input area is approximately 3 lines tall.
qti-height-lines-6 Input area is approximately 6 lines tall.
qti-height-lines-15 Input area is approximately 15 lines tall.

The input element heights are intended to provide a general visual impression, and are not expected to exactly match the height of the designated lines. By default, in the absence of any shared vocabulary, the presentation height of the input element is left to the implementer.

Example: Demonstrates format="plain" and class="qti-height-lines-3"

<qti-extended-text-interaction
  class="qti-height-lines-3" format="plain" response-identifier="RESPONSE" />
Figure 36 Expected Rendering: Display a plain input area with a height of 3 lines.
A text entry box is shown. The box is the full width of the containing box. There are 3 lines of text displayed in the box, where the bottom of the box is just below the third line of text.

Example: Demonstrates format="xhtml" and class="qti-height-lines-3"

<qti-extended-text-interaction
 class="qti-height-lines-3" format="xhtml" expected-length="200" response-identifier="RESPONSE" />
Figure 37 Expected Rendering: Display a Rich Text Editor with input area height of 3 lines.
A text entry box is shown with 3 lines of text. The box is the full width of the containing box. On the top of the text entry box is a bar containing editing buttons (bold, italic, underline, bulleted list, numeric list, undo, redo).

Example: Demonstrates format="plain" and class="qti-height-lines-6"

<qti-extended-text-interaction
 class="qti-height-lines-6" format="plain" response-identifier="RESPONSE" />
Figure 38 Expected Rendering: Display a plain input area with height of 6 lines.
A text entry box is shown. The box is the full width of the containing box. There are 4 lines of text displayed in the box, where the bottom of the box is just below the sixth line of text.

Example: Demonstrates format="xhtml" and class="qti-height-lines-6"

<qti-extended-text-interaction
 class="qti-height-lines-6" format="xhtml" expected-length="200" response-identifier="RESPONSE" />
Figure 39 Expected Rendering: Display a Rich Text Editor with input area height of 6 lines.
A text entry box is shown with 6 lines of text. The box is the full width of the containing box. On the top of the text entry box is a bar containing editing buttons (bold, italic, underline, bulleted list, numeric list, undo, redo).

Example: Demonstrates format="plain" and class="qti-height-lines-15"

<qti-extended-text-interaction
 class="qti-height-lines-15" format="plain" response-identifier="RESPONSE" />
Figure 40 Expected Rendering: Display a plain input area with height of 15 lines.
A text entry box is shown. The box is the full width of the containing box. There are 15 lines of text displayed in the box, where the bottom of the box is just below the fifteenth line of text.

Example: Demonstrates format="xhtml" and class="qti-height-lines-15"

<qti-extended-text-interaction
 class="qti-height-lines-15" format="xhtml" expected-length="200" response-identifier="RESPONSE" />
Figure 41 Expected Rendering: Display a Rich Text Editor with input area height of 15 lines.
A text entry box is shown with 15 lines of text. The box is the full width of the containing box. On the top of the text entry box is a bar containing editing buttons (bold, italic, underline, bulleted list, numeric list, undo, redo).
1.2.3.2 Character Counter Behavior

By default, a character counter is not displayed. For specifying character (not word) counter display and behavior, use the class attribute as follows:

Values
qti-counter-down Display a character counter, starting at the value of the expected-length attribute and counting down to 0.
qti-counter-up Display a character counter, starting at 0 and increasing to the value of the expected-length attribute.

In the case where the format of the interaction is "xhtml", the delivery system is expected to count only the text of the markup elements.  Example: <span>Hello</span> has 5 characters.

Example: Demonstrates qti-counter-down

<qti-extended-text-interaction class="qti-height-lines-3 qti-counter-down"
 format="plain" expected-length="200" response-identifier="RESPONSE" />
Figure 42 Expected Rendering: Display a character counter counting down from 200 characters.
A text entry box is shown with a sentence in it that is 45 characters long. Below the entry box is a small box displaying the text '45 / 200'.

Example: Demonstrates qti-counter-up

<qti-extended-text-interaction class="qti-height-lines-3 qti-counter-up"
 format="plain" expected-length="200" response-identifier="RESPONSE" />
Figure 43 Expected Rendering: Display a character counter counting up from 0 to 200 characters.
A text entry box is shown with a sentence in it that is 45 characters long. Below the simple text editor bar is a small box displaying the text '45 / 200'.

Example: Demonstrates qti-counter-up with format="xhtml"

<qti-extended-text-interaction class="qti-height-lines-3 qti-counter-up" 
 format="xhtml" expected-length="200" response-identifier="RESPONSE" />
Figure 44 Expected Rendering: Display a character counter counting up from 0 to 200 characters.
A text entry box is shown with a sentence in it that is 45 characters long. One of the words is bolded, one is italic, and one is underlined. Within the rich text editor bar is a small box displaying the text '45 / 200'.
1.2.3.3 Custom Pattern Mask Message

To specify a custom pattern mask message, use a data- attribute as follows:

Values
data-patternmask-message Custom message to be rendered by the delivery platform upon violation of the pattern mask constraints.

Example: Demonstrates data-patternmask-message

<p>
   qti-expected-length=6<br / >
   patternmask=([0-9.]{0,6})<br / >
   data-patternmask-message="Maximum of 6 digits or a decimal point permitted"
  </p>
  <div role="math">
<qti-extended-text-interaction class="qti-height-lines-3" pattern-mask="([0-9.]{0,6})"
  data-patternmask-message="Maximum of 6 digits or a decimal point permitted"
  format="plain" expected-length="6" response-identifier="RESPONSE">
   <qti-prompt><p>
   <math xmlns="http://www.w3.org/1998/Math/MathML">
     <mrow> <mn>14</mn> <mo class="sign">×</mo>
     <mrow> <mi>tan</mi> <mo>⁡</mo>
     <mfenced> <mrow> <mn>67</mn> </mrow>
     </mfenced> </mrow>
     </mrow>
   </math>
   </p></qti-prompt>
  </qti-extended-text-interaction>
  </div>
Figure 45 Expected Rendering: Display the custom message when invalid input entered.
A math problem is shown with a text entry box. The box has 6 numbers in it with a pop up box pointing to the text entry box that says, 'Maximum of 6 digits or a decimal point permitted.'
1.2.3.4 Vertical Text for Extended Text
Values
qti-writing-orientation-vertical-rl Display the interaction in a vertical orientation with writing mode vertical-rl (right-to-left).

The following example shows a vertically-oriented qti-extended-text-interaction, writing mode vertical right-to-left (qti-writing-orientation-vertical-rl), with format="plain":

a vertically-oriented extended text interaction right to left vertical with a plain format

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-3 and format="plain":

a vertically-oriented inline choice with qti-input-width-3

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-6 and format="plain":

a vertically-oriented inline choice qti-input-width-6

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-15 and format="plain":

a vertically-oriented inline choice with qti-input-width-15

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-3, qti-counter-up|down, format="plain" with an expected-length="200":

a vertically-oriented inline choice with various input widths using qti-input-width-3, using character counters with an expected length of 200

The following examples use a format="xhtml" with various line heights (meaning line widths in the vertical context).

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-3 and format="xhtml":

a vertically-oriented inline choice with 3 lines in xhtml format

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-6 and format="xhtml":

a vertically-oriented inline choice with 6 lines in xhtml format

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-15 and format="xhtml":

a vertically-oriented inline choice with 15 lines in xhtml format

An example of an extended text interaction in a vertical orientation, qti-writing-orientation-vertical-rl
→ qti-height-lines-6, format="xhtml" with an expected-length="200", using qti-counter-up|down:

a vertically-oriented inline choice with 3 lines in xhtml format using character counters with an expected length of 200
Values
qti-writing-orientation-vertical-lr Display the interaction in a vertical orientation with writing mode vertical-lr (left-to-right).

1.2.4 Gap Match Interaction

The shared vocabulary for the Gap Match Interaction is intended to provide more precision when describing:

  1. Positioning of the Gap Choices container with respect to the passage of text containing the Gaps.
  2. Gap Choices container width.
  3. Gap element widths.
  4. Custom max|min-associations message overrides.
1.2.4.1 Gap Choices Container | Gap Positioning

For explicit gap choices container positioning with respect to the passage text containing the gaps, use the class attribute as follows:

Values
qti-choices-top The gap choices container is displayed above the passage text.
qti-choices-bottom The gap choices container is displayed below the passage text.
qti-choices-left The gap choices container is displayed to the left of the passage text.
qti-choices-right The gap choices container is displayed to the right of the passage text.

The following examples demonstrate shared vocabulary describing the visual orientation of the gap match choices container with respect to the passage text containing the gaps.

Example: Demonstrates class="qti-choices-top"

<qti-gap-match-interaction class="qti-choices-top" response-identifier="RESPONSE" shuffle="false">
    <qti-gap-text identifier="W" match-max="1">winter</qti-gap-text>
    <qti-gap-text identifier="Sp" match-max="1">spring</qti-gap-text>
    <qti-gap-text identifier="Su" match-max="1">summer</qti-gap-text>
    <qti-gap-text identifier="A" match-max="1">autumn</qti-gap-text>
    <blockquote>
      <p>
        Now is the <qti-gap identifier="G1"/> of our discontent<br/>
        Made glorious <qti-gap identifier="G2"/> by this sun of York;<br/>
        And all the clouds that lour'd upon our house<br/>
        In the deep bosom of the ocean buried.
      </p>
    </blockquote>
  </qti-gap-match-interaction>
Figure 46 Expected Rendering: The gap choices are displayed above the passage text.
There are 4 words within scored rectangles set side-by-side with each other. Below these boxed words are 4 lines of text including 2 inline rectangles (drop targets).

Example: Demonstrates class="qti-choices-bottom"

<qti-gap-match-interaction class="qti-choices-bottom" response-identifier="RESPONSE" shuffle="false">
    <qti-gap-text identifier="W" match-max="1">winter</qti-gap-text>
    <qti-gap-text identifier="Sp" match-max="1">spring</qti-gap-text>
    <qti-gap-text identifier="Su" match-max="1">summer</qti-gap-text>
    <qti-gap-text identifier="A" match-max="1">autumn</qti-gap-text>
    <blockquote>
      <p>
        Now is the <qti-gap identifier="G1"/> of our discontent<br/>
        Made glorious <qti-gap identifier="G2"/> by this sun of York;<br/>
        And all the clouds that lour'd upon our house<br/>
        In the deep bosom of the ocean buried.
      </p>
    </blockquote>
  </qti-gap-match-interaction>
Figure 47 Expected Rendering: The gap choices are displayed below the passage text.
There are 4 lines of text including 2 inline rectangles (drop targets). Below this text are 4 words within scored rectangles set side-by-side with each other.

Example: Demonstrates class="qti-choices-left"

<qti-gap-match-interaction class="qti-choices-left" response-identifier="RESPONSE" shuffle="false">
    <qti-gap-text identifier="W" match-max="1">winter</qti-gap-text>
    <qti-gap-text identifier="Sp" match-max="1">spring</qti-gap-text>
    <qti-gap-text identifier="Su" match-max="1">summer</qti-gap-text>
    <qti-gap-text identifier="A" match-max="1">autumn</qti-gap-text>
    <blockquote>
      <p>
        Now is the <qti-gap identifier="G1"/> of our discontent<br/>
        Made glorious <qti-gap identifier="G2"/> by this sun of York;<br/>
        And all the clouds that lour'd upon our house<br/>
        In the deep bosom of the ocean buried.
      </p>
    </blockquote>
  </qti-gap-match-interaction>
Figure 48 Expected Rendering: The gap choices are displayed to the left of the passage text.
There are 4 words within scored rectangles set side-by-side with each other. Next to, on the right side of these boxed words is a block of 4 lines of text including 2 inline rectangles (drop targets).

Example: Demonstrates class="qti-choices-right"

<qti-gap-match-interaction class="qti-choices-right" response-identifier="RESPONSE" shuffle="false">
    <qti-gap-text identifier="W" match-max="1">winter</qti-gap-text>
    <qti-gap-text identifier="Sp" match-max="1">spring</qti-gap-text>
    <qti-gap-text identifier="Su" match-max="1">summer</qti-gap-text>
    <qti-gap-text identifier="A" match-max="1">autumn</qti-gap-text>
    <blockquote>
      <p>
        Now is the <qti-gap identifier="G1"/> of our discontent<br/>
        Made glorious <qti-gap identifier="G2"/> by this sun of York;<br/>
        And all the clouds that lour'd upon our house<br/>
        In the deep bosom of the ocean buried.
      </p>
    </blockquote>
  </qti-gap-match-interaction>
Figure 49 Expected Rendering: The gap choices are displayed to the right of the passage text.
There is a block of 4 lines of text including 2 inline rectangles (drop targets). Next to, on the right side of the block of text are 4 words within scored rectangles set side-by-side with each other.
1.2.4.2 Gap Choices Container Width

A common implementation of the gap match interaction is to place the gap choices in a so-called "gap choices container".  If the gap choices are implemented with responsive design, then one can achieve a visual equivalent of gap choices stacking by manipulating the gap choices container width.

For specifying explicit gap choices container width, use a data- attribute as follows:

Values
data-choices-container-width The gap choices container width in pixels.  Example: data-choices-container-width="100"

The assumption is that the container sizes would scale when content is magnified. There is likely to be a significant decrease in the ability for low-vision users to respond to the item who may magnify the content large enough to have portions of the container displayed off-screen.

Example: Demonstrates qti-choices-top and data-choices-container-width="200"

<qti-gap-match-interaction class="qti-choices-top "data-choices-container-width="200"
  response-identifier="RESPONSE">
    <qti-gap-text identifier="W" match-max="1">winter</qti-gap-text>
    <qti-gap-text identifier="Sp" match-max="1">spring</qti-gap-text>
    <qti-gap-text identifier="Su" match-max="1">summer</qti-gap-text>
    <qti-gap-text identifier="A" match-max="1">autumn</qti-gap-text>
    <blockquote>
      <p>
        Now is the <qti-gap identifier="G1"/> of our discontent<br/>
        Made glorious <qti-gap identifier="G2"/> by this sun of York;<br/>
        And all the clouds that lour'd upon our house<br/>
        In the deep bosom of the ocean buried.
      </p>
    </blockquote>
  </qti-gap-match-interaction>
Figure 50 Expected Rendering: The gap choices container is set to width of 200px, resulting in a stacking effect.
There are 4 words within scored boxes set 2 boxes on top of 2 other boxes. Below these boxed words are 4 lines of text including 2 inline rectangles (drop targets).

Example: Demonstrates qti-choices-left and data-choices-container-width="100"

<qti-gap-match-interaction class="qti-choices-left "data-choices-container-width="200"
  response-identifier="RESPONSE">
    <qti-gap-text identifier="W" match-max="1">winter</qti-gap-text>
    <qti-gap-text identifier="Sp" match-max="1">spring</qti-gap-text>
    <qti-gap-text identifier="Su" match-max="1">summer</qti-gap-text>
    <qti-gap-text identifier="A" match-max="1">autumn</qti-gap-text>
    <blockquote>
      <p>
        Now is the <qti-gap identifier="G1"/> of our discontent<br/>
        Made glorious <qti-gap identifier="G2"/> by this sun of York;<br/>
        And all the clouds that lour'd upon our house<br/>
        In the deep bosom of the ocean buried.
      </p>
    </blockquote>
  </qti-gap-match-interaction>
Figure 51 Expected Rendering: The gap choices container is set to width of 100px, resulting in a stacking effect.
There are 4 words within boxes set one on top of another (a single column, one box per row). Next to, on the right side of these boxed words is a block of 4 lines of text including 2 inline rectangles (drop targets).
1.2.4.3 Gap Element Input Width

For gap element width definition, use the class attribute as follows:

Values
qti-input-width-1 Gap element width at least 1 character.
qti-input-width-2 Gap element width at least 2 characters.
qti-input-width-3 Gap element width at least 3 characters.
qti-input-width-4 Gap element width at least 4 characters.
qti-input-width-6 Gap element width at least 6 characters.
qti-input-width-10 Gap element width at least 10 characters.
qti-input-width-15 Gap element width at least 15 characters.
qti-input-width-20 Gap element width at least 20 characters.
qti-input-width-25 Input element width at least 25 characters.
qti-input-width-30 Input element width at least 30 characters.
qti-input-width-35 Input element width at least 35 characters.
qti-input-width-40 Input element width at least 40 characters.
qti-input-width-45 Input element width at least 45 characters.
qti-input-width-50 Input element width at least 50 characters.
qti-input-width-72

Gap element width at least 72 characters.

(Intended to be interpreted as the full width of a tablet.)

The gap element widths are intended to provide a general visual impression. By default, in the absence of any shared vocabulary, the presentation width of a gap element is left to the implementer.

Note that the assumption is that input sizes scale with increased magnification of the content, though the input areas should never wrap to another line of text. Limits on scaling could be problematic for low-vision candidates, particularly at higher levels of magnification.

Example: Demonstrates all gap element "qti-input-widths-1 | 2 | 3 | 4 | 6 | 10 | 15 | 20 | 72" classes (a subset of the classes detailed above).

<qti-gap-match-interaction class="qti-choices-top" response-identifier="RESPONSE4">
    <qti-gap-text identifier="gt1" match-max="1">M</qti-gap-text>
    <qti-gap-text identifier="gt2" match-max="1">MM</qti-gap-text>
    <qti-gap-text identifier="gt3" match-max="1">MMM</qti-gap-text>
    <qti-gap-text identifier="gt4" match-max="1">MMMM</qti-gap-text>
    <qti-gap-text identifier="gt6" match-max="1">MMMMMM</qti-gap-text>
    <p>
      qti-input-width-1 :  <qti-gap class="qti-input-width-1"  identifier="G1"/><br />
      qti-input-width-2 :  <qti-gap class="qti-input-width-2"  identifier="G2"/><br />
      qti-input-width-3 :  <qti-gap class="qti-input-width-3"  identifier="G3"/><br />
      qti-input-width-4 :  <qti-gap class="qti-input-width-4"  identifier="G4"/><br />
      qti-input-width-6 :  <qti-gap class="qti-input-width-6"  identifier="G6"/><br />
      qti-input-width-10 : <qti-gap class="qti-input-width-10" identifier="G10"/><br />
      qti-input-width-15 : <qti-gap class="qti-input-width-15" identifier="G15"/><br />
      qti-input-width-20 : <qti-gap class="qti-input-width-20" identifier="G20"/><br />
      qti-input-width-72 : <qti-gap class="qti-input-width-72" identifier="G72"/>
    </p>
  </qti-gap-match-interaction>
Figure 52 Expected Rendering: Visual gap widths at least a minimum number of characters wide.
There are 5 words within scored rectangles set side-by-side with each other, each word has a different number of characters where the boxes get larger to fit the amount of characters. Below these boxed words are 9 lines of text each with different sized rectangles (drop targets). There is nothing in any of the drop targets.

 

Figure 53 With some of the gaps filled:
There are 9 lines of text each with different sized rectangles (drop targets). There are 5 boxes with text (of different lengths) dropped in different drop targets.
1.2.4.4 Gap Match Custom max|min-associations Messages

To specify custom max-associations or min-associations messages, use a data- attribute as follows:

Values
data-max-selections-message Custom message to be rendered by the delivery platform upon violation of the max-associations constraint.
data-min-selections-message Custom message to be rendered by the delivery platform upon violation of the min-associations constraint.

In the absence of such custom message overrides, delivery systems should render platform defaults.

1.2.5 Hotspot Interaction

The shared vocabulary for the Hotspot Interaction is intended to provide more precision when describing:

  1. Hotspot Selections theming.
  2. Custom max|min-choices message overrides.
1.2.5.1 Hotspot Selections Theming

For explicit hotspot selection theming, use the class attribute as follows:

Values
qti-selections-light Delivery platform must implement hotspot selections in a color that the platform believes to be of suitable color contrast and opacity against a "dark" background image.
qti-selections-dark Delivery platform must implement hotspot selections in a color that the platform believes to be of suitable color contrast and opacity against a "light" background image.
qti-unselected-hidden Hotspot selections are visually hidden until focused or selected.

When using qti-selections-dark and qti-selections-light classes, the intent is to increase the contrast between the selections and the background, to ensure candidates can clearly identify the selections.  In the absence of such hotspot selection theming overrides, delivery systems should render platform defaults.

For qti-unselected-hidden, note that there is an obvious visual bias for these types of questions. In addition, the selection should only be visually-hidden. Selections should always be programmatically available (usable by keyboards and assistive technology) to candidates.

Example: Demonstrates Hotspot selections with class="qti-selections-light" and class="qti-selections-dark"

<qti-hotspot-interaction class="qti-selections-light" max-choices="0" response-identifier="RESPONSE1">
    <img src="ukair.png" height="280" width="206" alt="Map of the United Kingdom"/>
    <qti-hotspot-choice coords="77,115,10" identifier="A" shape="circle"/>
    <qti-hotspot-choice coords="118,184,10" identifier="B" shape="circle"/>
    <qti-hotspot-choice coords="150,235,10" identifier="C" shape="circle"/>
    <qti-hotspot-choice coords="96,114,10" identifier="D" shape="circle"/>
  </qti-hotspot-interaction>
  <qti-hotspot-interaction class="qti-selections-dark" ;max-choices="0" response-identifier="RESPONSE2">
    <img src="ukair.png" height="280" width="206" alt="Map of the United Kingdom"/>
    <qti-hotspot-choice coords="77,115,10" identifier="A" shape="circle"/>
    <qti-hotspot-choice coords="118,184,10" identifier="B" shape="circle"/>
    <qti-hotspot-choice coords="150,235,10" identifier="C" shape="circle"/>
    <qti-hotspot-choice coords="96,114,10" identifier="D" shape="circle"/>
  </qti-hotspot-interaction>

Expected Rendering: Hotspot selections are rendered with colors and opacities of the delivery platform's choosing. In the two hotspot interactions below, two of the four hotspots are selected, and two are unselected. All hotspots are visible, even in their unselected state, though this is left to the delivery platform.

Figure 54 Hotspot image showing orange lined circles in their selected and unselected states.
There are 2 line drawings of the United Kingdom. Each drawing has 4 circles. 2 of each of the 4 circles are shown with thin lines, and 2 with thick lines. The first drawing has orange lined circles.
Figure 55 Hotspot image showing blue lined circles in their selected and unselected states.
The second drawing has blue lined circles.

Example: Demonstrates Hotspot selections with class= " qti-selections-light "  and class= " qti-selections-dark " , and " qti-unselected-hidden "  in both.

<qti-hotspot-interaction class="qti-selections-light qti-unselected-hidden"
 max-choices="0" response-identifier="RESPONSE1">
    <img src="ukair.png" height="280" width="206" alt="Map of the United Kingdom"/>
    <qti-hotspot-choice coords="77,115,10" identifier="A" shape="circle"/>
    <qti-hotspot-choice coords="118,184,10" identifier="B" shape="circle"/>
    <qti-hotspot-choice coords="150,235,10" identifier="C" shape="circle"/>
    <qti-hotspot-choice coords="96,114,10" identifier="D" shape="circle"/>
  </qti-hotspot-interaction>
<qti-hotspot-interaction class="qti-selections-dark qti-unselected-hidden"
   max-choices="0" response-identifier="RESPONSE2">
    <img src="ukair.png" height="280" width="206" alt="Map of the United Kingdom"/>
    <qti-hotspot-choice coords="77,115,10" identifier="A" shape="circle"/>
    <qti-hotspot-choice coords="118,184,10" identifier="B" shape="circle"/>
    <qti-hotspot-choice coords="150,235,10" identifier="C" shape="circle"/>
    <qti-hotspot-choice coords="96,114,10" identifier="D" shape="circle"/>
  </qti-hotspot-interaction>

Expected Rendering: Hotspots are rendered invisible in their unselected and unfocused state, with visible colors and opacities of the platform's choosing in their selected state. In the two hotspot interactions below, two of the four hotspots are selected (visible), and two are unselected and unfocused (invisible).

Figure 56 Hotspot image showing orange lined circles in their selected states.
There are 2 line drawings of the United Kingdom. Each drawing has 2 colored circles. The first drawing has orange lined circles.
Figure 57 Hotspot image showing blue lined circles in their selected states.
The second drawing has blue lined circles.

 
1.2.5.2 Hotspot  Interaction Custom max|min-choices Messages

To specify custom max-choices or min-choices messages, use a data- attribute as follows:

Values
data-max-selections-message Custom message to be rendered by the delivery platform upon violation of the max-choices constraint.
data-min-selections-message Custom message to be rendered by the delivery platform upon violation of the min-choices constraint.

In the absence of such custom message overrides, delivery systems should render platform defaults.

1.2.6 Hot Text Interaction

The shared vocabulary for the Hot Text Interaction is intended to provide more precision when describing:

  1. Hiding the input control of the Hot Text choices.
  2. Custom max|min-choices message overrides.
1.2.6.1 Hot Text Choices with No Input Controls

To specify Hot Text choice rendering with no input control (radio/checkbox), use the class attribute as follows:

Values
qti-input-control-hidden Hide the input controls of the Hot Text choices.

When input controls are hidden, delivery systems should ensure that choice presentation follows WCAG 2.0 AA (or better) guidelines for text and images.  By default, in the absence of any shared vocabulary, the presentation of input controls on the Hot Text elements is left to the delivery system.

Example: Demonstrates class="qti-input-control-hidden"

<qti-hottext-interaction class="qti-input-control-hidden" max-choices="1" response-identifier="RESPONSE">
  <p>Sponsors of the Olympic Games <qti-hottext identifier="A">who bought</qti-hottext>
    advertising time on United States television <qti-hottext identifier="B">includes</qti-hottext>
   <qti-hottext identifier="C">at least</qti-hottext> a dozen international firms 
   <qti-hottext identifier="D">whose</qti-hottext> names are familiar to American consumers.
   <qti-hottext identifier="E">No error.</qti-hottext>
  </p>
</qti-hottext-interaction>
Figure 58 Expected Rendering: Hot Text Choices without input controls (all choices unselected).
A sentence of text is shown. Some words are within boxes and the letters are colored blue instead of the unboxed words, which are black.
Figure 59 Hot Text Choices without input controls (second choice selected).
A sentence of text is shown. Some words are within boxes and the letters are colored blue instead of the unboxed words, which are black. The second word box is shown with a blue background and white letters.
1.2.6.2 Hot Text Interaction Custom max|min-choices Messages

To specify custom max-choices or min-choices messages, use a data- attribute as follows:

Values
data-max-selections-message Custom message to be rendered by the delivery platform upon violation of the max-choices constraint.
data-min-selections-message Custom message to be rendered by the delivery platform upon violation of the min-choices constraint.

In the absence of such custom message overrides, delivery systems should render platform defaults.

1.2.6.3 Hot text with no visual indication of the unselected choices

When you wish to have no visual indication of the hot text choices (no buttons, highlighting, or borders), use the qti-unselected-hidden class in the qti-hottext-interaction element.

In the example below, three states are shown. The outlined sentence with darker highlighting indicates a sentence that has been selected as a response. The outlined sentence with light highlighting indicates a sentence in the hover state (or keyboard focus). All other sentences within the paragraph represent possible sentences that could be selected but have no visual indication until they receive focus or are selected as a response.

example screen shot of a block of text with selected and unselected content.

1.2.7 Inline Choice Interaction

The bulk of the shared vocabulary for this interaction adds further definition to the presentation width of the selection element by utilizing the class attribute.

1.2.7.1 Input Width

For selection element width definition, use the class attribute as follows:

Values
qti-input-width-1 Selection element width at least 1 character.
qti-input-width-2 Selection element width at least 2 characters.
qti-input-width-3 Selection element width at least 3 characters.
qti-input-width-4 Selection element width at least 4 characters.
qti-input-width-6 Selection element width at least 6 characters.
qti-input-width-10 Selection element width at least 10 characters.
qti-input-width-15 Selection element width at least 15 characters.
qti-input-width-20 Selection element width at least 20 characters.
qti-input-width-25 Input element width at least 25 characters.
qti-input-width-30 Input element width at least 30 characters.
qti-input-width-35 Input element width at least 40 characters.
qti-input-width-45 Input element width at least 45 characters.
qti-input-width-50 Input element width at least 50 characters.
qti-input-width-72 Selection element width at least 72 characters.(Intended to be interpreted as the full width of a tablet.)

The selection element widths are intended to provide a general visual impression, and are not expected to exactly match the width of the designated characters. By default, in the absence of any shared vocabulary, the presentation width of the selection element is left to the implementer.

Example: Demonstrates various "qti-input-width-1 | 2 | 3 | 4 | 6 | 10 | 15 | 20 | 72" classes (a subset of the classes detailed above).

<p>qti-input-width-1 : <qti-inline-choice-interaction class="qti-input-width-1"
  response-identifier="RESPONSE1"/></p>
  <p>qti-input-width-2 : <qti-inline-choice-interaction class="qti-input-width-2"
   response-identifier="RESPONSE2"/></p>
  <p>qti-input-width-3 : <qti-inline-choice-interaction class="qti-input-width-3"
   response-identifier="RESPONSE3"/></p>
  <p>qti-input-width-4 : <qti-inline-choice-interaction class="qti-input-width-4"
   response-identifier="RESPONSE4"/></p>
  <p>qti-input-width-6 : <qti-inline-choice-interaction class="qti-input-width-6"
   response-identifier="RESPONSE5"/></p>
  <p>qti-input-width-10: <qti-inline-choice-interaction class="qti-input-width-10"
   response-identifier="RESPONSE6"/></p>
  <p>qti-input-width-15: <qti-inline-choice-interaction class="qti-input-width-15"
   response-identifier="RESPONSE7"/></p>
  <p>qti-input-width-20: <qti-inline-choice-interaction class="qti-input-width-20"
   response-identifier="RESPONSE8"/></p>
  <p>qti-input-width-72: <qti-inline-choice-interaction class="qti-input-width-72"
   response-identifier="RESPONSE9"/></p>
Figure 60 Expected Rendering: Visual selection widths at least a minimum number of characters wide.
9 lines of text are shown, each ending with a different sized dropdown box. The width of the dropdown matches the number indicated in the QTI shared vocabulary class (e.g. qti-input-width-10 has a dropdown box 10 characters wide.
1.2.7.2 Custom Prompt Messages

Delivery systems may display a word or a phrase - a so-called, "prompt" - inside the boundaries of the selection element when the element is in an unselected state.  To specify custom text, use a data- attribute as follows:

Values
data-prompt Custom text to be rendered by the delivery platform when the selection element is in an unselected state.

In the absence of custom prompt overrides, delivery systems should render platform defaults.

Example: Demonstrates data-prompt

<qti-inline-choice-interaction class="qti-input-width-10" data-prompt="Select an Answer"
response-identifier="RESPONSE">
  <qti-inline-choice identifier="G">Gloucester</qti-inline-choice>
  <qti-inline-choice identifier="L">Lancaster</qti-inline-choice>
  <qti-inline-choice identifier="Y">York</qti-inline-choice>
</qti-inline-choice-interaction>
Figure 61 Expected Rendering: The custom prompt is displayed as the first choice.
A math equation is shown. A dropbox is displayed after the equals sign. The dropbox is open, and the default text displayed on the dropbox controls and the top of the choices is 'Select an Answer'.
1.2.7.3 Vertical Text for Inline Choice
Values
qti-writing-orientation-vertical-rl Display the interaction in a vertical orientation, with choices flowing from right to left and choices writing mode vertical-rl.

The following example shows an inline interaction vertically-oriented qti-inline-choice-interaction rendered inline with surrounding vertical text, with choices flowing from right to left:

a vertically-oriented inline choice interaction with choices flowing right to left

The example below shows an inline interaction vertically-oriented with various input widths for the choices:

a vertically-oriented inline choice with various input widths using qti-input-width- and a number

1.2.8 Match Interaction

The shared vocabulary for the Match Interaction is intended to provide more precision when describing:

  1. Non-tabular Match Interaction positioning of the first Simple Match Set choices with respect to the second Simple Match Set choices.
  2. Tabular Match Interaction styling.
  3. Custom max|min-associations message overrides.
1.2.8.1 Non-Tabular Match Interaction Choice | Target Positioning

For explicit choice | target positioning, use the class attribute as follows:

Values
qti-choices-top The first Simple Match Set choices are displayed above the second Simple Match Set choices.
qti-choices-bottom The first Simple Match Set choices are displayed below the second Simple Match Set choices.
qti-choices-left The first Simple Match Set choices are displayed to the left of the second Simple Match Set choices.
qti-choices-right The first Simple Match Set choices are displayed to the right of the second Simple Match Set choices.

Note about accessibility when using targeting position classes: there may be issues related to the order that choices and targets are presented to assistive technology candidates. If the candidate is known to be using assistive technology (screen readers), by default the choices should be presented first, followed by the targets second.

The following examples demonstrate shared vocabulary describing the visual orientation of the list of match choices; i.e., the  choices of the first Simple Match Set, with respect to the list of match targets; i.e., the choices of the second Simple Match Set.

Example: Demonstrates class="qti-choices-top"

<qti-match-interaction class=" qti-choices-top" max-associations="4" response-identifier="RESPONSE">
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
    </qti-simple-match-set>
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="T" match-max="4">The Tempest</qti-simple-associable-choice>
    </qti-simple-match-set>
  </qti-match-interaction>
Figure 62 Expected Rendering: The first Simple Match Set choices are displayed above the second Simple Match Set choices.
4 boxes with words in them are displayed side-by-side in a single row, where the line for the box and the letters of the words are blue. Below the word boxes are 3 large rectangles also displayed side-by-side in a single row, where the lines around the boxes and the letters of the words are dark grey.

Example: Demonstrates class="qti-choices-bottom"

<qti-match-interaction class="
  qti-choices-bottom" max-associations="4" response-identifier="RESPONSE">
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
    </qti-simple-match-set>
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="T" match-max="4">The Tempest</qti-simple-associable-choice>
    </qti-simple-match-set>
  </qti-match-interaction>
Figure 63 Expected Rendering: The first Simple Match Set choices are displayed below the second Simple Match Set choices.
There are 3 large rectangles with words in them displayed side-by-side in a single row, where the lines around the boxes and the letters of the words are dark grey. Below the large boxes are 4 smaller boxes with words in them also displayed side-by-side in a single row, where the line for the box and the letters of the words are blue.

Example: Demonstrates class="qti-choices-left"

<qti-match-interaction class="qti-choices-left"
  max-associations="4" response-identifier="RESPONSE">
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
    </qti-simple-match-set>
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="T" match-max="4">The Tempest</qti-simple-associable-choice>
    </qti-simple-match-set>
  </qti-match-interaction>
Figure 64 Expected Rendering: The first Simple Match Set choices are displayed to the left of  the second Simple Match Set choices.
4 boxes with words in them are displayed side-by-side in a single row, where the line for the box and the letters of the words are blue. To the right of the blue boxes are 3 large rectangles also displayed side-by-side in a single row, where the lines around the boxes and the letters of the words are dark grey.

Example: Demonstrates class="qti-choices-right"

<qti-match-interaction class="qti-choices-right" max-associations="4" response-identifier="RESPONSE">
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
    </qti-simple-match-set>
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="T" match-max="4">The Tempest</qti-simple-associable-choice>
    </qti-simple-match-set>
  </qti-match-interaction>
Figure 65 Expected Rendering: The first Simple Match Set choices are displayed to the right of the second Simple Match Set choices.
There are 3 large rectangles with words in them displayed side-by-side in a single row, where the lines around the boxes and the letters of the words are dark grey. To the right of the large boxes are 4 smaller boxes with words in them also displayed side-by-side in a single row, where the line for the box and the letters of the words are blue.
1.2.8.2 Tabular Match Interactions

Delivery systems may implement Match Interaction's in a visual Tabular fashion. When they do so, the shared vocabulary is intended to provide visual styles and content to improve interoperability and visual consistency.

For explicit Tabular embodiments of Match Interactions, use the class attribute:

Values
qti-match-tabular Render a visual table with the choices of the first Simple Match Set as the table row headers, and the choices of the second Simple Match Set as the table column headers.
qti-header-hidden For certain presentations, it can be advantageous to hide the column headers.  This class enables this presentation.  Do not display the top row of the table where the column headers are displayed.

Class qti-header-hidden, and data- attribute data-first-column-header (see below) are only relevant when qti-match-tabular is specified.

To specify the text of the top-left header cell of the table, use a data- attribute as follows:

Values
data-first-column-header Custom text to be rendered in the top-left header cell of the table (headings must be visible).

A note about accessibility when using qti-match-tabular: there are known issues for assistive technology users (screen readers in particular) when putting content into tables. There are sometimes differences between screen readers in the order that content is read out loud. Because the cells contain interactive controls, assistive technology needs to be able to provide navigation within the table (between the cells) as well as coordinating the match interaction. If any possible candidates may be using screen readers to respond to match interactions, using HTML tables may not be the best choice for presentation.

In addition, there is a likely negative impact to assistive technology candidates when using the qti-header-hidden, as the headers are used to orient assistive technology users.

The following examples show expected rendering when class is qti-match-tabular.

Example: Demonstrates class="qti-match-tabular"

<qti-match-interaction class="qti-match-tabular" max-associations="4" response-identifier="RESPONSE">
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
    </qti-simple-match-set>
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="T" match-max="4">The Tempest</qti-simple-associable-choice>
    </qti-simple-match-set>
  </qti-match-interaction>
Figure 66 Expected Rendering: Tabular display, with the first Simple Match Set choices are displayed in the row headings, and the second Simple Match Set choices are the column headings.
A table 4 columns wide and 5 rows high is shown. The top, left cell is empty. The last 3 column headings contain play titles. The bottom 4 row headings contain play characters. The cells within the table contain rounded rectangle buttons.

Example: Demonstrates class="qti-match-tabular qti-header-hidden"

<qti-match-interaction class="qti-match-tabular qti-header-hidden"
   max-associations="4" response-identifier="RESPONSE">
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
    </qti-simple-match-set>
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="T" match-max="4">The Tempest</qti-simple-associable-choice>
    </qti-simple-match-set>
  </qti-match-interaction>
Figure 67 Expected Rendering: Tabular display, with no table header row displayed.
A table 4 columns wide and 4 rows high is shown. There are no column headings displayed. The row headings contain play characters. The cells within the table contain rounded rectangle buttons.

Example: Demonstrates class="qti-match-tabular" data-first-column-header="Characters"

<qti-match-interaction class="qti-match-tabular" data-first-column-header="Characters"
   max-associations="4" response-identifier="RESPONSE">
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="C" match-max="1">Capulet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="D" match-max="1">Demetrius</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="L" match-max="1">Lysander</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="P" match-max="1">Prospero</qti-simple-associable-choice>
    </qti-simple-match-set>
    <qti-simple-match-set>
      <qti-simple-associable-choice identifier="M" match-max="4">A Midsummer-Night's Dream</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="R" match-max="4">Romeo and Juliet</qti-simple-associable-choice>
      <qti-simple-associable-choice identifier="T" match-max="4">The Tempest</qti-simple-associable-choice>
    </qti-simple-match-set>
  </qti-match-interaction>
Figure 68 Expected Rendering: Tabular display, with "Characters" in the top-left header cell.
A table 4 columns wide and 5 rows high is shown. The top, left cell has the word “Characters”. The last 3 column headings contain play titles. The bottom 4 row headings contain play characters. The cells within the table contain rounded rectangle buttons.
1.2.8.3 Match Custom max|min-associations Messages

To specify custom max-associations or min-associations messages, use a data- attribute as follows:

Values
data-max-selections-message Custom message to be rendered by the delivery platform upon violation of the max-associations constraint.
data-min-selections-message Custom message to be rendered by the delivery platform upon violation of the min-associations constraint.

In the absence of such custom message overrides, delivery systems should render platform defaults.

1.2.9 Order Interaction

1.2.9.1 Order Target Labels

In certain rendering embodiments where the ordering choices are separated from an ordering target area, it may be desirable to specify labels for the order target elements. For explicit labeling of order target elements, use the same classes as for choice interaction; i.e., use the class attribute as follows:

Values
qti-labels-none No labels displayed (default)
qti-labels-decimal Display numeric characters 1, 2, 3, …
qti-labels-lower-alpha Display lowercase characters a, b, c, …
qti-labels-upper-alpha Display uppercase characters A, B, C, …

In the absence of order target labeling, delivery systems should render platform defaults.

Example: Demonstrates qti-choices-top and qti-labels-none

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-top qti-labels-none" 
  orientation="horizontal">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 69 Expected Rendering: Order choices above the targets with no target labels displayed.
3 blue boxes with names in them are displayed side-by-side in a single row. Below the blue boxes are 3 larger grey boxes also displayed side-by-side in a single row, where the lines around the boxes are dark grey – there are no words in these boxes.

Example: Demonstrates qti-choices-top and qti-labels-decimal

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-top qti-labels-decimal"
  orientation="horizontal">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 70 Expected Rendering: Order choices above the targets and order target visual labels are numeric.
A blue box with a name in it is displayed. Below the word boxes are 3 larger blue boxes also displayed side-by-side in a single row – there are ascending numbers at the top of these boxes. Within the first 2 grey boxes are blue boxes with names in them.

Example: Demonstrates qti-choices-top and qti-labels-lower-alpha

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-top qti-labels-lower-alpha" 
  orientation="horizontal">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 71 Expected Rendering: Order choices above the targets and order target visual labels are lowercase alphabetic.
A blue box with a name in it is displayed. Below the word boxes are 3 larger gray boxes also displayed side-by-side in a single row, where the lines around the boxes are dark grey – there are ascending lowercase letters at the top of these boxes. Within the first 2 grey boxes are blue boxes with names in them.

Example: Demonstrates qti-choices-top and qti-labels-upper-alpha

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-top qti-labels-upper-alpha" 
  orientation="horizontal">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 72 Expected Rendering: Order choices above the targets and order target visual labels are uppercase alphabetic.
A blue box with a name in it is displayed. Below the blue boxes are 3 larger grey boxes also displayed side-by-side in a single row – there are ascending uppercase letters at the top of these boxes. Within the first 2 grey boxes are blue boxes with names in them.
1.2.9.2 Order Target Label Suffixes

For explicit suffix labeling of order target elements, use the same classes as for choice interaction; i.e., use the class attribute as follows:

Values
qti-labels-suffix-none No character is displayed after the order target label.
qti-labels-suffix-period A period "." character is displayed after the order target label.
qti-labels-suffix-parenthesis A right parenthesis ")" character is displayed after the order target  label.

In the absence of order target suffix labeling, delivery systems should render platform defaults.

Example: Demonstrates qti-choices-left and qti-labels-decimal and qti-labels-suffix-none

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-left qti-labels-decimal qti-labels-suffix-none" 
  orientation="vertical">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 73 Expected Rendering: Orientation is vertical, order choices to the left of the targets, and order target visual labels are numeric with no label suffixes.
3 blue boxes with names in them are displayed one-above-the-other in a single column. To the right of the blue boxes are 3 larger grey boxes also displayed one-above-the-other in a single column – there are ascending numbers at the top of these boxes.

Example: Demonstrates qti-choices-left and qti-labels-decimal and qti-labels-suffix-period

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-left 
qti-labels-decimal qti-labels-suffix-period" orientation="vertical">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 74 Expected Rendering: Orientation is vertical, order choices to the left of the targets, and order target visual labels are numeric with period "." label suffixes.
3 blue boxes with names in them are displayed one-above-the-other in a single column. To the right of the blue boxes are 3 larger grey boxes also displayed one-above-the-other in a single column – there are ascending numbers with a period character after the number at the top of these boxes.

Example: Demonstrates qti-choices-left and qti-labels-decimal and qti-labels-suffix-parenthesis

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-left qti-labels-decimal qti-labels-suffix-parenthesis" 
  orientation="vertical">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 75 Expected Rendering: Orientation is vertical, order choices to the left of the targets, and order target visual labels are numeric with right parenthesis ")" label suffixes.
3 grey boxes with ascending numbers in them are displayed one-above-the-other in a single column. To the right of the blue boxes are 3 larger grey boxes also displayed one-above-the-other in a single column – there are ascending numbers with a right parenthesis character after the number at the top of these boxes.
1.2.9.3 Ordering Choices | Order Target Container Positioning

For explicit ordering choice | order target container positioning, use the class attribute as follows:

Values
qti-choices-top The choices container is displayed above the order target  container
qti-choices-bottom The choices container is displayed below the order target  container
qti-choices-left The choices container is displayed to the left of the order target container
qti-choices-right The choices container is displayed to the right of the order target container

In the absence of choices | order target container positioning, delivery systems should render platform defaults.

Example: Demonstrates class="qti-choices-top"

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-top">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 76 Expected Rendering: Choices displayed above the order targets.
3 blue boxes with names in them are displayed side-by-side in a single row. Below the blue boxes are 3 larger grey boxes also displayed side-by-side in a single row, where the lines around the boxes are dark grey – there are ascending numbers in these grey boxes.

Example: Demonstrates class="qti-choices-bottom"

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-bottom">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 77 Expected Rendering: Choices displayed below the order targets.
3 gray boxes with ascending numbers in them are displayed side-by-side in a single row. Below the gray boxes are 3 smaller blue boxes also displayed side-by-side in a single row – there are names in the blue boxes.

Example: Demonstrates class="qti-choices-left"

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-left">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 78 Expected Rendering: Choices displayed to the left of the order targets.
3 blue boxes with names in them are displayed side-by-side in a single row. To the right of the blue boxes are 3 larger grey boxes also displayed side-by-side in a single row, where the lines around the boxes are dark grey – there are ascending numbers in these grey boxes.

Example: Demonstrates class="qti-choices-right"

<qti-order-interaction response-identifier="RESPONSE" class="qti-choices-right">
      <qti-prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</qti-prompt>
      <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
      <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
      <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>
Figure 79 Expected Rendering: Choices displayed to the right of the order targets.
3 gray boxes with ascending numbers in them are displayed side-by-side in a single row. To the right of the gray boxes are 3 smaller blue boxes also displayed side-by-side in a single row – there are names in the blue boxes.
1.2.9.4 Ordering Choices Container Width

For specifying explicit ordering choices container width, use a data- attribute as follows:

Values
data-choices-container-width The ordering choices container width in pixels. Example: data-choices-container-width="100"
1.2.9.5 Ordering Custom max|min-selections Messages

To specify custom max-choices or min-choices messages, use a data- attribute as follows:

Values
data-max-selections-message Custom message to be rendered by the delivery platform upon violation of the max-choices constraint.
data-min-selections-message Custom message to be rendered by the delivery platform upon violation of the min-choices constraint.

1.2.10 Graphic Gap Match Interaction

The shared vocabulary for the Graphic Gap Match Interaction is intended to provide more precision when describing:

  1. Positioning of the Gap Choices container with respect to the image containing the hotspots.
  2. Gap Choices container width.
  3. Associable Hotspot Selections theming.
  4. Custom max|min-associations message overrides.
1.2.10.1 Gap Choices Container | Image Positioning

For explicit gap choices container positioning with respect to the passage text containing the gaps, use the class attribute as follows:

Values
qti-choices-top The gap choices container is displayed above the image.
qti-choices-bottom The gap choices container is displayed below the image.
qti-choices-left The gap choices container is displayed to the left of the image.
qti-choices-right The gap choices container is displayed to the right of the image.

The following examples demonstrate shared vocabulary describing the visual orientation of the gap choices container with respect to the image containing the hotspots.

Example: Demonstrates class="qti-choices-top"

<qti-graphic-gap-match-interaction class="qti-choices-top" response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326" width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
  </qti-graphic-gap-match-interaction>
Figure 80 Expected Rendering: The gap choices are displayed above the image.
4 boxes of text are shown side-by-side in a single row. They are placed above an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty boxes with date labels pointing to specific points along the timeline.

Example: Demonstrates class="qti-choices-bottom"

<qti-graphic-gap-match-interaction class="qti-choices-bottom" response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326" width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
  </qti-graphic-gap-match-interaction>
Figure 81 Expected Rendering: The gap choices are displayed below the image.
There is an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty boxes with date labels pointing to specific points along the timeline. Below the timeline image are four boxes of text are shown side-by-side in a single row.

Example: Demonstrates class="qti-choices-left"

<qti-graphic-gap-match-interaction class="qti-choices-left" response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326"  width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63"  width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
  </qti-graphic-gap-match-interaction>
Figure 82 Expected Rendering: The gap choices are displayed to the left of the image.
Four boxes of text are shown side-by-side in a single row. They are placed to the left of an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty boxes with date labels pointing to specific points along the timeline.

Example: Demonstrates class="qti-choices-right"

<qti-graphic-gap-match-interaction class="qti-choices-right" response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326"  width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63"  width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
  </qti-graphic-gap-match-interaction>
Figure 83 Expected Rendering: The gap choices are displayed to the right of the image.
There is an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty boxes with date labels pointing to specific points along the timeline. To the right of the timeline image are four boxes of text are shown side-by-side in a single row.
1.2.10.2 Choices Container Width

A common implementation of the graphic gap match interaction is to place the gap choices in a so-called, "gap choices container".  One can achieve a visual equivalent of gap choices stacking by manipulating the gap choices container width.  

For specifying explicit gap choices container width, use a data- attribute as follows:

Values
data-choices-container-width The gap choices container width in pixels.
Example: data-choices-container-width="100"

Example: Demonstrates qti-choices-top and data-choices-container-width="188"

<qti-graphic-gap-match-interaction class="qti-choices-top"
   data-choices-container-width="188" response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326"  width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63"  width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
</qti-graphic-gap-match-interaction>
Figure 84 Expected Rendering: The gap choices container is set to width of 188px, resulting in a stacking effect.
Four boxes of text are shown side-by-side in 2 rows. They are placed above an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty boxes with date labels pointing to specific points along the timeline.

Example: Demonstrates qti-choices-left and data-choices-container-width="100"

<qti-graphic-gap-match-interaction class="qti-choices-left" data-choices-container-width="100"
 response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326"  width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63"  width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
  </qti-graphic-gap-match-interaction>
Figure 85 Expected Rendering: The gap choices container is set to width of 100px, resulting in a stacking effect.
Four boxes of text are shown in a single column (one box per row). They are placed to the left of an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty boxes with date labels pointing to specific points along the timeline.
1.2.10.3 Graphic Gap Match Hotspot Selections Theming

For explicit associable hotspot selection theming, use the class attribute as follows:

Values
qti-selections-light Delivery platform must implement associable hotspot selections in a color that the platform believes to be of suitable color contrast and opacity against a "dark" background image.
qti-selections-dark Delivery platform must implement associable hotspot selections in a color that the platform believes to be of suitable color contrast and opacity against a "light" background image.
qti-unselected-hidden Delivery platform must implement associable hotspot selections that are visually hidden (no visual border and no fill) unless a candidate is actively attempting to match gap choices with the selections.

In the absence of such selections theming overrides, delivery systems should render platform defaults. When using qti-selections-dark and qti-selections-light classes, the intent is to increase the contrast between the selections and the background, to ensure candidates can clearly identify the selections.Use qti-selections-light to indicate that the selection lines and fills should be lighter than usual to accommodate for the background image.  Use qti-selections-dark to indicate that the selection lines and fills should be darker than usual to accommodate for the background image.

For qti-unselected-hidden, note that there is an obvious visual bias for these types of questions. In addition, the selection should only be visually-hidden. If a candidate is known to have low-vision indications in their PNP, the class should be ignored, and the selection should NOT be visually hidden. Selections should always be programmatically available (usable by keyboards and assistive technology).

Example: Demonstrates Associable Hotspot selections with class="qti-selections-light"

<qti-graphic-gap-match-interaction class="qti-selections-light" data-choices-container-width="376"
   response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326"  width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63"  width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
</qti-graphic-gap-match-interaction>
Figure 86 Expected Rendering: Associable Hotspot selections are rendered with colors and active state fills of the platform's choosing - in this case an orange fill with a dashed border.
Four boxes of text are shown side-by-side in a single row. They are placed above an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty orange boxes with date labels pointing to specific points along the timeline.

Example: Demonstrates Associable Hotspot selections with class="qti-selections-dark"

<qti-graphic-gap-match-interaction class="qti-selections-dark" data-choices-container-width="376"
   response-identifier="RESPONSE">
    <img alt="timeline from 1939 to 1991" src="images/timeline-558.png" height="326"  width="558" />
    <qti-gap-img identifier="DraggerA" match-max="1">
      <img src="images/a-cw.png" alt="Choice A, The Cold War Ends" height="63"  width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerB" match-max="1">
      <img src="images/b-ww2.png" alt="Choice B, World War 2 Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerC" match-max="1">
      <img src="images/c-vietnam.png" alt="Choice C, Vietnam Conflict Ends" height="63" width="78" />
    </qti-gap-img>
    <qti-gap-img identifier="DraggerD" match-max="1">
      <img src="images/d-bay.png" alt="Choice D, Bay of Pigs" height="63" width="78" />
    </qti-gap-img>
    <qti-associable-hotspot coords="55,256,133,319" identifier="A" match-max="1" shape="rect" />
    <qti-associable-hotspot coords="190,256,268,319" identifier="B" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="309,256,387,319" identifier="C" match-max="1" shape="rect"/>
    <qti-associable-hotspot coords="450,256,528,319" identifier="D" match-max="1" shape="rect"/>
  </qti-graphic-gap-match-interaction>
Figure 87 Expected Rendering: Associable Hotspot selections are rendered with colors and active state fills of the platform's choosing - in this case a blue fill with a dashed-border.
Four boxes of text are shown side-by-side in a single row. They are placed above an image showing a timeline with 5 points along the timeline labeled with dates and information. There are 4 empty blue boxes with date labels pointing to specific points along the timeline.
1.2.10.4 Graphic Gap Match Custom max|min-associations Messages

To specify custom max-associations or min-associations messages, use a data- attribute as follows:

Values
data-max-selections-message Custom message to be rendered by the delivery platform upon violation of the max-associations constraint.
data-min-selections-message Custom message to be rendered by the delivery platform upon violation of the min-associations constraint.

In the absence of such custom message overrides, delivery systems should render platform defaults.

1.2.11 Media Interaction

1.2.11.1 Data-attribute = data-qti-media-player-controls

By including the "controls" attribute in the HTML "video" element, you can indicate that video controls are to be displayed to the candidate, where the candidate would be provided with the default video controls. The data-qti-media-player-controls attribute can be used to indicate which specific controls you wish to display to the candidate.

The acceptable values for data-qti-media-player-controls:

  • none
  • default
  • play
  • rewind
  • captions
  • audioDescription
1.2.11.2 Data-attribute = qti-media-player-pause-delay

To indicate the length of pauses, use qti-media-player-pause-delay, where the value is the number of seconds of the delay before starting playback. This gives the ability to author a time in seconds to allow for a delay/pause in the start or resumption after a user-initiated pause of an audio file when a user presses the play button. This delay is needed so that any screen reader announcements have time to complete before the audio is heard, avoiding conflicting audio streams for the screen reader user.

1.2.11.3 Data-attribute = qti-media-player-pause-duration

For the duration of the pause, use qti-media-player-pause-duration, where the value is the number of seconds of the pause. This gives the ability to author a time in seconds to indicate the length of user-initiated pauses of audio that also has an interactive progress bar. Item authors/content specialists need to be able to indicate how long a pause should last so that it is appropriate for the content and the construct being measured.

1.2.11.4 Data-attribute = qti-media-player-pause-count

To indicate the number of times media can be paused during playback, use qti-media-player-pause-count where the value is an integer > 0 . Item authors and content specialists need to be able to indicate how many pauses are available to a user so that it is appropriate for the content and the construct being measured. Note that without this data and where the candidate is given controls, the candidate is presumed to have an unlimited number of pauses.

2. SECTION 2: Shared CSS

The following CSS is provided as possible stylesheet markup and is used by other implementers of QTI Shared Vocabulary. For certification purposes, implementers do NOT need to follow this markup exactly. Rather, implementers MUST meet the acceptance criteria for the classes, which describe the intended visual presentation of QTI content. Implementers are free to use this markup, however, 1EdTech or its members are not responsible for any errors or omissions that may impact your specific use of this markup.

The QTI 3 Shared CSS as a stylesheet

QTI 3 Shared CSS includes:

  1. Display
  2. Special Flex Styles
  3. Margin
  4. Padding
  5. Horizontal Alignment Styles
  6. Vertical Alignment Styles
  7. Height
  8. Width
  9. Text-Indent
  10. List Styles
  11. Layout
  12. Other QTI 3 Presentation Utilities

2.1 Display CSS

.qti-display-inline {
  display: inline;
}

.qti-display-inline-block {
  display: inline-block;
}

.qti-display-block {
  display: block;
}

.qti-display-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.qti-display-inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.qti-display-grid {
  display: grid;
}

.qti-display-inline-grid {
  display: inline-grid;
}

.qti-display-table {
  display: table;
}

.qti-display-table-cell {
  display: table-cell;
}

.qti-display-table-row {
  display: table-row;
}

.qti-display-list-item {
  display: list-item;
}

.qti-display-inherit {
  display: inherit;
}

/* 
 * hidden to screen readers and sighted
 */
.qti-hidden {
  display: none;
}

/*
* visible to screen readers, hidden to sighted
 */
.qti-visually-hidden {
  position: fixed !important;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  height: 1px;
  width: 1px;
  border: 0;
  margin: -1px;
}

2.2 Special Flex Styles

.qti-flex-direction-column {
  flex-direction: column;
}

.qti-flex-direction-row {
  flex-direction: row;
}

.qti-flex-grow-1 {
  flex-grow: 1;
}

.qti-flex-grow-0 {
  flex-grow: 0;
}

2.3 Margin CSS

/**
 * For margin Top and Bottom and Left and Right
 */
.qti-margin-0 {
  margin: 0 !important;
}
.qti-margin-1 {
  margin: 0.25rem !important;
}
.qti-margin-2 {
  margin: 0.5rem !important;
}
.qti-margin-3 {
  margin: 1rem !important;
}
.qti-margin-4 {
  margin: 1.5rem !important;
}
.qti-margin-5 {
  margin: 3rem !important;
}
.qti-margin-auto {
  margin: auto !important;
}

/*
 For margin Left and Right
 */
.qti-margin-x-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.qti-margin-x-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
.qti-margin-x-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
.qti-margin-x-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.qti-margin-x-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
.qti-margin-x-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}
.qti-margin-x-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

/*
 For margin Top and Bottom
 */
.qti-margin-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.qti-margin-y-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.qti-margin-y-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.qti-margin-y-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.qti-margin-y-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.qti-margin-y-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.qti-margin-y-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/*
 For margin Top
 */
.qti-margin-t-0 {
  margin-top: 0 !important;
}
.qti-margin-t-1 {
  margin-top: 0.25rem !important;
}
.qti-margin-t-2 {
  margin-top: 0.5rem !important;
}
.qti-margin-t-3 {
  margin-top: 1rem !important;
}
.qti-margin-t-4 {
  margin-top: 1.5rem !important;
}
.qti-margin-t-5 {
  margin-top: 3rem !important;
}
.qti-margin-t-auto {
  margin-top: auto !important;
}

/* 
For margin Bottom
 */
.qti-margin-b-0 {
  margin-bottom: 0 !important;
}
.qti-margin-b-1 {
  margin-bottom: 0.25rem !important;
}
.qti-margin-b-2 {
  margin-bottom: 0.5rem !important;
}
.qti-margin-b-3 {
  margin-bottom: 1rem !important;
}
.qti-margin-b-4 {
  margin-bottom: 1.5rem !important;
}
.qti-margin-b-5 {
  margin-bottom: 3rem !important;
}
.qti-margin-b-auto {
  margin-bottom: auto !important;
}

/*
 For margin Start LTR
 */
.qti-margin-s-0 {
  margin-left: 0 !important;
}
.qti-margin-s-1 {
  margin-left: 0.25rem !important;
}
.qti-margin-s-2 {
  margin-left: 0.5rem !important;
}
.qti-margin-s-3 {
  margin-left: 1rem !important;
}
.qti-margin-s-4 {
  margin-left: 1.5rem !important;
}
.qti-margin-s-5 {
  margin-left: 3rem !important;
}
.qti-margin-s-auto {
  margin-left: auto !important;
}

/* 
For margin End LTR
 */
.qti-margin-e-0 {
  margin-right: 0 !important;
}
.qti-margin-e-1 {
  margin-right: 0.25rem !important;
}
.qti-margin-e-2 {
  margin-right: 0.5rem !important;
}
.qti-margin-e-3 {
  margin-right: 1rem !important;
}
.qti-margin-e-4 {
  margin-right: 1.5rem !important;
}
.qti-margin-e-5 {
  margin-right: 3rem !important;
}
.qti-margin-e-auto {
  margin-right: auto !important;
}

2.4 Padding CSS

/*
For padding Top and Bottom and Left and Right
 */
.qti-padding-0 {
  padding: 0 !important;
}
.qti-padding-1 {
  padding: 0.25rem !important;
}
.qti-padding-2 {
  padding: 0.5rem !important;
}
.qti-padding-3 {
  padding: 1rem !important;
}
.qti-padding-4 {
  padding: 1.5rem !important;
}
.qti-padding-5 {
  padding: 3rem !important;
}

/*
 For padding Left and Right
 */
.qti-padding-x-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.qti-padding-x-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
.qti-padding-x-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.qti-padding-x-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
.qti-padding-x-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}
.qti-padding-x-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

/*
  For padding Top and Bottom
 */
.qti-padding-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.qti-padding-y-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.qti-padding-y-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.qti-padding-y-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.qti-padding-y-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.qti-padding-y-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/*
 For padding Top
 */
.qti-padding-t-0 {
  padding-top: 0 !important;
}
.qti-padding-t-1 {
  padding-top: 0.25rem !important;
}
.qti-padding-t-2 {
  padding-top: 0.5rem !important;
}
.qti-padding-t-3 {
  padding-top: 1rem !important;
}
.qti-padding-t-4 {
  padding-top: 1.5rem !important;
}
.qti-padding-t-5 {
  padding-top: 3rem !important;
}

/*
 For padding Bottom
 */
.qti-padding-b-0 {
  padding-bottom: 0 !important;
}
.qti-padding-b-1 {
  padding-bottom: 0.25rem !important;
}
.qti-padding-b-2 {
  padding-bottom: 0.5rem !important;
}
.qti-padding-b-3 {
  padding-bottom: 1rem !important;
}
.qti-padding-b-4 {
  padding-bottom: 1.5rem !important;
}
.qti-padding-b-5 {
  padding-bottom: 3rem !important;
}

/*
  For padding Start LTR
 */
.qti-padding-s-0 {
  padding-left: 0 !important;
}
.qti-padding-s-1 {
  padding-left: 0.25rem !important;
}
.qti-padding-s-2 {
  padding-left: 0.5rem !important;
}
.qti-padding-s-3 {
  padding-left: 1rem !important;
}
.qti-padding-s-4 {
  padding-left: 1.5rem !important;
}
.qti-padding-s-5 {
  padding-left: 3rem !important;
}

/*
 For padding End LTR
 */
.qti-padding-e-0 {
  padding-right: 0 !important;
}
.qti-padding-e-1 {
  padding-right: 0.25rem !important;
}
.qti-padding-e-2 {
  padding-right: 0.5rem !important;
}
.qti-padding-e-3 {
  padding-right: 1rem !important;
}
.qti-padding-e-4 {
  padding-right: 1.5rem !important;
}
.qti-padding-e-5 {
  padding-right: 3rem !important;
}

2.5 Horizontal Alignment


.qti-align-left {
  text-align: left;
}

.qti-align-center {
  text-align: center;
}

.qti-align-right {
  text-align: right;
}

2.6 Vertical alignment

.qti-valign-top {
  vertical-align: top;
}

.qti-valign-middle {
  vertical-align: middle;
}

.qti-valign-baseline {
  vertical-align: baseline;
}

.qti-valign-bottom {
  vertical-align: bottom;
}

2.7 Height styles

.qti-height-0 { height: 0px; }
.qti-height-px { height: 1px; }
.qti-height-0p5 { height: 0.125rem; }
.qti-height-1 { height: 0.25rem; }
.qti-height-1p5 { height: 0.375rem; }
.qti-height-2 { height: 0.5rem; }
.qti-height-2p5 { height: 0.625rem; }
.qti-height-3 { height: 0.75rem; }
.qti-height-3p5 { height: 0.875rem; }
.qti-height-4 { height: 1rem; }
.qti-height-5 { height: 1.25rem; }
.qti-height-6 { height: 1.5rem; }
.qti-height-7 { height: 1.75rem; }
.qti-height-8 { height: 2rem; }
.qti-height-9 { height: 2.25rem; }
.qti-height-10 { height: 2.5rem; }
.qti-height-11 {height: 2.75rem; }
.qti-height-12 { height: 3rem; }
.qti-height-14 { height: 3.5rem; }
.qti-height-16 { height: 4rem; }
.qti-height-20 { height: 5rem; }
.qti-height-24 { height: 6rem; }
.qti-height-28 { height: 7rem; }
.qti-height-32 { height: 8rem; }
.qti-height-36 { height: 9rem; }
.qti-height-40 { height: 10rem; }
.qti-height-44 {height: 11rem; }
.qti-height-48 { height: 12rem; }
.qti-height-52 { height: 13rem; }
.qti-height-56 { height: 14rem; }
.qti-height-60 { height: 15rem; }
.qti-height-64 { height: 16rem; }
.qti-height-72 { height: 18rem; }
.qti-height-80 { height: 20rem; }
.qti-height-96 { height: 24rem; }
.qti-height-1-2 { height: 50%; }
.qti-height-1-3 { height: 33.333333%; }
.qti-height-2-3 { height: 66.666667%; }
.qti-height-1-4 { height: 25%; }
.qti-height-2-4 { height: 50%; }
.qti-height-3-4 { height: 75%; }
.qti-height-1-5 { height: 20%; }
.qti-height-2-5 { height: 40%; }
.qti-height-3-5 { height: 60%; }
.qti-height-4-5 { height: 80%; }
.qti-height-1-6 { height: 16.666667%; }
.qti-height-2-6 { height: 33.333333%; }
.qti-height-3-6 { height: 50%; }
.qti-height-4-6 { height: 66.666667%; }
.qti-height-5-6 { height: 83.333333%; }
.qti-height-auto { height: auto; }
.qti-height-full { height: 100%; }

2.8 Width Styles

.qti-width-0	{ width: 0px; }
.qti-width-px { width: 1px; }
.qti-width-0p5 { width: 0.125rem; }
.qti-width-1	{ width: 0.25rem; }
.qti-width-1p5 { width: 0.375rem; }
.qti-width-2	{ width: 0.5rem; }
.qti-width-2p5 { width: 0.625rem; }
.qti-width-3	{ width: 0.75rem; }
.qti-width-3p5 { width: 0.875rem; }
.qti-width-4	{ width: 1rem; }
.qti-width-5	{ width: 1.25rem; }
.qti-width-6	{width: 1.5rem; }
.qti-width-7	{ width: 1.75rem; }
.qti-width-8	{ width: 2rem; }
.qti-width-9	{ width: 2.25rem; }
.qti-width-10 { width: 2.5rem; }
.qti-width-11 { width: 2.75rem; }
.qti-width-12 { width: 3rem; }
.qti-width-14 { width: 3.5rem; }
.qti-width-16 { width: 4rem; }
.qti-width-20 { width: 5rem; }
.qti-width-24 { width: 6rem; }
.qti-width-28 { width: 7rem; }
.qti-width-32 { width: 8rem; }
.qti-width-36 { width: 9rem; }
.qti-width-40 { width: 10rem; }
.qti-width-44 { width: 11rem; }
.qti-width-48 { width: 12rem; }
.qti-width-52 { width: 13rem; }
.qti-width-56 { width: 14rem; }
.qti-width-60 { width: 15rem; }
.qti-width-64 { width: 16rem; }
.qti-width-72 { width: 18rem; }
.qti-width-80 { width: 20rem; }
.qti-width-96 { width: 24rem; }
.qti-width-auto { width: auto; }
.qti-width-1-2 { width: 50%; }
.qti-width-1-3 { width: 33.333333%; }
.qti-width-2-3 { width: 66.666667%; }
.qti-width-1-4 { width: 25%; }
.qti-width-2-4 { width: 50%; }
.qti-width-3-4 { width: 75%; }
.qti-width-1-5 { width: 20%; }
.qti-width-2-5 { width: 40%; }
.qti-width-3-5 { width: 60%; }
.qti-width-4-5 { width: 80%; }
.qti-width-1-6 { width: 16.666667%; }
.qti-width-2-6 { width: 33.333333%; }
.qti-width-3-6 { width: 50%; }
.qti-width-4-6 { width: 66.666667%; }
.qti-width-5-6 { width: 83.333333%; }
.qti-width-1-12 { width: 8.333333%; }
.qti-width-2-12 { width: 16.666667%; }
.qti-width-3-12 { width: 25%; }
.qti-width-4-12 { width: 33.333333%; }
.qti-width-5-12 { width: 41.666667%; }
.qti-width-6-12 { width: 50%; }
.qti-width-7-12 { width: 58.333333%; }
.qti-width-8-12 { width: 66.666667%; }
.qti-width-9-12 { width: 75%; }
.qti-width-10-12	{ width: 83.333333%; }
.qti-width-11-12 { width: 91.666667%; }
.qti-width-full, .qti-fullwidth { width: 100%; }

2.9 Text Indent Styles

.qti-text-indent-0 {
  text-indent: 0px;
}

.qti-text-indent-px {
  text-indent: 1px;
}

.qti-text-indent-0p5 {
  text-indent: 0.125rem;
}

.qti-text-indent-1 {
  text-indent: 0.25rem;
}

.qti-text-indent-1p5 {
  text-indent: 0.375rem;
}

.qti-text-indent-2 {
  text-indent: 0.5rem;
}

.qti-text-indent-2p5 {
  text-indent: 0.625rem;
}

.qti-text-indent-3 {
  text-indent: 0.75rem;
}

.qti-text-indent-3p5 {
  text-indent: 0.875rem;
}

.qti-text-indent-4 {
  text-indent: 1rem;
}

.qti-text-indent-5 {
  text-indent: 1.25rem;
}

.qti-text-indent-6 {
  text-indent: 1.5rem;
}

.qti-text-indent-7 {
  text-indent: 1.75rem;
}

.qti-text-indent-8 {
  text-indent: 2rem;
}

.qti-text-indent-12 {
  text-indent: 3rem;
}

.qti-text-indent-16 {
  text-indent: 4rem;
}

.qti-text-indent-20 {
  text-indent: 5rem;
}

.qti-text-indent-24 {
  text-indent: 6rem;
}

.qti-text-indent-28 {
  text-indent: 7rem;
}

.qti-text-indent-32 {
  text-indent: 8rem;
}

2.10 List Styles

.qti-list-style-type-none {
  list-style-type: none;
}

.qti-list-style-type-disc {
  list-style-type: disc;
}

.qti-list-style-type-circle {
  list-style-type: circle;
}

.qti-list-style-type-square {
  list-style-type: square;
}

.qti-list-style-type-decimal {
  list-style-type: decimal;
}

.qti-list-style-type-decimal-leading-zero {
  list-style-type: decimal-leading-zero;
}

.qti-list-style-type-lower-alpha {
  list-style-type: lower-alpha;
}

.qti-list-style-type-upper-alpha {
  list-style-type: upper-alpha;
}

.qti-list-style-type-lower-roman {
  list-style-type: lower-roman;
}

.qti-list-style-type-upper-roman {
  list-style-type: upper-roman;
}

.qti-list-style-type-lower-latin {
  list-style-type: lower-latin;
}

.qti-list-style-type-upper-latin {
  list-style-type: upper-latin;
}

.qti-list-style-type-lower-greek {
  list-style-type: lower-greek;
}

.qti-list-style-type-arabic-indic {
  list-style-type: arabic-indic;
}

.qti-list-style-type-armenian {
  list-style-type: armenian;
}

.qti-list-style-type-lower-armenian {
  list-style-type: lower-armenian;
}

.qti-list-style-type-upper-armenian {
  list-style-type: upper-armenian;
}

.qti-list-style-type-bengali {
  list-style-type: bengali;
}

.qti-list-style-type-cambodian {
  list-style-type: cambodian;
}

.qti-list-style-type-simp-chinese-formal {
  list-style-type: simp-chinese-formal;
}

.qti-list-style-type-simp-chinese-informal {
  list-style-type: simp-chinese-informal;
}

.qti-list-style-type-trad-chinese-formal {
  list-style-type: trad-chinese-formal;
}

.qti-list-style-type-trad-chinese-informal {
  list-style-type: trad-chinese-informal;
}

.qti-list-style-type-cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.qti-list-style-type-cjk-heavenly-stem {
  list-style-type: cjk-heavenly-stem;
}

.qti-list-style-type-cjk-earthly-branch {
  list-style-type: cjk-earthly-branch;
}

.qti-list-style-type-devanagari {
  list-style-type: devanagari;
}

.qti-list-style-type-ethiopic-halehame-ti-er {
  list-style-type: ethiopic-halehame-ti-er;
}

.qti-list-style-type-ethiopic-halehame-ti-et {
  list-style-type: ethiopic-halehame-ti-et;
}

.qti-list-style-type-ethiopic-halehame-am {
  list-style-type: ethiopic-halehame-am;
}

.qti-list-style-type-ethiopic-halehame {
  list-style-type: ethiopic-halehame;
}

.qti-list-style-type-georgian {
  list-style-type: georgian;
}

.qti-list-style-type-gujarati {
  list-style-type: gujarati;
}

.qti-list-style-type-gurmukhi {
  list-style-type: gurmukhi;
}

.qti-list-style-type-hangul {
  list-style-type: hangul;
}

.qti-list-style-type-hangul-consonant {
  list-style-type: hangul-consonant;
}

.qti-list-style-type-hebrew {
  list-style-type: hebrew;
}

.qti-list-style-type-hiragana {
  list-style-type: hiragana;
}

.qti-list-style-type-hiragana-iroha {
  list-style-type: hiragana-iroha;
}

.qti-list-style-type-khmer {
  list-style-type: khmer;
}

.qti-list-style-type-korean-hangul-formal {
  list-style-type: korean-hangul-formal;
}

.qti-list-style-type-korean-hanja-formal {
  list-style-type: korean-hanja-formal;
}

.qti-list-style-type-korean-hanja-informal {
  list-style-type: korean-hanja-informal;
}

.qti-list-style-type-lao {
  list-style-type: lao;
}

.qti-list-style-type-malayalam {
  list-style-type: malayalam;
}

.qti-list-style-type-mongolian {
  list-style-type: mongolian;
}

.qti-list-style-type-myanmar {
  list-style-type: myanmar;
}

.qti-list-style-type-oriya {
  list-style-type: oriya;
}

.qti-list-style-type-persian {
  list-style-type: persian;
}

.qti-list-style-type-thai {
  list-style-type: thai;
}

.qti-list-style-type-tibetan {
  list-style-type: tibetan;
}

.qti-list-style-type-telugu {
  list-style-type: telugu;
}

.qti-list-style-type-urdu {
  list-style-type: urdu;
}

2.11 Layout

/* Set default non-fluid container to live nicely (plenty of whitespace/padding/margin) with 
   screen resolution above 1024 pixels (iPad in landscape) and below 1200 pixels */
.container { width:940px; }

/* Set default fluid container nested rows to left-margin=0 */
.container-fluid .qti-layout-row { margin-left:0; }

/* Set row left-margin to -20px because every column in a row has a left-margin of 20px */
.qti-layout-row { margin-left:-20px;*zoom:1; }
.qti-layout-row:before, .qti-layout-row:after { display:table;content:"";line-height:0; }
.qti-layout-row:after {clear:both;}

/* By default, all columns are floated left with default left-margin separator of 20px */
[class*="qti-layout-col"] { float:left;min-height:1px;margin-left:20px; }

.qti-layout-col12 { width:940px; }
.qti-layout-col11 { width:860px; }
.qti-layout-col10 { width:780px ;}
.qti-layout-col9  { width:700px; }
.qti-layout-col8  { width:620px; }
.qti-layout-col7  { width:540px; }
.qti-layout-col6  { width:460px; }
.qti-layout-col5  { width:380px; }
.qti-layout-col4  { width:300px; }
.qti-layout-col3  { width:220px; }
.qti-layout-col2  { width:140px; }
.qti-layout-col1  { width:60px; }

.qti-layout-offset11 { margin-left:900px; }
.qti-layout-offset10 { margin-left:820px; }
.qti-layout-offset9  { margin-left:740px; }
.qti-layout-offset8  { margin-left:660px; }
.qti-layout-offset7  { margin-left:580px; }
.qti-layout-offset6  { margin-left:500px; }
.qti-layout-offset5  { margin-left:420px; }
.qti-layout-offset4  { margin-left:340px; }
.qti-layout-offset3  { margin-left:260px; }
.qti-layout-offset2  { margin-left:180px; }
.qti-layout-offset1  { margin-left:100px; }

/* =======================================
   Fluid Container Overrides to account for width 100%
   ======================================= */

.container-fluid .qti-layout-row { width:100%;*zoom:1; }
.container-fluid .qti-layout-row:before, .container-fluid .qti-layout-row:after { display:table; content:""; line-height:0; }
.container-fluid .qti-layout-row:after { clear:both; }

.container-fluid .qti-layout-row [class*="qti-layout-col"] {display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;}
.container-fluid .qti-layout-row [class*="qti-layout-col"]:first-child {margin-left:0;}

.container-fluid .qti-layout-row .qti-layout-col12 {width:100%;*width:99.94680851063829%;}
.container-fluid .qti-layout-row .qti-layout-col11 {width:91.48936170212765%;*width:91.43617021276594%;}
.container-fluid .qti-layout-row .qti-layout-col10 {width:82.97872340425532%;*width:82.92553191489361%;}
.container-fluid .qti-layout-row .qti-layout-col9  {width:74.46808510638297%;*width:74.41489361702126%;}
.container-fluid .qti-layout-row .qti-layout-col8  {width:65.95744680851064%;*width:65.90425531914893%;}
.container-fluid .qti-layout-row .qti-layout-col7  {width:57.44680851063829%;*width:57.39361702127659%;}
.container-fluid .qti-layout-row .qti-layout-col6  {width:48.93617021276595%;*width:48.88297872340425%;}
.container-fluid .qti-layout-row .qti-layout-col5  {width:40.42553191489362%;*width:40.37234042553192%;}
.container-fluid .qti-layout-row .qti-layout-col4  {width:31.914893617021278%;*width:31.861702127659576%;}
.container-fluid .qti-layout-row .qti-layout-col3  {width:23.404255319148934%;*width:23.351063829787233%;}
.container-fluid .qti-layout-row .qti-layout-col2  {width:14.893617021276595%;*width:14.840425531914894%;}
.container-fluid .qti-layout-row .qti-layout-col1  {width:6.382978723404255%;*width:6.329787234042553%;}

.container-fluid .qti-layout-row .qti-layout-offset11 {margin-left:95.74468085106382%;*margin-left:95.6382978723404%;}
.container-fluid .qti-layout-row .qti-layout-offset11:first-child {margin-left:93.61702127659574%;*margin-left:93.51063829787232%;}
.container-fluid .qti-layout-row .qti-layout-offset10 {margin-left:87.23404255319149%;*margin-left:87.12765957446807%;}
.container-fluid .qti-layout-row .qti-layout-offset10:first-child {margin-left:85.1063829787234%;*margin-left:84.99999999999999%;}
.container-fluid .qti-layout-row .qti-layout-offset9  {margin-left:78.72340425531914%;*margin-left:78.61702127659572%;}
.container-fluid .qti-layout-row .qti-layout-offset9:first-child  {margin-left:76.59574468085106%;*margin-left:76.48936170212764%;}
.container-fluid .qti-layout-row .qti-layout-offset8  {margin-left:70.2127659574468%;*margin-left:70.10638297872339%;}
.container-fluid .qti-layout-row .qti-layout-offset8:first-child  {margin-left:68.08510638297872%;*margin-left:67.9787234042553%;}
.container-fluid .qti-layout-row .qti-layout-offset7  {margin-left:61.70212765957446%;*margin-left:61.59574468085106%;}
.container-fluid .qti-layout-row .qti-layout-offset7:first-child  {margin-left:59.574468085106375%;*margin-left:59.46808510638297%;}
.container-fluid .qti-layout-row .qti-layout-offset6  {margin-left:53.191489361702125%;*margin-left:53.085106382978715%;}
.container-fluid .qti-layout-row .qti-layout-offset6:first-child  {margin-left:51.063829787234035%;*margin-left:50.95744680851063%;}
.container-fluid .qti-layout-row .qti-layout-offset5  {margin-left:44.68085106382979%;*margin-left:44.57446808510638%;}
.container-fluid .qti-layout-row .qti-layout-offset5:first-child  {margin-left:42.5531914893617%;*margin-left:42.4468085106383%;}
.container-fluid .qti-layout-row .qti-layout-offset4  {margin-left:36.170212765957444%;*margin-left:36.06382978723405%;}
.container-fluid .qti-layout-row .qti-layout-offset4:first-child  {margin-left:34.04255319148936%;*margin-left:33.93617021276596%;}
.container-fluid .qti-layout-row .qti-layout-offset3  {margin-left:27.659574468085104%;*margin-left:27.5531914893617%;}
.container-fluid .qti-layout-row .qti-layout-offset3:first-child  {margin-left:25.53191489361702%;*margin-left:25.425531914893618%;}
.container-fluid .qti-layout-row .qti-layout-offset2  {margin-left:19.148936170212764%;*margin-left:19.04255319148936%;}
.container-fluid .qti-layout-row .qti-layout-offset2:first-child  {margin-left:17.02127659574468%;*margin-left:16.914893617021278%;}
.container-fluid .qti-layout-row .qti-layout-offset1  {margin-left:10.638297872340425%;*margin-left:10.53191489361702%;}
.container-fluid .qti-layout-row .qti-layout-offset1:first-child  {margin-left:8.51063829787234%;*margin-left:8.404255319148938%;}

.container {margin-top:20px;margin-bottom:20px; margin-right:auto;margin-left:auto;*zoom:1;}
.container:before,.container:after {display:table;content:"";line-height:0;}
.container:after {clear:both;}

.container-fluid {margin-top:20px;margin-bottom:20px; padding-right:20px;padding-left:20px;*zoom:1;}
.container-fluid:before, .container-fluid:after {display:table;content:"";line-height:0;}
.container-fluid:after {clear:both;}

/* narrower than iPad in portrait overrides */
@media (max-width:767px){
  body {padding-left:20px;padding-right:20px;} 
  .container-fluid {padding:0;}
  .container {width:auto;} 
  .container-fluid .qti-layout-row {width:100%;}
  .qti-layout-row {margin-left:0;}
  [class*="qti-layout-col"], .container-fluid .qti-layout-row [class*="qti-layout-col"] {float:none;display:block;width:100%;margin-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
  .qti-layout-col12, .container-fluid .qti-layout-row .qti-layout-col12 {width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} 
  .container-fluid .qti-layout-row [class*="offset"]:first-child {margin-left:0;} 
}

/* Between iPad in portrait and landscape overrides */
@media (min-width:768px) and (max-width:979px){
  .qti-layout-row {margin-left:-20px;*zoom:1;}
  .qti-layout-row:before, .qti-layout-row:after {display:table;content:"";line-height:0;} 
  .qti-layout-row:after {clear:both;} 
  
  [class*="qti-layout-col"] {float:left;min-height:1px;margin-left:20px;} 
  .container {width:724px;}
  
  .qti-layout-col12 {width:724px;} 
  .qti-layout-col11 {width:662px;} 
  .qti-layout-col10 {width:600px;} 
  .qti-layout-col9  {width:538px;} 
  .qti-layout-col8  {width:476px;} 
  .qti-layout-col7  {width:414px;} 
  .qti-layout-col6  {width:352px;} 
  .qti-layout-col5  {width:290px;} 
  .qti-layout-col4  {width:228px;} 
  .qti-layout-col3  {width:166px;} 
  .qti-layout-col2  {width:104px;} 
  .qti-layout-col1  {width:42px;} 
  
  .qti-layout-offset11 {margin-left:702px;} 
  .qti-layout-offset10 {margin-left:640px;} 
  .qti-layout-offset9  {margin-left:578px;} 
  .qti-layout-offset8  {margin-left:516px;} 
  .qti-layout-offset7  {margin-left:454px;} 
  .qti-layout-offset6  {margin-left:392px;} 
  .qti-layout-offset5  {margin-left:330px;} 
  .qti-layout-offset4  {margin-left:268px;} 
  .qti-layout-offset3  {margin-left:206px;} 
  .qti-layout-offset2  {margin-left:144px;} 
  .qti-layout-offset1  {margin-left:82px;} 
  
  .container-fluid .qti-layout-row {width:100%;*zoom:1;}
  .container-fluid .qti-layout-row:before, .container-fluid .qti-layout-row:after {display:table;content:"";line-height:0;}
  .container-fluid .qti-layout-row:after {clear:both;}
  .container-fluid .qti-layout-row [class*="qti-layout-col"] {display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.7624309392265194%;*margin-left:2.709239449864817%;}
  .container-fluid .qti-layout-row [class*="qti-layout-col"]:first-child {margin-left:0;}
  
  .container-fluid .qti-layout-row .qti-layout-col12 {width:100%;*width:99.94680851063829%;} 
  .container-fluid .qti-layout-row .qti-layout-col11 {width:91.43646408839778%;*width:91.38327259903608%;} 
  .container-fluid .qti-layout-row .qti-layout-col10 {width:82.87292817679558%;*width:82.81973668743387%;} 
  .container-fluid .qti-layout-row .qti-layout-col9  {width:74.30939226519337%;*width:74.25620077583166%;}
  .container-fluid .qti-layout-row .qti-layout-col8  {width:65.74585635359117%;*width:65.69266486422946%;}
  .container-fluid .qti-layout-row .qti-layout-col7  {width:57.18232044198895%;*width:57.12912895262725%;}
  .container-fluid .qti-layout-row .qti-layout-col6  {width:48.61878453038674%;*width:48.56559304102504%;}
  .container-fluid .qti-layout-row .qti-layout-col5  {width:40.05524861878453%;*width:40.00205712942283%;}
  .container-fluid .qti-layout-row .qti-layout-col4  {width:31.491712707182323%;*width:31.43852121782062%;} 
  .container-fluid .qti-layout-row .qti-layout-col3  {width:22.92817679558011%;*width:22.87498530621841%;}
  .container-fluid .qti-layout-row .qti-layout-col2  {width:14.3646408839779%;*width:14.311449394616199%;}
  .container-fluid .qti-layout-row .qti-layout-col1  {width:5.801104972375691%;*width:5.747913483013988%;}
  
  .container-fluid .qti-layout-row .qti-layout-offset11 {margin-left:96.96132596685082%;*margin-left:96.8549429881274%;} 
  .container-fluid .qti-layout-row .qti-layout-offset11:first-child {margin-left:94.1988950276243%;*margin-left:94.09251204890089%;} 
  .container-fluid .qti-layout-row .qti-layout-offset10 {margin-left:88.39779005524862%;*margin-left:88.2914070765252%;} 
  .container-fluid .qti-layout-row .qti-layout-offset10:first-child {margin-left:85.6353591160221%;*margin-left:85.52897613729868%;} 
  .container-fluid .qti-layout-row .qti-layout-offset9  {margin-left:79.8342541436464%;*margin-left:79.72787116492299%;} 
  .container-fluid .qti-layout-row .qti-layout-offset9:first-child  {margin-left:77.07182320441989%;*margin-left:76.96544022569647%;} 
  .container-fluid .qti-layout-row .qti-layout-offset8  {margin-left:71.2707182320442%;*margin-left:71.16433525332079%;} 
  .container-fluid .qti-layout-row .qti-layout-offset8:first-child  {margin-left:68.50828729281768%;*margin-left:68.40190431409427%;} 
  .container-fluid .qti-layout-row .qti-layout-offset7  {margin-left:62.70718232044199%;*margin-left:62.600799341718584%;} 
  .container-fluid .qti-layout-row .qti-layout-offset7:first-child  {margin-left:59.94475138121547%;*margin-left:59.838368402492065%;} 
  .container-fluid .qti-layout-row .qti-layout-offset6  {margin-left:54.14364640883978%;*margin-left:54.037263430116376%;} 
  .container-fluid .qti-layout-row .qti-layout-offset6:first-child  {margin-left:51.38121546961326%;*margin-left:51.27483249088986%;} 
  .container-fluid .qti-layout-row .qti-layout-offset5  {margin-left:45.58011049723757%;*margin-left:45.47372751851417%;} 
  .container-fluid .qti-layout-row .qti-layout-offset5:first-child  {margin-left:42.81767955801105%;*margin-left:42.71129657928765%;} 
  .container-fluid .qti-layout-row .qti-layout-offset4  {margin-left:37.01657458563536%;*margin-left:36.91019160691196%;} 
  .container-fluid .qti-layout-row .qti-layout-offset4:first-child  {margin-left:34.25414364640884%;*margin-left:34.14776066768544%;} 
  .container-fluid .qti-layout-row .qti-layout-offset3  {margin-left:28.45303867403315%;*margin-left:28.346655695309746%;} 
  .container-fluid .qti-layout-row .qti-layout-offset3:first-child  {margin-left:25.69060773480663%;*margin-left:25.584224756083227%;} 
  .container-fluid .qti-layout-row .qti-layout-offset2  {margin-left:19.88950276243094%;*margin-left:19.783119783707537%;} 
  .container-fluid .qti-layout-row .qti-layout-offset2:first-child  {margin-left:17.12707182320442%;*margin-left:17.02068884448102%;} 
  .container-fluid .qti-layout-row .qti-layout-offset1  {margin-left:11.32596685082873%;*margin-left:11.219583872105325%;} 
  .container-fluid .qti-layout-row .qti-layout-offset1:first-child  {margin-left:8.56353591160221%;*margin-left:8.457152932878806%;}
}

/* Typical desktop or chromebook overrides */
@media (min-width:1200px){
  .qti-layout-row {margin-left:-30px;*zoom:1;}
  .qti-layout-row:before, .qti-layout-row:after {display:table;content:"";line-height:0;} 
  .qti-layout-row:after {clear:both;} 
  [class*="qti-layout-col"] {float:left;min-height:1px;margin-left:30px;}
  .container {width:1170px;} 

  .qti-layout-col12 {width:1170px;} 
  .qti-layout-col11 {width:1070px;} 
  .qti-layout-col10 {width:970px;} 
  .qti-layout-col9  {width:870px;} 
  .qti-layout-col8  {width:770px;} 
  .qti-layout-col7  {width:670px;} 
  .qti-layout-col6  {width:570px;} 
  .qti-layout-col5  {width:470px;} 
  .qti-layout-col4  {width:370px;} 
  .qti-layout-col3  {width:270px;} 
  .qti-layout-col2  {width:170px;} 
  .qti-layout-col1  {width:70px;} 

  .qti-layout-offset11 {margin-left:1130px;}
  .qti-layout-offset10 {margin-left:1030px;}
  .qti-layout-offset9  {margin-left:930px;}
  .qti-layout-offset8  {margin-left:830px;}
  .qti-layout-offset7  {margin-left:730px;}
  .qti-layout-offset6  {margin-left:630px;}
  .qti-layout-offset5  {margin-left:530px;}
  .qti-layout-offset4  {margin-left:430px;}
  .qti-layout-offset3  {margin-left:330px;}
  .qti-layout-offset2  {margin-left:230px;}
  .qti-layout-offset1  {margin-left:130px;}
  
  .container-fluid .qti-layout-row {width:100%;*zoom:1;}
  .container-fluid .qti-layout-row:before, .container-fluid .qti-layout-row:after {display:table;content:"";line-height:0;}
  .container-fluid .qti-layout-row:after {clear:both;}
  .container-fluid .qti-layout-row [class*="qti-layout-col"] {display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;} 
  .container-fluid .qti-layout-row [class*="qti-layout-col"]:first-child {margin-left:0;}
  
  .container-fluid .qti-layout-row .qti-layout-col12 {width:100%;*width:99.94680851063829%;} 
  .container-fluid .qti-layout-row .qti-layout-col11 {width:91.45299145299145%;*width:91.39979996362975%;} 
  .container-fluid .qti-layout-row .qti-layout-col10 {width:82.90598290598291%;*width:82.8527914166212%;} 
  .container-fluid .qti-layout-row .qti-layout-col9  {width:74.35897435897436%;*width:74.30578286961266%;} 
  .container-fluid .qti-layout-row .qti-layout-col8  {width:65.81196581196582%;*width:65.75877432260411%;} 
  .container-fluid .qti-layout-row .qti-layout-col7  {width:57.26495726495726%;*width:57.21176577559556%;} 
  .container-fluid .qti-layout-row .qti-layout-col6  {width:48.717948717948715%;*width:48.664757228587014%;} 
  .container-fluid .qti-layout-row .qti-layout-col5  {width:40.17094017094017%;*width:40.11774868157847%;} 
  .container-fluid .qti-layout-row .qti-layout-col4  {width:31.623931623931625%;*width:31.570740134569924%;}
  .container-fluid .qti-layout-row .qti-layout-col3  {width:23.076923076923077%;*width:23.023731587561375%;} 
  .container-fluid .qti-layout-row .qti-layout-col2  {width:14.52991452991453%;*width:14.476723040552828%;} 
  .container-fluid .qti-layout-row .qti-layout-col1  {width:5.982905982905983%;*width:5.929714493544281%;} 

  .container-fluid .qti-layout-row .qti-layout-offset11 {margin-left:96.58119658119658%;*margin-left:96.47481360247316%;} 
  .container-fluid .qti-layout-row .qti-layout-offset11:first-child {margin-left:94.01709401709402%;*margin-left:93.91071103837061%;} 
  .container-fluid .qti-layout-row .qti-layout-offset10 {margin-left:88.03418803418803%;*margin-left:87.92780505546462%;} 
  .container-fluid .qti-layout-row .qti-layout-offset10:first-child {margin-left:85.47008547008548%;*margin-left:85.36370249136206%;} 
  .container-fluid .qti-layout-row .qti-layout-offset9  {margin-left:79.48717948717949%;*margin-left:79.38079650845607%;} 
  .container-fluid .qti-layout-row .qti-layout-offset9:first-child  {margin-left:76.92307692307693%;*margin-left:76.81669394435352%;} 
  .container-fluid .qti-layout-row .qti-layout-offset8  {margin-left:70.94017094017094%;*margin-left:70.83378796144753%;} 
  .container-fluid .qti-layout-row .qti-layout-offset8:first-child  {margin-left:68.37606837606839%;*margin-left:68.26968539734497%;} 
  .container-fluid .qti-layout-row .qti-layout-offset7  {margin-left:62.393162393162385%;*margin-left:62.28677941443899%;} 
  .container-fluid .qti-layout-row .qti-layout-offset7:first-child  {margin-left:59.82905982905982%;*margin-left:59.72267685033642%;} 
  .container-fluid .qti-layout-row .qti-layout-offset6  {margin-left:53.84615384615384%;*margin-left:53.739770867430444%;} 
  .container-fluid .qti-layout-row .qti-layout-offset6:first-child  {margin-left:51.28205128205128%;*margin-left:51.175668303327875%;} 
  .container-fluid .qti-layout-row .qti-layout-offset5  {margin-left:45.299145299145295%;*margin-left:45.1927623204219%;} 
  .container-fluid .qti-layout-row .qti-layout-offset5:first-child  {margin-left:42.73504273504273%;*margin-left:42.62865975631933%;} 
  .container-fluid .qti-layout-row .qti-layout-offset4  {margin-left:36.75213675213675%;*margin-left:36.645753773413354%;} 
  .container-fluid .qti-layout-row .qti-layout-offset4:first-child  {margin-left:34.18803418803419%;*margin-left:34.081651209310785%;} 
  .container-fluid .qti-layout-row .qti-layout-offset3  {margin-left:28.205128205128204%;*margin-left:28.0987452264048%;} 
  .container-fluid .qti-layout-row .qti-layout-offset3:first-child  {margin-left:25.641025641025642%;*margin-left:25.53464266230224%;} 
  .container-fluid .qti-layout-row .qti-layout-offset2  {margin-left:19.65811965811966%;*margin-left:19.551736679396257%;} 
  .container-fluid .qti-layout-row .qti-layout-offset2:first-child  {margin-left:17.094017094017094%;*margin-left:16.98763411529369%;} 
  .container-fluid .qti-layout-row .qti-layout-offset1  {margin-left:11.11111111111111%;*margin-left:11.004728132387708%;} 
  .container-fluid .qti-layout-row .qti-layout-offset1:first-child  {margin-left:8.547008547008547%;*margin-left:8.440625568285142%;}
}

2.12 Other QTI 3 Presentation Utilities

.qti-bordered {
  border: 1px solid var(--table-border-color);
}

.qti-underline {
  text-decoration: underline;
  text-decoration-color: var(--foreground);
}

.qti-italic {
  font-style: italic;
}

.qti-well {
  min-height:20px;
  padding:19px;
  margin-bottom:20px;
  background-color: var(--well-bg);
  border: var(--well-border);
  border-radius:4px;box-shadow: var(--well-box-shadow);
}

2.13 Writing Mode Classes


/* The writing-mode CSS property sets whether lines of text 
   are laid out horizontally or vertically, as well as the 
   direction in which blocks progress.*/

/* Set writing-mode to vertical-rl 
   Typical for CJK vertical text */
.qti-writing-mode-vertical-rl {
    writing-mode: vertical-rl;
}

/* Set writing-mode to vertical-lr
   Typical for Mongolian vertical text  */
.qti-writing-mode-vertical-lr {
    writing-mode: vertical-lr;
}

/* Set writing-mode to horizontal-tb 
   Browser default */
.qti-writing-mode-horizontal-tb {
    writing-mode: horizontal-tb;
}

2.14 Float Classes


/* The float CSS property places an element on the left 
  or right side of its container, allowing text and inline
  elements to wrap around it. 
  The element is removed from the normal flow of the page,
  though still remaining a part of the flow. */

/* Float an element left */
.qti-float-left {
    float: left;
}

/* Float an element right */
.qti-float-right {
    float: right;
}

/* Remove a float */
.qti-float-none {
    float: none;
}

/* Clearfix Hack to apply to a container of 
   floated content that overflows the container.*/
.qti-float-clearfix::after {
    content: "";
    clear: both;
    display: table;
}


.qti-float-clear-left
.qti-float-clear-right
.qti-float-clear-both

2.15 Text Orientation Classes


/* By default, when writing mode is vertical, Latin characters 
   are rendered sideways. To override this, the text-orientation
   CSS property can be set to “upright”.*/
  
/* Set text-orientation to upright */
.qti-text-orientation-upright {
    text-orientation: upright;
}

2.16 Text Combine Upright Classes

There are conditions in vertical writing where Latin characters are presented in a combined upright orientation; e.g., the “5012” and the “GI” characters. For this, use text-combine-upright: all.


    /* Set text-combine-upright to all */
.qti-text-combine-upright-all {
    text-combine-upright: all;
}

A. List of Contributors

The following individuals contributed to the development of this document:

Name Organization Role
Arjan Aarnink Cito  
Shiva Bojjawar McGraw-Hill Education  
Paul Grudnitski amp-up.io Editor
Mark Hakkinen ETS Co-chair
Susan Haught 1EdTech  
Thomas Hoffmann 1EdTech Editor
Mark Molenaar Apenutmize  
Padraig O'hiceadha Houghton Mifflin Harcourt Co-chair
Mike Powell Pearson Co-chair
Julien Sebire Open Assessment Technologies  
Colin Smythe 1EdTech Editor
Wyatt Vanderstucken ETS  

1EdTech™ Consortium, Inc. ("1EdTech") is publishing the information contained in this document ("Specification") for purposes of scientific, experimental, and scholarly collaboration only.

1EdTech makes no warranty or representation regarding the accuracy or completeness of the Specification.

This material is provided on an "As Is" and "As Available" basis.

The Specification is at all times subject to change and revision without notice.

It is your sole responsibility to evaluate the usefulness, accuracy, and completeness of the Specification as it relates to you.

1EdTech would appreciate receiving your comments and suggestions.

Please contact 1EdTech through our website at www.1edtech.org.

Please refer to Document Name: 1EdTech QTI 3 Standardized Shared Vocabulary and CSS Classes 3.0

Date: 10 November 2023