1EdTech QTI 3 Standardized Shared Vocabulary and CSS Classes
Spec Version 3.0
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
|
Keyword Emphasis in an 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. |
|
Example: qti-hidden
Example: span's that are qti-visually-hidden and aria-hidden together
|
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.
|
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 |
|
<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 |
|
<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.
![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.](/sites/default/files/specs/images/qti/3p0/impl3image106_0.png)
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
|
![]() |
Example: Item Body with two layout rows, each row with different column groupings
|
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. ![]() |
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.
![]() |
Example: Item Body with one layout row, and two three-column (qti-layout-col3) groupings, the first of which is offset by three columns
|
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. ![]() |
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.](/sites/default/files/specs/images/qti/3p0/QTI3_SV_displayInlineBlock.png)
|
1.1.4 Alignment
1.1.4.1 Classes = qti-align-left | -right | -center
Semantics | Example CSS Definition |
---|---|
Horizontal alignment, left, center, and right. |
|
|
|
![]() |
1.1.4.2 Classes = qti-valign-top | -middle | -baseline | -bottom
Semantics | Example CSS Definition |
---|---|
Vertical alignment, top, middle, baseline, and bottom. |
|
|
|
![]() |
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. |
|
|
|
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.
![]() |
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. |
|
Example: qti-hidden
Example: span's that are qti-visually-hidden and aria-hidden together
|
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. |
|
|
|
![]() ![]() |
1.1.7 List Styles
1.1.7.1 Default Styling
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.2 .qti-list-style-type-none
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.4 .qti-list-style-type-armenian
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.5 .qti-list-style-type-bengali
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.6 .qti-list-style-type-cambodian
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.7 .qti-list-style-type-circle
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.11 .qti-list-style-type-decimal
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.13 .qti-list-style-type-devanagari
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.14 .qti-list-style-type-disc
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.15 .qti-list-style-type-georgian
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.16 .qti-list-style-type-gujarati
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.17 .qti-list-style-type-gurmukhi
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.18 .qti-list-style-type-hebrew
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.19 .qti-list-style-type-hiragana
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.21 .qti-list-style-type-kannada
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.22 .qti-list-style-type-katakana
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.24 .qti-list-style-type-khmer
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.28 .qti-list-style-type-lao
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.34 .qti-list-style-type-malayalam
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.35 .qti-list-style-type-mongolian
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.36 .qti-list-style-type-myanmar
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.37 .qti-list-style-type-oriya
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.38 .qti-list-style-type-persian
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.41 .qti-list-style-type-square
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.42 .qti-list-style-type-telugu
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.43 .qti-list-style-type-thai
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
ul
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
1.1.7.44 .qti-list-style-type-tibetan
ol
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- Fourth
- First
- Second
- Third
- 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-suffix-none qti-orientation-horizontal qti-input-control-hidden qti-choices-stacking-1 |
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 |
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-input-width-1 |
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 |
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 qti-unselected-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 Level 3 Conformance(when implementing min/max) : qti-choices-top |
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:
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"
|
![]() |
Example: Demonstrates class="qti-labels-decimal"
|
![]() |
Example: Demonstrates class="qti-labels-lower-alpha"
|
![]() |
Example: Demonstrates class="qti-labels-upper-alpha"
|
![]() |
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"
|
![]() |
Example: Demonstrates class="qti-labels-suffix-period"
|
![]() |
Example: Demonstrates class="qti-labels-suffix-parenthesis"
|
![]() |
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"
|
![]() |
Example: Demonstrates class="qti-labels-decimal qti-labels-suffix-period"
|
![]() |
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"
|
![]() |
Example: Demonstrates class="qti-orientation-horizontal"
|
![]() |
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"
|
![]() |
Example: Demonstrates class="qti-choices-stacking-2"
|
![]() |
Example: Demonstrates class="qti-choices-stacking-3"
|
![]() |
Example: Demonstrates class="qti-choices-stacking-4"
|
![]() |
Example: Demonstrates class="qti-choices-stacking-5"
|
![]() |
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"
|
![]() |
Example: Demonstrates class="qti-choices-stacking-3 qti-orientation-vertical"
|
![]() |
Example: Demonstrates class="qti-choices-stacking-2 qti-orientation-vertical"
|
![]() |
Example: Demonstrates class="qti-choices-stacking-2 qti-orientation-horizontal"
|
![]() |
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"
|
![]() ![]() 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"
|
![]() |
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](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_writing-orientation-vertical-rl.png)
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.](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_writing-orientation-vertical-rl_stacked3.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_labels-cjk-ideographic.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_controlHidden_stack2_labels-cjk.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_defaultOrientationVertical.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_rotate90_vertical.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_defaultOrientationHorizontal.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_Choice_rotate90_horizontal.png)
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).
|
![]() ![]() |
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
|
![]() |
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](/sites/default/files/specs/images/qti/3p0/Vertical_TextEntry_Vertical.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_TextEntry_verticalWithVariousInputWidths.png)
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:
- Interaction height
- Character counter behavior
- Plain or Rich Text options
- A custom pattern-mask message
- 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"
|
![]() |
Example: Demonstrates format="xhtml" and class="qti-height-lines-3"
|
![]() |
Example: Demonstrates format="plain" and class="qti-height-lines-6"
|
![]() |
Example: Demonstrates format="xhtml" and class="qti-height-lines-6"
|
![]() |
Example: Demonstrates format="plain" and class="qti-height-lines-15"
|
![]() |
Example: Demonstrates format="xhtml" and class="qti-height-lines-15"
|
![]() |
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
|
![]() |
Example: Demonstrates qti-counter-up
|
![]() |
Example: Demonstrates qti-counter-up with format="xhtml"
|
![]() |
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
|
![]() |
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_vertical.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_vertical.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_vertical_6lines.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_15lines.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_3lines_200length_counters.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_3lines_xhtml.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_6lines_xhtml.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_15lines_xhtml.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_ExtText_3lines_xhtml_counters.png)
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:
- Positioning of the Gap Choices container with respect to the passage of text containing the Gaps.
- Gap Choices container width.
- Gap element widths.
- 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"
|
![]() |
Example: Demonstrates class="qti-choices-bottom"
|
![]() |
Example: Demonstrates class="qti-choices-left"
|
![]() |
Example: Demonstrates class="qti-choices-right"
|
![]() |
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"
|
![]() |
Example: Demonstrates qti-choices-left and data-choices-container-width="100"
|
![]() |
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).
|
![]()
![]() |
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:
- Hotspot Selections theming.
- 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"
|
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. ![]() ![]() |
Example: Demonstrates Hotspot selections with class= "
qti-selections-light "
and class= "
qti-selections-dark "
, and "
qti-unselected-hidden "
in both.
|
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). ![]() ![]()
|
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:
- Hiding the input control of the Hot Text choices.
- 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"
|
![]() ![]() |
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.
The following visual examples are suggested renderings for the various states representing the choices without focus or selection, or with focus and/or selection. The exact rendering may vary across delivery applications.
Text where the available choices have no visual indication of the possible choices, and none of the possible choices have beeen selected or are in focus:
Text where one of the possible choices is in focus (via mouse hover or keyboard focus):
Text where one of the possible choices has been selected as the answer:
Text where one of the possible choices has been selected as the answer and still has programmatic focus (mouse hover or keyboard focus):
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).
|
![]() |
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
|
![]() |
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](/sites/default/files/specs/images/qti/3p0/Vertical_InlineChoice_choicesRightToLeft.png)
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](/sites/default/files/specs/images/qti/3p0/Vertical_InlineChoice_variousInputWidths.png)
1.2.8 Match Interaction
The shared vocabulary for the Match Interaction is intended to provide more precision when describing:
- Non-tabular Match Interaction positioning of the first Simple Match Set choices with respect to the second Simple Match Set choices.
- Tabular Match Interaction styling.
- 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"
|
![]() |
Example: Demonstrates class="qti-choices-bottom"
|
![]() |
Example: Demonstrates class="qti-choices-left"
|
![]() |
Example: Demonstrates class="qti-choices-right"
|
![]() |
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"
|
![]() |
Example: Demonstrates class="qti-match-tabular qti-header-hidden"
|
![]() |
Example: Demonstrates class="qti-match-tabular" data-first-column-header="Characters"
|
![]() |
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
|
![]() |
Example: Demonstrates qti-choices-top and qti-labels-decimal
|
![]() |
Example: Demonstrates qti-choices-top and qti-labels-lower-alpha
|
![]() |
Example: Demonstrates qti-choices-top and qti-labels-upper-alpha
|
![]() |
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
|
![]() |
Example: Demonstrates qti-choices-left and qti-labels-decimal and qti-labels-suffix-period
|
![]() |
Example: Demonstrates qti-choices-left and qti-labels-decimal and qti-labels-suffix-parenthesis
|
![]() |
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"
|
![]() |
Example: Demonstrates class="qti-choices-bottom"
|
![]() |
Example: Demonstrates class="qti-choices-left"
|
![]() |
Example: Demonstrates class="qti-choices-right"
|
![]() |
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:
- Positioning of the Gap Choices container with respect to the image containing the hotspots.
- Gap Choices container width.
- Associable Hotspot Selections theming.
- 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"
|
![]() |
Example: Demonstrates class="qti-choices-bottom"
|
![]() |
Example: Demonstrates class="qti-choices-left"
|
![]() |
Example: Demonstrates class="qti-choices-right"
|
![]() |
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"
|
![]() |
Example: Demonstrates qti-choices-left and data-choices-container-width="100"
|
![]() |
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"
|
![]() |
Example: Demonstrates Associable Hotspot selections with class="qti-selections-dark"
|
![]() |
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:
- Display
- Special Flex Styles
- Margin
- Padding
- Horizontal Alignment Styles
- Vertical Alignment Styles
- Height
- Width
- Text-Indent
- List Styles
- Layout
- 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 |
![](https://www.imsglobal.org/sites/default/files/specs/images/qti/3p0/hottext_unselected_hidden_focus.png)
![](https://www.imsglobal.org/sites/default/files/specs/images/qti/3p0/hottext_unselected_hidden_focusAndSelected.png)
![](https://www.imsglobal.org/sites/default/files/specs/images/qti/3p0/hottext_unselected_hidden_nothing.png)
![](https://www.imsglobal.org/sites/default/files/specs/images/qti/3p0/hottext_unselected_hidden_selected.png)