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

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

Summary

Adds a QTI match editor: rows take answers from a shared shuffled pool, plus distractors.
Extracts ShuffledResponsePool and EditableChipList from the associate editor; both editors use them.
Adds a padding prop to TipTapEditor and a public focus() to ClickableRegion.

References

Closes #6166. Builds on #6113.

Reviewer guidance

≠2 match sets show "could not be loaded", not "cannot be edited here"?
Blank row answers drop on close; keep them?
Designs returned 403; layout follows the issue text.

QA steps

Open /channels/<channel-id>/#/qti-demo; Q7 is Associate, Q8 Match.

Q8: switch between prompt, row, answer and distractor editors; text persists.
Q8: add a row and blank answers; blank errors show and clear on typing.
Q8: repeat an answer and a distractor; duplicates are flagged.
Q8: delete a row with an open editor; focus moves to the next delete button.
Q7: distractors behave as on unstable.

Evidence

Switching editors

match-editor-switching.webm

Row answers

match-row-answers-placeholder-errors.webm

Duplicates

Step	Screenshot
"Reptile" flagged

match-duplicate-errors-refresh-on-open.webm

Distinct distractors

match-distinct-distractors-no-errors.webm

Row removal

Step	Screenshot
Focus on Whale's delete

match-delete-middle-row-open-editor.webm

Associate distractors

associate-distractor-chips.webm

More captures (19)

Step	Screenshot
Row 1 prompt open
Prompt open, edits kept
New row blank answer
Blank answer open
Typed answer
In-row duplicates
Distractor open
Mixed duplicates
Duplicate distractors
Chips deleted
Row deleted
Row 2 prompt open
Row 2 answers open
Focus on Add row
Associate initial
Associate blank open
Associate duplicates
Associate pair repeat
Associate duplicate deleted

AI usage

Claude Code planned and implemented this; verified with Jest, pre-commit, and browser QA with 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-27 02:13 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 force-pushed the issue-6166-0a33c2 branch from ae35f88 to 5859ac6 Compare September 25, 2026 23:54

rtibblesbot and others added 3 commits September 26, 2026 18:18

Extract ShuffledResponsePool and EditableChipList from associate editor

b7d68d2

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

ec10c65

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

Add match item to QTI demo page

202802b

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

rtibblesbot force-pushed the issue-6166-0a33c2 branch from 5859ac6 to 202802b Compare September 27, 2026 01:44

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

Switching editors

Row answers

Duplicates

Distinct distractors

Row removal

Associate distractors

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