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 textCursor prop and public focus() to ClickableRegion.
Chip editors save via a Save button under the editor.
Aligns the question type selector with the question label.

References

Closes #6166. Builds on #6113.

Reviewer guidance

Blank row answers drop on close; keep them?
Designs returned 403; layout follows the issue text.
Id uniqueness and directedPair round-trip: match/__tests__/parse.spec.js.

QA steps

Setup: pnpm devsetup, sign in as admin, open /channels/<channel-id>/#/qti-demo on an editable channel. Q7 is Associate, Q8 Match; the pencil edits.

Q8: click a row's answer area, type, Save. Save is right-aligned under the editor; the chip joins the row.
Q8: edit a chip, Save. It commits; saved empty, it drops.
Q8: repeat 1–2 by keyboard. Save takes focus; Enter or Space commits.
Q8, Distractors: add a row answer's duplicate. An error shows until removed.
Q7, Distractors: add and edit one. Save sits under the editor.
Q8: open Response type's (?) info. It describes Match; headers read "Prompts and responses", "Correct matches".
Q8, Eagle: clear Bird, Tab through the row, click the cell's blank space. No overlay tab stop; the blank chip opens. Removing Can fly focuses its replacement.
Q8, Bat: clear Can fly, remove Mammal. The blank chip's edit button takes focus; clicking the cell opens it.
Q8: type "Eagle" into Bat's prompt, then click Eagle, a chip, or Save. The click lands; the error follows. Right-click and touch tap (device emulation) also show it.
Q8: clear Whale's match, Close, toggle Show answers; repeat with Whale alone. Missing-match and row-count errors need answers shown; others don't.
Q7, Q8: toggle view and edit; open and close a chip unchanged. Pool order holds until a chip's text changes.

Evidence

Blank correct-match chip

match-blank-chip-flow.webm

Remove down to the minimum

match-remove-filled-leaves-blank.webm

Validation timing

Step	Screenshot
Duplicate typed: no error yet
Eagle clicked: error shown

View-mode errors

Step	Screenshot
Answers hidden: no missing-match error
Answers shown: missing-match error

Pool order

pool-order-kept-until-text-changes.webm

More captures (26)

Step	Screenshot
Draft Save
Chip joined row
Chip edited
Edit saved
Cleared chip dropped
Draft Save focused
Chip Save focused
Distractor duplicate error
Distractor removed
Associate distractor Save
Type selector open
Match info modal
Match editor copy
Copy at 412px
Cell click reopens blank chip
Eagle blank chip open
Eagle cell click
Bat: Mammal plus blank chip
Focus on blank chip
Chip clicked: error shown
Touch tap: error shown
Answers hidden: blank prompt error
Answers hidden: no row-count error
Answers shown: row-count error
Pools before
Pools reshuffled

Add a correct match:

match-add-correct-match-and-save.webm

Edit and clear a chip:

s2-edit-save-clear.webm

Match distractors:

match-distractor-add-edit-remove.webm

Associate distractors:

associate-distractor-add-edit.webm

AI usage

Claude Code planned and implemented this; verified with Jest, pre-commit, and browser QA with axe.

🤖 Generated with Claude Code

Deviations from the issue spec

Criterion	Why not
≠2 match sets show "cannot be edited here"	They show "could not be loaded"; moving the gate into `parseItem` fixes that.
`EditableChipList` takes `openIndex`/`draft` props	Per review, it owns its draft.

Committed separately: no commit on this branch introduced the lines these changes touch, so they are a new commit rather than folded into the work they amend:

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/Editor.spec.js

@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-29 03:59 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: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.

AlexVelezLl

It's looking better, still I found a couple of details :)

AlexVelezLl · 2026-09-28T14:30:02Z

+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ matchingRowsLabel$() }}


Please match every string on the specs verbatim, don't change them

The spec images are blocked by my network proxy, so I cannot read the design copy. Could you paste the spec strings as text? Current match strings, all in qtiEditorStrings.js:

Matching rows

Learners match responses from a shuffled set to each prompt. A prompt can have more than one answer. Include distractors to increase difficulty.

Prompt / Answers (column headers)

Enter a prompt / Enter an answer (placeholders)

Add row

Save

You need these changes:

"Matching rows" -> "Prompts and responses"

"Learners match responses from a shuffled set to each prompt. A prompt can have more than one answer. Include distractors to increase difficulty." -> "Learners match responses from a shuffled set to a fixed prompt. Include distractors to increase difficulty."

"Prompt" / "Answers" -> "Prompt" / "Correct matches".

"Learners must match each prompt with its correct answers." -> "Learners match each item in one list to one or more correct items in another, where items can have multiple valid matches, and distractors can be included to increase difficulty."

Done: all four strings now match your list verbatim (qtiEditorStrings.js). The mobile row labels use the same column-header string, so they read Correct matches too.

AlexVelezLl · 2026-09-28T14:31:59Z

+          </template>
+
+          <template v-if="mode === 'edit'">
+            <ClickableRegion


If I have a long formula in the prompts, it overflows. Would making this fix within the TipTapEditor be reasonable without risks of breaking other things? If so, it should be there; if not, then please fix this just as the associate interaction manages it.

Fixed in the cards, not TipTap. TipTap already clips its own content; the card around it is display: grid with an implicit track that grows to the formula's width. Fixing it inside TipTap would change how every content-sized chip measures, so the cards now declare grid-template-columns: minmax(0, 1fr).

Searched QTIEditor/ for grid cards wrapping an editor: 2 matched (match .row-prompt, associate .pair-card), both changed. Associate's toolbar was spilling under the next card too.

AlexVelezLl · 2026-09-28T14:33:40Z

+                class="item-card-text"
+                :class="{ 'is-closed': !isRowPromptOpen(index) }"
+              >
+                <TipTapEditor


Could you also add a placeholder for the prompt?

Added: a blank, closed row prompt shows Enter a prompt. That copy is mine until the spec strings arrive (see the strings thread).

Searched match for blank editors with no placeholder: 3 (question prompt, row prompts, distractors). Only row prompts changed. The question prompt has none in any editor, and a blank distractor drops when it closes.

AlexVelezLl · 2026-09-28T14:36:01Z

+        </div>
+        <KButton
+          :text="saveChipBtn$()"
+          appearance="flat-button"


Let's use a primary raised button instead, just as in the specs.
Also, could you show this save button on the editing rows too? Right now, it only appears if you are adding a new chip.

Done: raised-button primary, and an open chip now has Save beside its delete button. Saving keeps focus on that chip. Searched for Save buttons: 1 component (EditableChipList), both of its instances changed.

rtibblesbot · 2026-09-28T15:02:29Z

1: before — formula and toolbar run under the answers box.
2: after — the QA server keeps its first build, so the .row-prompt track rule is applied in devtools; everything else is the pushed build.
3: blank row prompt placeholder, raised Save on an editing chip.

AlexVelezLl · 2026-09-28T19:20:27Z

+    :style="{ borderColor: $themeTokens.fineLine }"
+    :suppressed="!isRegionActive"
+    :ariaLabel="regionLabel"
+    textCursor


For some reason, I am not seeing the text cursor when I hover over this clickable region. It only works on the borders, where the chip-list is not present.

I can't reproduce this on 1a08bf1 in headless Chromium, match item on the QTI demo page. I sampled elementFromPoint every 20×10px across all three answer regions. Every hit on ul.chip-list has computed cursor: text, inherited from the region root, and no stylesheet rule overrides it. Which browser and OS are you on? Does it happen with a row's answers closed and no other editor open?

You were right: at bfff2bc the text cursor sat only on the overlay button, under the chip list. 1a08bf1 moved it to the region root, so the chip list now shows it too; no answer to my questions needed.

AlexVelezLl · 2026-09-28T19:25:04Z

+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ matchingRowsLabel$() }}


You need these changes:

"Matching rows" -> "Prompts and responses"

"Learners match responses from a shuffled set to each prompt. A prompt can have more than one answer. Include distractors to increase difficulty." -> "Learners match responses from a shuffled set to a fixed prompt. Include distractors to increase difficulty."

"Prompt" / "Answers" -> "Prompt" / "Correct matches".

"Learners must match each prompt with its correct answers." -> "Learners match each item in one list to one or more correct items in another, where items can have multiple valid matches, and distractors can be included to increase difficulty."

AlexVelezLl · 2026-09-28T19:27:33Z

+        <KButton
+          :text="saveChipBtn$()"
+          appearance="raised-button"
+          :primary="true"
+          @click="onSave"
+        />


Let's have this button on a new line instead. It should be aligned to the right. The button should be aligned with the TipTapEditor.

Done: Save now sits on its own line under the editor, right-aligned to the editor's edge. I searched saveChipBtn for the same layout and found 2 places, the new-answer draft and an open existing answer. Changed both. Screenshots: #6168 (comment)

rtibblesbot · 2026-09-28T21:28:52Z

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>

The card body already insets its content, so the selector's own horizontal padding pushed it right of every editor's question label. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

AlexVelezLl

Code changes look good. It looks very polished visually, and resulting xml's are correct. LGTM!

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 2 times, most recently from 5859ac6 to 202802b Compare September 27, 2026 01:44

AlexVelezLl requested changes Sep 28, 2026

View reviewed changes

rtibblesbot force-pushed the issue-6166-0a33c2 branch from 202802b to 1026ca7 Compare September 28, 2026 15:02

rtibblesbot force-pushed the issue-6166-0a33c2 branch 2 times, most recently from cf36aa9 to bfff2bc Compare September 28, 2026 17:40

AlexVelezLl requested changes Sep 28, 2026

View reviewed changes

rtibblesbot force-pushed the issue-6166-0a33c2 branch 2 times, most recently from 6b7f047 to 1a08bf1 Compare September 28, 2026 21:28

rtibblesbot force-pushed the issue-6166-0a33c2 branch 2 times, most recently from c359eb5 to bbcd896 Compare September 28, 2026 23:25

rtibblesbot and others added 4 commits September 28, 2026 20:27

Extract ShuffledResponsePool and EditableChipList from associate editor

9f03745

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

59e442b

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

Add match item to QTI demo page

1de0602

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

Align the question type selector with the question label

e7a9b44

The card body already insets its content, so the selector's own horizontal padding pushed it right of every editor's question label. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

rtibblesbot force-pushed the issue-6166-0a33c2 branch from bbcd896 to e7a9b44 Compare September 29, 2026 03:54

AlexVelezLl approved these changes Sep 29, 2026

View reviewed changes

AlexVelezLl merged commit eb65f55 into learningequality:unstable Sep 29, 2026
13 checks passed

rtibblesbot deleted the issue-6166-0a33c2 branch September 29, 2026 10:48

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

Blank correct-match chip

Remove down to the minimum

Validation timing

View-mode errors

Pool order

AI usage

Deviations from the issue spec

🟡 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!

Uh oh!

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!

AlexVelezLl left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rtibblesbot commented Sep 24, 2026 •

edited

Loading

AlexVelezLl left a comment •

edited

Loading