Add QTI match interaction editor by rtibblesbot · Pull Request #6168 · learningequality/studio

rtibblesbot · 2026-09-24T16:17:28Z

Summary

Adds a QTI match editor: each row takes one or more answers from a shared shuffled pool, plus optional distractors.
Extracts the associate editor's response pool and distractor list into shared ShuffledResponsePool and EditableChipList, used by both editors.

References

Closes #6166. Builds on #6113.

Reviewer guidance

Open questions:

Non-two-set matches show "could not be loaded", not "cannot be edited here". Right?
Blank row answers drop on close. Keep them with an error instead?
Designs returned 403; layout follows the issue text. Matches?

axe: only the existing AddListItemButton contrast violation.

QA steps

Setup: pnpm devsetup, pnpm devserver, sign in as admin, open /channels/<channel-id>/#/qti-demo on an editable channel, click Question 8's (Match) pencil.

Distractors: "Add distractor", type, "Save": it becomes a chip. Add another, type, click its close: the draft is gone and focus is on "Add distractor". Open a distractor, clear it, click away: it drops out. Retype a distractor as "Mammal": no duplicate error while open; on close, it and the matching answers show "Distractors cannot repeat another item".

Evidence

Match distractors

Step	Screenshot
Draft open with Save and close
Existing distractor cleared, open
After: duplicate flagged once the chip closes

Authoring a new match item

Step	Screenshot
New match question
Empty interaction
Answer draft open
Blank answer placeholder

match-author-from-empty.webm

Editing and deleting answers

Step	Screenshot
Initial answers
Answer chip open
Blank last answer shows placeholder

match-edit-delete-answers.webm

Switching the open editor

Step	Screenshot
Row 3 answer draft open
Distractor open; draft committed
Row 3 chip open after switches

s3-switch-open-editor.webm

Validation errors

Step	Screenshot
Missing question prompt
Blank row prompt
Duplicate row prompts
Duplicate answer in a row
Distractor repeats an answer
Distractor repeats a distractor
Too few rows

s5-validation-trigger-clear.webm

Keyboard row deletion

Step	Screenshot
Row 2 delete focused
Focus moves to the next row
One row left: Add row focused

match-keyboard-row-delete.webm

Leaving edit mode discards drafts

Step	Screenshot
Distractor draft open
After close: distractor draft gone
Row 2 answer draft open
After close: answer draft gone

s7-leave-edit-discards-drafts.webm

View mode

Step	Screenshot
Show answers off
Show answers on
Stacked, answers off
Stacked, answers on

Responsive layout

Step	Screenshot
Large: open row stays side by side
Medium: all closed
Medium: open row stacks
Small: closed
Small: chip open
View at 420px

Associate regression

Step	Screenshot
Distractor draft open
Distractor chip open
Distractor cleared, open
Blank pair item
Focus after deleting pair 2
One pair left

s9-assoc-add-edit-blank-delete.webm

AI usage

Used Claude Code to plan and implement the shared components, the match parser, validator and editor, following the associate plugin. Verified with the QTIEditor Jest suites, pre-commit, and headless-browser QA with keyboard walkthroughs and axe.

🤖 Generated with Claude Code

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Ran pre-flight CI checks (lint, format, tests) and verified all pass
Rebased onto the target branch and resolved any conflicts
Reorganized commit history into clean, logical commits
Audited the diff to ensure only issue-relevant files are changed
Built PR body from the repository's PR template with evidence blocks

	🟡 Waiting for feedback Last updated: 2026-09-25 23:56 UTC

AlexVelezLl

Good initial implementation!

AlexVelezLl · 2026-09-25T17:00:52Z

+      );
+
+      // Where focus goes once nothing nearer is left to take it.
+      function addControl() {


should this be something like getAddControl instead?

Renamed to getAddControl in 8e0068c81. I searched every function the PR adds that returns a value: openMatchIndex, rowDraft, borderStyle and errorsWith in the match editor matched. The first two are gone with the draft refactor, and the others are now getBorderStyle / getErrorsWith.

AlexVelezLl · 2026-09-25T17:02:24Z

+      // An open chip's region is suppressed and stops no click, so a click into
+      // its editor reaches this box too — and must not start a draft.
+      function onRegionClick(event) {
+        if (event?.target?.closest('.chip-item')) return;
+        onAdd();
+      }


Should we implement a click.stop within the ClickableRegion instead of this hard-coded check?

The .closest check is gone (8e0068c81). The region is now suppressed while any of its editors is open, so a click inside an open chip never reaches an active region. I didn't put click.stop in ClickableRegion itself: a suppressed region that stopped clicks would swallow the document click TipTap closes on. The distractor box, which is always suppressed, would then stop closing other editors.

One case needed a stop anyway. With a native click, closing an editor re-renders before the click bubbles on, which unmounts the wrapper's @click.stop. Delete, Save and discard reopened a draft that way in the browser, so those three handlers now call stopPropagation() themselves.

AlexVelezLl · 2026-09-25T17:03:39Z

+        draftKey.value += 1;
+        emit('open-draft');


Question: Is the content of the old draft reliably saved before remounting? Or is it rather an indirect, flaky behavior that may break under certain circumstances?

Reliably, but through the blur. TipTap emits update on blur, and pressing add blurs the editor on mousedown (or on focus-out for the keyboard), so the content is committed before the click commits the draft. The list now keeps the draft's last-written content itself rather than reading a prop. In region mode the second press can't happen: the region is off while a draft is open.

AlexVelezLl · 2026-09-25T17:05:41Z

I don't think this is a good abstraction, let's try to use only the refs directly wherever we need them.

Removed (8e0068c81). All 3 users now focus through refs after nextTick: EditableChipList, the associate pair rows and the match rows. Each focuses deleteButtons[min(index, last)], or the add control once nothing removable is left.

AlexVelezLl · 2026-09-25T17:29:35Z

+    // An empty list still needs a target to click.
+    &.is-region {
+      min-height: 64px;
+      cursor: text;
+
+      > ::v-deep .overlay-button {
+        cursor: text;
+      }
+    }


Could we create a new prop for this instead?

Added ClickableRegion's textCursor prop: text cursor, no hover tint (8e0068c81). The v-deep on .overlay-button is gone.

AlexVelezLl · 2026-09-25T20:42:15Z

+            <EditableChipList
+              class="row-answers"
+              addMode="region"
+              :chips="row.matches"
+              :openIndex="openMatchIndex(index)"
+              :draft="rowDraft(index)"
+              :addLabel="addMatchLabel$({ number: index + 1 })"
+              :listLabel="rowAnswersLabel$({ number: index + 1 })"
+              :chipLabel="position => editMatchLabel$({ number: index + 1, position })"
+              :deleteLabel="position => deleteMatchBtn$({ number: index + 1, position })"
+              :errorMessages="matchErrorMessages[index]"
+              @open-chip="position => openMatch(index, position)"
+              @update-chip="(position, html) => setMatchContent(index, position, html)"
+              @remove-chip="position => onRemoveMatch(index, position)"
+              @open-draft="openDraft(index)"
+              @update-draft="setDraftContent"
+              @discard-draft="discardDraft"
+              @close="closeOpenTarget"
+            />


For region mode, could we suspend the background color change on hover and only have the text cursor? Also, let's disable the clickable region if a draft is already open. Also, let's please add a save button for both modes, and only add a new chip when pressed. If the editor is closed and the save button was not pressed, let's add the content anyway. The save closes the open TipTapEditor.

Done (8e0068c81, 22d646ff2):

Region mode: text cursor, no hover tint.

The region is off while any of its editors is open.

The draft has a Save button in both modes. Save commits and closes, and closing without saving still commits.

AlexVelezLl · 2026-09-25T20:47:43Z

+              @discard-draft="discardDraft"
+              @close="closeOpenTarget"
+            />
+


Also, let's not allow deleting the last answer; we should always have at least one. If only one is left, the remove button should be disabled.

Done (22d646ff2). EditableChipList takes minChips, and answer lists pass 1: the remove buttons are disabled at the minimum, and a blank last answer is kept on close rather than dropped. removeMatch also refuses to remove a row's last answer.

AlexVelezLl · 2026-09-25T20:49:57Z

+              </div>
+            </ClickableRegion>
+
+            <EditableChipList


If a distractor is repeating an answer, the answer chip should also get flagged as an error, similar to how we do for the associate interaction.

Done (22d646ff2): an answer whose content a distractor repeats shows "Distractors cannot repeat another item" with a red border.

AlexVelezLl · 2026-09-25T20:51:34Z

+
+            <EditableChipList
+              class="row-answers"
+              addMode="region"


If a chip answer is blank, let's have a placeholder text in it.

Done (22d646ff2): a blank closed answer shows "Enter an answer" through the new placeholder prop on EditableChipList.

AlexVelezLl · 2026-09-25T20:58:49Z

+              <li
+                v-for="(choice, position) in row.matches"
+                :key="`${choice.id}-${position}`"
+                class="chip is-correct"


Let's not use the green background for correct answers listed in the answers section, only in the pool, if the associate. Just like the associate interaction does.

Done (22d646ff2): the row answers use the neutral border, and green is left to the pool.

rtibblesbot · 2026-09-25T21:48:13Z

Match editor after the review changes.

View mode, answers shown: two columns with headers; green only in the pool.

Edit mode: headers line up with the rows; a row's only answer has its delete disabled.

Answer draft with Save; the region is off while it is open.

Small screen: each stacked row labels its prompt and answers.

Save adds the chip; deleting answers stops at the last one:

match-save-delete.webm

The first three are from the QA server. It built before the last stopPropagation fix, which does not change rendering.
The small-screen still and the video come from a local webpack build of the demo page, loaded in headless Chromium, because the QA server builds once per session.
axe on the edit view, with a draft open, reports only the existing AddListItemButton contrast issue.

EditableChipList adds a region add mode, reachable by keyboard through ClickableRegion's overlay button. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

rtibblesbot force-pushed the issue-6166-0a33c2 branch 3 times, most recently from 26e289d to 26822e8 Compare September 24, 2026 17:05

rtibblesbot marked this pull request as ready for review September 24, 2026 17:34

rtibblesbot requested review from a team and marcellamaki September 24, 2026 17:34

rtibblesbot force-pushed the issue-6166-0a33c2 branch from 26822e8 to 94b8038 Compare September 24, 2026 17:42

AlexVelezLl requested changes Sep 25, 2026

View reviewed changes

rtibblesbot force-pushed the issue-6166-0a33c2 branch from 94b8038 to ae35f88 Compare September 25, 2026 21:47

rtibbles assigned AlexVelezLl Sep 25, 2026

rtibblesbot and others added 3 commits September 25, 2026 16:09

Extract ShuffledResponsePool and EditableChipList from associate editor

164fa19

EditableChipList adds a region add mode, reachable by keyboard through ClickableRegion's overlay button. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Add QTI match interaction editor

ff1ffd3

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Add match item to QTI demo page

5859ac6

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

rtibblesbot force-pushed the issue-6166-0a33c2 branch from ae35f88 to 5859ac6 Compare September 25, 2026 23:54

Uh oh!

Conversation

rtibblesbot commented Sep 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

References

Reviewer guidance

QA steps

Evidence

Match distractors

Authoring a new match item

Editing and deleting answers

Switching the open editor

Validation errors

Keyboard row deletion

Leaving edit mode discards drafts

View mode

Responsive layout

Associate regression

AI usage

🟡 Waiting for feedback

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rtibblesbot commented Sep 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rtibblesbot commented Sep 24, 2026 •

edited

Loading