[QTI] Inline choice interaction editor

[AlexVelezLl]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Build the inline choice interaction editor and turn the question type on. The editor puts together the optional question, the passage editor holding the chips, and the options list for the selected chip. It uses the descriptor from #6180 and the chip from #6181.

Complexity: High
Target branch: unstable

Context

In the design, an inline choice card in edit mode shows, top to bottom:

1. Type: the question type selector, set to "Inline choice"
2. Question (optional): a rich-text prompt field, like the other interactions'
3. Passage editor: helper text "Inline choice widgets can be inserted blank or converted from highlighted text.", then the passage's rich text TipTapEditor, whose toolbar adds Insert as a prominent, labelled button
4. Inline choice answer options: the options of the selected chip. Each row has a drag handle, a correct-answer marker, the option text, move up / move down, and remove; the correct row is highlighted. An Add option button follows the list.

In view mode, the card shows the question and the passage with its chips in place (e.g. 4 revolves, 3 Moon).

The editor core's multi-response support comes from #6179, so this editor receives, and emits, every dropdown's declaration in one interaction block.

The Change

• interactions/inlineChoice/Editor.vue and a useInlineChoiceInteraction composable built on useInteraction, registered in interactions/index.js.
• The descriptor offers Inline choice in the question type selector, and the card's question type label shows it.
• The question field and the passage editor follow the layout above. The passage editor is a rich text editor, like the question field, with Insert added to its toolbar. Options are plain text and use the plain-text toolbar row from QTI Question Authoring in Kolibri Studio #5927 (history, copy / paste without formatting).
• The options list shows the selected chip's options, and edits them through that chip's node, so undo, redo and copy / paste stay consistent with what the list shows:
  • add an option (Add option), edit its text, remove it
  • reorder by drag and drop, or with move up / move down
  • mark exactly one option as correct; marking another moves the mark
• With no chip selected, the options list is not shown. Inserting a chip selects it, so its options appear right away. Removing the selected chip from the passage clears the selection.
• Validation errors from the descriptor are shown next to the option or on the chip they belong to, and mark the question as incomplete, as in the other interactions.
• View mode shows the question and the passage with its chips. Whether the chips show the correct answer follows Show answers, as the other interactions do.

Out of Scope

• The descriptor, parsing and validation logic ([QTI] Inline choice interaction: descriptor, parsing, XML assembly and validation #6180).
• The chip node, node view and Insert action ([QTI] Inline choice chip and Insert action in the passage editor #6181).
• Scoring strategies other than the default in [QTI] Support multiple response declarations per item and generate their response processing #6179.
• Mixing inline choice with another interaction type in the same item.
• Learner preview inside Studio.

Acceptance Criteria

General

• Inline choice is offered in the question type selector, and switching an item to it shows the question field, the passage editor and its helper text
• Selecting a chip shows its options below the passage, and selecting another chip switches the list to that chip's options
• Adding, editing, removing and reordering options updates the selected chip's count and label immediately
• Exactly one option can be marked correct, and the chip's label shows that option's text
• Undoing an options edit in the passage restores the list to match
• Saving and reopening an item restores the question, the passage, every chip's options and each chip's correct answer
• Each validation case from the descriptor is shown on the chip or option it belongs to, and marks the question as incomplete
• View mode shows the question and the passage with its chips, and follows Show answers for the correct answers
• A published item with several chips renders in Kolibri's QTI viewer, and scores a partially correct answer as [QTI] Support multiple response declarations per item and generate their response processing #6179 defines

Accessibility and i18n

• The options list is fully keyboard-operable, including reordering (move up / move down) and marking the correct option
• The correct-answer markers behave as a single-select group, with accessible labels naming each option
• Moving focus from a chip to its options list and back is possible by keyboard
• All new user-visible strings go through qtiEditorStrings
• The editor works in RTL and at mobile widths

Testing

• VTL tests cover selecting a chip, editing its options, marking the correct one, reordering, and removing the selected chip
• A test covers that saving and reopening restores every chip's options and correct answer

Testing

pnpm jest --config jest_config/jest.conf.js contentcuration/contentcuration/frontend/shared/views/QTIEditor

To check end-to-end, publish a channel with an inline choice question and open it in Kolibri's QTI viewer.

References

• [QTI] Inline Choice interaction #6178: Inline Choice interaction (tracking issue)
• QTI Question Authoring in Kolibri Studio #5927: QTI question authoring (toolbar requirements for plain-text content)
• [QTI] Support multiple response declarations per item and generate their response processing #6179: multiple response declarations and response processing
• Figma design spec (WIP): https://www.figma.com/design/B2IVU3zYih4iqhzDaWei73/QTI-work-2023?node-id=2028-12294
• Nearest references: shared/views/QTIEditor/interactions/choice/Editor.vue (options with a correct answer), shared/views/QTIEditor/interactions/ordering/Editor.vue (reordering)
• AGENTS.md / CLAUDE.md for KDS, Composition API, i18n and testing conventions

AI usage

I used Claude Code to draft this issue from the Figma design and the existing interaction editors. I decided how to split the work and reviewed and edited the text.