Skip to content
QTI Components

View helpers

Views

QTI defines several audiences for the same item content — author, candidate, proctor, scorer, testConstructor, tutor — controlled via sessionContext.view. Elements tagged with a view attribute inside the loaded test are shown/hidden by toggling a .show class whenever the view changes (handled by TestViewMixin on <qti-test>); switching to 'scorer' also calls showCorrectResponse(true) on the active item.

  • <test-view> — a <select> dropdown for choosing the current view. label sets the accompanying <label> text (default "view"); view-options restricts the offered choices to a comma-separated subset of the six views above. Dispatches on-test-switch-view on change.
  • <test-view-toggle> — a simpler candidate/scorer toggle button. Content is rendered from a <template> child (Heximal templates), receiving { view }; clicking cycles between 'candidate' and 'scorer'.

On a standalone item

An item delivered on its own has no session to carry a view, so <qti-item> takes one directly (ItemViewMixin). Everything else matches: [view] content inside the item is toggled with .show, and with @qti-components/corrections loaded, 'scorer' also calls showCorrectResponse(true).

<qti-item view="scorer">
  <item-container item-url="./path/to/item.xml"></item-container>
</qti-item>

This is what makes a qti-rubric-block view="scorer" — the answer model a marker reads — visible outside a test. The item stylesheet hides every [view] element, so before the mixin a rubric block in a standalone item could not be shown at all. A child control switches the view by dispatching item-switch-view with the view as its detail; there is no item-level equivalent of <test-view> yet.

Debug/print helpers

  • <test-print-context> — dumps the full computedContext as formatted JSON. Useful while wiring up a custom UI to see exactly what shape of data is available.
  • <test-print-item-variables> — renders the active item’s response and outcome variables as two readable tables (identifier, value, cardinality, base type, correct response/mapping).

Text-to-speech: <test-item-to-speech>

A controller + @lit/context provider for reading an item’s body aloud via the Web Speech API. It collects block-level text elements (p, h1–h6, li, blockquote, figcaption, prompts and choices) from the item’s qti-item-body, skipping anything that is not rendered (hidden feedback, a scorer-only rubric block), and exposes a ttsContext (state: 'idle' | 'playing' | 'paused', currentElementIndex, elementCount, plus play/pause/resume/stop/prevElement/nextElement) for child controls to consume.

Which item it reads depends on where the player is placed:

  • Inside a qti-assessment-item-ref — e.g. in a <template item-ref> on <qti-test>, so every item gets its own player: it reads that item, and ignores navigation.
  • Anywhere else — e.g. a toolbar: it follows the navigation cursor and reads the item navItemRefId points at.
<!-- one player per item -->
<qti-test>
  <template item-ref>
    <test-item-to-speech language="nl-NL">
      <test-tts-play></test-tts-play>
      <test-tts-stop></test-tts-stop>
    </test-item-to-speech>
    {{ xmlDoc }}
  </template>
  …
</qti-test>


<!-- one player in the toolbar, following navigation -->
<test-item-to-speech language="nl-NL">
  <test-tts-play></test-tts-play>
  <test-tts-prev></test-tts-prev>
  <test-tts-next></test-tts-next>
  <test-tts-stop></test-tts-stop>
</test-item-to-speech>

The Storybook docs page for test-item-to-speech describes both modes in detail.

Each control draws an icon button with an English accessible name; slotted content replaces the icon, and a slotted <svg> is sized like the default. label (and pause-label on <test-tts-play>) names the button — set it when you slot an icon of your own, which has no text to be named by. The buttons read the qti-theme tokens, with the theme’s defaults as fallbacks, and --test-button-size / --test-tts-icon-size resize them.

Speech stops on navigation (toolbar player) or when the item leaves the page (per-item player). Uses the CSS Custom Highlight API (::highlight()) to mark the current reading element and the word being spoken, and mirrors playback state onto each button’s ElementInternals custom states (:state(idle), :state(playing), :state(paused)) for CSS-only styling.

Other

  • <test-end-attempt> — a plain button that dispatches test-end-attempt on click (see Scoring & State).
  • <qti-test-feedback> — extends the item-level QtiModalFeedback for test-level modal feedback (e.g. an end-of-test message).

Deprecated stamp components

<test-stamp>, <test-paging-buttons-stamp>, and <test-section-buttons-stamp> are all marked @deprecated in source. They predate the <template>-driven pattern (test-scoring-buttons, test-view-toggle) and render item/section lists via a <template> child, iterating computedContext. No direct replacement is documented in source — check with the team before building on these.