Product Issue: Single Choice Interaction

[marcellamaki]

Overview

Learners interacting with QTI assessments that include a single-selection choice interaction see a list of answer choices they can select from, with answer label styles and layout variants (orientation, stacking) rendering correctly according to the QTI content spec. Rendering supports all QTI display variations, including those for QTI assessments created outside of Kolibri Studio.

Description and outcomes

This issue covers the learner-facing rendering of qti-choice-interaction (single selection) in the Kolibri QTI viewer, refining the existing prototype to match the design spec.

• A learner presented with a single-selection choice interaction sees a prompt indicating how many answers to select (e.g. "Choose 1 answer:")
• Each answer choice renders as a full-width clickable row — the entire row is the tap/click target
• Unselected choices display a gray circular indicator alongside the answer label and text
• Selecting a choice highlights the row and fills the circular indicator (blue with white label); selecting a new choice deselects the previously selected one
• All QTI answer label styles render correctly, even those not included in Kolibri Studio QTI editing options

Resources

• Gherkin Scenarios — [link TBD]
• Figma — QTI Choice Interaction designs

Accessibility Requirements

• The choice list exposes role="listbox" with aria-multiselectable="false" for single-selection interactions
• Each choice exposes role="option" with aria-selected reflecting current selection state
• The full choice row is keyboard-navigable; Enter and Space select a choice
• RTL layout is supported

Core interactions

Description	Screenshot
Learner sees a list of answer choices with a prompt indicating how many to select
Learner selects a choice — the full row highlights and the label indicator fills; selecting a new choice deselects the previous
Full list of style permutations available in Figma

Acceptance Criteria

• A learner presented with a single-selection choice interaction sees a prompt indicating how many answers to select (e.g. "Choose 1 answer:")
• Each answer choice renders as a full-width clickable/tappable row
• Selecting a choice highlights it; selecting a different choice deselects the previous one
• All QTI answer label style variants render correctly
• Choices are keyboard-navigable; Enter and Space select a choice
• The interaction is visually correct and usable on desktop, tablet, and mobile screen sizes
• The interaction renders correctly for RTL languages

AI usage

I used Claude Code to help draft this issue from design screenshots and the existing QTI prototype codebase as reference. I reviewed the outcomes, acceptance criteria, and design checklist for accuracy against the Figma designs and edited for correctness.