Skip to content

Inline choice interaction

3.2.8 Inline Choice Interaction — an inline interaction that presents the candidate with a set of choices, each an answer option (usually text). The candidate selects one.

Also see the attributes shared by every interaction on the overview page. This interaction doesn’t use ChoicesMixin — it implements its own popover-based listbox (role="listbox" on the host, native popover API for the dropdown menu) rather than radio/checkbox semantics.

Example

The Wars of the Roses were fought between the houses of Gloucester Lancaster York and York.

<p>
The Wars of the Roses were fought between the houses of
<qti-inline-choice-interaction response-identifier="RESPONSE">
<qti-inline-choice identifier="G">Gloucester</qti-inline-choice>
<qti-inline-choice identifier="L">Lancaster</qti-inline-choice>
<qti-inline-choice identifier="Y">York</qti-inline-choice>
</qti-inline-choice-interaction>
and York.
</p>

qti-inline-choice-interaction

The first entry in the dropdown is always a “select” prompt, its text taken from data-prompt (dataset), falling back to configContext.inlineChoicePrompt, then 'select'.

show-correct-response renders a [part="correct-option"] span inline next to the correct choice’s content, rather than annotating a specific option row.

qti-inline-choice

AttributeNotes
identifierThe option’s identifier — its slotted content (text, or an <img>) becomes the visible label.

Dispatches qti-inline-choice-register on connect and qti-inline-choice-select (detail { identifier }) on click; the interaction listens for both to build and update the dropdown.