From 5b885558c4b1e89c267f42b0184c5e1a2e928d7b Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 24 Sep 2026 09:14:31 -0700
Subject: [PATCH 1/4] Extract ShuffledResponsePool and EditableChipList from
 associate editor

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>
---
 .../__tests__/ClickableRegion.spec.js         |  19 +
 .../components/ClickableRegion/index.vue      |  25 +-
 .../__tests__/EditableChipList.spec.js        | 376 +++++++++++++
 .../components/EditableChipList/index.vue     | 509 ++++++++++++++++++
 .../__tests__/ShuffledResponsePool.spec.js    |  75 +++
 .../components/ShuffledResponsePool/index.vue | 146 +++++
 .../interactions/associate/Editor.vue         | 462 +++-------------
 .../views/QTIEditor/qtiEditorStrings.js       |   4 +
 .../TipTapEditor/TipTapEditor.vue             |  18 +-
 .../components/EditorContentWrapper.vue       |  19 +-
 10 files changed, 1267 insertions(+), 386 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/__tests__/EditableChipList.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/index.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/__tests__/ShuffledResponsePool.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/index.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js
index e8e5589e38..3af1d2c4f0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/__tests__/ClickableRegion.spec.js
@@ -66,4 +66,23 @@ describe('ClickableRegion', () => {
 
     expect(emitted().click).toHaveLength(1);
   });
+
+  it('focuses its button when asked to', async () => {
+    render(
+      {
+        components: { ClickableRegion },
+        template: `
+          <div>
+            <button @click="$refs.region.focus()">Elsewhere</button>
+            <ClickableRegion ref="region" ariaLabel="Test label" />
+          </div>
+        `,
+      },
+      { routes: new VueRouter() },
+    );
+
+    await fireEvent.click(screen.getByRole('button', { name: 'Elsewhere' }));
+
+    expect(screen.getByRole('button', { name: 'Test label' })).toHaveFocus();
+  });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
index 80ff7e1d42..2abc6b65cd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ClickableRegion/index.vue
@@ -10,8 +10,10 @@
   >
     <button
       v-if="!suppressed"
+      ref="button"
       type="button"
       class="overlay-button"
+      :class="{ 'is-text-target': textCursor }"
       :aria-label="ariaLabel"
       @click.stop="onClick"
     ></button>
@@ -25,9 +27,13 @@
 
 <script>
 
+  import { ref } from 'vue';
+
   export default {
     name: 'ClickableRegion',
     setup(props, { emit }) {
+      const button = ref(null);
+
       function onClick(event) {
         if (props.suppressed) return;
         if (event && event.stopPropagation) {
@@ -35,7 +41,13 @@
         }
         emit('click', event);
       }
-      return { onClick };
+      return {
+        button,
+        onClick,
+        // Public: lets a parent move focus to the region.
+        // eslint-disable-next-line vue/no-unused-properties
+        focus: () => button.value?.focus(),
+      };
     },
     props: {
       ariaLabel: {
@@ -46,6 +58,11 @@
         type: Boolean,
         default: false,
       },
+      /** A text cursor and no hover tint, for a region that opens an editor where it is clicked */
+      textCursor: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['click'],
   };
@@ -75,10 +92,14 @@
     border-radius: inherit;
     outline: none;
 
-    &:hover {
+    &:hover:not(.is-text-target) {
       background-color: v-bind('$themeTokens.fineLine');
     }
 
+    &.is-text-target {
+      cursor: text;
+    }
+
     &:focus-visible {
       outline: 2px solid v-bind('$themeTokens.focusOutline');
       outline-offset: 2px;
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/__tests__/EditableChipList.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/__tests__/EditableChipList.spec.js
new file mode 100644
index 0000000000..9ad92aaa92
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/__tests__/EditableChipList.spec.js
@@ -0,0 +1,376 @@
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import EditableChipList from '../index.vue';
+import { qtiEditorStrings } from '../../../qtiEditorStrings';
+
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+
+const {
+  distractorsLabel$,
+  addDistractorBtn$,
+  editDistractorLabel$,
+  deleteDistractorBtn$,
+  errorEmptyChoiceContent$,
+  saveChipBtn$,
+} = qtiEditorStrings;
+
+const CHIPS = [
+  { id: 'choice_a', content: 'Antonio' },
+  { id: 'choice_b', content: 'Prospero' },
+  { id: 'choice_c', content: 'Capulet' },
+];
+
+const LABELS = {
+  addLabel: addDistractorBtn$(),
+  listLabel: distractorsLabel$(),
+  chipLabel: number => editDistractorLabel$({ number }),
+  deleteLabel: number => deleteDistractorBtn$({ number }),
+};
+
+const renderList = (props = {}) =>
+  render(EditableChipList, {
+    props: { chips: CHIPS, ...LABELS, ...props },
+    routes: new VueRouter(),
+  });
+
+// Applies every emit to its own data, the way an editor does, and closes the
+// list the way an editor does when another editor opens.
+const Host = {
+  components: { EditableChipList },
+  template: `
+    <div>
+      <EditableChipList
+        ref="list"
+        :chips="chips"
+        :addMode="addMode"
+        :minChips="minChips"
+        :errorMessages="errorMessages"
+        v-bind="labels"
+        @add-chip="html => chips.push({ id: 'choice_new', content: html })"
+        @update-chip="(index, html) => chips.splice(index, 1, { ...chips[index], content: html })"
+        @remove-chip="index => chips.splice(index, 1)"
+      />
+      <button @click="$refs.list.close()">Elsewhere</button>
+    </div>
+  `,
+  props: {
+    initialChips: { type: Array, default: () => CHIPS },
+    addMode: { type: String, default: 'button' },
+    minChips: { type: Number, default: 0 },
+    errorMessages: { type: Array, default: () => [] },
+  },
+  data() {
+    return { chips: [...this.initialChips], labels: LABELS };
+  },
+};
+
+const renderHost = (props = {}) => render(Host, { props, routes: new VueRouter() });
+
+const list = () => screen.getByRole('list', { name: distractorsLabel$() });
+const chipItems = () => within(list()).queryAllByRole('listitem');
+const chipTexts = () => chipItems().map(item => item.textContent.trim());
+const button = name => screen.getByRole('button', { name });
+const queryButton = name => screen.queryByRole('button', { name });
+const openTextarea = () => screen.queryAllByRole('textbox').find(el => el.tagName === 'TEXTAREA');
+const closeFromElsewhere = user => user.click(button('Elsewhere'));
+
+describe('EditableChipList', () => {
+  describe('button mode', () => {
+    it('lists each chip in the named list', () => {
+      renderList();
+      expect(chipTexts()).toEqual(['Antonio', 'Prospero', 'Capulet']);
+    });
+
+    it('opens a chip in place of its edit button, and reports its edits', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderList();
+      await user.click(button(editDistractorLabel$({ number: 2 })));
+      expect(emitted().open).toHaveLength(1);
+      expect(queryButton(editDistractorLabel$({ number: 2 }))).not.toBeInTheDocument();
+      expect(within(chipItems()[1]).getByRole('textbox')).toHaveValue('Prospero');
+
+      await user.type(openTextarea(), '!');
+      expect(emitted()['update-chip'].at(-1)).toEqual([1, 'Prospero!']);
+    });
+
+    it('asks to remove a chip without also opening it', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderList();
+      await user.click(button(deleteDistractorBtn$({ number: 3 })));
+      expect(emitted()['remove-chip']).toEqual([[2]]);
+      expect(emitted().open).toBeUndefined();
+    });
+
+    it('writes a new chip outside the list, adding nothing until it is saved', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(addDistractorBtn$()));
+      expect(within(list()).queryByRole('textbox')).not.toBeInTheDocument();
+      await user.type(openTextarea(), 'Montague');
+      expect(chipTexts()).toHaveLength(3);
+
+      await user.click(button(saveChipBtn$()));
+      expect(chipTexts().at(-1)).toBe('Montague');
+      expect(openTextarea()).toBeUndefined();
+    });
+
+    it('closes an open chip, keeping its edits, when its save button is pressed', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(editDistractorLabel$({ number: 2 })));
+      await user.type(openTextarea(), '!');
+      await user.click(within(chipItems()[1]).getByRole('button', { name: saveChipBtn$() }));
+      expect(openTextarea()).toBeUndefined();
+      expect(chipTexts()).toEqual(['Antonio', 'Prospero!', 'Capulet']);
+    });
+
+    it('adds the written chip when its editor is closed without saving', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(addDistractorBtn$()));
+      await user.type(openTextarea(), 'Montague');
+      await closeFromElsewhere(user);
+      expect(chipTexts().at(-1)).toBe('Montague');
+      expect(openTextarea()).toBeUndefined();
+    });
+
+    it('adds nothing when a new chip is closed blank', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(addDistractorBtn$()));
+      await user.click(button(saveChipBtn$()));
+      expect(chipTexts()).toHaveLength(3);
+    });
+
+    it('throws a written chip away when its discard button is pressed', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderList();
+      await user.click(button(addDistractorBtn$()));
+      await user.type(openTextarea(), 'x');
+      await user.click(button(deleteDistractorBtn$({ number: 4 })));
+      expect(openTextarea()).toBeUndefined();
+      expect(emitted()['add-chip']).toBeUndefined();
+      expect(emitted().close).toHaveLength(1);
+    });
+
+    it('commits the written chip and leaves a fresh, focused editor on a second add press', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(addDistractorBtn$()));
+      await user.type(openTextarea(), 'Montague');
+      await user.click(button(addDistractorBtn$()));
+      expect(within(list()).getByText('Montague')).toBeInTheDocument();
+      expect(openTextarea()).toHaveValue('');
+      expect(openTextarea()).toHaveFocus();
+    });
+
+    it('drops a chip left blank when its editor closes', async () => {
+      const user = userEvent.setup();
+      renderHost({ initialChips: [...CHIPS, { id: 'choice_d', content: '' }] });
+      await user.click(button(editDistractorLabel$({ number: 4 })));
+      await closeFromElsewhere(user);
+      expect(chipTexts()).toEqual(['Antonio', 'Prospero', 'Capulet']);
+    });
+
+    it('opens the chip clicked after a blank one drops out ahead of it', async () => {
+      const user = userEvent.setup();
+      renderHost({ initialChips: [{ id: 'choice_d', content: '' }, ...CHIPS] });
+      await user.click(button(editDistractorLabel$({ number: 1 })));
+      await user.click(button(editDistractorLabel$({ number: 3 })));
+      expect(chipItems()).toHaveLength(3);
+      expect(within(chipItems()[1]).getByRole('textbox')).toHaveValue('Prospero');
+    });
+
+    it('shows each error message under its own chip only', () => {
+      renderList({ errorMessages: [null, errorEmptyChoiceContent$(), null] });
+      const [first, second, third] = chipItems();
+      expect(within(second).getByText(errorEmptyChoiceContent$())).toBeInTheDocument();
+      expect(within(first).queryByText(errorEmptyChoiceContent$())).not.toBeInTheDocument();
+      expect(within(third).queryByText(errorEmptyChoiceContent$())).not.toBeInTheDocument();
+    });
+
+    it('holds an open chip’s error until it closes', async () => {
+      const user = userEvent.setup();
+      renderHost({
+        initialChips: [{ id: 'choice_d', content: '' }],
+        minChips: 1,
+        errorMessages: [errorEmptyChoiceContent$()],
+      });
+      await user.click(button(editDistractorLabel$({ number: 1 })));
+      expect(screen.queryByText(errorEmptyChoiceContent$())).not.toBeInTheDocument();
+
+      await closeFromElsewhere(user);
+      expect(screen.getByText(errorEmptyChoiceContent$())).toBeInTheDocument();
+    });
+
+    it('shows the placeholder in a blank chip only', () => {
+      renderList({
+        chips: [CHIPS[0], { id: 'choice_d', content: '' }],
+        placeholder: 'Write here',
+      });
+      const [written, blank] = chipItems();
+      expect(within(blank).getByText('Write here')).toBeInTheDocument();
+      expect(within(written).queryByText('Write here')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('keeping a minimum', () => {
+    it('disables every remove button once the list is down to its minimum', () => {
+      renderList({ chips: [CHIPS[0]], minChips: 1 });
+      expect(button(deleteDistractorBtn$({ number: 1 }))).toBeDisabled();
+    });
+
+    it('keeps a chip left blank when it is the last one the list must keep', async () => {
+      const user = userEvent.setup();
+      renderHost({ initialChips: [{ id: 'choice_d', content: '' }], minChips: 1 });
+      await user.click(button(editDistractorLabel$({ number: 1 })));
+      await closeFromElsewhere(user);
+      expect(chipItems()).toHaveLength(1);
+    });
+
+    it('focuses the add control once the list reaches its minimum', async () => {
+      const user = userEvent.setup();
+      renderHost({ initialChips: CHIPS.slice(0, 2), minChips: 1 });
+      await user.click(button(deleteDistractorBtn$({ number: 1 })));
+      expect(chipTexts()).toEqual(['Prospero']);
+      expect(button(addDistractorBtn$())).toHaveFocus();
+    });
+  });
+
+  describe('focus', () => {
+    it('focuses the delete button of the chip taking a removed chip’s place', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(deleteDistractorBtn$({ number: 2 })));
+      expect(screen.queryByText('Prospero')).not.toBeInTheDocument();
+      // Capulet now sits second.
+      expect(button(deleteDistractorBtn$({ number: 2 }))).toHaveFocus();
+    });
+
+    it('focuses the add button when the last chip is removed', async () => {
+      const user = userEvent.setup();
+      renderHost({ initialChips: [CHIPS[0]] });
+      await user.click(button(deleteDistractorBtn$({ number: 1 })));
+      expect(chipItems()).toHaveLength(0);
+      expect(button(addDistractorBtn$())).toHaveFocus();
+    });
+
+    it('focuses the add button when the new chip is discarded', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(addDistractorBtn$()));
+      await user.click(button(deleteDistractorBtn$({ number: 4 })));
+      expect(openTextarea()).toBeUndefined();
+      expect(button(addDistractorBtn$())).toHaveFocus();
+    });
+
+    it('focuses the add button when the new chip is saved', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(addDistractorBtn$()));
+      await user.type(openTextarea(), 'Montague');
+      await user.click(button(saveChipBtn$()));
+      expect(button(addDistractorBtn$())).toHaveFocus();
+    });
+
+    it('focuses a saved chip', async () => {
+      const user = userEvent.setup();
+      renderHost();
+      await user.click(button(editDistractorLabel$({ number: 2 })));
+      await user.click(button(saveChipBtn$()));
+      expect(button(editDistractorLabel$({ number: 2 }))).toHaveFocus();
+    });
+  });
+
+  describe('region mode', () => {
+    const region = () => button(addDistractorBtn$());
+    const queryRegion = () => queryButton(addDistractorBtn$());
+
+    it('makes the box itself the add control, with no add button', () => {
+      renderList({ addMode: 'region' });
+      expect(region()).toBeInTheDocument();
+      // The add button shows its label as text; the region only names itself.
+      expect(screen.queryByText(addDistractorBtn$())).not.toBeInTheDocument();
+    });
+
+    it('opens a new chip when the empty area of the list is clicked', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderList({ addMode: 'region' });
+      await user.click(list());
+      expect(emitted().open).toHaveLength(1);
+      expect(openTextarea()).toHaveValue('');
+    });
+
+    it('opens the first blank chip rather than a new one when the list is clicked', async () => {
+      const user = userEvent.setup();
+      renderList({
+        addMode: 'region',
+        chips: [CHIPS[0], { id: 'choice_d', content: '' }, { id: 'choice_e', content: '' }],
+      });
+      await user.click(list());
+      expect(within(chipItems()[1]).getByRole('textbox')).toHaveValue('');
+      expect(chipItems()).toHaveLength(3);
+      expect(screen.queryAllByRole('textbox').filter(el => el.tagName === 'TEXTAREA')).toHaveLength(
+        1,
+      );
+    });
+
+    it('opens a new chip when Enter is pressed on the region', async () => {
+      const user = userEvent.setup();
+      renderList({ addMode: 'region' });
+      region().focus();
+      await user.keyboard('{Enter}');
+      expect(openTextarea()).toHaveValue('');
+    });
+
+    it('opens only the chip when the chip is clicked', async () => {
+      const user = userEvent.setup();
+      renderList({ addMode: 'region' });
+      await user.click(button(editDistractorLabel$({ number: 1 })));
+      expect(openTextarea()).toHaveValue('Antonio');
+    });
+
+    it('asks only to remove a chip when its delete button is clicked', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderList({ addMode: 'region' });
+      await user.click(button(deleteDistractorBtn$({ number: 1 })));
+      expect(emitted()['remove-chip']).toEqual([[0]]);
+      expect(openTextarea()).toBeUndefined();
+    });
+
+    it('turns the region off while one of its editors is open', async () => {
+      const user = userEvent.setup();
+      renderList({ addMode: 'region' });
+      await user.click(list());
+      expect(queryRegion()).not.toBeInTheDocument();
+      await user.click(list());
+      expect(openTextarea()).toHaveValue('');
+    });
+
+    it('opens no new chip on a click inside an open chip', async () => {
+      const user = userEvent.setup();
+      renderList({ addMode: 'region' });
+      await user.click(button(editDistractorLabel$({ number: 1 })));
+      await user.click(openTextarea());
+      expect(openTextarea()).toHaveValue('Antonio');
+    });
+
+    it('focuses the region when the last chip is removed', async () => {
+      const user = userEvent.setup();
+      renderHost({ initialChips: [CHIPS[0]], addMode: 'region' });
+      await user.click(button(deleteDistractorBtn$({ number: 1 })));
+      expect(chipItems()).toHaveLength(0);
+      expect(region()).toHaveFocus();
+    });
+
+    it('focuses the region when the new chip is discarded', async () => {
+      const user = userEvent.setup();
+      renderHost({ addMode: 'region' });
+      await user.click(list());
+      await user.click(button(deleteDistractorBtn$({ number: 4 })));
+      expect(openTextarea()).toBeUndefined();
+      expect(region()).toHaveFocus();
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/index.vue
new file mode 100644
index 0000000000..cc6519d3a4
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/EditableChipList/index.vue
@@ -0,0 +1,509 @@
+<template>
+
+  <ClickableRegion
+    ref="rootEl"
+    :class="['pool-box', { 'is-region': addMode === 'region', 'is-addable': isRegionActive }]"
+    :style="{ borderColor: $themeTokens.fineLine }"
+    :suppressed="!isRegionActive"
+    :ariaLabel="addLabel"
+    textCursor
+    @click="onRegionClick"
+  >
+    <div class="pool-content">
+      <ul
+        class="chip-list"
+        :aria-label="listLabel"
+      >
+        <li
+          v-for="(chip, index) in chips"
+          :key="`${chip.id}-${index}`"
+          class="chip-item"
+          :class="{ 'is-editing': isChipOpen(index) }"
+        >
+          <ClickableRegion
+            ref="chipRegions"
+            :class="{ chip: !isChipOpen(index) }"
+            :style="chipStyles[index]"
+            :suppressed="isChipOpen(index)"
+            :aria-label="chipLabel(index + 1)"
+            @click="openChip(index)"
+          >
+            <div class="chip-body">
+              <div class="chip-content">
+                <span
+                  v-if="showsPlaceholder(index)"
+                  :style="{ color: $themeTokens.annotation }"
+                >
+                  {{ placeholder }}
+                </span>
+                <TipTapEditor
+                  v-else
+                  :value="chip.content"
+                  :mode="isChipOpen(index) ? 'edit' : 'view'"
+                  format="html"
+                  :padding="isChipOpen(index) ? 'default' : 'none'"
+                  :minHeight="'48px'"
+                  :autofocus="isChipOpen(index)"
+                  :imageProcessor="EditorImageProcessor"
+                  :tabindex="-1"
+                  class="editor"
+                  @update="html => onChipUpdate(index, html)"
+                  @minimize="close"
+                />
+              </div>
+
+              <!-- `@click.stop` so removing the chip does not also open it -->
+              <div
+                class="chip-actions"
+                @click.stop
+              >
+                <KButton
+                  v-if="isChipOpen(index)"
+                  :text="saveChipBtn$()"
+                  appearance="raised-button"
+                  :primary="true"
+                  @click="onSave"
+                />
+                <KIconButton
+                  ref="deleteButtons"
+                  icon="close"
+                  size="small"
+                  :disabled="!canRemove"
+                  :ariaLabel="deleteLabel(index + 1)"
+                  :tooltip="deleteLabel(index + 1)"
+                  :color="canRemove ? $themePalette.grey.v_700 : $themeTokens.textDisabled"
+                  @click="event => onRemove(index, event)"
+                />
+              </div>
+            </div>
+          </ClickableRegion>
+          <ValidationMessage v-if="showsError(index)">
+            {{ errorMessages[index] }}
+          </ValidationMessage>
+        </li>
+      </ul>
+
+      <!--
+        A new chip is written below the list and joins it when saved or when its
+        editor closes, so the list never holds a half-written chip. Clicks stop
+        here for the same reason they stop on the add button.
+      -->
+      <div
+        v-if="isDraftOpen"
+        class="draft-row"
+        @click.stop
+      >
+        <div class="draft-editor">
+          <TipTapEditor
+            :key="draftKey"
+            :value="open.content"
+            mode="edit"
+            format="html"
+            :minHeight="'48px'"
+            autofocus
+            :imageProcessor="EditorImageProcessor"
+            :tabindex="-1"
+            class="editor"
+            @update="onDraftUpdate"
+            @minimize="close"
+          />
+        </div>
+        <KButton
+          :text="saveChipBtn$()"
+          appearance="raised-button"
+          :primary="true"
+          @click="onSave"
+        />
+        <!-- Numbered for the place it would take, so it reads as this row's
+             remove button while doubling as the way to abandon the draft. -->
+        <KIconButton
+          icon="close"
+          size="small"
+          :ariaLabel="deleteLabel(chips.length + 1)"
+          :tooltip="deleteLabel(chips.length + 1)"
+          :color="$themePalette.grey.v_700"
+          @click="onDiscard"
+        />
+      </div>
+
+      <!--
+        The editor this opens mounts before the click finishes bubbling, and
+        TipTap closes on any click outside itself — so the click stops here.
+      -->
+      <div
+        v-if="addMode === 'button'"
+        @click.stop
+      >
+        <AddListItemButton
+          ref="addButton"
+          :label="addLabel"
+          @click="openDraft"
+        />
+      </div>
+    </div>
+  </ClickableRegion>
+
+</template>
+
+
+<script>
+
+  import { computed, nextTick, ref } from 'vue';
+  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
+  import AddListItemButton from '../AddListItemButton/index.vue';
+  import ClickableRegion from '../ClickableRegion/index.vue';
+  import ValidationMessage from '../ValidationMessage/index.vue';
+  import { qtiEditorStrings } from '../../qtiEditorStrings';
+  import { hasRichTextContent } from '../../utils/richText';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
+
+  export default {
+    name: 'EditableChipList',
+
+    components: {
+      AddListItemButton,
+      ClickableRegion,
+      ValidationMessage,
+      TipTapEditor,
+    },
+
+    setup(props, { emit }) {
+      const tokens = themeTokens();
+      const { saveChipBtn$ } = qtiEditorStrings;
+
+      const rootEl = ref(null);
+      const addButton = ref(null);
+      const deleteButtons = ref([]);
+      const chipRegions = ref([]);
+
+      // The chip whose editor is open — `index` null for a new one — holding its
+      // content as last written, since the chip prop lags a render behind.
+      const open = ref(null);
+
+      // A TipTap editor takes focus only as it mounts, so bumping this key on every
+      // add press remounts the draft editor — patched in place it leaves focus behind.
+      const draftKey = ref(0);
+
+      const isDraftOpen = computed(() => open.value?.index === null);
+
+      // A click inside an open editor bubbles up to the box, and must not start a draft.
+      const isRegionActive = computed(() => props.addMode === 'region' && !open.value);
+
+      const canRemove = computed(() => props.chips.length > props.minChips);
+
+      function isChipOpen(index) {
+        return open.value?.index === index;
+      }
+
+      const blankChips = computed(() => props.chips.map(chip => !hasRichTextContent(chip.content)));
+
+      function showsPlaceholder(index) {
+        return Boolean(props.placeholder) && !isChipOpen(index) && blankChips.value[index];
+      }
+
+      // Content commits on the blur at mousedown; an error shown then would move
+      // the click target before mouseup.
+      function showsError(index) {
+        return Boolean(props.errorMessages[index]) && !isChipOpen(index);
+      }
+
+      const chipStyles = computed(() =>
+        props.chips.map((_, index) => ({
+          borderColor: showsError(index) ? tokens.error : tokens.fineLine,
+        })),
+      );
+
+      // Where focus goes once nothing nearer is left to take it.
+      function getAddControl() {
+        return props.addMode === 'region' ? rootEl.value : addButton.value.$el;
+      }
+
+      /**
+       * Closing an editor is what commits it: a written draft joins the list, and
+       * a chip left blank drops out of it. Returns the index of a dropped chip,
+       * which shifts the ones after it.
+       */
+      function commit() {
+        const target = open.value;
+        open.value = null;
+        if (!target) return null;
+        const isBlank = !hasRichTextContent(target.content);
+        if (target.index === null) {
+          if (!isBlank) emit('add-chip', target.content);
+          return null;
+        }
+        if (!isBlank || !canRemove.value) return null;
+        emit('remove-chip', target.index);
+        return target.index;
+      }
+
+      // Public: the parent closes this list's editor when it opens another.
+      function close() {
+        if (!open.value) return;
+        commit();
+        emit('close');
+      }
+
+      // Where a chip at `index` sits once the chip at `dropped` has left the list.
+      function shiftPast(dropped, index) {
+        return dropped !== null && dropped < index ? index - 1 : index;
+      }
+
+      function openChip(index) {
+        const { content } = props.chips[index];
+        const dropped = commit();
+        open.value = { index: shiftPast(dropped, index), content };
+        emit('open');
+      }
+
+      function openDraft() {
+        commit();
+        draftKey.value += 1;
+        open.value = { index: null, content: '' };
+        emit('open');
+      }
+
+      // A blank chip is already a place to write, so the region opens it rather
+      // than start another.
+      function onRegionClick() {
+        const blankIndex = blankChips.value.indexOf(true);
+        if (blankIndex === -1) {
+          openDraft();
+        } else {
+          openChip(blankIndex);
+        }
+      }
+
+      function onChipUpdate(index, html) {
+        if (isChipOpen(index)) open.value = { index, content: html };
+        emit('update-chip', index, html);
+      }
+
+      function onDraftUpdate(html) {
+        open.value = { index: null, content: html };
+      }
+
+      // Closing an editor re-enables the region, and a native click lets that render
+      // run before the click bubbles on — unmounting any wrapper that would stop it.
+      // So the buttons that close one stop their own click.
+
+      // The press that removes a chip unmounts its own delete button, dropping focus
+      // to the body. Hand focus to the chip taking its place, or to the add control.
+      async function onRemove(index, event) {
+        event.stopPropagation();
+        const wasOpen = open.value !== null;
+        const dropped = commit();
+        const target = shiftPast(dropped, index);
+        if (dropped !== index) emit('remove-chip', target);
+        if (wasOpen) emit('close');
+        await nextTick();
+        if (canRemove.value) {
+          deleteButtons.value[Math.min(target, props.chips.length - 1)].$el.focus();
+        } else {
+          getAddControl().focus();
+        }
+      }
+
+      // A saved chip keeps focus; a new one, or a blank one that drops out, hands
+      // it to the add control.
+      async function onSave(event) {
+        event.stopPropagation();
+        const { index } = open.value;
+        const dropped = commit();
+        emit('close');
+        await nextTick();
+        if (index === null || dropped !== null) {
+          getAddControl().focus();
+        } else {
+          chipRegions.value[index].focus();
+        }
+      }
+
+      async function onDiscard(event) {
+        event.stopPropagation();
+        open.value = null;
+        emit('close');
+        await nextTick();
+        getAddControl().focus();
+      }
+
+      return {
+        EditorImageProcessor,
+        rootEl,
+        addButton,
+        deleteButtons,
+        chipRegions,
+        open,
+        draftKey,
+        isDraftOpen,
+        isRegionActive,
+        canRemove,
+        isChipOpen,
+        showsPlaceholder,
+        showsError,
+        chipStyles,
+        // eslint-disable-next-line vue/no-unused-properties
+        close,
+        openChip,
+        openDraft,
+        onRegionClick,
+        onChipUpdate,
+        onDraftUpdate,
+        onRemove,
+        onSave,
+        onDiscard,
+        saveChipBtn$,
+      };
+    },
+
+    props: {
+      /** @type {Array<{ id: String, content: String }>} */
+      chips: {
+        type: Array,
+        required: true,
+      },
+      /** 'button' renders an AddListItemButton; 'region' makes the whole box clickable. */
+      addMode: {
+        type: String,
+        default: 'button',
+        validator: val => ['button', 'region'].includes(val),
+      },
+      /** Add button label, or the region's accessible name */
+      addLabel: {
+        type: String,
+        required: true,
+      },
+      /** Accessible name of the chip list */
+      listLabel: {
+        type: String,
+        required: true,
+      },
+      /** (position: Number) => String — 1-based; accessible label for editing a chip */
+      chipLabel: {
+        type: Function,
+        required: true,
+      },
+      /** (position: Number) => String — 1-based; accessible label for deleting a chip */
+      deleteLabel: {
+        type: Function,
+        required: true,
+      },
+      /** Parallel to `chips`; null where a chip has no error */
+      errorMessages: {
+        type: Array,
+        default: () => [],
+      },
+      /** Fewest chips the list keeps: at this count none can be removed */
+      minChips: {
+        type: Number,
+        default: 0,
+      },
+      /** Shown in a closed chip that has no content */
+      placeholder: {
+        type: String,
+        default: '',
+      },
+    },
+
+    emits: ['open', 'close', 'add-chip', 'update-chip', 'remove-chip'],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .pool-box {
+    padding: 12px;
+    border: 1px solid;
+    border-radius: 4px;
+
+    // An empty list still needs a target to click.
+    &.is-region {
+      min-height: 64px;
+    }
+
+    &.is-addable {
+      cursor: text;
+    }
+  }
+
+  .pool-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  // A chip is a compact pill, so its editor has no padding of its own. An open
+  // chip drops the class, leaving its editor to draw the border.
+  .chip {
+    min-width: 0;
+    max-width: 100%;
+    padding: 4px 12px;
+    cursor: pointer;
+    background-color: v-bind('$themePalette.grey.v_50');
+    border: 1px solid;
+    border-radius: 8px;
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: v-bind('$themeTokens.fineLine');
+    }
+  }
+
+  .chip-body {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .draft-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  // The open editor draws its own border, so the row it sits in adds none.
+  .draft-editor {
+    flex: 1;
+    min-width: 0;
+    background-color: v-bind('$themeTokens.surface');
+  }
+
+  // Stacks the chip over the validation message that belongs to it, so a
+  // flagged chip pushes the chips after it along rather than down.
+  .chip-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-width: 100%;
+
+    &.is-editing {
+      flex-basis: 100%;
+    }
+  }
+
+  // A blank choice renders nothing, so without a floor the chip collapses to a
+  // strip too small to click.
+  .chip-content {
+    flex: 1;
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  .editor {
+    width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/__tests__/ShuffledResponsePool.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/__tests__/ShuffledResponsePool.spec.js
new file mode 100644
index 0000000000..62c2dff586
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/__tests__/ShuffledResponsePool.spec.js
@@ -0,0 +1,75 @@
+import { render, screen, within } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import shuffle from 'lodash/shuffle';
+import { themePalette } from 'kolibri-design-system/lib/styles/theme';
+import ShuffledResponsePool from '../index.vue';
+import { qtiEditorStrings } from '../../../qtiEditorStrings';
+
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+jest.mock('lodash/shuffle', () => jest.fn(list => [...list].reverse()));
+
+const { responsePoolLabel$ } = qtiEditorStrings;
+
+const CHOICES = [
+  { content: 'Antonio', isCorrect: true },
+  { content: 'Prospero', isCorrect: false },
+  { content: 'Capulet', isCorrect: false },
+];
+
+const renderPool = (choices = CHOICES) =>
+  render(ShuffledResponsePool, {
+    props: { choices, label: responsePoolLabel$() },
+    routes: new VueRouter(),
+  });
+
+const pool = () => screen.getByRole('list', { name: responsePoolLabel$() });
+const chipTexts = () =>
+  within(pool())
+    .getAllByRole('listitem')
+    .map(item => item.textContent.trim());
+const chip = text => within(pool()).getByText(text).closest('li');
+
+describe('ShuffledResponsePool', () => {
+  beforeEach(() => {
+    shuffle.mockImplementation(list => [...list].reverse());
+  });
+
+  it('labels the pool heading and the list, with one item per choice', () => {
+    renderPool();
+    expect(screen.getByRole('heading', { name: responsePoolLabel$() })).toBeInTheDocument();
+    expect(within(pool()).getAllByRole('listitem')).toHaveLength(3);
+  });
+
+  it('renders two choices with the same content as two items', () => {
+    renderPool([
+      { content: 'Antonio', isCorrect: false },
+      { content: 'Antonio', isCorrect: false },
+    ]);
+    expect(chipTexts()).toEqual(['Antonio', 'Antonio']);
+  });
+
+  it('paints only the correct choice green, wherever the shuffle puts it', () => {
+    const palette = themePalette();
+    renderPool();
+    expect(chipTexts()).toEqual(['Capulet', 'Prospero', 'Antonio']);
+    expect(chip('Antonio')).toHaveStyle({
+      borderColor: palette.green.v_600,
+      backgroundColor: palette.green.v_50,
+    });
+    expect(chip('Prospero')).not.toHaveStyle({ borderColor: palette.green.v_600 });
+    expect(chip('Prospero')).not.toHaveStyle({ backgroundColor: palette.green.v_50 });
+  });
+
+  it('keeps its order when only correctness changes', async () => {
+    const { updateProps } = renderPool();
+    shuffle.mockImplementation(list => [...list]);
+    await updateProps({ choices: CHOICES.map(choice => ({ ...choice, isCorrect: false })) });
+    expect(chipTexts()).toEqual(['Capulet', 'Prospero', 'Antonio']);
+  });
+
+  it('reshuffles when the contents change', async () => {
+    const { updateProps } = renderPool();
+    await updateProps({ choices: [...CHOICES, { content: 'Montague', isCorrect: false }] });
+    expect(chipTexts()).toEqual(['Montague', 'Capulet', 'Prospero', 'Antonio']);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/index.vue
new file mode 100644
index 0000000000..7335ff7243
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ShuffledResponsePool/index.vue
@@ -0,0 +1,146 @@
+<template>
+
+  <div
+    class="pool-box"
+    :style="{ borderColor: $themeTokens.fineLine }"
+  >
+    <h4
+      class="section-label"
+      :style="{ color: $themePalette.grey.v_700 }"
+    >
+      {{ label }}
+    </h4>
+    <ul
+      class="chip-list"
+      :aria-label="label"
+    >
+      <!-- Keyed by position: a choice id may repeat across the pool. -->
+      <li
+        v-for="(choice, index) in shuffled"
+        :key="index"
+        class="chip"
+        :style="chipStyles[index]"
+      >
+        <TipTapEditor
+          :value="choice.content"
+          mode="view"
+          format="html"
+          padding="none"
+          :imageProcessor="EditorImageProcessor"
+          :tabindex="-1"
+          class="editor"
+        />
+      </li>
+    </ul>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed, ref, watch } from 'vue';
+  import isEqual from 'lodash/isEqual';
+  import shuffle from 'lodash/shuffle';
+  import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
+
+  export default {
+    name: 'ShuffledResponsePool',
+
+    components: {
+      TipTapEditor,
+    },
+
+    setup(props) {
+      const tokens = themeTokens();
+      const palette = themePalette();
+
+      // "Show answers" hands over a new array; only new content may reorder the pool.
+      const order = ref([]);
+      watch(
+        () => props.choices.map(choice => choice.content),
+        (contents, previous) => {
+          if (!isEqual(contents, previous)) order.value = shuffle(contents.map((_, i) => i));
+        },
+        { immediate: true },
+      );
+      const shuffled = computed(() => order.value.map(i => props.choices[i]));
+
+      const chipStyles = computed(() =>
+        shuffled.value.map(({ isCorrect }) => ({
+          borderColor: isCorrect ? palette.green.v_600 : tokens.fineLine,
+          backgroundColor: isCorrect ? palette.green.v_50 : null,
+        })),
+      );
+
+      return {
+        EditorImageProcessor,
+        shuffled,
+        chipStyles,
+      };
+    },
+
+    props: {
+      /** @type {Array<{ content: String, isCorrect: Boolean }>} */
+      choices: {
+        type: Array,
+        required: true,
+      },
+      /** Section label and list accessible name */
+      label: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .pool-box {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background-color: v-bind('$themePalette.grey.v_50');
+    border: 1px solid;
+    border-radius: 4px;
+  }
+
+  .section-label {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  // A chip is a compact pill, so its editor has no padding of its own.
+  .chip {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+    padding: 4px 12px;
+    background-color: v-bind('$themeTokens.surface');
+    border: 1px solid;
+    border-radius: 8px;
+  }
+
+  .editor {
+    width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Editor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Editor.vue
index 1b7ad2c114..53f729824c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Editor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Editor.vue
@@ -1,9 +1,6 @@
 <template>
 
-  <div
-    ref="rootEl"
-    class="associate-layout"
-  >
+  <div class="associate-layout">
     <!-- Prompt -->
     <div class="editor-section">
       <ValidationMessage v-if="promptHasError">
@@ -47,38 +44,10 @@
       v-if="mode === 'view'"
       class="editor-section"
     >
-      <div
-        class="is-shuffled pool-box"
-        :style="{ borderColor: $themeTokens.fineLine }"
-      >
-        <h4
-          class="section-label"
-          :style="{ color: $themePalette.grey.v_700 }"
-        >
-          {{ responsePoolLabel$() }}
-        </h4>
-        <ul
-          class="chip-list"
-          :aria-label="responsePoolLabel$()"
-        >
-          <!-- Keyed by position: a choice id may repeat across the pool. -->
-          <li
-            v-for="(choice, index) in shuffledPool"
-            :key="index"
-            class="chip"
-            :style="poolChipStyles[index]"
-          >
-            <TipTapEditor
-              :value="choice.content"
-              mode="view"
-              format="html"
-              :imageProcessor="EditorImageProcessor"
-              :tabindex="-1"
-              class="editor"
-            />
-          </li>
-        </ul>
-      </div>
+      <ShuffledResponsePool
+        :choices="poolChoices"
+        :label="responsePoolLabel$()"
+      />
     </div>
 
     <!-- Correct pairs — editable in edit mode, read-only when revealing answers -->
@@ -143,6 +112,7 @@
                     :value="choice.content"
                     :mode="isPairItemOpen(index, position) ? 'edit' : 'view'"
                     format="html"
+                    padding="small"
                     :minHeight="'48px'"
                     :autofocus="isPairItemOpen(index, position)"
                     :imageProcessor="EditorImageProcessor"
@@ -165,6 +135,7 @@
                   :value="choice.content"
                   mode="view"
                   format="html"
+                  padding="none"
                   :imageProcessor="EditorImageProcessor"
                   :tabindex="-1"
                   class="editor"
@@ -179,6 +150,7 @@
             @click.stop
           >
             <KIconButton
+              ref="deletePairButtons"
               icon="close"
               size="small"
               :disabled="isOnlyPair"
@@ -239,109 +211,21 @@
         </div>
       </div>
 
-      <div
-        class="pool-box"
-        :style="{ borderColor: $themeTokens.fineLine }"
-      >
-        <ul
-          class="chip-list"
-          :aria-label="distractorsLabel$()"
-        >
-          <li
-            v-for="(choice, index) in state.distractors"
-            :key="`${choice.id}-${index}`"
-            class="distractor"
-            :class="{ 'is-editing': isDistractorOpen(index) }"
-          >
-            <ClickableRegion
-              class="distractor-row"
-              :class="{ 'chip is-tinted is-clickable': !isDistractorOpen(index) }"
-              :style="distractorStyles[index]"
-              :suppressed="isDistractorOpen(index)"
-              :aria-label="editDistractorLabel$({ number: index + 1 })"
-              @click="openDistractor(choice)"
-            >
-              <div class="distractor-content">
-                <TipTapEditor
-                  :value="choice.content"
-                  :mode="isDistractorOpen(index) ? 'edit' : 'view'"
-                  format="html"
-                  :minHeight="'48px'"
-                  :autofocus="isDistractorOpen(index)"
-                  :imageProcessor="EditorImageProcessor"
-                  :tabindex="-1"
-                  class="editor"
-                  @update="html => setDistractorContent(index, html)"
-                  @minimize="closeOpenTarget"
-                />
-              </div>
-
-              <!-- `@click.stop` so removing the chip does not also open it -->
-              <div
-                class="distractor-actions"
-                @click.stop
-              >
-                <KIconButton
-                  icon="close"
-                  size="small"
-                  :ariaLabel="deleteDistractorBtn$({ number: index + 1 })"
-                  :tooltip="deleteDistractorBtn$({ number: index + 1 })"
-                  :color="$themePalette.grey.v_700"
-                  @click="onRemoveDistractor(choice)"
-                />
-              </div>
-            </ClickableRegion>
-            <ValidationMessage v-if="distractorErrorMessages[index]">
-              {{ distractorErrorMessages[index] }}
-            </ValidationMessage>
-          </li>
-        </ul>
-
-        <!--
-          A new distractor is written below the pool and joins it when its
-          editor closes, so the pool never holds a half-written chip. Clicks
-          stop here for the same reason they stop on the add buttons.
-        -->
-        <div
-          v-if="draft"
-          class="draft-row"
-          @click.stop
-        >
-          <div class="draft-editor">
-            <TipTapEditor
-              :key="draftKey"
-              :value="draft.content"
-              mode="edit"
-              format="html"
-              :minHeight="'48px'"
-              autofocus
-              :imageProcessor="EditorImageProcessor"
-              :tabindex="-1"
-              class="editor"
-              @update="setDraftContent"
-              @minimize="closeOpenTarget"
-            />
-          </div>
-          <!-- Numbered for the place it would take, so it reads as this row's
-               remove button while doubling as the way to abandon the draft. -->
-          <KIconButton
-            icon="close"
-            size="small"
-            :ariaLabel="deleteDistractorBtn$({ number: state.distractors.length + 1 })"
-            :tooltip="deleteDistractorBtn$({ number: state.distractors.length + 1 })"
-            :color="$themePalette.grey.v_700"
-            @click="onDiscardDraft"
-          />
-        </div>
-
-        <div @click.stop>
-          <AddListItemButton
-            ref="addDistractorButton"
-            :label="addDistractorBtn$()"
-            @click="onAddDistractor"
-          />
-        </div>
-      </div>
+      <EditableChipList
+        ref="distractorList"
+        addMode="button"
+        :chips="state.distractors"
+        :addLabel="addDistractorBtn$()"
+        :listLabel="distractorsLabel$()"
+        :chipLabel="distractorChipLabel"
+        :deleteLabel="distractorDeleteLabel"
+        :errorMessages="distractorErrorMessages"
+        @open="onDistractorsOpen"
+        @close="onDistractorsClose"
+        @add-chip="addDistractor"
+        @update-chip="setDistractorContent"
+        @remove-chip="removeDistractor"
+      />
     </div>
   </div>
 
@@ -353,15 +237,16 @@
   import { computed, nextTick, ref, watch } from 'vue';
   import flatten from 'lodash/flatten';
   import isEqual from 'lodash/isEqual';
-  import shuffle from 'lodash/shuffle';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
   import { qtiEditorStrings } from '../../qtiEditorStrings';
   import { ValidationError } from '../../constants';
   import { useAssociateInteraction } from '../../composables/useAssociateInteraction';
   import ValidationMessage from '../../components/ValidationMessage/index.vue';
   import AddListItemButton from '../../components/AddListItemButton/index.vue';
   import ClickableRegion from '../../components/ClickableRegion/index.vue';
+  import ShuffledResponsePool from '../../components/ShuffledResponsePool/index.vue';
+  import EditableChipList from '../../components/EditableChipList/index.vue';
   import { hasRichTextContent, richTextComparisonKey } from '../../utils/richText';
   import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
   import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
@@ -370,8 +255,7 @@
   const OpenTarget = Object.freeze({
     PROMPT: 'prompt',
     PAIR: 'pair',
-    DISTRACTOR: 'distractor',
-    DRAFT: 'draft',
+    DISTRACTORS: 'distractors',
   });
 
   export default {
@@ -382,12 +266,13 @@
       ValidationMessage,
       AddListItemButton,
       ClickableRegion,
+      ShuffledResponsePool,
+      EditableChipList,
     },
 
     setup(props, { emit }) {
       const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       const tokens = themeTokens();
-      const palette = themePalette();
 
       const {
         questionLabel$,
@@ -431,28 +316,9 @@
       // At most one card holds an open TipTap editor at a time.
       const openTarget = ref(null);
 
-      // The distractor being written, held out of state until its editor closes.
-      const draft = ref(null);
-
-      // A TipTap editor takes focus only as it mounts, so bumping this key on every
-      // add press remounts the draft editor — patched in place it leaves focus behind.
-      const draftKey = ref(0);
-
-      const rootEl = ref(null);
       const addPairButton = ref(null);
-      const addDistractorButton = ref(null);
-
-      /**
-       * The press that removes a row unmounts its own delete button, dropping focus to
-       * the body. Hand focus to the row taking its place, or to the add button.
-       */
-      async function focusAfterRemoval(deleteButtonSelector, index, addButton) {
-        await nextTick();
-        const buttons = [...(rootEl.value?.querySelectorAll(deleteButtonSelector) ?? [])].filter(
-          button => !button.disabled,
-        );
-        (buttons[Math.min(index, buttons.length - 1)] ?? addButton.value?.$el)?.focus();
-      }
+      const deletePairButtons = ref([]);
+      const distractorList = ref(null);
 
       const isPromptOpen = computed(
         () => props.mode === 'edit' && openTarget.value?.kind === OpenTarget.PROMPT,
@@ -474,36 +340,23 @@
         return windowIsSmall.value || (!windowIsLarge.value && isPairRowOpen(index));
       }
 
-      function isDistractorOpen(index) {
-        const target = openTarget.value;
-        return (
-          props.mode === 'edit' && target?.kind === OpenTarget.DISTRACTOR && target.index === index
-        );
-      }
+      const isDistractorsOpen = () => openTarget.value?.kind === OpenTarget.DISTRACTORS;
 
-      /**
-       * Closing a distractor's editor is what commits it: a written draft joins
-       * the pool, and a distractor left blank drops out of it. Either shifts the
-       * indexes that follow, so callers re-resolve the row they were holding.
-       */
+      // The distractor list commits its own editor as it closes.
       function closeOpenTarget() {
-        const target = openTarget.value;
+        const wasDistractorsOpen = isDistractorsOpen();
         openTarget.value = null;
-        if (target?.kind === OpenTarget.DRAFT) {
-          const { content } = draft.value;
-          draft.value = null;
-          if (hasRichTextContent(content)) addDistractor(content);
-        } else if (target?.kind === OpenTarget.DISTRACTOR) {
-          const choice = state.value.distractors[target.index];
-          if (choice && !hasRichTextContent(choice.content)) removeDistractor(target.index);
-        }
+        if (wasDistractorsOpen) distractorList.value.close();
       }
 
-      // Leaving edit mode throws the draft away rather than committing it: the
-      // parent stops listening for updates, so a commit would go unreported.
-      function discardDraft() {
-        openTarget.value = null;
-        draft.value = null;
+      function onDistractorsOpen() {
+        if (isDistractorsOpen()) return;
+        closeOpenTarget();
+        openTarget.value = { kind: OpenTarget.DISTRACTORS };
+      }
+
+      function onDistractorsClose() {
+        if (isDistractorsOpen()) openTarget.value = null;
       }
 
       function openPrompt() {
@@ -518,13 +371,6 @@
         openTarget.value = { kind: OpenTarget.PAIR, index, position };
       }
 
-      function openDistractor(choice) {
-        if (props.mode !== 'edit') return;
-        closeOpenTarget();
-        const index = state.value.distractors.indexOf(choice);
-        if (index !== -1) openTarget.value = { kind: OpenTarget.DISTRACTOR, index };
-      }
-
       function setPairItemContent(index, position, html) {
         const pair = state.value.pairs[index].map((choice, i) =>
           i === position ? { ...choice, content: html } : choice,
@@ -537,44 +383,22 @@
         openPairItem(state.value.pairs.length - 1, 0);
       }
 
-      function onAddDistractor() {
-        if (props.mode !== 'edit') return;
-        closeOpenTarget();
-        draftKey.value += 1;
-        draft.value = { content: '' };
-        openTarget.value = { kind: OpenTarget.DRAFT };
-      }
-
-      function setDraftContent(html) {
-        draft.value = { content: html };
-      }
-
       // Open targets are held by index, so a deletion shifts the ones after it —
-      // close the editor rather than let it land on a different item.
-      function onRemovePair(index) {
+      // close the editor rather than let it land on a different item. The press
+      // unmounts its own delete button, so focus moves to the pair taking its place.
+      async function onRemovePair(index) {
         closeOpenTarget();
         removePair(index);
-        focusAfterRemoval('.pair-actions button', index, addPairButton);
+        await nextTick();
+        if (isOnlyPair.value) {
+          addPairButton.value.$el.focus();
+        } else {
+          deletePairButtons.value[Math.min(index, state.value.pairs.length - 1)].$el.focus();
+        }
       }
 
-      function onRemoveDistractor(choice) {
-        const index = state.value.distractors.indexOf(choice);
-        if (index === -1) return;
-        // Closing drops a distractor left blank, so this one may already be gone —
-        // and the rest have shifted. Re-resolve before removing, but still move
-        // focus off the button this press is unmounting.
-        closeOpenTarget();
-        const remaining = state.value.distractors.indexOf(choice);
-        if (remaining !== -1) removeDistractor(remaining);
-        focusAfterRemoval('.distractor-actions button', index, addDistractorButton);
-      }
-
-      // Separate from discardDraft, which also runs on leaving edit mode — moving focus
-      // there would pull it back into a section that is being unmounted.
-      function onDiscardDraft() {
-        discardDraft();
-        addDistractorButton.value?.$el?.focus();
-      }
+      const distractorChipLabel = number => editDistractorLabel$({ number });
+      const distractorDeleteLabel = number => deleteDistractorBtn$({ number });
 
       const workingInteraction = computed(() => ({
         bodyXml: bodyXml.value,
@@ -584,8 +408,11 @@
       watch(
         () => props.mode,
         newMode => {
+          // Leaving edit mode unmounts the distractor list, throwing a draft away
+          // rather than committing it: the parent stops listening for updates, so
+          // a commit would go unreported.
           if (newMode !== 'edit') {
-            discardDraft();
+            openTarget.value = null;
             return;
           }
           if (!hasRichTextContent(state.value.prompt)) {
@@ -684,13 +511,6 @@
         ),
       );
 
-      // An open distractor is bordered by its own editor, so the row adds none.
-      const distractorStyles = computed(() =>
-        state.value.distractors.map((choice, index) =>
-          isDistractorOpen(index) ? {} : borderStyle(choiceHasError(choice)),
-        ),
-      );
-
       const promptWrapperClass = computed(() =>
         isPromptOpen.value
           ? 'prompt-wrapper'
@@ -721,26 +541,19 @@
       // One option per association the learner can make: the emitted XML folds
       // choices holding the same answer into a single option whose match-max is
       // the number of occurrences walked here.
-      const shuffledPool = computed(() =>
-        shuffle([...flatten(state.value.pairs), ...state.value.distractors]),
-      );
-
-      const poolChipStyles = computed(() =>
-        shuffledPool.value.map(choice => {
-          const isCorrect =
-            props.showAnswers && pairedTexts.value.has(richTextComparisonKey(choice.content));
-          return {
-            borderColor: isCorrect ? palette.green.v_600 : tokens.fineLine,
-            backgroundColor: isCorrect ? palette.green.v_50 : null,
-          };
-        }),
+      const poolChoices = computed(() =>
+        [...flatten(state.value.pairs), ...state.value.distractors].map(choice => ({
+          content: choice.content,
+          isCorrect:
+            props.showAnswers && pairedTexts.value.has(richTextComparisonKey(choice.content)),
+        })),
       );
 
       return {
         EditorImageProcessor,
-        rootEl,
         addPairButton,
-        addDistractorButton,
+        deletePairButtons,
+        distractorList,
         state,
         isPromptOpen,
         promptWrapperClass,
@@ -749,30 +562,26 @@
         closeOpenTarget,
         isPairItemOpen,
         isPairRowStacked,
-        isDistractorOpen,
+        distractorChipLabel,
+        distractorDeleteLabel,
         openPairItem,
-        openDistractor,
+        onDistractorsOpen,
+        onDistractorsClose,
         setPairItemContent,
+        addDistractor,
+        removeDistractor,
         setDistractorContent,
         setPrompt,
         onRemovePair,
-        onRemoveDistractor,
         onAddPair,
-        onAddDistractor,
-        draft,
-        draftKey,
-        setDraftContent,
-        onDiscardDraft,
         promptHasError,
         tooFewPairsError,
         pairErrorMessages,
         distractorErrorMessages,
         pairItemStyles,
-        distractorStyles,
         isOnlyPair,
         pairsSectionLabel,
-        shuffledPool,
-        poolChipStyles,
+        poolChoices,
         questionLabel$,
         editQuestionLabel$,
         errorPromptRequired$,
@@ -784,9 +593,7 @@
         addPairBtn$,
         deletePairBtn$,
         addDistractorBtn$,
-        deleteDistractorBtn$,
         editPairItemLabel$,
-        editDistractorLabel$,
         errorTooFewPairs$,
       };
     },
@@ -955,44 +762,30 @@
 
   // A pair card sits on the tinted row, so it carries the surface colour itself.
   // Its editor stretches with it: a card pulled taller by the one beside it
-  // would otherwise show the editor's own bottom border above its own.
+  // would otherwise show the editor's own bottom border above its own. As a
+  // grid, the card stretches the slot wrapper inside it to its own height. Its
+  // one track may shrink below a long formula, leaving the editor to clip it.
   .pair-card {
-    display: flex;
+    display: grid;
     flex: 1;
-    flex-direction: column;
+    grid-template-columns: minmax(0, 1fr);
     min-width: 0;
     background-color: v-bind('$themeTokens.surface');
 
-    ::v-deep .content-wrapper {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-    }
-
     .editor {
       flex: 1;
     }
 
     .item-card-text {
       display: flex;
-      flex: 1;
       flex-direction: column;
+      height: 100%;
       padding: 0;
 
       &.is-closed {
         min-height: 40px;
-
-        // A closed card shows one line, so paragraph margins would only push it
-        // past that height.
-        ::v-deep .ProseMirror p {
-          margin: 0;
-        }
       }
     }
-
-    ::v-deep .editor-content {
-      padding: 8px;
-    }
   }
 
   .pair-actions {
@@ -1009,30 +802,7 @@
     margin-top: 8px;
   }
 
-  .pool-box {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 12px;
-    border: 1px solid;
-    border-radius: 4px;
-
-    &.is-shuffled {
-      background-color: v-bind('$themePalette.grey.v_50');
-    }
-  }
-
-  .chip-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  // A chip is a compact pill, so it replaces the editor's own content padding
-  // and paragraph margins with its own.
+  // A chip is a compact pill, so its editor has no padding of its own.
   .chip {
     display: flex;
     gap: 8px;
@@ -1043,78 +813,6 @@
     background-color: v-bind('$themeTokens.surface');
     border: 1px solid;
     border-radius: 8px;
-
-    // Tinted only in the distractor pool, whose box sits on the surface; the
-    // shuffled pool is itself tinted, so its chips stay on the surface.
-    &.is-tinted {
-      background-color: v-bind('$themePalette.grey.v_50');
-    }
-
-    ::v-deep .editor-content {
-      padding: 0;
-    }
-
-    ::v-deep .ProseMirror p {
-      margin: 0;
-    }
-  }
-
-  .draft-row {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  // The open editor draws its own border, so the row it sits in adds none.
-  .draft-editor {
-    flex: 1;
-    min-width: 0;
-    background-color: v-bind('$themeTokens.surface');
-  }
-
-  // Stacks the chip over the validation message that belongs to it, so a
-  // flagged distractor pushes the chips after it along rather than down.
-  .distractor {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    max-width: 100%;
-
-    &.is-editing {
-      flex-basis: 100%;
-    }
-  }
-
-  // The chip itself is the clickable region, so hover, focus ring and radius all
-  // follow the chip's own edge.
-  .distractor-row {
-    display: flex;
-    align-items: center;
-
-    &.is-clickable {
-      cursor: pointer;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: v-bind('$themeTokens.fineLine');
-      }
-    }
-
-    ::v-deep .content-wrapper {
-      display: flex;
-      flex: 1;
-      gap: 8px;
-      align-items: center;
-      min-width: 0;
-    }
-  }
-
-  // A blank choice renders nothing, so without a floor the chip collapses to a
-  // strip too small to click.
-  .distractor-content {
-    flex: 1;
-    min-width: 24px;
-    min-height: 24px;
   }
 
   .editor {
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
index 71d674f63a..a5ca1c0a63 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -159,6 +159,10 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     message: 'Delete distractor {number}',
     context: 'Accessible label for the delete icon button on a distractor',
   },
+  saveChipBtn: {
+    message: 'Save',
+    context: 'Button that adds the answer or distractor being written to its list',
+  },
   editPairItemLabel: {
     message: 'Edit pair {number}, item {position}',
     context: 'Accessible label for the clickable region to edit one item of a pair',
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index 4db027194e..22c3dbf891 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -3,7 +3,7 @@
   <div
     ref="editorContainer"
     class="editor-container"
-    :class="{ 'view-mode': editorMode === 'view' }"
+    :class="{ 'view-mode': editorMode === 'view', 'is-padded': padding === 'default' }"
     :style="[
       minHeight && editorMode !== 'view' ? { minHeight } : {},
       editorMode !== 'view' ? { backgroundColor: $themePalette.white } : {},
@@ -92,6 +92,7 @@
     </div>
 
     <EditorContentWrapper
+      :padding="padding"
       :inert="editorMode === 'view'"
       @drop.native.prevent="handleDrop"
       @dragover.native.prevent
@@ -357,6 +358,15 @@
         default: 'markdown',
         validator: v => ['markdown', 'html'].includes(v),
       },
+      /**
+       * Space around the content: 'default', 'small' (8px) or 'none', for cards
+       * and chips. Below default, view mode also drops paragraph margins.
+       */
+      padding: {
+        type: String,
+        default: 'default',
+        validator: v => ['default', 'small', 'none'].includes(v),
+      },
     },
     emits: ['update', 'minimize', 'open-editor'],
   });
@@ -487,4 +497,10 @@
     margin: 4px 0;
   }
 
+  /* A card or chip with reduced padding shows its content as one line, which
+     paragraph margins would push past that padding. */
+  .editor-container.view-mode:not(.is-padded) p {
+    margin: 0;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
index 64095e6f5f..e8d060ff4f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div class="editor-content">
+  <div
+    class="editor-content"
+    :class="{ 'padding-small': padding === 'small', 'padding-none': padding === 'none' }"
+  >
     <EditorContent
       v-if="isReady && editor"
       :editor="editor"
@@ -30,6 +33,12 @@
         isReady,
       };
     },
+    props: {
+      padding: {
+        type: String,
+        default: 'default',
+      },
+    },
   });
 
 </script>
@@ -48,6 +57,14 @@
     overflow: hidden;
   }
 
+  .editor-content.padding-small {
+    padding: 8px;
+  }
+
+  .editor-content.padding-none {
+    padding: 0;
+  }
+
   .tiptap-editor {
     outline: none;
   }

From 7d73b67b2b18456700e489d1baad21038550cc23 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 24 Sep 2026 09:14:37 -0700
Subject: [PATCH 2/4] Add QTI match interaction editor

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../QTIEditor/__tests__/validateItem.spec.js  |   19 +
 .../__tests__/InteractionSection.spec.js      |   79 +-
 .../__tests__/QTIItemEditor.spec.js           |   28 +-
 .../components/QTIItemEditor/index.vue        |    1 +
 .../__tests__/useMatchInteraction.spec.js     |  187 +++
 .../composables/useMatchInteraction.js        |  103 ++
 .../shared/views/QTIEditor/constants.js       |    6 +
 .../interactions/__tests__/registry.spec.js   |    4 +-
 .../QTIEditor/interactions/descriptors.js     |    2 +
 .../views/QTIEditor/interactions/index.js     |    2 +
 .../interactions/match/Descriptor.js          |   86 ++
 .../QTIEditor/interactions/match/Editor.vue   | 1001 +++++++++++++++++
 .../match/__tests__/Descriptor.spec.js        |   20 +
 .../match/__tests__/Editor.spec.js            |  877 +++++++++++++++
 .../match/__tests__/parse.spec.js             |  491 ++++++++
 .../match/__tests__/validation.spec.js        |  218 ++++
 .../QTIEditor/interactions/match/parse.js     |  243 ++++
 .../interactions/match/validation.js          |   98 ++
 .../views/QTIEditor/qtiEditorStrings.js       |   79 +-
 .../views/QTIEditor/utils/testingFixtures.js  |   46 +
 20 files changed, 3560 insertions(+), 30 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useMatchInteraction.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useMatchInteraction.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Descriptor.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Editor.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Descriptor.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Editor.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/parse.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/validation.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/parse.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/validation.js

diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/__tests__/validateItem.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/__tests__/validateItem.spec.js
index 0b072d7b38..7f9d5204bd 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/__tests__/validateItem.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/__tests__/validateItem.spec.js
@@ -5,6 +5,9 @@ import {
   CHOICE_ITEM_DOCUMENT_NO_PROMPT,
   CHOICE_ITEM_DOCUMENT_NO_CORRECT_ANSWER,
   NO_INTERACTION_ITEM_DOCUMENT,
+  VALID_MATCH_ITEM_DOCUMENT,
+  MATCH_THREE_SETS_XML,
+  MATCH_XML,
 } from '../utils/testingFixtures';
 
 const codesOf = errors => errors.map(error => error.code);
@@ -37,6 +40,22 @@ describe('validateQtiItem', () => {
     expect(validateQtiItem(undefined)).toEqual([{ code: ValidationError.NO_INTERACTION }]);
   });
 
+  describe('match interaction', () => {
+    it('returns no errors for a complete match item', () => {
+      expect(validateQtiItem(VALID_MATCH_ITEM_DOCUMENT)).toEqual([]);
+    });
+
+    it('runs the match validator', () => {
+      const noPrompt = VALID_MATCH_ITEM_DOCUMENT.replace(/<qti-prompt>.*<\/qti-prompt>/, '');
+      expect(codesOf(validateQtiItem(noPrompt))).toContain(ValidationError.PROMPT_REQUIRED);
+    });
+
+    it('reports a match interaction without exactly two match sets as unparseable', () => {
+      const threeSets = VALID_MATCH_ITEM_DOCUMENT.replace(MATCH_XML, MATCH_THREE_SETS_XML);
+      expect(validateQtiItem(threeSets)).toEqual([{ code: ValidationError.PARSE_ERROR }]);
+    });
+  });
+
   it('reports unparseable XML', () => {
     expect(validateQtiItem('<qti-assessment-item><oops>')).toEqual([
       { code: ValidationError.PARSE_ERROR },
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js
index e5f25514dc..360d681956 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js
@@ -8,6 +8,7 @@ import {
   CHOICE_SINGLE_SELECT_XML,
   CHOICE_MULTI_SELECT_XML,
   UNKNOWN_INTERACTION_XML,
+  MATCH_THREE_SETS_XML,
   mockInteractionBlock as interactionBlock,
 } from '../../../utils/testingFixtures';
 
@@ -16,7 +17,7 @@ jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
   const { ref } = require('vue');
   return {
     __esModule: true,
-    default: () => ({ windowIsSmall: ref(false) }),
+    default: () => ({ windowIsSmall: ref(false), windowIsLarge: ref(true) }),
   };
 });
 
@@ -62,36 +63,43 @@ describe('InteractionSection', () => {
       renderSection({ interaction: interactionBlock('not-xml<{{') });
       expect(screen.getByText(tr.$tr('errorParsingQuestion'))).toBeInTheDocument();
     });
+
+    it('shows a parse error for a match interaction without exactly two match sets', () => {
+      renderSection({ interaction: interactionBlock(MATCH_THREE_SETS_XML) });
+      expect(screen.getByText(tr.$tr('errorParsingQuestion'))).toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: tr.$tr('addRowBtn') })).not.toBeInTheDocument();
+    });
   });
 
-  describe('type switching', () => {
-    it('preserves the prompt but resets choices when switching from choice to text-entry', async () => {
-      const Wrapper = {
-        components: { InteractionSection },
-        template: `
-          <InteractionSection
-            mode="edit"
-            :interaction="interactionBlock"
-            @update:interaction="onUpdate"
-          />
-        `,
-        data() {
-          return {
-            interactionBlock: {
-              bodyXml: CHOICE_SINGLE_SELECT_XML,
-              responseDeclarations: [],
-            },
-          };
-        },
-        methods: {
-          onUpdate(val) {
-            this.interactionBlock = val;
-            this.$emit('wrapper-update', val);
-          },
+  // Feeds each emitted interaction back in, as the item editor does.
+  const SwitchableSection = {
+    components: { InteractionSection },
+    template: `
+      <InteractionSection
+        mode="edit"
+        :interaction="interactionBlock"
+        @update:interaction="onUpdate"
+      />
+    `,
+    data() {
+      return {
+        interactionBlock: {
+          bodyXml: CHOICE_SINGLE_SELECT_XML,
+          responseDeclarations: [],
         },
       };
+    },
+    methods: {
+      onUpdate(val) {
+        this.interactionBlock = val;
+        this.$emit('wrapper-update', val);
+      },
+    },
+  };
 
-      const { emitted } = render(Wrapper, {
+  describe('type switching', () => {
+    it('preserves the prompt but resets choices when switching from choice to text-entry', async () => {
+      const { emitted } = render(SwitchableSection, {
         routes: new VueRouter(),
       });
 
@@ -114,6 +122,25 @@ describe('InteractionSection', () => {
     });
   });
 
+  describe('switching to match', () => {
+    it('produces a match item that reopens in the match editor', async () => {
+      const { emitted, unmount } = render(SwitchableSection, { routes: new VueRouter() });
+      await nextTick();
+
+      await fireEvent.click(screen.getAllByText(tr.$tr('singleSelectLabel'))[0]);
+      await fireEvent.click(screen.getByText(tr.$tr('matchLabel')));
+      await nextTick();
+
+      const switched = emitted()['wrapper-update'].at(-1)[0];
+      expect(switched.bodyXml).toContain('Which planet is closest to the Sun?');
+      expect(switched.bodyXml.match(/<qti-simple-match-set/g)).toHaveLength(2);
+
+      unmount();
+      renderSection({ interaction: switched });
+      expect(screen.getByRole('button', { name: tr.$tr('addRowBtn') })).toBeInTheDocument();
+    });
+  });
+
   describe('unknown interaction type', () => {
     it('falls back silently when the interaction tag is unrecognized', () => {
       // Should not throw — just renders the fallback component
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js
index 1404d9753f..b74b9b405b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js
@@ -13,6 +13,7 @@ import {
   CHOICE_ITEM_DOCUMENT_WITH_HINTS,
   NO_INTERACTION_ITEM_WITH_HINTS,
   VALID_ASSOCIATE_ITEM_DOCUMENT,
+  VALID_MATCH_ITEM_DOCUMENT,
 } from '../../../utils/testingFixtures';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
@@ -20,7 +21,7 @@ jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
   const { ref } = require('vue');
   return {
     __esModule: true,
-    default: () => ({ windowIsSmall: ref(false) }),
+    default: () => ({ windowIsSmall: ref(false), windowIsLarge: ref(true) }),
   };
 });
 
@@ -31,6 +32,8 @@ const {
   incompleteItemIndicatorLabel$,
   hintsLabel$,
   associateLabel$,
+  matchLabel$,
+  questionNumberAndTypeLabel$,
   unknownTypeLabel$,
   responsePoolLabel$,
 } = qtiEditorStrings;
@@ -318,6 +321,29 @@ describe('QTIItemEditor', () => {
     });
   });
 
+  describe('match interaction', () => {
+    const renderMatchItem = () =>
+      renderComponent({
+        item: {
+          assessment_id: 'test-item-id',
+          type: AssessmentItemTypes.QTI,
+          raw_data: VALID_MATCH_ITEM_DOCUMENT,
+        },
+      });
+
+    test('names the match question type rather than falling back to unknown', async () => {
+      renderMatchItem();
+      const heading = questionNumberAndTypeLabel$({ number: 1, total: 5, type: matchLabel$() });
+      expect(await screen.findByText(heading)).toBeInTheDocument();
+    });
+
+    test('renders the match editor for the parsed interaction', async () => {
+      renderMatchItem();
+      expect(await screen.findByText(responsePoolLabel$())).toBeInTheDocument();
+      expect(screen.getByText('Dog')).toBeInTheDocument();
+    });
+  });
+
   describe('toolbarActions slot', () => {
     test('renders content injected into the toolbarActions slot', () => {
       renderComponent({}, { toolbarActions: '<button>Edit</button>' });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
index 8c36a87748..df8778b14d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
@@ -183,6 +183,7 @@
           [QuestionType.FREE_RESPONSE]: qtiEditorStrings.freeResponseLabel$,
           [QuestionType.ORDERING]: qtiEditorStrings.orderingLabel$,
           [QuestionType.ASSOCIATE]: qtiEditorStrings.associateLabel$,
+          [QuestionType.MATCH]: qtiEditorStrings.matchLabel$,
         };
         return (QUESTION_TYPE_LABELS[type] ?? unknownTypeLabel$)();
       });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useMatchInteraction.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useMatchInteraction.spec.js
new file mode 100644
index 0000000000..e1b3470c0f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useMatchInteraction.spec.js
@@ -0,0 +1,187 @@
+import { ref } from 'vue';
+import { useMatchInteraction } from '../useMatchInteraction';
+import { MATCH_XML, MATCH_DECL_XML } from '../../utils/testingFixtures';
+import { parseXML } from '../../serialization/xml';
+import { QuestionType } from '../../constants';
+
+const GENERATED_CHOICE_ID = /^choice_[a-z0-9]{8}$/;
+const GENERATED_ROW_ID = /^row_[a-z0-9]{8}$/;
+
+const contentsOf = rows =>
+  rows.map(row => [row.content, row.matches.map(choice => choice.content)]);
+
+const maxAssociations = bodyXml =>
+  parseXML(bodyXml).documentElement.getAttribute('max-associations');
+
+describe('useMatchInteraction', () => {
+  function setup(bodyXml = MATCH_XML, declarationXml = MATCH_DECL_XML) {
+    const questionType = ref(QuestionType.MATCH);
+    return useMatchInteraction({ bodyXml, responseDeclarations: [declarationXml] }, questionType);
+  }
+
+  describe('addRow()', () => {
+    it('appends a row with a blank prompt and one blank answer', () => {
+      const { state, addRow } = setup();
+      addRow();
+      expect(state.value.rows).toHaveLength(4);
+      const row = state.value.rows[3];
+      expect(row.content).toBe('');
+      expect(row.id).toMatch(GENERATED_ROW_ID);
+      expect(row.matches).toHaveLength(1);
+      expect(row.matches[0].content).toBe('');
+      expect(row.matches[0].id).toMatch(GENERATED_CHOICE_ID);
+    });
+
+    it('rebuilds bodyXml with the new max-associations', () => {
+      const { bodyXml, addRow } = setup();
+      addRow();
+      expect(maxAssociations(bodyXml.value)).toBe('4');
+    });
+  });
+
+  describe('removeRow()', () => {
+    it('drops the row at the given index and keeps the rest in order', () => {
+      const { state, removeRow } = setup();
+      removeRow(1);
+      expect(contentsOf(state.value.rows)).toEqual([
+        ['Dog', ['Mammal']],
+        ['Frog', ['Amphibian']],
+      ]);
+    });
+
+    it('is a no-op when only one row remains', () => {
+      const { state, removeRow } = setup();
+      removeRow(0);
+      removeRow(0);
+      removeRow(0);
+      expect(contentsOf(state.value.rows)).toEqual([['Frog', ['Amphibian']]]);
+    });
+
+    it("drops the row's values from the emitted correct response", () => {
+      const { responseDeclarations, removeRow } = setup();
+      removeRow(0);
+      expect(responseDeclarations.value[0]).not.toContain('row_dog');
+    });
+  });
+
+  describe('setRowContent()', () => {
+    it('updates only the targeted row prompt', () => {
+      const { state, setRowContent } = setup();
+      setRowContent(1, '<p>Hawk</p>');
+      expect(contentsOf(state.value.rows)).toEqual([
+        ['Dog', ['Mammal']],
+        ['<p>Hawk</p>', ['Bird']],
+        ['Frog', ['Amphibian']],
+      ]);
+    });
+  });
+
+  describe('addMatch()', () => {
+    it('appends a blank answer with a generated id to that row only', () => {
+      const { state, addMatch } = setup();
+      addMatch(0);
+      expect(contentsOf(state.value.rows)).toEqual([
+        ['Dog', ['Mammal', '']],
+        ['Eagle', ['Bird']],
+        ['Frog', ['Amphibian']],
+      ]);
+      expect(state.value.rows[0].matches[1].id).toMatch(GENERATED_CHOICE_ID);
+    });
+
+    it('appends the given content when the answer is written before it is added', () => {
+      const { state, addMatch } = setup();
+      addMatch(2, '<p>Vertebrate</p>');
+      expect(state.value.rows[2].matches.map(c => c.content)).toEqual([
+        'Amphibian',
+        '<p>Vertebrate</p>',
+      ]);
+      expect(state.value.rows[2].matches[1].id).toMatch(GENERATED_CHOICE_ID);
+    });
+
+    it('leaves a previously captured state untouched', () => {
+      const { state, addMatch } = setup();
+      const before = state.value;
+      addMatch(0, '<p>Vertebrate</p>');
+      expect(contentsOf(before.rows)).toEqual([
+        ['Dog', ['Mammal']],
+        ['Eagle', ['Bird']],
+        ['Frog', ['Amphibian']],
+      ]);
+    });
+  });
+
+  describe('removeMatch()', () => {
+    it('drops only the targeted answer', () => {
+      const { state, addMatch, removeMatch } = setup();
+      addMatch(0, '<p>Vertebrate</p>');
+      addMatch(1, '<p>Vertebrate</p>');
+      removeMatch(0, 0);
+      expect(contentsOf(state.value.rows)).toEqual([
+        ['Dog', ['<p>Vertebrate</p>']],
+        ['Eagle', ['Bird', '<p>Vertebrate</p>']],
+        ['Frog', ['Amphibian']],
+      ]);
+    });
+
+    it('keeps the identity of the answers after the removed one', () => {
+      const { state, addMatch, removeMatch } = setup();
+      addMatch(0, '<p>Vertebrate</p>');
+      const second = state.value.rows[0].matches[1];
+      removeMatch(0, 0);
+      expect(state.value.rows[0].matches[0]).toBe(second);
+    });
+
+    it("is a no-op on a row's only answer", () => {
+      const { state, removeMatch } = setup();
+      removeMatch(0, 0);
+      expect(contentsOf(state.value.rows)[0]).toEqual(['Dog', ['Mammal']]);
+    });
+  });
+
+  describe('setMatchContent()', () => {
+    it('updates only the targeted answer', () => {
+      const { state, addMatch, setMatchContent } = setup();
+      addMatch(0, '<p>Vertebrate</p>');
+      setMatchContent(0, 1, '<p>Canine</p>');
+      expect(contentsOf(state.value.rows)).toEqual([
+        ['Dog', ['Mammal', '<p>Canine</p>']],
+        ['Eagle', ['Bird']],
+        ['Frog', ['Amphibian']],
+      ]);
+    });
+  });
+
+  describe('addDistractor()', () => {
+    it('appends one blank choice with a generated id', () => {
+      const { state, addDistractor } = setup();
+      addDistractor();
+      expect(state.value.distractors).toHaveLength(2);
+      expect(state.value.distractors[1].content).toBe('');
+      expect(state.value.distractors[1].id).toMatch(GENERATED_CHOICE_ID);
+    });
+
+    it('appends the given content when the distractor is written before it is added', () => {
+      const { state, addDistractor } = setup();
+      addDistractor('<p>Fish</p>');
+      expect(state.value.distractors[1].content).toBe('<p>Fish</p>');
+      expect(state.value.distractors[1].id).toMatch(GENERATED_CHOICE_ID);
+    });
+  });
+
+  describe('removeDistractor()', () => {
+    it('drops the distractor at the given index', () => {
+      const { state, removeDistractor } = setup();
+      removeDistractor(0);
+      expect(state.value.distractors).toEqual([]);
+    });
+  });
+
+  describe('setDistractorContent()', () => {
+    it('updates only the targeted distractor', () => {
+      const { state, addDistractor, setDistractorContent } = setup();
+      addDistractor();
+      setDistractorContent(1, '<p>Updated</p>');
+      expect(state.value.distractors.map(d => d.content)).toEqual(['Reptile', '<p>Updated</p>']);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useMatchInteraction.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useMatchInteraction.js
new file mode 100644
index 0000000000..a056e99dc5
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useMatchInteraction.js
@@ -0,0 +1,103 @@
+import { readonly } from 'vue';
+import { matchInteractionDescriptor } from '../interactions/match/Descriptor';
+import { newChoice, newRow } from '../interactions/match/parse';
+import { useInteraction } from './useInteraction';
+
+/**
+ * Composable for the match interaction editor.
+ *
+ * @param {{ bodyXml: string, responseDeclarations: string[] }} interactionBlock
+ * @param {import('vue').Ref<string|null>} questionType
+ */
+export function useMatchInteraction(interactionBlock, questionType) {
+  const base = useInteraction(matchInteractionDescriptor, interactionBlock, questionType);
+  const { state } = base;
+
+  function updateRow(index, update) {
+    state.value = {
+      ...state.value,
+      rows: state.value.rows.map((row, i) => (i === index ? update(row) : row)),
+    };
+  }
+
+  function addRow() {
+    state.value = { ...state.value, rows: [...state.value.rows, newRow()] };
+  }
+
+  function removeRow(index) {
+    // A match question is meaningless without a row to match.
+    if (state.value.rows.length <= 1) return;
+    state.value = {
+      ...state.value,
+      rows: state.value.rows.filter((_, i) => i !== index),
+    };
+  }
+
+  function setRowContent(index, html) {
+    updateRow(index, row => ({ ...row, content: html }));
+  }
+
+  function addMatch(rowIndex, content = '') {
+    updateRow(rowIndex, row => ({ ...row, matches: [...row.matches, newChoice(content)] }));
+  }
+
+  function removeMatch(rowIndex, index) {
+    // A row always keeps an answer to match.
+    if (state.value.rows[rowIndex].matches.length <= 1) return;
+    updateRow(rowIndex, row => ({
+      ...row,
+      matches: row.matches.filter((_, i) => i !== index),
+    }));
+  }
+
+  function setMatchContent(rowIndex, index, html) {
+    updateRow(rowIndex, row => ({
+      ...row,
+      matches: row.matches.map((choice, i) =>
+        i === index ? { ...choice, content: html } : choice,
+      ),
+    }));
+  }
+
+  function addDistractor(content = '') {
+    state.value = {
+      ...state.value,
+      distractors: [...state.value.distractors, newChoice(content)],
+    };
+  }
+
+  function removeDistractor(index) {
+    state.value = {
+      ...state.value,
+      distractors: state.value.distractors.filter((_, i) => i !== index),
+    };
+  }
+
+  function setDistractorContent(index, html) {
+    state.value = {
+      ...state.value,
+      distractors: state.value.distractors.map((choice, i) =>
+        i === index ? { ...choice, content: html } : choice,
+      ),
+    };
+  }
+
+  function setPrompt(html) {
+    state.value = { ...state.value, prompt: html };
+  }
+
+  return {
+    ...base,
+    state: readonly(state),
+    addRow,
+    removeRow,
+    setRowContent,
+    addMatch,
+    removeMatch,
+    setMatchContent,
+    addDistractor,
+    removeDistractor,
+    setDistractorContent,
+    setPrompt,
+  };
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
index 22572b1467..3a4b941c21 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
@@ -84,6 +84,7 @@ export const QuestionType = Object.freeze({
   FREE_RESPONSE: 'freeResponse',
   ORDERING: 'ordering',
   ASSOCIATE: 'associate',
+  MATCH: 'match',
 });
 
 /**
@@ -108,6 +109,11 @@ export const ValidationError = Object.freeze({
   TOO_FEW_PAIRS: 'TOO_FEW_PAIRS',
   DUPLICATE_PAIR_CONTENT: 'DUPLICATE_PAIR_CONTENT',
   DUPLICATE_DISTRACTOR_CONTENT: 'DUPLICATE_DISTRACTOR_CONTENT',
+  EMPTY_ROW_CONTENT: 'EMPTY_ROW_CONTENT',
+  ROW_WITHOUT_MATCH: 'ROW_WITHOUT_MATCH',
+  TOO_FEW_ROWS: 'TOO_FEW_ROWS',
+  DUPLICATE_ROW_CONTENT: 'DUPLICATE_ROW_CONTENT',
+  DUPLICATE_MATCH_CONTENT: 'DUPLICATE_MATCH_CONTENT',
 });
 
 export const RESPONSE_IDENTIFIER = 'RESPONSE';
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/registry.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/registry.spec.js
index 1f753c67cd..73a745dde6 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/registry.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/registry.spec.js
@@ -1,6 +1,6 @@
 import { descriptors, editors, registry, DEFAULT_INTERACTION } from '../index';
 import { isInlineInteraction } from '../descriptors';
-import { Placement } from '../../constants';
+import { Placement, QtiInteraction } from '../../constants';
 
 /**
  * An interaction is registered in two places: its descriptor in `descriptors.js` and its
@@ -42,7 +42,7 @@ describe('interaction registry', () => {
     });
 
     it('reports an interaction with no descriptor as not inline', () => {
-      expect(isInlineInteraction('qti-match-interaction')).toBe(false);
+      expect(isInlineInteraction(QtiInteraction.EXTENDED_TEXT)).toBe(false);
     });
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js
index 3d296148ff..dbdfce7a4b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js
@@ -3,6 +3,7 @@ import { choiceInteractionDescriptor } from './choice/Descriptor';
 import { textEntryInteractionDescriptor } from './textEntry/Descriptor';
 import { orderingInteractionDescriptor } from './ordering/Descriptor';
 import { associateInteractionDescriptor } from './associate/Descriptor';
+import { matchInteractionDescriptor } from './match/Descriptor';
 
 /**
  * Every interaction's descriptor: matching, parsing, building and validating XML.
@@ -28,6 +29,7 @@ export const descriptors = [
   textEntryInteractionDescriptor,
   orderingInteractionDescriptor,
   associateInteractionDescriptor,
+  matchInteractionDescriptor,
 ];
 
 /**
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js
index 1db98e2ce8..a20d0958f5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js
@@ -3,6 +3,7 @@ import ChoiceEditor from './choice/Editor.vue';
 import TextEntryEditor from './textEntry/Editor.vue';
 import OrderingEditor from './ordering/Editor.vue';
 import AssociateEditor from './associate/Editor.vue';
+import MatchEditor from './match/Editor.vue';
 
 /**
  * Entry point for the editor tree: the descriptors, plus the Vue component that edits each
@@ -17,6 +18,7 @@ export const editors = Object.freeze({
   [QtiInteraction.TEXT_ENTRY]: TextEntryEditor,
   [QtiInteraction.ORDER]: OrderingEditor,
   [QtiInteraction.ASSOCIATE]: AssociateEditor,
+  [QtiInteraction.MATCH]: MatchEditor,
 });
 
 export { DEFAULT_INTERACTION, descriptors, registry } from './descriptors';
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Descriptor.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Descriptor.js
new file mode 100644
index 0000000000..2318b037f0
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Descriptor.js
@@ -0,0 +1,86 @@
+import { QtiInteraction, QuestionType, BaseType, Cardinality } from '../../constants';
+import { InteractionDescriptor } from '../InteractionDescriptor';
+import { parseMatchInteraction, buildMatchInteractionXML, hasTwoMatchSets } from './parse';
+import { validateMatchInteraction } from './validation';
+
+/**
+ * Owns all match-specific interaction logic: schema, parse, buildXML, and validate.
+ */
+export class MatchInteractionDescriptor extends InteractionDescriptor {
+  constructor() {
+    super({
+      type: QtiInteraction.MATCH,
+      questionTypes: [QuestionType.MATCH],
+    });
+    this.convertsFrom = [];
+  }
+
+  getTypeOptions(tr) {
+    return [
+      {
+        value: QuestionType.MATCH,
+        label: tr.matchLabel$(),
+        description: tr.matchDescription$(),
+      },
+    ];
+  }
+
+  /**
+   * Match always has exactly one question type. Throws on a shape the editor cannot
+   * represent, which resolveDescriptor reports as a parse error.
+   *
+   * @param {Element} el
+   * @returns {string}
+   */
+  getQuestionType(el) {
+    if (!hasTwoMatchSets(el)) {
+      throw new Error('qti-match-interaction must have exactly two qti-simple-match-set');
+    }
+    return QuestionType.MATCH;
+  }
+
+  /**
+   * @returns {{ baseType: string, cardinality: string }}
+   */
+  getResponseDeclarationSchema() {
+    return {
+      baseType: BaseType.DIRECTED_PAIR,
+      cardinality: Cardinality.MULTIPLE,
+    };
+  }
+
+  /**
+   * Parse <qti-match-interaction> body XML + response declarations → MatchState.
+   *
+   * @param {string} bodyXml
+   * @param {string[]} responseDeclarations
+   * @returns {object} MatchState
+   */
+  parse(bodyXml, responseDeclarations) {
+    return parseMatchInteraction(bodyXml, responseDeclarations);
+  }
+
+  /**
+   * Serialize MatchState → { bodyXml, responseDeclarations }.
+   *
+   * @param {object} state - MatchState
+   * @param {string} questionType
+   * @returns {{ bodyXml: string, responseDeclarations: string[] }}
+   */
+  buildXML(state, questionType) {
+    return buildMatchInteractionXML(state, questionType, this.getResponseDeclarationSchema());
+  }
+
+  /**
+   * Validate MatchState → ValidationError[].
+   *
+   * @param {object} state - MatchState
+   * @returns {Array<{ code: string, id?: string, index?: number, text?: string }>}
+   */
+  validate(state) {
+    return validateMatchInteraction(state);
+  }
+}
+
+/** Singleton — safe to import from any file in the match module tree. */
+export const matchInteractionDescriptor = new MatchInteractionDescriptor();
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Editor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Editor.vue
new file mode 100644
index 0000000000..27d647967a
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/Editor.vue
@@ -0,0 +1,1001 @@
+<template>
+
+  <div class="match-layout">
+    <!-- Prompt -->
+    <div class="editor-section">
+      <ValidationMessage v-if="promptHasError">
+        {{ errorPromptRequired$() }}
+      </ValidationMessage>
+      <h4
+        class="field-label"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        {{ questionLabel$() }}
+      </h4>
+      <ClickableRegion
+        :class="promptWrapperClass"
+        :style="promptWrapperStyle"
+        :suppressed="mode !== 'edit' || isPromptOpen"
+        :aria-label="editQuestionLabel$()"
+        @click="openPrompt"
+      >
+        <div
+          class="item-card-text"
+          :class="{ 'is-closed': !isPromptOpen }"
+        >
+          <TipTapEditor
+            :value="state.prompt"
+            :mode="isPromptOpen ? mode : 'view'"
+            format="html"
+            :minHeight="'80px'"
+            :autofocus="isPromptOpen"
+            :imageProcessor="EditorImageProcessor"
+            :tabindex="-1"
+            class="editor"
+            @update="setPrompt"
+            @minimize="closeOpenTarget"
+          />
+        </div>
+      </ClickableRegion>
+    </div>
+
+    <!-- Shuffled response pool — what the learner will actually see -->
+    <div
+      v-if="mode === 'view'"
+      class="editor-section"
+    >
+      <ShuffledResponsePool
+        :choices="poolChoices"
+        :label="responsePoolLabel$()"
+      />
+    </div>
+
+    <!-- Matching rows -->
+    <div class="editor-section">
+      <ValidationMessage v-if="tooFewRowsError">
+        {{ errorTooFewRows$() }}
+      </ValidationMessage>
+
+      <div class="section-headers">
+        <h4
+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ matchingRowsLabel$() }}
+        </h4>
+        <div
+          v-if="mode === 'edit'"
+          class="section-sublabel"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          {{ matchingRowsDescription$() }}
+        </div>
+      </div>
+
+      <!-- A stacked row labels its own prompt and answers instead. -->
+      <div
+        v-if="!windowIsSmall"
+        class="column-headers"
+        :class="{ 'is-editable': mode === 'edit' }"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        <div>{{ promptColumnLabel$() }}</div>
+        <div v-if="showsAnswers">{{ answersColumnLabel$() }}</div>
+      </div>
+
+      <ol
+        class="rows-list"
+        :aria-label="matchingRowsLabel$()"
+      >
+        <li
+          v-for="(row, index) in state.rows"
+          :key="index"
+          class="match-row"
+          :class="{ 'is-stacked': isRowStacked(index), 'is-editable': mode === 'edit' }"
+        >
+          <template v-if="isRowStacked(index)">
+            <div
+              class="prompt-label row-label"
+              :style="{ color: $themePalette.grey.v_700 }"
+            >
+              {{ promptColumnLabel$() }}
+            </div>
+            <div
+              v-if="showsAnswers"
+              class="answers-label row-label"
+              :style="{ color: $themePalette.grey.v_700 }"
+            >
+              {{ answersColumnLabel$() }}
+            </div>
+          </template>
+
+          <template v-if="mode === 'edit'">
+            <ClickableRegion
+              class="row-prompt"
+              :class="{ 'is-clickable item-border': !isRowPromptOpen(index) }"
+              :style="rowPromptStyles[index]"
+              :suppressed="isRowPromptOpen(index)"
+              :aria-label="editRowLabel$({ number: index + 1 })"
+              @click="openRow(index)"
+            >
+              <div
+                class="item-card-text"
+                :class="{ 'is-closed': !isRowPromptOpen(index) }"
+              >
+                <span
+                  v-if="!isRowPromptOpen(index) && !hasRichTextContent(row.content)"
+                  class="row-placeholder"
+                  :style="{ color: $themeTokens.annotation }"
+                >
+                  {{ rowPromptPlaceholder$() }}
+                </span>
+                <TipTapEditor
+                  v-else
+                  :value="row.content"
+                  :mode="isRowPromptOpen(index) ? 'edit' : 'view'"
+                  format="html"
+                  padding="small"
+                  :minHeight="'48px'"
+                  :autofocus="isRowPromptOpen(index)"
+                  :imageProcessor="EditorImageProcessor"
+                  :tabindex="-1"
+                  class="editor"
+                  @update="html => setRowContent(index, html)"
+                  @minimize="closeOpenTarget"
+                />
+              </div>
+            </ClickableRegion>
+
+            <EditableChipList
+              ref="answerLists"
+              class="row-answers"
+              addMode="region"
+              :minChips="1"
+              :placeholder="answerPlaceholder$()"
+              :chips="row.matches"
+              :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="onListOpen(OpenTarget.ANSWERS, index)"
+              @close="onListClose(OpenTarget.ANSWERS, index)"
+              @add-chip="html => addMatch(index, html)"
+              @update-chip="(position, html) => onMatchUpdate(index, position, html)"
+              @remove-chip="position => removeMatch(index, position)"
+            />
+
+            <div
+              class="row-actions"
+              @click.stop
+            >
+              <KIconButton
+                ref="deleteRowButtons"
+                icon="close"
+                size="small"
+                :disabled="isOnlyRow"
+                :ariaLabel="deleteRowBtn$({ number: index + 1 })"
+                :tooltip="deleteRowBtn$({ number: index + 1 })"
+                :color="isOnlyRow ? $themeTokens.textDisabled : $themePalette.grey.v_700"
+                @click="onRemoveRow(index)"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div
+              class="chip view-prompt"
+              :style="{ borderColor: $themeTokens.fineLine }"
+            >
+              <TipTapEditor
+                :value="row.content"
+                mode="view"
+                format="html"
+                padding="none"
+                :imageProcessor="EditorImageProcessor"
+                :tabindex="-1"
+                class="editor"
+              />
+            </div>
+            <ul
+              v-if="showsAnswers"
+              class="chip-list row-answers"
+              :aria-label="rowAnswersLabel$({ number: index + 1 })"
+            >
+              <li
+                v-for="(choice, position) in row.matches"
+                :key="`${choice.id}-${position}`"
+                class="chip"
+                :style="{ borderColor: $themeTokens.fineLine }"
+              >
+                <TipTapEditor
+                  :value="choice.content"
+                  mode="view"
+                  format="html"
+                  padding="none"
+                  :imageProcessor="EditorImageProcessor"
+                  :tabindex="-1"
+                  class="editor"
+                />
+              </li>
+            </ul>
+          </template>
+
+          <div
+            v-if="rowErrorMessages[index].length"
+            class="row-messages"
+          >
+            <ValidationMessage
+              v-for="message in rowErrorMessages[index]"
+              :key="message"
+            >
+              {{ message }}
+            </ValidationMessage>
+          </div>
+        </li>
+      </ol>
+
+      <!--
+        The editor this opens mounts before the click finishes bubbling, and
+        TipTap closes on any click outside itself — so the click stops here.
+      -->
+      <div
+        v-if="mode === 'edit'"
+        @click.stop
+      >
+        <AddListItemButton
+          ref="addRowButton"
+          :label="addRowBtn$()"
+          @click="onAddRow"
+        />
+      </div>
+    </div>
+
+    <!-- Distractors -->
+    <div
+      v-if="mode === 'edit'"
+      class="editor-section"
+    >
+      <div class="section-headers">
+        <h4
+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ distractorsLabel$() }}
+        </h4>
+        <div
+          class="section-sublabel"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          {{ distractorsDescription$() }}
+        </div>
+      </div>
+
+      <EditableChipList
+        ref="distractorList"
+        addMode="button"
+        :chips="state.distractors"
+        :addLabel="addDistractorBtn$()"
+        :listLabel="distractorsLabel$()"
+        :chipLabel="number => editDistractorLabel$({ number })"
+        :deleteLabel="number => deleteDistractorBtn$({ number })"
+        :errorMessages="distractorErrorMessages"
+        @open="onListOpen(OpenTarget.DISTRACTORS)"
+        @close="onListClose(OpenTarget.DISTRACTORS)"
+        @add-chip="addDistractor"
+        @update-chip="onDistractorUpdate"
+        @remove-chip="removeDistractor"
+      />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed, nextTick, ref, watch } from 'vue';
+  import groupBy from 'lodash/groupBy';
+  import isEqual from 'lodash/isEqual';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
+  import { qtiEditorStrings } from '../../qtiEditorStrings';
+  import { ValidationError } from '../../constants';
+  import { useMatchInteraction } from '../../composables/useMatchInteraction';
+  import ValidationMessage from '../../components/ValidationMessage/index.vue';
+  import AddListItemButton from '../../components/AddListItemButton/index.vue';
+  import ClickableRegion from '../../components/ClickableRegion/index.vue';
+  import EditableChipList from '../../components/EditableChipList/index.vue';
+  import ShuffledResponsePool from '../../components/ShuffledResponsePool/index.vue';
+  import { hasRichTextContent, richTextComparisonKey } from '../../utils/richText';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
+
+  /** Which card or chip list currently holds the open TipTap editor. */
+  const OpenTarget = Object.freeze({
+    PROMPT: 'prompt',
+    ROW: 'row',
+    ANSWERS: 'answers',
+    DISTRACTORS: 'distractors',
+  });
+
+  export default {
+    name: 'MatchInteractionEditor',
+
+    components: {
+      TipTapEditor,
+      ValidationMessage,
+      AddListItemButton,
+      ClickableRegion,
+      EditableChipList,
+      ShuffledResponsePool,
+    },
+
+    setup(props, { emit }) {
+      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+      const tokens = themeTokens();
+
+      const {
+        questionLabel$,
+        editQuestionLabel$,
+        errorPromptRequired$,
+        matchingRowsLabel$,
+        matchingRowsDescription$,
+        promptColumnLabel$,
+        answersColumnLabel$,
+        answerPlaceholder$,
+        rowPromptPlaceholder$,
+        addRowBtn$,
+        deleteRowBtn$,
+        editRowLabel$,
+        rowAnswersLabel$,
+        addMatchLabel$,
+        editMatchLabel$,
+        deleteMatchBtn$,
+        distractorsLabel$,
+        distractorsDescription$,
+        addDistractorBtn$,
+        deleteDistractorBtn$,
+        editDistractorLabel$,
+        responsePoolLabel$,
+        errorTooFewRows$,
+        errorEmptyRowContent$,
+        errorRowWithoutMatch$,
+        errorDuplicateRowContent$,
+        errorDuplicateMatchContent$,
+        errorDuplicateDistractorContent$,
+        errorEmptyChoiceContent$,
+      } = qtiEditorStrings;
+
+      const questionTypeRef = computed(() => props.questionType);
+
+      const {
+        state,
+        bodyXml,
+        responseDeclarations,
+        errors,
+        addRow,
+        removeRow,
+        setRowContent,
+        addMatch,
+        removeMatch,
+        setMatchContent,
+        addDistractor,
+        removeDistractor,
+        setDistractorContent,
+        setPrompt,
+      } = useMatchInteraction(props.interaction, questionTypeRef);
+
+      // At most one card or chip list holds an open TipTap editor at a time.
+      const openTarget = ref(null);
+
+      const addRowButton = ref(null);
+      const deleteRowButtons = ref([]);
+      const answerLists = ref([]);
+      const distractorList = ref(null);
+
+      function isOpen(kind) {
+        return props.mode === 'edit' && openTarget.value?.kind === kind;
+      }
+
+      const isPromptOpen = computed(() => isOpen(OpenTarget.PROMPT));
+
+      function isOpenInRow(kind, rowIndex) {
+        return isOpen(kind) && openTarget.value.rowIndex === rowIndex;
+      }
+
+      function isRowPromptOpen(index) {
+        return isOpenInRow(OpenTarget.ROW, index);
+      }
+
+      // A row is open while its prompt or its answer list holds the editor.
+      function isRowOpen(index) {
+        return isRowPromptOpen(index) || isOpenInRow(OpenTarget.ANSWERS, index);
+      }
+
+      // A prompt beside its answers leaves an open editor too narrow to hold its
+      // toolbar on anything but a large screen, so the row being edited stacks.
+      // A small screen is too narrow for the row even closed, so it stacks throughout.
+      function isRowStacked(index) {
+        return windowIsSmall.value || (!windowIsLarge.value && isRowOpen(index));
+      }
+
+      const showsAnswers = computed(() => props.mode === 'edit' || props.showAnswers);
+
+      // A chip list commits its own editor as it closes: a written draft joins
+      // it and a chip left blank drops out of it.
+      function closeOpenTarget() {
+        const target = openTarget.value;
+        openTarget.value = null;
+        if (target?.kind === OpenTarget.ANSWERS) answerLists.value[target.rowIndex].close();
+        if (target?.kind === OpenTarget.DISTRACTORS) distractorList.value.close();
+      }
+
+      function setOpenTarget(kind, rowIndex = null) {
+        closeOpenTarget();
+        openTarget.value = { kind, rowIndex };
+      }
+
+      function onListOpen(kind, rowIndex = null) {
+        releaseRepeats();
+        if (!isOpenInRow(kind, rowIndex)) setOpenTarget(kind, rowIndex);
+      }
+
+      function onListClose(kind, rowIndex = null) {
+        if (isOpenInRow(kind, rowIndex)) openTarget.value = null;
+      }
+
+      function openPrompt() {
+        if (props.mode === 'edit') setOpenTarget(OpenTarget.PROMPT);
+      }
+
+      function openRow(index) {
+        setOpenTarget(OpenTarget.ROW, index);
+      }
+
+      function onAddRow() {
+        addRow();
+        openRow(state.value.rows.length - 1);
+      }
+
+      // Open targets are held by index, so a deletion shifts the ones after it —
+      // close the editor rather than let it land on a different item. The press
+      // unmounts its own delete button, so focus moves to the row taking its place.
+      async function onRemoveRow(index) {
+        closeOpenTarget();
+        removeRow(index);
+        await nextTick();
+        if (isOnlyRow.value) {
+          addRowButton.value.$el.focus();
+        } else {
+          deleteRowButtons.value[Math.min(index, state.value.rows.length - 1)].$el.focus();
+        }
+      }
+
+      const workingInteraction = computed(() => ({
+        bodyXml: bodyXml.value,
+        responseDeclarations: responseDeclarations.value,
+      }));
+
+      watch(
+        () => props.mode,
+        newMode => {
+          // Leaving edit mode unmounts the chip lists, throwing a draft away
+          // rather than committing it: the parent stops listening for updates,
+          // so a commit would go unreported.
+          if (newMode !== 'edit') {
+            openTarget.value = null;
+            return;
+          }
+          if (!hasRichTextContent(state.value.prompt)) {
+            openPrompt();
+          } else {
+            openRow(0);
+          }
+        },
+        { immediate: true },
+      );
+
+      // Rebuilding yields a fresh object on every state change, so compare by
+      // value — reopening an editor or retyping the same text is not a change.
+      watch(workingInteraction, (newVal, oldVal) => {
+        if (props.mode !== 'edit' || isEqual(newVal, oldVal)) return;
+        emit('update:interaction', newVal);
+      });
+
+      // Errors are reported the same way, for the card to show that the question needs work.
+      watch(errors, newVal => emit('update:errors', newVal), { immediate: true });
+
+      const errorsByCode = computed(() => groupBy(errors.value, 'code'));
+      const getErrorsWith = code => errorsByCode.value[code] || [];
+
+      const promptHasError = computed(
+        () => getErrorsWith(ValidationError.PROMPT_REQUIRED).length > 0,
+      );
+      const tooFewRowsError = computed(
+        () => getErrorsWith(ValidationError.TOO_FEW_ROWS).length > 0,
+      );
+
+      const rowMessages = {
+        [ValidationError.EMPTY_ROW_CONTENT]: errorEmptyRowContent$,
+        [ValidationError.ROW_WITHOUT_MATCH]: errorRowWithoutMatch$,
+        [ValidationError.DUPLICATE_ROW_CONTENT]: errorDuplicateRowContent$,
+      };
+
+      // Faults of the prompt itself, rather than of its answers, redden its card.
+      const promptFaults = new Set([
+        ValidationError.EMPTY_ROW_CONTENT,
+        ValidationError.DUPLICATE_ROW_CONTENT,
+      ]);
+
+      const rowErrors = computed(() =>
+        state.value.rows.map((_, index) =>
+          errors.value.filter(e => rowMessages[e.code] && e.index === index),
+        ),
+      );
+
+      const rowErrorMessages = computed(() =>
+        rowErrors.value.map(rowErrs => rowErrs.map(e => rowMessages[e.code]())),
+      );
+
+      // Blankness is re-derived from the content rather than read off the
+      // EMPTY_CHOICE_CONTENT error's id, because an id may repeat across choices.
+      function isBlank(choice) {
+        return !hasRichTextContent(choice.content);
+      }
+
+      function isRepeated(choice, texts) {
+        return texts.has(richTextComparisonKey(choice.content));
+      }
+
+      const liveRepeats = computed(() => ({
+        distractors: new Set(
+          getErrorsWith(ValidationError.DUPLICATE_DISTRACTOR_CONTENT).map(e => e.text),
+        ),
+        matches: state.value.rows.map(
+          (_, index) =>
+            new Set(
+              getErrorsWith(ValidationError.DUPLICATE_MATCH_CONTENT)
+                .filter(e => e.index === index)
+                .map(e => e.text),
+            ),
+        ),
+      }));
+
+      // An open chip commits on the blur at mousedown, and a repeat it makes flags
+      // other chips, moving the click target before mouseup. So repeats hold from
+      // a chip's first update until an editor opens or closes.
+      const heldRepeats = ref(null);
+      const shownRepeats = computed(() => heldRepeats.value || liveRepeats.value);
+
+      function holdRepeats() {
+        if (!heldRepeats.value) heldRepeats.value = liveRepeats.value;
+      }
+
+      function releaseRepeats() {
+        heldRepeats.value = null;
+      }
+
+      watch(openTarget, releaseRepeats);
+
+      function onMatchUpdate(index, position, html) {
+        holdRepeats();
+        setMatchContent(index, position, html);
+      }
+
+      function onDistractorUpdate(position, html) {
+        holdRepeats();
+        setDistractorContent(position, html);
+      }
+
+      // An answer a distractor repeats is flagged too, as associate flags its pair.
+      const matchErrorMessages = computed(() =>
+        state.value.rows.map((row, index) =>
+          row.matches.map(choice => {
+            if (isBlank(choice)) return errorEmptyChoiceContent$();
+            if (isRepeated(choice, shownRepeats.value.matches[index] || new Set())) {
+              return errorDuplicateMatchContent$();
+            }
+            if (isRepeated(choice, shownRepeats.value.distractors)) {
+              return errorDuplicateDistractorContent$();
+            }
+            return null;
+          }),
+        ),
+      );
+
+      const distractorErrorMessages = computed(() =>
+        state.value.distractors.map(choice => {
+          if (isBlank(choice)) return errorEmptyChoiceContent$();
+          if (isRepeated(choice, shownRepeats.value.distractors))
+            return errorDuplicateDistractorContent$();
+          return null;
+        }),
+      );
+
+      function getBorderStyle(hasError) {
+        return { borderColor: hasError ? tokens.error : tokens.fineLine };
+      }
+
+      const rowPromptStyles = computed(() =>
+        rowErrors.value.map((rowErrs, index) =>
+          isRowPromptOpen(index) ? {} : getBorderStyle(rowErrs.some(e => promptFaults.has(e.code))),
+        ),
+      );
+
+      const promptWrapperClass = computed(() =>
+        isPromptOpen.value
+          ? 'prompt-wrapper'
+          : ['item-border', { 'is-clickable': props.mode === 'edit' }],
+      );
+
+      const promptWrapperStyle = computed(() =>
+        isPromptOpen.value ? {} : getBorderStyle(promptHasError.value),
+      );
+
+      const isOnlyRow = computed(() => state.value.rows.length <= 1);
+
+      // One option per association the learner can make: the emitted XML folds
+      // answers holding the same content into a single option whose match-max is
+      // the number of occurrences walked here. Blank answers are left unmarked:
+      // every blank keys the same, so they would mark an unwritten option correct.
+      const poolChoices = computed(() => [
+        ...state.value.rows.flatMap(row =>
+          row.matches.map(choice => ({
+            content: choice.content,
+            isCorrect: props.showAnswers && hasRichTextContent(choice.content),
+          })),
+        ),
+        ...state.value.distractors.map(choice => ({ content: choice.content, isCorrect: false })),
+      ]);
+
+      return {
+        EditorImageProcessor,
+        OpenTarget,
+        windowIsSmall,
+        addRowButton,
+        deleteRowButtons,
+        answerLists,
+        distractorList,
+        state,
+        isPromptOpen,
+        promptWrapperClass,
+        promptWrapperStyle,
+        openPrompt,
+        closeOpenTarget,
+        isRowPromptOpen,
+        isRowStacked,
+        showsAnswers,
+        openRow,
+        onListOpen,
+        onListClose,
+        setRowContent,
+        addMatch,
+        removeMatch,
+        onMatchUpdate,
+        addDistractor,
+        removeDistractor,
+        onDistractorUpdate,
+        setPrompt,
+        onAddRow,
+        onRemoveRow,
+        promptHasError,
+        tooFewRowsError,
+        rowErrorMessages,
+        matchErrorMessages,
+        distractorErrorMessages,
+        rowPromptStyles,
+        isOnlyRow,
+        poolChoices,
+        questionLabel$,
+        editQuestionLabel$,
+        errorPromptRequired$,
+        matchingRowsLabel$,
+        matchingRowsDescription$,
+        promptColumnLabel$,
+        answersColumnLabel$,
+        answerPlaceholder$,
+        rowPromptPlaceholder$,
+        addRowBtn$,
+        deleteRowBtn$,
+        editRowLabel$,
+        rowAnswersLabel$,
+        addMatchLabel$,
+        editMatchLabel$,
+        deleteMatchBtn$,
+        distractorsLabel$,
+        distractorsDescription$,
+        addDistractorBtn$,
+        deleteDistractorBtn$,
+        editDistractorLabel$,
+        responsePoolLabel$,
+        errorTooFewRows$,
+        hasRichTextContent,
+      };
+    },
+
+    props: {
+      interaction: {
+        type: Object,
+        required: true,
+        validator: val => typeof val.bodyXml === 'string',
+      },
+      questionType: {
+        type: String,
+        default: null,
+      },
+      mode: {
+        type: String,
+        default: 'view',
+        validator: val => ['view', 'edit'].includes(val),
+      },
+      /** Whether to display correct answers (used in view mode previews) */
+      showAnswers: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    emits: ['update:interaction', 'update:errors'],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  // Width of a small KIconButton, so the column headers line up with the rows.
+  $actions-width: 32px;
+
+  // An editable row's padding and border, likewise.
+  $row-inset: 9px;
+
+  .match-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .editor-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  /* A heading, so its own margins are set rather than inherited from the UA stylesheet */
+  .field-label {
+    margin: 0 0 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .section-headers {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin-bottom: 4px;
+  }
+
+  .section-label {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .section-sublabel {
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .item-border {
+    border: 1px solid;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+
+    &.is-clickable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: v-bind('$themeTokens.fineLine');
+      }
+    }
+  }
+
+  .item-card-text {
+    padding: 8px 16px;
+
+    &.is-closed {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-height: 52px;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .prompt-wrapper {
+    position: relative;
+    padding: 4px 0;
+  }
+
+  .column-headers {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    column-gap: 8px;
+    font-size: 12px;
+    font-weight: 600;
+
+    &.is-editable {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) $actions-width;
+      padding: 0 $row-inset;
+    }
+  }
+
+  .rows-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  // Prompt and answers take half the row each.
+  .match-row {
+    display: grid;
+    grid-template-areas:
+      'prompt answers'
+      'message message';
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+
+    // Column-only: the message row track exists even when empty, so a row gap
+    // would pad every row without a message.
+    column-gap: 8px;
+    align-items: center;
+    border-radius: 4px;
+
+    &.is-editable {
+      grid-template-areas:
+        'prompt answers actions'
+        'message message message';
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) $actions-width;
+      padding: 8px;
+      background-color: v-bind('$themePalette.grey.v_50');
+      border: 1px solid v-bind('$themeTokens.fineLine');
+    }
+
+    &.is-stacked {
+      grid-template-areas:
+        'prompt-label'
+        'prompt'
+        'answers-label'
+        'answers'
+        'message';
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    &.is-stacked.is-editable {
+      grid-template-areas:
+        'prompt-label prompt-label'
+        'prompt actions'
+        'answers-label answers-label'
+        'answers answers'
+        'message message';
+      grid-template-columns: minmax(0, 1fr) $actions-width;
+    }
+  }
+
+  // Unbordered stacked rows need extra room to read as separate rows.
+  .match-row.is-stacked:not(.is-editable) + .match-row {
+    margin-top: 8px;
+  }
+
+  .row-label {
+    margin-bottom: 4px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .prompt-label {
+    grid-area: prompt-label;
+  }
+
+  .answers-label {
+    grid-area: answers-label;
+    margin-top: 8px;
+  }
+
+  // The prompt card sits on the tinted row, so it carries the surface colour
+  // itself, and stretches to its answers' height. As a grid, it stretches the
+  // slot wrapper inside it to that height too. Its one track may shrink below a
+  // long formula, leaving the editor to clip it.
+  .row-prompt {
+    display: grid;
+    grid-area: prompt;
+    grid-template-columns: minmax(0, 1fr);
+    align-self: stretch;
+    min-width: 0;
+    background-color: v-bind('$themeTokens.surface');
+
+    .editor {
+      flex: 1;
+    }
+
+    .item-card-text {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding: 0;
+
+      &.is-closed {
+        min-height: 40px;
+
+        // Keep the closed text centred in the stretched card.
+        .editor {
+          flex: none;
+        }
+      }
+    }
+  }
+
+  // Inset like the closed editor it stands in for.
+  .row-placeholder {
+    padding: 8px;
+  }
+
+  // Like the prompt card, the answer box sits on the tinted row.
+  .row-answers {
+    grid-area: answers;
+    align-self: stretch;
+    min-width: 0;
+    background-color: v-bind('$themeTokens.surface');
+  }
+
+  .row-actions {
+    display: flex;
+    grid-area: actions;
+    align-items: center;
+  }
+
+  // Read-only answers wrap in their column.
+  .chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  // A chip is a compact pill, so its editor has no padding of its own.
+  .chip {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+    padding: 4px 12px;
+    background-color: v-bind('$themeTokens.surface');
+    border: 1px solid;
+    border-radius: 8px;
+  }
+
+  // A pill sized by its content, so the grid cell must not stretch it.
+  .view-prompt {
+    grid-area: prompt;
+    justify-self: start;
+  }
+
+  .row-messages {
+    display: flex;
+    flex-direction: column;
+    grid-area: message;
+    gap: 4px;
+    margin-top: 8px;
+  }
+
+  .editor {
+    width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Descriptor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Descriptor.spec.js
new file mode 100644
index 0000000000..915c830303
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Descriptor.spec.js
@@ -0,0 +1,20 @@
+import { matchInteractionDescriptor as descriptor } from '../Descriptor';
+import { qtiEditorStrings } from '../../../qtiEditorStrings';
+import { QuestionType } from '../../../constants';
+import { MATCH_XML, MATCH_DECL_XML } from '../../../utils/testingFixtures';
+
+describe('MatchInteractionDescriptor', () => {
+  it('getTypeOptions() offers the match question type to the type selector', () => {
+    const options = descriptor.getTypeOptions(qtiEditorStrings);
+    expect(options).toHaveLength(1);
+    expect(options[0].value).toBe(QuestionType.MATCH);
+    expect(options[0].label).toBe(qtiEditorStrings.$tr('matchLabel'));
+  });
+
+  it('buildXML() forwards its own declaration schema', () => {
+    const state = descriptor.parse(MATCH_XML, [MATCH_DECL_XML]);
+    const [declXml] = descriptor.buildXML(state, QuestionType.MATCH).responseDeclarations;
+    expect(declXml).toContain('base-type="directedPair"');
+    expect(declXml).toContain('cardinality="multiple"');
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Editor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Editor.spec.js
new file mode 100644
index 0000000000..929d51aeef
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/Editor.spec.js
@@ -0,0 +1,877 @@
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { nextTick } from 'vue';
+import VueRouter from 'vue-router';
+import { themePalette, themeTokens } from 'kolibri-design-system/lib/styles/theme';
+import MatchEditor from '../Editor.vue';
+
+import {
+  MATCH_XML,
+  MATCH_DECL_XML,
+  mockInteractionBlock as block,
+  mockInteractionBlockWithDecl as blockWithDecl,
+} from '../../../utils/testingFixtures';
+import { QuestionType, ValidationError } from '../../../constants';
+import { qtiEditorStrings as tr } from '../../../qtiEditorStrings';
+
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+
+let mockWindowIsLarge = true;
+let mockWindowIsSmall = false;
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({
+      windowIsLarge: ref(mockWindowIsLarge),
+      windowIsSmall: ref(mockWindowIsSmall),
+    }),
+  };
+});
+
+const ONE_ROW_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="directedPair">
+  <qti-correct-response>
+    <qti-value>row_dog choice_mammal</qti-value>
+  </qti-correct-response>
+</qti-response-declaration>`;
+
+// The second response is named by no value, so it is a blank distractor.
+const BLANK_DISTRACTOR_XML = `<qti-match-interaction response-identifier="RESPONSE">
+  <qti-prompt><p>Match each animal to its class.</p></qti-prompt>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="row_dog" match-max="1">Dog</qti-simple-associable-choice>
+  </qti-simple-match-set>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="choice_mammal" match-max="1">Mammal</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="choice_blank" match-max="1"></qti-simple-associable-choice>
+  </qti-simple-match-set>
+</qti-match-interaction>`;
+
+const IMAGE_ANSWER_XML = `<qti-match-interaction response-identifier="RESPONSE">
+  <qti-prompt><p>Match each animal to its class.</p></qti-prompt>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="row_dog" match-max="1">Dog</qti-simple-associable-choice>
+  </qti-simple-match-set>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="choice_mammal" match-max="1"><img src="mammal.png" alt="A mammal"/></qti-simple-associable-choice>
+  </qti-simple-match-set>
+</qti-match-interaction>`;
+
+// Mammal serves both rows; Reptile serves none.
+const SHARED_ANSWER_XML = `<qti-match-interaction response-identifier="RESPONSE">
+  <qti-prompt><p>Match each animal to its class.</p></qti-prompt>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="row_dog" match-max="1">Dog</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="row_cat" match-max="1">Cat</qti-simple-associable-choice>
+  </qti-simple-match-set>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="choice_mammal" match-max="2">Mammal</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="choice_reptile" match-max="1">Reptile</qti-simple-associable-choice>
+  </qti-simple-match-set>
+</qti-match-interaction>`;
+
+const SHARED_ANSWER_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="directedPair">
+  <qti-correct-response>
+    <qti-value>row_dog choice_mammal</qti-value>
+    <qti-value>row_cat choice_mammal</qti-value>
+  </qti-correct-response>
+</qti-response-declaration>`;
+
+const BLANK_ANSWER_XML = `<qti-match-interaction response-identifier="RESPONSE">
+  <qti-prompt><p>Match each animal to its class.</p></qti-prompt>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="row_dog" match-max="1">Dog</qti-simple-associable-choice>
+  </qti-simple-match-set>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="choice_mammal" match-max="1"></qti-simple-associable-choice>
+  </qti-simple-match-set>
+</qti-match-interaction>`;
+
+// The mock TipTapEditor renders a <textarea> only for the card currently open.
+const openTextareas = () =>
+  screen.queryAllByRole('textbox').filter(el => el.tagName === 'TEXTAREA');
+const openTextarea = () => openTextareas()[0];
+
+const button = name => screen.getByRole('button', { name });
+const queryButton = name => screen.queryByRole('button', { name });
+
+const editRow = number => tr.$tr('editRowLabel', { number });
+const deleteRow = number => tr.$tr('deleteRowBtn', { number });
+const editMatch = (number, position) => tr.$tr('editMatchLabel', { number, position });
+const deleteMatch = (number, position) => tr.$tr('deleteMatchBtn', { number, position });
+const addMatch = number => tr.$tr('addMatchLabel', { number });
+
+const rowsList = () => screen.getByRole('list', { name: tr.$tr('matchingRowsLabel') });
+// Each row holds its own answer list, so only the outer list's direct items are rows.
+const rows = () => {
+  const list = rowsList();
+  return within(list)
+    .getAllByRole('listitem')
+    .filter(el => el.parentElement === list);
+};
+const rowAnswers = number =>
+  screen.getByRole('list', { name: tr.$tr('rowAnswersLabel', { number }) });
+const answerItems = number => within(rowAnswers(number)).queryAllByRole('listitem');
+const distractorList = () => screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
+
+const renderEditor = (props = {}) =>
+  render(MatchEditor, {
+    props: {
+      mode: 'edit',
+      questionType: QuestionType.MATCH,
+      interaction: blockWithDecl(MATCH_XML, MATCH_DECL_XML),
+      ...props,
+    },
+    routes: new VueRouter(),
+  });
+
+// Writes a new answer into a row, committing it by opening the question prompt.
+const writeAnswer = async (user, rowNumber, text) => {
+  await user.click(rowAnswers(rowNumber));
+  await user.type(openTextarea(), text);
+  await user.click(button(tr.$tr('editQuestionLabel')));
+};
+
+const updates = emitted => emitted()['update:interaction'] || [];
+const latestBodyXml = emitted => updates(emitted).at(-1)[0].bodyXml;
+const latestErrorCodes = emitted =>
+  emitted()
+    ['update:errors'].at(-1)[0]
+    .map(e => e.code);
+
+describe('MatchEditor', () => {
+  beforeEach(() => {
+    mockWindowIsLarge = true;
+    mockWindowIsSmall = false;
+  });
+
+  describe('edit mode rendering', () => {
+    it('renders the prompt text from the XML', () => {
+      renderEditor();
+      expect(screen.getByText(/Match each animal/)).toBeInTheDocument();
+    });
+
+    it('renders every row prompt from the XML', () => {
+      renderEditor();
+      for (const content of ['Dog', 'Eagle', 'Frog']) {
+        expect(within(rowsList()).getByText(content)).toBeInTheDocument();
+      }
+      expect(rows()).toHaveLength(3);
+    });
+
+    it('numbers no row as a pair', () => {
+      renderEditor();
+      expect(screen.queryByText(tr.$tr('pairNumberLabel', { number: 1 }))).not.toBeInTheDocument();
+    });
+
+    it('opens the first row prompt for editing when the question prompt is written', () => {
+      renderEditor();
+      expect(queryButton(editRow(1))).not.toBeInTheDocument();
+      expect(openTextarea()).toHaveValue('Dog');
+    });
+
+    it('shows a placeholder in a blank row prompt until it opens', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: block('') });
+      const placeholder = tr.$tr('rowPromptPlaceholder');
+      expect(within(rows()[0]).getByText(placeholder)).toBeInTheDocument();
+      await user.click(button(editRow(1)));
+      expect(within(rows()[0]).queryByText(placeholder)).not.toBeInTheDocument();
+    });
+
+    it('opens the question prompt for editing when it is blank', () => {
+      renderEditor({ interaction: block('') });
+      expect(queryButton(tr.$tr('editQuestionLabel'))).not.toBeInTheDocument();
+      expect(button(editRow(1))).toBeInTheDocument();
+    });
+  });
+
+  describe('editing content', () => {
+    it('moves the open editor to the row prompt that is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(editRow(2)));
+      expect(openTextarea()).toHaveValue('Eagle');
+      expect(button(editRow(1))).toBeInTheDocument();
+    });
+
+    it('writes the typed row prompt into the emitted XML', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(editRow(3)));
+      await user.type(openTextarea(), 'let');
+      expect(latestBodyXml(emitted)).toContain('Froglet');
+    });
+
+    it('writes the typed question prompt into the emitted XML', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(tr.$tr('editQuestionLabel')));
+      await user.type(openTextarea(), 'Which class?');
+      expect(latestBodyXml(emitted)).toContain('Which class?');
+    });
+  });
+
+  describe('rows', () => {
+    it('appends a row and opens its prompt when add row is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addRowBtn')));
+      expect(rows()).toHaveLength(4);
+      expect(queryButton(editRow(4))).not.toBeInTheDocument();
+      expect(openTextarea()).toHaveValue('');
+    });
+
+    it('removes the row when its delete button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(deleteRow(1)));
+      expect(screen.queryByText('Dog')).not.toBeInTheDocument();
+      expect(rows()).toHaveLength(2);
+    });
+
+    it('disables the delete button when a single row remains', () => {
+      renderEditor({ interaction: block('') });
+      expect(button(deleteRow(1))).toBeDisabled();
+    });
+
+    it('keeps the last row when its delete button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(deleteRow(1)));
+      await user.click(button(deleteRow(1)));
+      await user.click(button(deleteRow(1)));
+      expect(rows()).toHaveLength(1);
+      expect(screen.getByText('Frog')).toBeInTheDocument();
+    });
+  });
+
+  describe('row layout below the large breakpoint', () => {
+    it('stacks only the row whose editor is open', async () => {
+      mockWindowIsLarge = false;
+      const user = userEvent.setup();
+      // Row 1's prompt opens on mount.
+      renderEditor();
+      const [first, second] = rows();
+      expect(first).toHaveClass('is-stacked');
+      expect(second).not.toHaveClass('is-stacked');
+
+      await user.click(button(editRow(2)));
+      expect(first).not.toHaveClass('is-stacked');
+      expect(second).toHaveClass('is-stacked');
+    });
+
+    it('stacks no row on a large screen', () => {
+      renderEditor();
+      for (const row of rows()) {
+        expect(row).not.toHaveClass('is-stacked');
+      }
+    });
+
+    it('stacks every row on a small screen, open or not', () => {
+      mockWindowIsLarge = false;
+      mockWindowIsSmall = true;
+      renderEditor();
+      for (const row of rows()) {
+        expect(row).toHaveClass('is-stacked');
+      }
+    });
+
+    it('heads the two columns once above the rows while they sit side by side', () => {
+      renderEditor();
+      expect(screen.getAllByText(tr.$tr('promptColumnLabel'))).toHaveLength(1);
+      expect(screen.getAllByText(tr.$tr('answersColumnLabel'))).toHaveLength(1);
+      expect(within(rowsList()).queryByText(tr.$tr('promptColumnLabel'))).not.toBeInTheDocument();
+    });
+
+    it('labels the prompt and answers within each stacked row instead', () => {
+      mockWindowIsLarge = false;
+      mockWindowIsSmall = true;
+      renderEditor();
+      for (const row of rows()) {
+        expect(within(row).getByText(tr.$tr('promptColumnLabel'))).toBeInTheDocument();
+        expect(within(row).getByText(tr.$tr('answersColumnLabel'))).toBeInTheDocument();
+      }
+      expect(screen.getAllByText(tr.$tr('promptColumnLabel'))).toHaveLength(rows().length);
+    });
+  });
+
+  describe('row answers', () => {
+    it("lists each row's answers under that row", () => {
+      renderEditor();
+      expect(answerItems(1)).toHaveLength(1);
+      expect(within(rowAnswers(1)).getByText('Mammal')).toBeInTheDocument();
+      expect(within(rowAnswers(2)).getByText('Bird')).toBeInTheDocument();
+      expect(within(rowAnswers(3)).getByText('Amphibian')).toBeInTheDocument();
+    });
+
+    it('opens an answer when its chip is clicked and writes the typing into the XML', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(editMatch(2, 1)));
+      expect(openTextarea()).toHaveValue('Bird');
+      await user.type(openTextarea(), 's');
+      expect(latestBodyXml(emitted)).toContain('Birds');
+    });
+
+    it('removes the answer when its delete button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await writeAnswer(user, 1, 'Canine');
+      await user.click(button(deleteMatch(1, 1)));
+      expect(screen.queryByText('Mammal')).not.toBeInTheDocument();
+      expect(answerItems(1)).toHaveLength(1);
+    });
+
+    it("disables the delete button of a row's only answer", () => {
+      renderEditor();
+      expect(button(deleteMatch(1, 1))).toBeDisabled();
+    });
+
+    it('shows a placeholder in a blank answer', () => {
+      renderEditor({ interaction: blockWithDecl(BLANK_ANSWER_XML, ONE_ROW_DECL_XML) });
+      expect(within(rowAnswers(1)).getByText(tr.$tr('answerPlaceholder'))).toBeInTheDocument();
+    });
+
+    it("opens an empty draft, without adding a chip, when the row's answer area is clicked", async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(rowAnswers(2));
+      expect(openTextarea()).toHaveValue('');
+      expect(answerItems(2)).toHaveLength(1);
+    });
+
+    it('adds the written draft to its row when Save is pressed', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(rowAnswers(2));
+      await user.type(openTextarea(), 'Aves');
+      expect(answerItems(2)).toHaveLength(1);
+      await user.click(button(tr.$tr('saveChipBtn')));
+
+      expect(openTextarea()).toBeUndefined();
+      expect(within(rowAnswers(2)).getByText('Aves')).toBeInTheDocument();
+      expect(latestBodyXml(emitted)).toContain('Aves');
+    });
+
+    it('adds the written draft to its row when another editor opens', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(rowAnswers(2));
+      await user.type(openTextarea(), 'Aves');
+      await user.click(button(editRow(1)));
+
+      expect(within(rowAnswers(2)).getByText('Aves')).toBeInTheDocument();
+      expect(answerItems(2)).toHaveLength(2);
+      expect(latestBodyXml(emitted)).toContain('Aves');
+    });
+
+    it('drops an empty draft when another editor opens', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(rowAnswers(2));
+      await user.click(button(editRow(1)));
+      expect(answerItems(2)).toHaveLength(1);
+    });
+
+    it('opens a draft from the keyboard', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      button(addMatch(2)).focus();
+      await user.keyboard('{Enter}');
+      expect(openTextarea()).toHaveValue('');
+      expect(button(deleteMatch(2, 2))).toBeInTheDocument();
+    });
+
+    it('keeps an answer open, and opens no draft, when its editor is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(editMatch(1, 1)));
+      await user.click(openTextarea());
+      expect(openTextareas()).toHaveLength(1);
+      expect(openTextarea()).toHaveValue('Mammal');
+    });
+
+    it('drops an answer left blank when its editor closes', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await writeAnswer(user, 1, 'Canine');
+      await user.click(button(editMatch(1, 1)));
+      await user.clear(openTextarea());
+      await user.click(button(editRow(2)));
+      expect(answerItems(1)).toHaveLength(1);
+      expect(within(rowAnswers(1)).getByText('Canine')).toBeInTheDocument();
+    });
+
+    it("keeps a row's only answer when its editor closes blank", async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addRowBtn')));
+      await user.click(button(editMatch(4, 1)));
+      await user.click(button(editRow(1)));
+      expect(answerItems(4)).toHaveLength(1);
+    });
+
+    it('keeps an image-only answer when its editor closes', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: blockWithDecl(IMAGE_ANSWER_XML, ONE_ROW_DECL_XML) });
+      await user.click(button(editMatch(1, 1)));
+      await user.click(button(editRow(1)));
+      expect(answerItems(1)).toHaveLength(1);
+    });
+  });
+
+  describe('adding a distractor', () => {
+    // The fixture holds one distractor, so a new one is number 2.
+    const removeNewDistractor = tr.$tr('deleteDistractorBtn', { number: 2 });
+
+    it('opens an empty editor with a remove button, without adding a chip', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      expect(openTextarea()).toHaveValue('');
+      expect(button(removeNewDistractor)).toBeInTheDocument();
+      expect(within(distractorList()).getAllByRole('listitem')).toHaveLength(1);
+    });
+
+    it('adds the written distractor to the pool when its editor closes', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Fish');
+      await user.click(button(editRow(1)));
+
+      expect(within(distractorList()).getByText('Fish')).toBeInTheDocument();
+      expect(latestBodyXml(emitted)).toContain('Fish');
+    });
+
+    it('drops the new distractor when its editor closes with no content', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.click(button(editRow(1)));
+      expect(within(distractorList()).getAllByRole('listitem')).toHaveLength(1);
+    });
+  });
+
+  describe('existing distractors', () => {
+    it('opens a distractor for editing when its chip is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 1 })));
+      expect(openTextarea()).toHaveValue('Reptile');
+    });
+
+    it('opens a distractor whose content is blank', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: blockWithDecl(BLANK_DISTRACTOR_XML, ONE_ROW_DECL_XML) });
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 1 })));
+      expect(queryButton(tr.$tr('editDistractorLabel', { number: 1 }))).not.toBeInTheDocument();
+      expect(openTextarea()).toHaveValue('');
+    });
+
+    it('writes edited distractor content into the emitted XML', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 1 })));
+      await user.type(openTextarea(), 's');
+      expect(latestBodyXml(emitted)).toContain('Reptiles');
+    });
+
+    it('removes the distractor when its delete button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 1 })));
+      expect(screen.queryByText('Reptile')).not.toBeInTheDocument();
+    });
+
+    it('closes the open editor when an earlier distractor is deleted', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Fish');
+      await user.click(button(editRow(1)));
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 2 })));
+      expect(openTextarea()).toHaveValue('Fish');
+
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 1 })));
+      expect(openTextarea()).toBeUndefined();
+      expect(screen.getByText('Fish')).toBeInTheDocument();
+    });
+
+    it('drops a distractor whose content is cleared before its editor closes', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: blockWithDecl(BLANK_DISTRACTOR_XML, ONE_ROW_DECL_XML) });
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 1 })));
+      await user.click(button(editRow(1)));
+      expect(within(distractorList()).queryAllByRole('listitem')).toHaveLength(0);
+    });
+  });
+
+  describe('removing while another editor is open', () => {
+    it('commits a draft to the row it was written in when an earlier row is deleted', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(rowAnswers(2));
+      await user.type(openTextarea(), 'Aves');
+      await user.click(button(deleteRow(1)));
+
+      expect(within(rows()[0]).getByText('Eagle')).toBeInTheDocument();
+      expect(within(rowAnswers(1)).getByText('Aves')).toBeInTheDocument();
+    });
+
+    it('closes an open answer, keeping its content, when an earlier answer is deleted', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(rowAnswers(1));
+      await user.type(openTextarea(), 'Canine');
+      await user.click(button(editRow(2)));
+      await user.click(button(editMatch(1, 2)));
+      expect(openTextarea()).toHaveValue('Canine');
+
+      await user.click(button(deleteMatch(1, 1)));
+      expect(openTextarea()).toBeUndefined();
+      expect(within(rowAnswers(1)).getByText('Canine')).toBeInTheDocument();
+      expect(screen.queryByText('Mammal')).not.toBeInTheDocument();
+    });
+
+    it("keeps a row's last answer when another is deleted while a blank one is open", async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await writeAnswer(user, 1, 'Canine');
+      await user.click(button(editMatch(1, 1)));
+      await user.clear(openTextarea());
+
+      await user.click(button(deleteMatch(1, 2)));
+      expect(answerItems(1)).toHaveLength(1);
+      expect(within(rowAnswers(1)).getByText('Canine')).toBeInTheDocument();
+    });
+
+    it("commits a draft and opens a fresh one when another row's answer area is clicked", async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(rowAnswers(1));
+      await user.type(openTextarea(), 'Canine');
+      await user.click(rowAnswers(2));
+
+      expect(within(rowAnswers(1)).getByText('Canine')).toBeInTheDocument();
+      expect(openTextareas()).toHaveLength(1);
+      expect(openTextarea()).toHaveValue('');
+      expect(button(deleteMatch(2, 2))).toBeInTheDocument();
+    });
+  });
+
+  describe('leaving edit mode', () => {
+    it('discards a written draft rather than committing it', async () => {
+      const user = userEvent.setup();
+      const { emitted, updateProps } = renderEditor();
+      await user.click(rowAnswers(1));
+      await user.type(openTextarea(), 'Canine');
+      await updateProps({ mode: 'view' });
+      await updateProps({ mode: 'edit' });
+
+      expect(screen.queryByText('Canine')).not.toBeInTheDocument();
+      expect(updates(emitted).some(([payload]) => payload.bodyXml.includes('Canine'))).toBe(false);
+    });
+
+    it('discards a written distractor draft and reopens with no distractor editor', async () => {
+      const user = userEvent.setup();
+      const { emitted, updateProps } = renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Fish');
+      await updateProps({ mode: 'view' });
+      expect(openTextareas()).toHaveLength(0);
+      await updateProps({ mode: 'edit' });
+
+      expect(screen.queryByText('Fish')).not.toBeInTheDocument();
+      expect(within(distractorList()).getAllByRole('listitem')).toHaveLength(1);
+      expect(button(tr.$tr('addDistractorBtn'))).toBeInTheDocument();
+      expect(updates(emitted).some(([payload]) => payload.bodyXml.includes('Fish'))).toBe(false);
+    });
+  });
+
+  describe('validation', () => {
+    it('shows no errors for a question that is already complete', () => {
+      renderEditor();
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('reports the prompt and too-few-rows errors as soon as the state changes', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor({ interaction: block('') });
+      await user.click(button(tr.$tr('addRowBtn')));
+      await nextTick();
+      expect(screen.getByText(tr.$tr('errorPromptRequired'))).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('errorTooFewRows'))).toBeInTheDocument();
+
+      expect(latestErrorCodes(emitted)).toEqual(
+        expect.arrayContaining([ValidationError.PROMPT_REQUIRED, ValidationError.TOO_FEW_ROWS]),
+      );
+    });
+
+    it('flags a row whose prompt is blank in that row', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addRowBtn')));
+      await nextTick();
+      expect(within(rows()[3]).getByText(tr.$tr('errorEmptyRowContent'))).toBeInTheDocument();
+      expect(within(rows()[0]).queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('flags a row left without an answer in that row', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(editMatch(2, 1)));
+      await user.clear(openTextarea());
+      await user.click(button(editRow(1)));
+      await nextTick();
+      expect(within(rows()[1]).getByText(tr.$tr('errorRowWithoutMatch'))).toBeInTheDocument();
+      expect(within(rows()[0]).queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('flags both rows that repeat a prompt', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(editRow(2)));
+      await user.clear(openTextarea());
+      await user.type(openTextarea(), 'Dog');
+      await nextTick();
+      for (const row of rows().slice(0, 2)) {
+        expect(within(row).getByText(tr.$tr('errorDuplicateRowContent'))).toBeInTheDocument();
+      }
+      expect(within(rows()[2]).queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('flags each answer a row repeats', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await writeAnswer(user, 1, 'Mammal');
+      expect(within(rowAnswers(1)).getAllByText(tr.$tr('errorDuplicateMatchContent'))).toHaveLength(
+        2,
+      );
+    });
+
+    it('flags an answer parsed with no content', () => {
+      renderEditor({ interaction: blockWithDecl(BLANK_ANSWER_XML, ONE_ROW_DECL_XML) });
+      expect(
+        within(rowAnswers(1)).getByText(tr.$tr('errorEmptyChoiceContent')),
+      ).toBeInTheDocument();
+    });
+
+    it('flags a distractor repeating an answer on both the distractor and the answer', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Mammal');
+      await user.click(button(editRow(1)));
+      await nextTick();
+      expect(
+        within(distractorList()).getByText(tr.$tr('errorDuplicateDistractorContent')),
+      ).toBeInTheDocument();
+      expect(
+        within(rowAnswers(1)).getByText(tr.$tr('errorDuplicateDistractorContent')),
+      ).toBeInTheDocument();
+      expect(within(rowAnswers(2)).queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('holds the answer a distractor repeats unflagged until the distractor closes', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 1 })));
+      await user.clear(openTextarea());
+      await user.type(openTextarea(), 'Mammal');
+      await nextTick();
+      expect(within(rowAnswers(1)).queryByRole('alert')).not.toBeInTheDocument();
+
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await nextTick();
+      expect(
+        within(rowAnswers(1)).getByText(tr.$tr('errorDuplicateDistractorContent')),
+      ).toBeInTheDocument();
+      expect(
+        within(distractorList()).getByText(tr.$tr('errorDuplicateDistractorContent')),
+      ).toBeInTheDocument();
+    });
+
+    it('accepts the same answer in two rows', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await writeAnswer(user, 2, 'Mammal');
+      expect(within(rowAnswers(2)).getByText('Mammal')).toBeInTheDocument();
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('view mode', () => {
+    const renderView = (props = {}) => renderEditor({ mode: 'view', ...props });
+    const pool = () => screen.getByRole('list', { name: tr.$tr('responsePoolLabel') });
+
+    it('repeats an answer in the pool once per row it serves, and each distractor once', () => {
+      renderView({
+        interaction: blockWithDecl(SHARED_ANSWER_XML, SHARED_ANSWER_DECL_XML),
+      });
+      expect(within(pool()).getAllByText('Mammal')).toHaveLength(2);
+      expect(within(pool()).getAllByText('Reptile')).toHaveLength(1);
+    });
+
+    it('lists every row prompt and no answer when answers are hidden', () => {
+      renderView();
+      for (const content of ['Dog', 'Eagle', 'Frog']) {
+        expect(within(rowsList()).getByText(content)).toBeInTheDocument();
+      }
+      expect(screen.getAllByText('Mammal')).toHaveLength(1);
+      expect(within(pool()).getByText('Mammal')).toBeInTheDocument();
+    });
+
+    it('lists each row’s answers beside its prompt when answers are shown', () => {
+      renderView({ showAnswers: true });
+      expect(within(rowAnswers(1)).getByText('Mammal')).toBeInTheDocument();
+      expect(within(rowAnswers(2)).getByText('Bird')).toBeInTheDocument();
+      expect(within(rowsList()).queryByText('Reptile')).not.toBeInTheDocument();
+    });
+
+    it('paints the pool chip of an answer green, and not a distractor’s, when answers are shown', () => {
+      const palette = themePalette();
+      renderView({ showAnswers: true });
+      const chip = text => within(pool()).getByText(text).closest('li');
+      expect(chip('Mammal')).toHaveStyle({ borderColor: palette.green.v_600 });
+      expect(chip('Reptile')).not.toHaveStyle({ borderColor: palette.green.v_600 });
+    });
+
+    it('leaves the answers listed beside their prompts unpainted', () => {
+      renderView({ showAnswers: true });
+      const chip = within(rowAnswers(1)).getByText('Mammal').closest('li');
+      expect(chip).toHaveStyle({ borderColor: themeTokens().fineLine });
+    });
+
+    it('heads the answers column only when answers are shown', async () => {
+      const { updateProps } = renderView();
+      expect(screen.getByText(tr.$tr('promptColumnLabel'))).toBeInTheDocument();
+      expect(screen.queryByText(tr.$tr('answersColumnLabel'))).not.toBeInTheDocument();
+      await updateProps({ showAnswers: true });
+      expect(screen.getByText(tr.$tr('answersColumnLabel'))).toBeInTheDocument();
+    });
+
+    it('hides the editing controls', () => {
+      renderView();
+      expect(queryButton(tr.$tr('addRowBtn'))).not.toBeInTheDocument();
+      expect(queryButton(tr.$tr('addDistractorBtn'))).not.toBeInTheDocument();
+      expect(queryButton(deleteRow(1))).not.toBeInTheDocument();
+      expect(queryButton(editRow(1))).not.toBeInTheDocument();
+    });
+
+    it('opens no editor when a row prompt is clicked', async () => {
+      const user = userEvent.setup();
+      renderView({ showAnswers: true });
+      await user.click(within(rowsList()).getByText('Dog'));
+      expect(openTextarea()).toBeUndefined();
+    });
+  });
+
+  describe('emits', () => {
+    it('does not emit update:interaction on mount in edit mode', () => {
+      const { emitted } = renderEditor();
+      expect(updates(emitted)).toHaveLength(0);
+    });
+
+    it('does not emit update:interaction when moving between editors changes nothing', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(editRow(2)));
+      await user.click(button(tr.$tr('editQuestionLabel')));
+      expect(updates(emitted)).toHaveLength(0);
+    });
+
+    it('does not emit update:interaction in view mode', () => {
+      const { emitted } = renderEditor({ mode: 'view', showAnswers: true });
+      expect(updates(emitted)).toHaveLength(0);
+    });
+
+    it('emits update:interaction after adding a row', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(tr.$tr('addRowBtn')));
+      const payload = updates(emitted).at(-1)[0];
+      expect(payload.bodyXml.match(/<qti-simple-associable-choice/g)).toHaveLength(9);
+      expect(payload.responseDeclarations).toHaveLength(1);
+    });
+  });
+
+  describe('accessibility', () => {
+    it('opens a row prompt from the keyboard', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      button(editRow(2)).focus();
+      await user.keyboard('{Enter}');
+      expect(queryButton(editRow(2))).not.toBeInTheDocument();
+    });
+
+    it('adds a row from the keyboard', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      button(tr.$tr('addRowBtn')).focus();
+      await user.keyboard('{Enter}');
+      expect(rows()).toHaveLength(4);
+    });
+
+    it('moves focus to the previous row when the last row is deleted', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(deleteRow(3)));
+      await nextTick();
+      expect(button(deleteRow(2))).toHaveFocus();
+    });
+
+    it('moves focus to the add row button when no removable row is left', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(deleteRow(1)));
+      await user.click(button(deleteRow(1)));
+      await nextTick();
+      expect(button(tr.$tr('addRowBtn'))).toHaveFocus();
+    });
+
+    it('moves focus to the answer that takes a deleted answer’s place', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await writeAnswer(user, 1, 'Canine');
+      await writeAnswer(user, 1, 'Vertebrate');
+      await user.click(button(deleteMatch(1, 1)));
+      await nextTick();
+      expect(button(deleteMatch(1, 1))).toHaveFocus();
+    });
+
+    it("moves focus to the row's add answer control when one answer is left", async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await writeAnswer(user, 2, 'Aves');
+      await user.click(button(deleteMatch(2, 1)));
+      await nextTick();
+      expect(button(addMatch(2))).toHaveFocus();
+    });
+
+    it('moves focus to the distractor that takes a deleted one’s place', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Fish');
+      await user.click(button(editRow(1)));
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 1 })));
+      await nextTick();
+      expect(button(tr.$tr('deleteDistractorBtn', { number: 1 }))).toHaveFocus();
+    });
+  });
+
+  describe('graceful fallback', () => {
+    it('renders one blank row when bodyXml is empty', () => {
+      renderEditor({ interaction: block('') });
+      expect(rows()).toHaveLength(1);
+      expect(button(tr.$tr('addRowBtn'))).toBeInTheDocument();
+    });
+
+    it('renders one row when the XML is malformed', () => {
+      renderEditor({ interaction: block('<unclosed') });
+      expect(rows()).toHaveLength(1);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/parse.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/parse.spec.js
new file mode 100644
index 0000000000..9f0e6f1469
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/parse.spec.js
@@ -0,0 +1,491 @@
+/* eslint-disable jest-dom/prefer-to-have-attribute, jest-dom/prefer-to-have-text-content */
+// The jest-dom matchers reject XML nodes produced by DOMParser(..., 'text/xml').
+
+import { buildMatchInteractionXML as buildXML, parseMatchInteraction as parse } from '../parse';
+import { MATCH_XML, MATCH_DECL_XML } from '../../../utils/testingFixtures';
+import { BaseType, Cardinality, QuestionType } from '../../../constants';
+import { parseXML } from '../../../serialization/xml';
+
+const contentsOf = choices => choices.map(choice => choice.content);
+const matchContents = rows => rows.map(row => contentsOf(row.matches));
+
+const SCHEMA = { baseType: BaseType.DIRECTED_PAIR, cardinality: Cardinality.MULTIPLE };
+
+const parseXmlString = xml => parseXML(xml).documentElement;
+
+const matchSet = choices => `<qti-simple-match-set>${choices}</qti-simple-match-set>`;
+const choice = (id, content) =>
+  `<qti-simple-associable-choice identifier="${id}" match-max="1">${content}</qti-simple-associable-choice>`;
+const interaction = (...sets) =>
+  `<qti-match-interaction response-identifier="RESPONSE" shuffle="true">${sets.join('')}</qti-match-interaction>`;
+const declaration = (...values) =>
+  `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="directedPair">
+    <qti-correct-response>${values.map(v => `<qti-value>${v}</qti-value>`).join('')}</qti-correct-response>
+  </qti-response-declaration>`;
+
+const ROWS = matchSet(choice('row_dog', 'Dog') + choice('row_eagle', 'Eagle'));
+const RESPONSES = matchSet(
+  choice('choice_mammal', 'Mammal') + choice('choice_bird', 'Bird') + choice('choice_fur', 'Fur'),
+);
+
+describe('parse()', () => {
+  describe('fallbacks', () => {
+    const expectDefaultState = state => {
+      expect(state.rows).toHaveLength(1);
+      const [row] = state.rows;
+      expect(row.id).toMatch(/^row_/);
+      expect(row.content).toBe('');
+      expect(row.matches).toHaveLength(1);
+      expect(row.matches[0].id).toMatch(/^choice_/);
+      expect(row.matches[0].content).toBe('');
+      expect(state.distractors).toEqual([]);
+    };
+
+    it('seeds one row holding one blank answer when bodyXml is empty', () => {
+      expectDefaultState(parse('', [MATCH_DECL_XML]));
+    });
+
+    it('returns the default state when bodyXml is invalid XML', () => {
+      expectDefaultState(parse('<not-valid', [MATCH_DECL_XML]));
+    });
+
+    it('returns the default state for a single match set', () => {
+      expectDefaultState(parse(interaction(ROWS), []));
+    });
+
+    it('returns the default state for three match sets', () => {
+      expectDefaultState(parse(interaction(ROWS, RESPONSES, RESPONSES), []));
+    });
+
+    it('defaults prompt to an empty string when <qti-prompt> is absent', () => {
+      expect(parse(interaction(ROWS, RESPONSES), []).prompt).toBe('');
+    });
+  });
+
+  describe('rows and answers', () => {
+    it('reads the prompt HTML', () => {
+      expect(parse(MATCH_XML, [MATCH_DECL_XML]).prompt).toContain('Match each animal');
+    });
+
+    it('builds rows from the first set in document order', () => {
+      const state = parse(MATCH_XML, [MATCH_DECL_XML]);
+      expect(contentsOf(state.rows)).toEqual(['Dog', 'Eagle', 'Frog']);
+      expect(state.rows.map(row => row.id)).toEqual(['row_dog', 'row_eagle', 'row_frog']);
+    });
+
+    it('gives each row the answers the correct response names for it', () => {
+      const state = parse(MATCH_XML, [MATCH_DECL_XML]);
+      expect(matchContents(state.rows)).toEqual([['Mammal'], ['Bird'], ['Amphibian']]);
+      expect(state.rows[0].matches[0].id).toBe('choice_mammal');
+    });
+
+    it('orders a row holding two answers by the correct response', () => {
+      const decl = declaration('row_dog choice_fur', 'row_dog choice_mammal');
+      expect(matchContents(parse(interaction(ROWS, RESPONSES), [decl]).rows)).toEqual([
+        ['Fur', 'Mammal'],
+        [],
+      ]);
+    });
+
+    it('puts a response named by two rows in both rows', () => {
+      const decl = declaration('row_dog choice_fur', 'row_eagle choice_fur');
+      expect(matchContents(parse(interaction(ROWS, RESPONSES), [decl]).rows)).toEqual([
+        ['Fur'],
+        ['Fur'],
+      ]);
+    });
+
+    it('drops a value naming the response before the row', () => {
+      const decl = declaration('choice_mammal row_dog', 'row_eagle choice_bird');
+      expect(matchContents(parse(interaction(ROWS, RESPONSES), [decl]).rows)).toEqual([
+        [],
+        ['Bird'],
+      ]);
+    });
+
+    it('drops a value naming an identifier absent from its set', () => {
+      const decl = declaration(
+        'row_dog choice_missing',
+        'row_missing choice_mammal',
+        'row_eagle choice_bird',
+      );
+      expect(matchContents(parse(interaction(ROWS, RESPONSES), [decl]).rows)).toEqual([
+        [],
+        ['Bird'],
+      ]);
+    });
+
+    it('drops an empty <qti-value>', () => {
+      const decl = declaration('', 'row_eagle choice_bird');
+      expect(matchContents(parse(interaction(ROWS, RESPONSES), [decl]).rows)).toEqual([
+        [],
+        ['Bird'],
+      ]);
+    });
+
+    it('leaves every row without answers when no declarations are passed', () => {
+      const state = parse(MATCH_XML, []);
+      expect(matchContents(state.rows)).toEqual([[], [], []]);
+      expect(contentsOf(state.distractors)).toEqual(['Bird', 'Mammal', 'Amphibian', 'Reptile']);
+    });
+  });
+
+  describe('distractors', () => {
+    it('treats responses no value names as distractors, in document order', () => {
+      const decl = declaration('row_dog choice_bird');
+      const state = parse(interaction(ROWS, RESPONSES), [decl]);
+      expect(state.distractors).toEqual([
+        { id: 'choice_mammal', content: 'Mammal' },
+        { id: 'choice_fur', content: 'Fur' },
+      ]);
+    });
+
+    it('treats a response named only by a dropped value as a distractor', () => {
+      const decl = declaration('choice_mammal row_dog');
+      const state = parse(interaction(ROWS, RESPONSES), [decl]);
+      expect(contentsOf(state.distractors)).toEqual(['Mammal', 'Bird', 'Fur']);
+    });
+
+    it('imports the unlimited match-max="0" by appearance', () => {
+      const responses = `<qti-simple-match-set>
+        <qti-simple-associable-choice identifier="choice_mammal" match-max="0">Mammal</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="choice_bird" match-max="0">Bird</qti-simple-associable-choice>
+      </qti-simple-match-set>`;
+      const state = parse(interaction(ROWS, responses), [declaration('row_dog choice_mammal')]);
+      expect(matchContents(state.rows)).toEqual([['Mammal'], []]);
+      expect(contentsOf(state.distractors)).toEqual(['Bird']);
+    });
+
+    it('reads a named response with surplus match-max as one answer and no distractor', () => {
+      const responses = `<qti-simple-match-set>
+        <qti-simple-associable-choice identifier="choice_mammal" match-max="3">Mammal</qti-simple-associable-choice>
+      </qti-simple-match-set>`;
+      const state = parse(interaction(ROWS, responses), [declaration('row_dog choice_mammal')]);
+      expect(matchContents(state.rows)).toEqual([['Mammal'], []]);
+      expect(state.distractors).toEqual([]);
+    });
+  });
+
+  describe('identifiers', () => {
+    it('assigns row_ and choice_ slugs to choices without an identifier', () => {
+      const xml = interaction(
+        matchSet('<qti-simple-associable-choice>Dog</qti-simple-associable-choice>'),
+        matchSet('<qti-simple-associable-choice>Mammal</qti-simple-associable-choice>'),
+      );
+      const state = parse(xml, []);
+      expect(state.rows[0].id).toMatch(/^row_/);
+      expect(state.distractors[0].id).toMatch(/^choice_/);
+    });
+
+    // Identifiers are used as lookup keys, so one that names an inherited Object
+    // member must not resolve to that member.
+    it('resolves identifiers that are Object.prototype member names', () => {
+      const xml = interaction(
+        matchSet(choice('constructor', 'Dog')),
+        matchSet(choice('toString', 'Mammal') + choice('choice_bird', 'Bird')),
+      );
+      const state = parse(xml, [declaration('constructor toString')]);
+      expect(matchContents(state.rows)).toEqual([['Mammal']]);
+      expect(contentsOf(state.distractors)).toEqual(['Bird']);
+    });
+
+    it('resolves a value whose row and response share an identifier', () => {
+      const xml = interaction(
+        matchSet(choice('shared', 'Dog')),
+        matchSet(choice('shared', 'Mammal')),
+      );
+      const state = parse(xml, [declaration('shared shared')]);
+      expect(matchContents(state.rows)).toEqual([['Mammal']]);
+      expect(state.distractors).toEqual([]);
+    });
+
+    it('reads responseIdentifier from the attribute', () => {
+      const xml = `<qti-match-interaction response-identifier="RESPONSE_2">${ROWS}${RESPONSES}</qti-match-interaction>`;
+      expect(parse(xml, []).responseIdentifier).toBe('RESPONSE_2');
+    });
+  });
+});
+
+describe('buildXML()', () => {
+  const baseState = {
+    responseIdentifier: 'RESPONSE',
+    prompt: '<p>Match each animal to its class.</p>',
+    rows: [
+      {
+        id: 'row_dog',
+        content: 'Dog',
+        matches: [
+          { id: 'choice_mammal', content: 'Mammal' },
+          { id: 'choice_fur', content: 'Fur' },
+        ],
+      },
+      { id: 'row_eagle', content: 'Eagle', matches: [{ id: 'choice_bird', content: 'Bird' }] },
+    ],
+    distractors: [{ id: 'choice_reptile', content: 'Reptile' }],
+  };
+
+  const withRows = (rows, distractors = []) => ({ ...baseState, rows, distractors });
+  const row = (id, content, matches = []) => ({ id, content, matches });
+
+  const build = state => buildXML(state, QuestionType.MATCH, SCHEMA);
+  const setsOf = root => [...root.querySelectorAll('qti-simple-match-set')];
+  const choicesIn = setEl => [...setEl.querySelectorAll('qti-simple-associable-choice')];
+  const describeSet = setEl =>
+    choicesIn(setEl).map(el => [
+      el.getAttribute('identifier'),
+      el.textContent,
+      el.getAttribute('match-max'),
+    ]);
+  const rowsOf = result => describeSet(setsOf(parseXmlString(result.bodyXml))[0]);
+  const responsesOf = result => describeSet(setsOf(parseXmlString(result.bodyXml))[1]);
+  const valuesOf = result =>
+    [...parseXmlString(result.responseDeclarations[0]).querySelectorAll('qti-value')].map(n =>
+      n.textContent.trim(),
+    );
+
+  describe('interaction attributes', () => {
+    it('emits the response identifier, shuffle, and one association per answer', () => {
+      const root = parseXmlString(build(baseState).bodyXml);
+      expect(root.getAttribute('response-identifier')).toBe('RESPONSE');
+      expect(root.getAttribute('shuffle')).toBe('true');
+      expect(root.getAttribute('max-associations')).toBe('3');
+    });
+
+    it('emits <qti-prompt> when the prompt is filled', () => {
+      const root = parseXmlString(build(baseState).bodyXml);
+      expect(root.querySelector('qti-prompt').textContent).toBe('Match each animal to its class.');
+    });
+
+    it('omits <qti-prompt> when prompt is empty', () => {
+      const root = parseXmlString(build({ ...baseState, prompt: '' }).bodyXml);
+      expect(root.querySelector('qti-prompt')).toBeNull();
+    });
+  });
+
+  describe('match sets', () => {
+    it('emits the row set, then the response set, in state order', () => {
+      expect(rowsOf(build(baseState))).toEqual([
+        ['row_dog', 'Dog', '2'],
+        ['row_eagle', 'Eagle', '1'],
+      ]);
+      expect(responsesOf(build(baseState))).toEqual([
+        ['choice_mammal', 'Mammal', '1'],
+        ['choice_fur', 'Fur', '1'],
+        ['choice_bird', 'Bird', '1'],
+        ['choice_reptile', 'Reptile', '1'],
+      ]);
+    });
+
+    it('emits two sets for a state with no answers and no distractors', () => {
+      const root = parseXmlString(build(withRows([row('row_dog', 'Dog')])).bodyXml);
+      expect(setsOf(root)).toHaveLength(2);
+      expect(describeSet(setsOf(root)[0])).toEqual([['row_dog', 'Dog', '1']]);
+      expect(choicesIn(setsOf(root)[1])).toEqual([]);
+    });
+
+    it('emits two sets for a state with no rows', () => {
+      expect(setsOf(parseXmlString(build(withRows([])).bodyXml))).toHaveLength(2);
+    });
+  });
+
+  describe('responses', () => {
+    const mammal = { id: 'choice_mammal', content: 'Mammal' };
+
+    it('merges an answer shared by two rows into one choice with match-max="2"', () => {
+      const state = withRows([
+        row('row_dog', 'Dog', [mammal]),
+        row('row_whale', 'Whale', [{ id: 'choice_other', content: '<p>Mammal</p>' }]),
+      ]);
+      const result = build(state);
+      expect(responsesOf(result)).toEqual([['choice_mammal', 'Mammal', '2']]);
+      expect(valuesOf(result)).toEqual(['row_dog choice_mammal', 'row_whale choice_mammal']);
+    });
+
+    it('counts an answer repeated within one row twice', () => {
+      const state = withRows([row('row_dog', 'Dog', [mammal, { ...mammal }])]);
+      expect(responsesOf(build(state))).toEqual([['choice_mammal', 'Mammal', '2']]);
+    });
+
+    it('keeps two equal distractors as two choices', () => {
+      const distractors = [
+        { id: 'choice_a', content: 'Reptile' },
+        { id: 'choice_b', content: 'Reptile' },
+      ];
+      expect(responsesOf(build(withRows([row('row_dog', 'Dog')], distractors)))).toEqual([
+        ['choice_a', 'Reptile', '1'],
+        ['choice_b', 'Reptile', '1'],
+      ]);
+    });
+
+    it('keeps a distractor equal to an answer as a separate choice', () => {
+      const state = withRows(
+        [row('row_dog', 'Dog', [mammal])],
+        [{ id: 'choice_other', content: 'Mammal' }],
+      );
+      expect(responsesOf(build(state))).toEqual([
+        ['choice_mammal', 'Mammal', '1'],
+        ['choice_other', 'Mammal', '1'],
+      ]);
+    });
+
+    it('emits a row prompt equal to an answer in both sets', () => {
+      const state = withRows([row('row_mammal', 'Mammal', [mammal])]);
+      const result = build(state);
+      expect(rowsOf(result)).toEqual([['row_mammal', 'Mammal', '1']]);
+      expect(responsesOf(result)).toEqual([['choice_mammal', 'Mammal', '1']]);
+    });
+
+    it('never merges blank answers', () => {
+      const state = withRows([
+        row('row_dog', 'Dog', [{ id: 'choice_a', content: '' }]),
+        row('row_eagle', 'Eagle', [{ id: 'choice_b', content: '<p></p>' }]),
+      ]);
+      expect(responsesOf(build(state)).map(([id]) => id)).toEqual(['choice_a', 'choice_b']);
+    });
+
+    it('keeps two different image-only answers as two choices', () => {
+      const state = withRows([
+        row('row_dog', 'Dog', [{ id: 'choice_a', content: '<img src="a.png">' }]),
+        row('row_eagle', 'Eagle', [{ id: 'choice_b', content: '<img src="b.png">' }]),
+      ]);
+      expect(responsesOf(build(state)).map(([id, , matchMax]) => [id, matchMax])).toEqual([
+        ['choice_a', '1'],
+        ['choice_b', '1'],
+      ]);
+    });
+  });
+
+  describe('identifiers', () => {
+    const idsIn = result => [
+      ...rowsOf(result).map(([id]) => id),
+      ...responsesOf(result).map(([id]) => id),
+    ];
+
+    it('gives a later equal answer the id of its first appearance', () => {
+      const state = withRows([
+        row('row_dog', 'Dog', [{ id: 'choice_first', content: 'Mammal' }]),
+        row('row_whale', 'Whale', [{ id: 'choice_second', content: 'Mammal' }]),
+      ]);
+      const result = build(state);
+      expect(idsIn(result)).not.toContain('choice_second');
+      expect(valuesOf(result)).toEqual(['row_dog choice_first', 'row_whale choice_first']);
+    });
+
+    it('reassigns an answer reusing an id bound to other content', () => {
+      const state = withRows([
+        row('row_dog', 'Dog', [{ id: 'choice_mammal', content: 'Mammal' }]),
+        row('row_eagle', 'Eagle', [{ id: 'choice_mammal', content: 'Bird' }]),
+      ]);
+      const result = build(state);
+      const [[mammalId], [birdId]] = responsesOf(result);
+      expect(mammalId).toBe('choice_mammal');
+      expect(birdId).toMatch(/^choice_/);
+      expect(birdId).not.toBe('choice_mammal');
+      expect(valuesOf(result)).toEqual(['row_dog choice_mammal', `row_eagle ${birdId}`]);
+    });
+
+    it('reassigns a response reusing a row id', () => {
+      const result = build(withRows([row('shared', 'Dog', [{ id: 'shared', content: 'Mammal' }])]));
+      const [[responseId]] = responsesOf(result);
+      expect(rowsOf(result)[0][0]).toBe('shared');
+      expect(responseId).toMatch(/^choice_/);
+      expect(valuesOf(result)).toEqual([`shared ${responseId}`]);
+    });
+
+    it('reassigns a row reusing another row id', () => {
+      const state = withRows([
+        row('row_dog', 'Dog', [{ id: 'choice_mammal', content: 'Mammal' }]),
+        row('row_dog', 'Eagle', [{ id: 'choice_bird', content: 'Bird' }]),
+      ]);
+      const result = build(state);
+      const [[first], [second]] = rowsOf(result);
+      expect(first).toBe('row_dog');
+      expect(second).toMatch(/^row_/);
+      expect(second).not.toBe('row_dog');
+      expect(valuesOf(result)).toEqual(['row_dog choice_mammal', `${second} choice_bird`]);
+    });
+
+    it('reassigns a distractor reusing an answer id', () => {
+      const state = withRows(
+        [row('row_dog', 'Dog', [{ id: 'choice_mammal', content: 'Mammal' }])],
+        [{ id: 'choice_mammal', content: 'Reptile' }],
+      );
+      const [, [distractorId, content]] = responsesOf(build(state));
+      expect(content).toBe('Reptile');
+      expect(distractorId).toMatch(/^choice_/);
+      expect(distractorId).not.toBe('choice_mammal');
+    });
+
+    it('assigns ids to a row and answer without one', () => {
+      const state = withRows([row('', 'Dog', [{ id: '', content: 'Mammal' }])]);
+      const result = build(state);
+      expect(rowsOf(result)[0][0]).toMatch(/^row_/);
+      expect(responsesOf(result)[0][0]).toMatch(/^choice_/);
+    });
+  });
+
+  describe('response declaration', () => {
+    it('emits one "rowId responseId" <qti-value> per answer, by row then position', () => {
+      expect(valuesOf(build(baseState))).toEqual([
+        'row_dog choice_mammal',
+        'row_dog choice_fur',
+        'row_eagle choice_bird',
+      ]);
+    });
+
+    it('omits <qti-correct-response> when no row has an answer', () => {
+      const state = withRows([row('row_dog', 'Dog')], baseState.distractors);
+      const { bodyXml, responseDeclarations } = build(state);
+      expect(
+        parseXmlString(responseDeclarations[0]).querySelector('qti-correct-response'),
+      ).toBeNull();
+      expect(parseXmlString(bodyXml).getAttribute('max-associations')).toBe('0');
+    });
+  });
+});
+
+describe('parse → buildXML → parse round-trip', () => {
+  const roundTrip = state => {
+    const { bodyXml, responseDeclarations } = buildXML(state, QuestionType.MATCH, SCHEMA);
+    return parse(bodyXml, responseDeclarations);
+  };
+
+  it('preserves the fixture', () => {
+    const original = parse(MATCH_XML, [MATCH_DECL_XML]);
+    expect(roundTrip(original)).toEqual(original);
+  });
+
+  it('preserves a row holding two answers', () => {
+    const original = parse(interaction(ROWS, RESPONSES), [
+      declaration('row_dog choice_mammal', 'row_dog choice_fur'),
+    ]);
+    expect(roundTrip(original)).toEqual(original);
+  });
+
+  it('preserves a response shared by two rows', () => {
+    const original = parse(interaction(ROWS, RESPONSES), [
+      declaration('row_dog choice_fur', 'row_eagle choice_fur'),
+    ]);
+    expect(roundTrip(original)).toEqual(original);
+  });
+
+  it('preserves two distractors with the same content', () => {
+    const state = {
+      responseIdentifier: 'RESPONSE',
+      prompt: '',
+      rows: [
+        { id: 'row_dog', content: 'Dog', matches: [{ id: 'choice_mammal', content: 'Mammal' }] },
+      ],
+      distractors: [
+        { id: 'choice_a', content: 'Reptile' },
+        { id: 'choice_b', content: 'Reptile' },
+      ],
+    };
+    expect(roundTrip(state)).toEqual(state);
+  });
+
+  it('preserves the default state', () => {
+    const original = parse('', []);
+    expect(roundTrip(original)).toEqual(original);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/validation.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/validation.spec.js
new file mode 100644
index 0000000000..79e6d1546d
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/__tests__/validation.spec.js
@@ -0,0 +1,218 @@
+import { validateMatchInteraction as validate } from '../validation';
+import { ValidationError } from '../../../constants';
+import { richTextComparisonKey } from '../../../utils/richText';
+
+const row = (index, content, matches) => ({ id: `row_${index}`, content, matches });
+const answer = (id, content) => ({ id, content });
+
+function makeState(overrides = {}) {
+  return {
+    prompt: '<p>Match each animal to its biological classification class.</p>',
+    rows: [
+      row(0, 'Dog', [answer('choice_mammal', 'Mammal')]),
+      row(1, 'Eagle', [answer('choice_bird', 'Bird')]),
+    ],
+    distractors: [answer('choice_reptile', 'Reptile')],
+    ...overrides,
+  };
+}
+
+const errorCodes = errors => errors.map(e => e.code);
+const errorsWith = (state, code) => validate(state).filter(e => e.code === code);
+
+describe('validateMatchInteraction()', () => {
+  it('returns an empty array for a valid state', () => {
+    expect(validate(makeState())).toEqual([]);
+  });
+
+  describe('PROMPT_REQUIRED', () => {
+    it('returns error when the prompt is empty', () => {
+      expect(errorCodes(validate(makeState({ prompt: '' })))).toContain(
+        ValidationError.PROMPT_REQUIRED,
+      );
+    });
+
+    it('returns error when the prompt is tags-and-whitespace only', () => {
+      expect(errorCodes(validate(makeState({ prompt: '<p>   </p>' })))).toContain(
+        ValidationError.PROMPT_REQUIRED,
+      );
+    });
+  });
+
+  describe('EMPTY_ROW_CONTENT', () => {
+    it('flags a blank row prompt by row index', () => {
+      const rows = [makeState().rows[0], row(1, '<p></p>', [answer('choice_bird', 'Bird')])];
+      expect(errorsWith(makeState({ rows }), ValidationError.EMPTY_ROW_CONTENT)).toEqual([
+        { code: ValidationError.EMPTY_ROW_CONTENT, index: 1 },
+      ]);
+    });
+
+    it('does not flag an image-only row prompt', () => {
+      const rows = [row(0, '<img src="dog.png">', [answer('choice_mammal', 'Mammal')])];
+      expect(validate(makeState({ rows }))).toEqual([]);
+    });
+  });
+
+  describe('EMPTY_CHOICE_CONTENT', () => {
+    it('flags a blank answer by id', () => {
+      const rows = [
+        row(0, 'Dog', [answer('choice_mammal', 'Mammal'), answer('choice_blank', '<p> </p>')]),
+      ];
+      expect(errorsWith(makeState({ rows }), ValidationError.EMPTY_CHOICE_CONTENT)).toEqual([
+        { code: ValidationError.EMPTY_CHOICE_CONTENT, id: 'choice_blank' },
+      ]);
+    });
+
+    it('flags a blank distractor by id', () => {
+      const distractors = [answer('choice_blank', '')];
+      expect(errorsWith(makeState({ distractors }), ValidationError.EMPTY_CHOICE_CONTENT)).toEqual([
+        { code: ValidationError.EMPTY_CHOICE_CONTENT, id: 'choice_blank' },
+      ]);
+    });
+
+    it('does not flag an image-only or formula-only answer', () => {
+      const rows = [
+        row(0, 'Dog', [answer('choice_img', '<img src="mammal.png">')]),
+        row(1, 'Square', [answer('choice_math', '<span data-latex="x^2"></span>')]),
+      ];
+      expect(validate(makeState({ rows }))).toEqual([]);
+    });
+  });
+
+  describe('ROW_WITHOUT_MATCH', () => {
+    it('flags a row with no answers by row index', () => {
+      const rows = [makeState().rows[0], row(1, 'Eagle', [])];
+      expect(errorsWith(makeState({ rows }), ValidationError.ROW_WITHOUT_MATCH)).toEqual([
+        { code: ValidationError.ROW_WITHOUT_MATCH, index: 1 },
+      ]);
+    });
+
+    it('flags a row whose only answers are blank', () => {
+      const rows = [makeState().rows[0], row(1, 'Eagle', [answer('choice_blank', '')])];
+      expect(errorsWith(makeState({ rows }), ValidationError.ROW_WITHOUT_MATCH)).toEqual([
+        { code: ValidationError.ROW_WITHOUT_MATCH, index: 1 },
+      ]);
+    });
+  });
+
+  describe('TOO_FEW_ROWS', () => {
+    it('fires when there are no rows', () => {
+      expect(errorCodes(validate(makeState({ rows: [] })))).toContain(ValidationError.TOO_FEW_ROWS);
+    });
+
+    it('fires when no row has both a filled prompt and a filled answer', () => {
+      const rows = [
+        row(0, '', [answer('choice_mammal', 'Mammal')]),
+        row(1, 'Eagle', [answer('choice_blank', '')]),
+      ];
+      expect(errorCodes(validate(makeState({ rows })))).toContain(ValidationError.TOO_FEW_ROWS);
+    });
+
+    it('does not fire when one valid row sits among invalid ones', () => {
+      const rows = [
+        row(0, '', [answer('choice_mammal', 'Mammal')]),
+        row(1, 'Eagle', [answer('choice_bird', 'Bird')]),
+        row(2, 'Frog', []),
+      ];
+      expect(errorCodes(validate(makeState({ rows })))).not.toContain(ValidationError.TOO_FEW_ROWS);
+    });
+  });
+
+  describe('DUPLICATE_MATCH_CONTENT', () => {
+    it('flags two answers in one row that differ only in markup', () => {
+      const rows = [
+        makeState().rows[0],
+        row(1, 'Eagle', [
+          answer('choice_a', 'Bird'),
+          answer('choice_b', '<p><strong>Bird</strong></p>'),
+        ]),
+      ];
+      expect(errorsWith(makeState({ rows }), ValidationError.DUPLICATE_MATCH_CONTENT)).toEqual([
+        {
+          code: ValidationError.DUPLICATE_MATCH_CONTENT,
+          index: 1,
+          text: richTextComparisonKey('Bird'),
+        },
+      ]);
+    });
+
+    it('does not treat two blank answers as duplicates', () => {
+      const rows = [
+        row(0, 'Dog', [
+          answer('choice_mammal', 'Mammal'),
+          answer('choice_a', ''),
+          answer('choice_b', '<p></p>'),
+        ]),
+      ];
+      expect(errorCodes(validate(makeState({ rows })))).not.toContain(
+        ValidationError.DUPLICATE_MATCH_CONTENT,
+      );
+    });
+  });
+
+  describe('DUPLICATE_ROW_CONTENT', () => {
+    it('flags each row sharing a prompt', () => {
+      const rows = [
+        row(0, 'Dog', [answer('choice_mammal', 'Mammal')]),
+        row(1, 'Eagle', [answer('choice_bird', 'Bird')]),
+        row(2, '<p>Dog</p>', [answer('choice_fur', 'Fur')]),
+      ];
+      expect(errorsWith(makeState({ rows }), ValidationError.DUPLICATE_ROW_CONTENT)).toEqual([
+        { code: ValidationError.DUPLICATE_ROW_CONTENT, index: 0 },
+        { code: ValidationError.DUPLICATE_ROW_CONTENT, index: 2 },
+      ]);
+    });
+
+    it('does not treat two blank prompts as duplicates', () => {
+      const rows = [...makeState().rows, row(2, '', []), row(3, '<p></p>', [])];
+      expect(errorCodes(validate(makeState({ rows })))).not.toContain(
+        ValidationError.DUPLICATE_ROW_CONTENT,
+      );
+    });
+  });
+
+  describe('DUPLICATE_DISTRACTOR_CONTENT', () => {
+    const duplicates = state => errorsWith(state, ValidationError.DUPLICATE_DISTRACTOR_CONTENT);
+
+    it('flags a distractor repeating another distractor, once per text', () => {
+      const distractors = [
+        answer('choice_a', 'Reptile'),
+        answer('choice_b', 'Reptile'),
+        answer('choice_c', '<p>Reptile</p>'),
+      ];
+      expect(duplicates(makeState({ distractors }))).toEqual([
+        {
+          code: ValidationError.DUPLICATE_DISTRACTOR_CONTENT,
+          text: richTextComparisonKey('Reptile'),
+        },
+      ]);
+    });
+
+    it('flags a distractor repeating an answer in any row', () => {
+      const distractors = [answer('choice_other', 'Bird')];
+      expect(duplicates(makeState({ distractors }))).toEqual([
+        { code: ValidationError.DUPLICATE_DISTRACTOR_CONTENT, text: richTextComparisonKey('Bird') },
+      ]);
+    });
+
+    it('does not treat two blank distractors as duplicates', () => {
+      const distractors = [answer('choice_a', ''), answer('choice_b', '')];
+      expect(duplicates(makeState({ distractors }))).toEqual([]);
+    });
+  });
+
+  describe('not errors', () => {
+    it('allows the same answer in two rows', () => {
+      const rows = [
+        row(0, 'Dog', [answer('choice_mammal', 'Mammal')]),
+        row(1, 'Whale', [answer('choice_mammal', 'Mammal')]),
+      ];
+      expect(validate(makeState({ rows }))).toEqual([]);
+    });
+
+    it('allows a row prompt equal to an answer', () => {
+      const rows = [row(0, 'Mammal', [answer('choice_mammal', 'Mammal')])];
+      expect(validate(makeState({ rows }))).toEqual([]);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/parse.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/parse.js
new file mode 100644
index 0000000000..b375d22680
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/parse.js
@@ -0,0 +1,243 @@
+import { QTIDeclaration } from '../../serialization/qti/QTIDeclaration';
+import { getPromptHTML, parseXML } from '../../serialization/xml';
+import { buildXmlNode } from '../../serialization/assembleItem';
+import CorrectResponse from '../../serialization/qti/declarations/correctResponse';
+import { generateRandomSlug } from '../../utils/generateRandomSlug';
+import { hasRichTextContent, richTextComparisonKey } from '../../utils/richText';
+import { RESPONSE_IDENTIFIER } from '../../constants';
+
+const serializer = new XMLSerializer();
+
+/**
+ * @typedef {object} MatchChoice
+ * @property {string} id      - QTI identifier, e.g. "choice_xlqTuVoq"
+ * @property {string} content - HTML content of the <qti-simple-associable-choice>
+ */
+
+/**
+ * @typedef {object} MatchRow
+ * @property {string}        id       - QTI identifier of the row's first-set choice
+ * @property {string}        content  - HTML content of the row prompt
+ * @property {MatchChoice[]} matches  - Second-set choices this row is correctly matched to
+ */
+
+/**
+ * @typedef {object} MatchState
+ * @property {string}        responseIdentifier - Response identifier attribute
+ * @property {string}        prompt             - HTML content of <qti-prompt>; default ""
+ * @property {MatchRow[]}    rows               - Matching rows, in authored order
+ * @property {MatchChoice[]} distractors        - Response-set choices matched by no row
+ */
+
+/**
+ * @param {string} [content]
+ * @returns {MatchChoice}
+ */
+export const newChoice = (content = '') => ({ id: generateRandomSlug('choice'), content });
+
+/**
+ * @returns {MatchRow}
+ */
+export const newRow = () => ({
+  id: generateRandomSlug('row'),
+  content: '',
+  matches: [newChoice()],
+});
+
+/**
+ * @returns {MatchState}
+ */
+export function _defaultState() {
+  return {
+    responseIdentifier: RESPONSE_IDENTIFIER,
+    prompt: '',
+    rows: [newRow()],
+    distractors: [],
+  };
+}
+
+/**
+ * The row set and the response set. Any other count is not an item this editor can author.
+ *
+ * @param {Element} el - <qti-match-interaction> element
+ * @returns {boolean}
+ */
+export function hasTwoMatchSets(el) {
+  return el.querySelectorAll(':scope > qti-simple-match-set').length === 2;
+}
+
+/**
+ * Extract the correct response from a declaration string as [rowId, responseId] couples.
+ * An empty <qti-value/> coerces to null and is dropped.
+ *
+ * @param {string[]} declarations
+ * @returns {Array<string[]>}
+ */
+function extractCorrectPairIds(declarations) {
+  const [declXml] = declarations || [];
+  if (!declXml) return [];
+
+  try {
+    const declaration = QTIDeclaration.fromXML(parseXML(declXml).documentElement);
+    return (declaration.correctResponse ?? []).filter(Array.isArray);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * @param {Element} setEl - <qti-simple-match-set>
+ * @param {string} prefix - slug prefix for a choice without an identifier
+ * @returns {MatchChoice[]}
+ */
+function readSet(setEl, prefix) {
+  return [...setEl.querySelectorAll('qti-simple-associable-choice')].map(el => ({
+    id: el.getAttribute('identifier') || generateRandomSlug(prefix),
+    content: el.innerHTML,
+  }));
+}
+
+/**
+ * Parse <qti-match-interaction> body XML + response declarations → MatchState.
+ *
+ * match-max is never read: a response is an answer exactly when a correct-response
+ * value names it, and a distractor otherwise.
+ *
+ * @param {string} bodyXml
+ * @param {string[]} responseDeclarations
+ * @returns {MatchState}
+ */
+export function parseMatchInteraction(bodyXml, responseDeclarations) {
+  if (!bodyXml) return _defaultState();
+
+  let root;
+  try {
+    root = parseXML(bodyXml).documentElement;
+  } catch {
+    return _defaultState();
+  }
+  if (!hasTwoMatchSets(root)) return _defaultState();
+
+  const [rowSet, responseSet] = root.querySelectorAll(':scope > qti-simple-match-set');
+  const rows = readSet(rowSet, 'row').map(row => ({ ...row, matches: [] }));
+  const responses = readSet(responseSet, 'choice');
+  const rowById = new Map(rows.map(row => [row.id, row]));
+  const responseById = new Map(responses.map(response => [response.id, response]));
+
+  const matched = new Set();
+  for (const [rowId, responseId] of extractCorrectPairIds(responseDeclarations)) {
+    const row = rowById.get(rowId);
+    const response = responseById.get(responseId);
+    if (row && response) {
+      row.matches.push({ ...response });
+      matched.add(response);
+    }
+  }
+
+  return {
+    responseIdentifier: root.getAttribute('response-identifier') || RESPONSE_IDENTIFIER,
+    prompt: getPromptHTML(root),
+    rows,
+    distractors: responses.filter(response => !matched.has(response)),
+  };
+}
+
+/**
+ * Serialize MatchState → { bodyXml, responseDeclarations }.
+ *
+ * @param {MatchState} state
+ * @param {string} _questionType - unused (match has one question type); kept for API parity
+ * @param {object} declarationSchema - { baseType: string, cardinality: string }
+ * @returns {{ bodyXml: string, responseDeclarations: string[] }}
+ */
+export function buildMatchInteractionXML(state, _questionType, declarationSchema) {
+  const { responseIdentifier = RESPONSE_IDENTIFIER, prompt, rows = [], distractors = [] } = state;
+
+  // Ids are unique across both match sets; the first appearance keeps its id.
+  const usedIds = new Set();
+  function claim(id, prefix) {
+    const resolved = id && !usedIds.has(id) ? id : generateRandomSlug(prefix);
+    usedIds.add(resolved);
+    return resolved;
+  }
+
+  // Rows and distractors are never merged, so any repeat of their id is a conflict.
+  const rowIds = rows.map(row => claim(row.id, 'row'));
+
+  // Answers of equal content are one choice, serving every row that names it;
+  // blanks never are.
+  const idByAnswerKey = new Map();
+  const answers = new Map();
+  const correctPairs = [];
+  rows.forEach((row, index) => {
+    for (const { id, content } of row.matches) {
+      const key = hasRichTextContent(content) ? richTextComparisonKey(content) : '';
+      const resolved = (key && idByAnswerKey.get(key)) || claim(id, 'choice');
+      if (key) idByAnswerKey.set(key, resolved);
+
+      const answer = answers.get(resolved);
+      if (answer) {
+        answer.matchMax += 1;
+      } else {
+        answers.set(resolved, { id: resolved, content, matchMax: 1 });
+      }
+      correctPairs.push([rowIds[index], resolved]);
+    }
+  });
+
+  const distractorChoices = distractors.map(({ id, content }) => ({
+    id: claim(id, 'choice'),
+    content,
+    matchMax: 1,
+  }));
+
+  const choiceNode = ({ id, content, matchMax }) =>
+    buildXmlNode({
+      tag: 'qti-simple-associable-choice',
+      attrs: { identifier: id, 'match-max': matchMax },
+      innerHTML: content,
+    });
+
+  const rowSet = buildXmlNode({
+    tag: 'qti-simple-match-set',
+    children: rows.map(({ content, matches }, index) =>
+      choiceNode({ id: rowIds[index], content, matchMax: Math.max(matches.length, 1) }),
+    ),
+  });
+  const responseSet = buildXmlNode({
+    tag: 'qti-simple-match-set',
+    children: [...answers.values(), ...distractorChoices].map(choiceNode),
+  });
+
+  const children = [];
+  if (prompt) {
+    children.push(buildXmlNode({ tag: 'qti-prompt', innerHTML: prompt }));
+  }
+  children.push(rowSet, responseSet);
+
+  const interactionEl = buildXmlNode({
+    tag: 'qti-match-interaction',
+    attrs: {
+      'response-identifier': responseIdentifier,
+      shuffle: 'true',
+      'max-associations': correctPairs.length,
+    },
+    children,
+  });
+
+  const { cardinality, baseType } = declarationSchema;
+  const declaration = new QTIDeclaration({
+    identifier: responseIdentifier,
+    baseType,
+    cardinality,
+    tag: 'qti-response-declaration',
+  });
+  if (correctPairs.length > 0) {
+    new CorrectResponse(correctPairs, declaration);
+  }
+
+  return {
+    bodyXml: serializer.serializeToString(interactionEl),
+    responseDeclarations: [serializer.serializeToString(declaration.getXML())],
+  };
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/validation.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/validation.js
new file mode 100644
index 0000000000..a2e93bf78a
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/match/validation.js
@@ -0,0 +1,98 @@
+import { ValidationError } from '../../constants';
+import { hasRichTextContent, richTextComparisonKey } from '../../utils/richText';
+
+/**
+ * Validate MatchState → ValidationError[].
+ *
+ * Choice-scoped errors carry `id`; row-scoped errors carry the row's `index`;
+ * duplication errors carry the repeated `text`, because an id may be repeated
+ * across choices and so cannot single one out.
+ *
+ * @param {object} state - MatchState
+ * @returns {Array<{ code: string, id?: string, index?: number, text?: string }>}
+ */
+export function validateMatchInteraction(state) {
+  const errors = [];
+  const { prompt, rows = [], distractors = [] } = state;
+
+  if (!hasRichTextContent(prompt)) {
+    errors.push({ code: ValidationError.PROMPT_REQUIRED });
+  }
+
+  // Every rule below asks the same two questions of a choice, and answering
+  // either one parses its HTML — so each choice is read once, here.
+  const read = ({ id, content }) => ({
+    id,
+    filled: hasRichTextContent(content),
+    key: richTextComparisonKey(content),
+  });
+  const readRows = rows.map(row => ({ ...read(row), matches: row.matches.map(read) }));
+  const readDistractors = distractors.map(read);
+  const readChoices = [...readRows.flatMap(row => row.matches), ...readDistractors];
+
+  readRows.forEach(({ filled }, index) => {
+    if (!filled) {
+      errors.push({ code: ValidationError.EMPTY_ROW_CONTENT, index });
+    }
+  });
+
+  for (const { id, filled } of readChoices) {
+    if (!filled) {
+      errors.push({ code: ValidationError.EMPTY_CHOICE_CONTENT, id });
+    }
+  }
+
+  let validRows = 0;
+  readRows.forEach(({ filled, matches }, index) => {
+    const matchKeyCounts = countFilledKeys(matches);
+    if (matchKeyCounts.size === 0) {
+      errors.push({ code: ValidationError.ROW_WITHOUT_MATCH, index });
+    } else if (filled) {
+      validRows += 1;
+    }
+    for (const [text, count] of matchKeyCounts) {
+      if (count > 1) {
+        errors.push({ code: ValidationError.DUPLICATE_MATCH_CONTENT, index, text });
+      }
+    }
+  });
+
+  if (validRows < 1) {
+    errors.push({ code: ValidationError.TOO_FEW_ROWS });
+  }
+
+  const rowKeyCounts = countFilledKeys(readRows);
+  readRows.forEach(({ filled, key }, index) => {
+    if (filled && rowKeyCounts.get(key) > 1) {
+      errors.push({ code: ValidationError.DUPLICATE_ROW_CONTENT, index });
+    }
+  });
+
+  // An answer may serve several rows, so only distractors are flagged: one
+  // repeating another distractor or any answer cannot be told apart from it.
+  const choiceKeyCounts = countFilledKeys(readChoices);
+  const repeated = new Set(
+    readDistractors
+      .filter(({ filled, key }) => filled && choiceKeyCounts.get(key) > 1)
+      .map(({ key }) => key),
+  );
+  for (const text of repeated) {
+    errors.push({ code: ValidationError.DUPLICATE_DISTRACTOR_CONTENT, text });
+  }
+
+  return errors;
+}
+
+/**
+ * @param {Array<{ filled: boolean, key: string }>} readChoices
+ * @returns {Map<string, number>}
+ */
+function countFilledKeys(readChoices) {
+  const counts = new Map();
+  for (const { filled, key } of readChoices) {
+    if (filled) {
+      counts.set(key, (counts.get(key) || 0) + 1);
+    }
+  }
+  return counts;
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
index a5ca1c0a63..8e6074b691 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -184,9 +184,86 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     context:
       'Validation error when a distractor has the same content as another distractor or as an item in a pair',
   },
+  matchingRowsLabel: {
+    message: 'Matching rows',
+    context: 'Section header above the list of prompts and their correct answers',
+  },
+  matchingRowsDescription: {
+    message:
+      'Learners match responses from a shuffled set to each prompt. A prompt can have more than one answer. Include distractors to increase difficulty.',
+    context: 'Subtitle under the matching rows header',
+  },
+  addRowBtn: {
+    message: 'Add row',
+    context: 'Button that appends a new matching row',
+  },
+  deleteRowBtn: {
+    message: 'Delete row {number}',
+    context: 'Accessible label for the delete icon button next to a matching row',
+  },
+  editRowLabel: {
+    message: 'Edit row {number} prompt',
+    context: "Accessible label for the clickable region to edit a matching row's prompt",
+  },
+  promptColumnLabel: {
+    message: 'Prompt',
+    context: 'Column header above the prompts of the matching rows',
+  },
+  answersColumnLabel: {
+    message: 'Answers',
+    context: 'Column header above the correct answers of the matching rows',
+  },
+  answerPlaceholder: {
+    message: 'Enter an answer',
+    context: 'Placeholder shown in a matching row answer that has no content yet',
+  },
+  rowPromptPlaceholder: {
+    message: 'Enter a prompt',
+    context: 'Placeholder shown in a matching row prompt that has no content yet',
+  },
+  rowAnswersLabel: {
+    message: 'Answers for row {number}',
+    context: 'Accessible label for the list of correct answers in a matching row',
+  },
+  addMatchLabel: {
+    message: 'Add answer to row {number}',
+    context: 'Accessible label for the area that starts a new answer in a matching row',
+  },
+  editMatchLabel: {
+    message: 'Edit row {number}, answer {position}',
+    context: 'Accessible label for the clickable region to edit one answer of a matching row',
+  },
+  deleteMatchBtn: {
+    message: 'Delete row {number}, answer {position}',
+    context: "Accessible label for the delete icon button on a matching row's answer",
+  },
+  errorEmptyRowContent: {
+    message: 'Prompt cannot be blank',
+    context: "Validation error when a matching row's prompt is empty",
+  },
+  errorRowWithoutMatch: {
+    message: 'Add at least one answer',
+    context: 'Validation error when a matching row has no non-blank answer',
+  },
+  errorTooFewRows: {
+    message: '1 or more valid rows are required',
+    context: 'Validation error when no row has both a prompt and an answer',
+  },
+  errorDuplicateMatchContent: {
+    message: 'Answers within a row cannot be the same',
+    context: 'Validation error when two answers in one row have identical content',
+  },
+  errorDuplicateRowContent: {
+    message: 'Rows cannot repeat the same prompt',
+    context: 'Validation error when two rows have identical prompts',
+  },
   matchLabel: {
     message: 'Match',
-    context: 'Display name for a match question type',
+    context: 'Display name for a match question type shown in the question type selector',
+  },
+  matchDescription: {
+    message: 'Learners must match each prompt with its correct answers.',
+    context: 'Description for the match question type in the info modal',
   },
   extendedTextLabel: {
     message: 'Extended text',
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
index 409fff95b7..600d7fd911 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
@@ -78,6 +78,36 @@ export const ASSOCIATE_DECL_XML = `<qti-response-declaration identifier="RESPONS
   </qti-correct-response>
 </qti-response-declaration>`;
 
+// choice_reptile is named by no correct-response value — the fixture's distractor.
+export const MATCH_XML = `<qti-match-interaction response-identifier="RESPONSE" shuffle="true" max-associations="3">
+  <qti-prompt><p>Match each animal to its biological classification class.</p></qti-prompt>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="row_dog" match-max="1">Dog</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="row_eagle" match-max="1">Eagle</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="row_frog" match-max="1">Frog</qti-simple-associable-choice>
+  </qti-simple-match-set>
+  <qti-simple-match-set>
+    <qti-simple-associable-choice identifier="choice_bird" match-max="1">Bird</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="choice_mammal" match-max="1">Mammal</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="choice_amphibian" match-max="1">Amphibian</qti-simple-associable-choice>
+    <qti-simple-associable-choice identifier="choice_reptile" match-max="1">Reptile</qti-simple-associable-choice>
+  </qti-simple-match-set>
+</qti-match-interaction>`;
+
+export const MATCH_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="directedPair">
+  <qti-correct-response>
+    <qti-value>row_dog choice_mammal</qti-value>
+    <qti-value>row_eagle choice_bird</qti-value>
+    <qti-value>row_frog choice_amphibian</qti-value>
+  </qti-correct-response>
+</qti-response-declaration>`;
+
+// A third match set is outside what the editor can represent.
+export const MATCH_THREE_SETS_XML = MATCH_XML.replace(
+  '</qti-match-interaction>',
+  '<qti-simple-match-set/></qti-match-interaction>',
+);
+
 // Full QTI Assessment Item XML Documents
 
 export const VALID_CHOICE_ITEM_DOCUMENT = `<?xml version="1.0" encoding="UTF-8"?>
@@ -314,6 +344,22 @@ export const VALID_ASSOCIATE_ITEM_DOCUMENT = `<?xml version="1.0" encoding="UTF-
   </qti-item-body>
 </qti-assessment-item>`;
 
+export const VALID_MATCH_ITEM_DOCUMENT = `<?xml version="1.0" encoding="UTF-8"?>
+<qti-assessment-item
+  xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+  identifier="item-test-match"
+  title="Test Match Question"
+  adaptive="false"
+  time-dependent="false"
+  xml:lang="en"
+>
+  ${MATCH_DECL_XML}
+
+  <qti-item-body>
+    ${MATCH_XML}
+  </qti-item-body>
+</qti-assessment-item>`;
+
 export const TWO_INTERACTIONS_DOCUMENT = `<?xml version="1.0" encoding="UTF-8"?>
 <qti-assessment-item
   xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"

From 10052fb819de67a1f9689707b4d5a7f9b2796d0d Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Thu, 24 Sep 2026 09:14:45 -0700
Subject: [PATCH 3/4] Add match item to QTI demo page

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../frontend/channelEdit/pages/qtiDemoData.js | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js b/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js
index a3c831b10c..009cd3e574 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js
@@ -259,6 +259,57 @@ export const ASSOCIATE_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
   </qti-item-body>
 </qti-assessment-item>`;
 
+/**
+ * Demo item 8: match interaction — learner matches animals to their traits.
+ * Uses cardinality="multiple" and base-type="directedPair".
+ * Bat has two answers, "Can fly" and "Mammal" are each shared by two rows, and
+ * "Reptile" is a distractor.
+ */
+export const MATCH_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
+<qti-assessment-item
+  xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+  identifier="item-match"
+  title="Match each animal with its traits"
+  adaptive="false"
+  time-dependent="false"
+  xml:lang="en"
+>
+  <qti-response-declaration
+    identifier="RESPONSE"
+    cardinality="multiple"
+    base-type="directedPair"
+  >
+    <qti-correct-response>
+      <qti-value>row_bat choice_mammal</qti-value>
+      <qti-value>row_bat choice_fly</qti-value>
+      <qti-value>row_eagle choice_bird</qti-value>
+      <qti-value>row_eagle choice_fly</qti-value>
+      <qti-value>row_whale choice_mammal</qti-value>
+    </qti-correct-response>
+  </qti-response-declaration>
+
+  <qti-item-body>
+    <qti-match-interaction
+      response-identifier="RESPONSE"
+      shuffle="true"
+      max-associations="5"
+    >
+      <qti-prompt><p>Match each animal with its traits:</p></qti-prompt>
+      <qti-simple-match-set>
+        <qti-simple-associable-choice identifier="row_bat" match-max="2">Bat</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="row_eagle" match-max="2">Eagle</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="row_whale" match-max="1">Whale</qti-simple-associable-choice>
+      </qti-simple-match-set>
+      <qti-simple-match-set>
+        <qti-simple-associable-choice identifier="choice_mammal" match-max="2">Mammal</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="choice_fly" match-max="2">Can fly</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="choice_bird" match-max="1">Bird</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="choice_reptile" match-max="1">Reptile</qti-simple-associable-choice>
+      </qti-simple-match-set>
+    </qti-match-interaction>
+  </qti-item-body>
+</qti-assessment-item>`;
+
 /**
  * Hardcoded items covering different states:
  *  - item-1: single-select choice interaction
@@ -268,6 +319,7 @@ export const ASSOCIATE_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
  *  - item-free-response: free-response text-entry (no correct answer)
  *  - item-ordering: ordering interaction (planets by distance from the Sun)
  *  - item-associate: associate interaction (countries to capitals, with distractors)
+ *  - item-match: match interaction (animals to traits, with shared answers and a distractor)
  */
 export const INITIAL_ASSESSMENTS = [
   {
@@ -305,4 +357,9 @@ export const INITIAL_ASSESSMENTS = [
     type: AssessmentItemTypes.QTI,
     raw_data: ASSOCIATE_ITEM_XML,
   },
+  {
+    assessment_id: 'demo-item-match',
+    type: AssessmentItemTypes.QTI,
+    raw_data: MATCH_ITEM_XML,
+  },
 ];

From 1026ca723463a5bca1518526ecb0d919a9215558 Mon Sep 17 00:00:00 2001
From: rtibblesbot <richard+githubagent@learningequality.org>
Date: Mon, 28 Sep 2026 08:01:33 -0700
Subject: [PATCH 4/4] Align the question type selector with the question label

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>
---
 .../QTIEditor/components/QuestionTypeSelector/index.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/index.vue
index 68d4fcd265..c3b5391705 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QuestionTypeSelector/index.vue
@@ -198,7 +198,9 @@
     flex-wrap: wrap;
     gap: 5px;
     align-items: flex-start;
-    padding: 10px 20px;
+
+    // The question card body already insets its content.
+    padding: 10px 0;
 
     &.small-screen {
       flex-direction: column;
@@ -223,8 +225,9 @@
     gap: 8px;
   }
 
+  // Matches the question label of every interaction editor.
   .group-label {
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 600;
     line-height: 1.4;
     white-space: nowrap;