diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js b/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js
index e1b2e27350..a3c831b10c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js
@@ -215,6 +215,50 @@ export const ORDERING_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
   </qti-item-body>
 </qti-assessment-item>`;
 
+/**
+ * Demo item 7: associate interaction — learner connects countries to capitals.
+ * Uses cardinality="multiple" and base-type="pair" per QTI 3.0 §3.2.13.
+ */
+export const ASSOCIATE_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
+<qti-assessment-item
+  xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+  identifier="item-associate"
+  title="Match each country with its capital city"
+  adaptive="false"
+  time-dependent="false"
+  xml:lang="en"
+>
+  <qti-response-declaration
+    identifier="RESPONSE"
+    cardinality="multiple"
+    base-type="pair"
+  >
+    <qti-correct-response>
+      <qti-value>choice_kenya choice_nairobi</qti-value>
+      <qti-value>choice_japan choice_tokyo</qti-value>
+      <qti-value>choice_brazil choice_brasilia</qti-value>
+    </qti-correct-response>
+  </qti-response-declaration>
+
+  <qti-item-body>
+    <qti-associate-interaction
+      response-identifier="RESPONSE"
+      shuffle="true"
+      max-associations="3"
+    >
+      <qti-prompt><p>Match each country with its capital city:</p></qti-prompt>
+      <qti-simple-associable-choice identifier="choice_kenya" match-max="1">Kenya</qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="choice_nairobi" match-max="1">Nairobi</qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="choice_japan" match-max="1">Japan</qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="choice_tokyo" match-max="1">Tokyo</qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="choice_brazil" match-max="1">Brazil</qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="choice_brasilia" match-max="1">Brasília</qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="choice_mombasa" match-max="1">Mombasa</qti-simple-associable-choice>
+      <qti-simple-associable-choice identifier="choice_osaka" match-max="1">Osaka</qti-simple-associable-choice>
+    </qti-associate-interaction>
+  </qti-item-body>
+</qti-assessment-item>`;
+
 /**
  * Hardcoded items covering different states:
  *  - item-1: single-select choice interaction
@@ -223,6 +267,7 @@ export const ORDERING_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
  *  - item-text-entry: string text-entry with case-sensitive answers
  *  - 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)
  */
 export const INITIAL_ASSESSMENTS = [
   {
@@ -255,4 +300,9 @@ export const INITIAL_ASSESSMENTS = [
     type: AssessmentItemTypes.QTI,
     raw_data: ORDERING_ITEM_XML,
   },
+  {
+    assessment_id: 'demo-item-associate',
+    type: AssessmentItemTypes.QTI,
+    raw_data: ASSOCIATE_ITEM_XML,
+  },
 ];
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 4e84bf71cb..1404d9753f 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
@@ -12,6 +12,7 @@ import {
   NO_INTERACTION_ITEM_DOCUMENT,
   CHOICE_ITEM_DOCUMENT_WITH_HINTS,
   NO_INTERACTION_ITEM_WITH_HINTS,
+  VALID_ASSOCIATE_ITEM_DOCUMENT,
 } from '../../../utils/testingFixtures';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
@@ -29,6 +30,9 @@ const {
   unsupportedItemMessage$,
   incompleteItemIndicatorLabel$,
   hintsLabel$,
+  associateLabel$,
+  unknownTypeLabel$,
+  responsePoolLabel$,
 } = qtiEditorStrings;
 
 const defaultProps = {
@@ -291,6 +295,29 @@ describe('QTIItemEditor', () => {
     });
   });
 
+  describe('associate interaction', () => {
+    const renderAssociateItem = () =>
+      renderComponent({
+        item: {
+          assessment_id: 'test-item-id',
+          type: AssessmentItemTypes.QTI,
+          raw_data: VALID_ASSOCIATE_ITEM_DOCUMENT,
+        },
+      });
+
+    test('names the associate question type rather than falling back to unknown', async () => {
+      renderAssociateItem();
+      expect(await screen.findByText(associateLabel$(), { exact: false })).toBeInTheDocument();
+      expect(screen.queryByText(unknownTypeLabel$(), { exact: false })).not.toBeInTheDocument();
+    });
+
+    test('renders the associate editor for the parsed interaction', async () => {
+      renderAssociateItem();
+      expect(await screen.findByText(responsePoolLabel$())).toBeInTheDocument();
+      expect(screen.getByText('Antonio')).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 3ec1e5a803..8c36a87748 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
@@ -182,6 +182,7 @@
           [QuestionType.TEXT_ENTRY]: qtiEditorStrings.textEntryLabel$,
           [QuestionType.FREE_RESPONSE]: qtiEditorStrings.freeResponseLabel$,
           [QuestionType.ORDERING]: qtiEditorStrings.orderingLabel$,
+          [QuestionType.ASSOCIATE]: qtiEditorStrings.associateLabel$,
         };
         return (QUESTION_TYPE_LABELS[type] ?? unknownTypeLabel$)();
       });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useAssociateInteraction.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useAssociateInteraction.spec.js
new file mode 100644
index 0000000000..697bbf07c9
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useAssociateInteraction.spec.js
@@ -0,0 +1,122 @@
+import { ref } from 'vue';
+import { useAssociateInteraction } from '../useAssociateInteraction';
+import { ASSOCIATE_XML, ASSOCIATE_DECL_XML } from '../../utils/testingFixtures';
+import { parseXML } from '../../serialization/xml';
+import { QuestionType } from '../../constants';
+
+const GENERATED_ID = /^choice_[a-z0-9]{8}$/;
+
+const contentsOf = pairs => pairs.map(pair => pair.map(choice => choice.content));
+
+const maxAssociations = bodyXml =>
+  parseXML(bodyXml).documentElement.getAttribute('max-associations');
+
+describe('useAssociateInteraction', () => {
+  function setup(bodyXml = ASSOCIATE_XML, declarationXml = ASSOCIATE_DECL_XML) {
+    const questionType = ref(QuestionType.ASSOCIATE);
+    return useAssociateInteraction(
+      { bodyXml, responseDeclarations: [declarationXml] },
+      questionType,
+    );
+  }
+
+  describe('initial state', () => {
+    it('parses pairs and distractors from the fixture XML', () => {
+      const { state } = setup();
+      expect(contentsOf(state.value.pairs)).toEqual([
+        ['Antonio', 'Prospero'],
+        ['Capulet', 'Montague'],
+      ]);
+      expect(state.value.distractors.map(d => d.content)).toEqual(['Lysander']);
+    });
+  });
+
+  describe('addPair()', () => {
+    it('appends a pair of two blank choices with distinct generated ids', () => {
+      const { state, addPair } = setup();
+      addPair();
+      expect(contentsOf(state.value.pairs)).toEqual([
+        ['Antonio', 'Prospero'],
+        ['Capulet', 'Montague'],
+        ['', ''],
+      ]);
+      const [first, second] = state.value.pairs[2];
+      expect(first.id).toMatch(GENERATED_ID);
+      expect(second.id).toMatch(GENERATED_ID);
+      expect(first.id).not.toBe(second.id);
+    });
+
+    it('rebuilds bodyXml with the new max-associations', () => {
+      const { bodyXml, addPair } = setup();
+      addPair();
+      expect(maxAssociations(bodyXml.value)).toBe('3');
+    });
+  });
+
+  describe('removePair()', () => {
+    it('drops the pair at the given index and keeps the rest in order', () => {
+      const { state, removePair } = setup();
+      removePair(0);
+      expect(contentsOf(state.value.pairs)).toEqual([['Capulet', 'Montague']]);
+    });
+
+    it('is a no-op when only one pair remains', () => {
+      const { state, removePair } = setup();
+      removePair(0);
+      removePair(0);
+      expect(contentsOf(state.value.pairs)).toEqual([['Capulet', 'Montague']]);
+    });
+
+    it('drops the pair from the emitted correct response', () => {
+      const { responseDeclarations, removePair } = setup();
+      removePair(0);
+      expect(responseDeclarations.value[0]).not.toContain('choice_aaa11111');
+    });
+  });
+
+  describe('setPair()', () => {
+    it('replaces only the pair at the given index', () => {
+      const { state, setPair } = setup();
+      const [first, second] = state.value.pairs[0];
+      setPair(0, [{ ...first, content: '<p>Updated</p>' }, second]);
+      expect(contentsOf(state.value.pairs)).toEqual([
+        ['<p>Updated</p>', 'Prospero'],
+        ['Capulet', 'Montague'],
+      ]);
+    });
+  });
+
+  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_ID);
+    });
+
+    it('appends the given content when the distractor is written before it is added', () => {
+      const { state, addDistractor } = setup();
+      addDistractor('<p>Demetrius</p>');
+      expect(state.value.distractors[1].content).toBe('<p>Demetrius</p>');
+      expect(state.value.distractors[1].id).toMatch(GENERATED_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(['Lysander', '<p>Updated</p>']);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useAssociateInteraction.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useAssociateInteraction.js
new file mode 100644
index 0000000000..1b2223cd79
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useAssociateInteraction.js
@@ -0,0 +1,74 @@
+import { readonly } from 'vue';
+import { associateInteractionDescriptor } from '../interactions/associate/Descriptor';
+import { newChoice } from '../interactions/associate/parse';
+import { useInteraction } from './useInteraction';
+
+/**
+ * Composable for the associate interaction editor.
+ *
+ * @param {{ bodyXml: string, responseDeclarations: string[] }} interactionBlock
+ * @param {import('vue').Ref<string|null>} questionType
+ */
+export function useAssociateInteraction(interactionBlock, questionType) {
+  const base = useInteraction(associateInteractionDescriptor, interactionBlock, questionType);
+  const { state } = base;
+
+  function addPair() {
+    state.value = { ...state.value, pairs: [...state.value.pairs, [newChoice(), newChoice()]] };
+  }
+
+  function removePair(index) {
+    // An associate question is meaningless without a pair to associate.
+    if (state.value.pairs.length <= 1) return;
+    state.value = {
+      ...state.value,
+      pairs: state.value.pairs.filter((_, i) => i !== index),
+    };
+  }
+
+  function setPair(index, newPair) {
+    state.value = {
+      ...state.value,
+      pairs: state.value.pairs.map((pair, i) => (i === index ? newPair : pair)),
+    };
+  }
+
+  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),
+    addPair,
+    removePair,
+    setPair,
+    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 1ebd3f003e..22572b1467 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
@@ -53,6 +53,7 @@ export const QtiInteraction = Object.freeze({
   CHOICE: 'qti-choice-interaction',
   ORDER: 'qti-order-interaction',
   MATCH: 'qti-match-interaction',
+  ASSOCIATE: 'qti-associate-interaction',
   TEXT_ENTRY: 'qti-text-entry-interaction',
   EXTENDED_TEXT: 'qti-extended-text-interaction',
 });
@@ -82,6 +83,7 @@ export const QuestionType = Object.freeze({
   TEXT_ENTRY: 'textEntry',
   FREE_RESPONSE: 'freeResponse',
   ORDERING: 'ordering',
+  ASSOCIATE: 'associate',
 });
 
 /**
@@ -103,6 +105,9 @@ export const ValidationError = Object.freeze({
   EMPTY_ANSWER_CONTENT: 'EMPTY_ANSWER_CONTENT',
   DUPLICATE_ANSWER_CONTENT: 'DUPLICATE_ANSWER_CONTENT',
   TOO_FEW_CHOICES: 'TOO_FEW_CHOICES',
+  TOO_FEW_PAIRS: 'TOO_FEW_PAIRS',
+  DUPLICATE_PAIR_CONTENT: 'DUPLICATE_PAIR_CONTENT',
+  DUPLICATE_DISTRACTOR_CONTENT: 'DUPLICATE_DISTRACTOR_CONTENT',
 });
 
 export const RESPONSE_IDENTIFIER = 'RESPONSE';
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Descriptor.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Descriptor.js
new file mode 100644
index 0000000000..2b4d103d84
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Descriptor.js
@@ -0,0 +1,81 @@
+import { QtiInteraction, QuestionType, BaseType, Cardinality } from '../../constants';
+import { InteractionDescriptor } from '../InteractionDescriptor';
+import { parseAssociateInteraction, buildAssociateInteractionXML } from './parse';
+import { validateAssociateInteraction } from './validation';
+
+/**
+ * Owns all associate-specific interaction logic: schema, parse, buildXML, and validate.
+ */
+export class AssociateInteractionDescriptor extends InteractionDescriptor {
+  constructor() {
+    super({
+      type: QtiInteraction.ASSOCIATE,
+      questionTypes: [QuestionType.ASSOCIATE],
+    });
+    this.convertsFrom = [];
+  }
+
+  getTypeOptions(tr) {
+    return [
+      {
+        value: QuestionType.ASSOCIATE,
+        label: tr.associateLabel$(),
+        description: tr.associateDescription$(),
+      },
+    ];
+  }
+
+  /**
+   * Associate always has exactly one question type.
+   *
+   * @returns {string}
+   */
+  getQuestionType() {
+    return QuestionType.ASSOCIATE;
+  }
+
+  /**
+   * @returns {{ baseType: string, cardinality: string }}
+   */
+  getResponseDeclarationSchema() {
+    return {
+      baseType: BaseType.PAIR,
+      cardinality: Cardinality.MULTIPLE,
+    };
+  }
+
+  /**
+   * Parse <qti-associate-interaction> body XML + response declarations → AssociateState.
+   *
+   * @param {string} bodyXml
+   * @param {string[]} responseDeclarations
+   * @returns {object} AssociateState
+   */
+  parse(bodyXml, responseDeclarations) {
+    return parseAssociateInteraction(bodyXml, responseDeclarations);
+  }
+
+  /**
+   * Serialize AssociateState → { bodyXml, responseDeclarations }.
+   *
+   * @param {object} state - AssociateState
+   * @param {string} questionType
+   * @returns {{ bodyXml: string, responseDeclarations: string[] }}
+   */
+  buildXML(state, questionType) {
+    return buildAssociateInteractionXML(state, questionType, this.getResponseDeclarationSchema());
+  }
+
+  /**
+   * Validate AssociateState → ValidationError[].
+   *
+   * @param {object} state - AssociateState
+   * @returns {Array<{ code: string, id?: string, index?: number }>}
+   */
+  validate(state) {
+    return validateAssociateInteraction(state);
+  }
+}
+
+/** Singleton — safe to import from any file in the associate module tree. */
+export const associateInteractionDescriptor = new AssociateInteractionDescriptor();
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Editor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Editor.vue
new file mode 100644
index 0000000000..1b7ad2c114
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/Editor.vue
@@ -0,0 +1,1124 @@
+<template>
+
+  <div
+    ref="rootEl"
+    class="associate-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"
+    >
+      <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>
+    </div>
+
+    <!-- Correct pairs — editable in edit mode, read-only when revealing answers -->
+    <div
+      v-if="mode === 'edit' || showAnswers"
+      class="editor-section"
+    >
+      <ValidationMessage v-if="tooFewPairsError">
+        {{ errorTooFewPairs$() }}
+      </ValidationMessage>
+
+      <div class="section-headers">
+        <h4
+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ pairsSectionLabel }}
+        </h4>
+        <div
+          v-if="mode === 'edit'"
+          class="section-sublabel"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          {{ correctPairsDescription$() }}
+        </div>
+      </div>
+
+      <ol
+        class="pairs-list"
+        :aria-label="pairsSectionLabel"
+      >
+        <li
+          v-for="(pair, index) in state.pairs"
+          :key="index"
+          class="pair-row"
+          :class="{ 'is-stacked': isPairRowStacked(index), 'is-editable': mode === 'edit' }"
+        >
+          <div
+            class="pair-number"
+            :style="{ color: $themePalette.grey.v_700 }"
+          >
+            {{ pairNumberLabel$({ number: index + 1 }) }}
+          </div>
+
+          <div class="pair-cards">
+            <template v-if="mode === 'edit'">
+              <ClickableRegion
+                v-for="(choice, position) in pair"
+                :key="`${choice.id}-${position}`"
+                class="pair-card"
+                :class="{ 'is-clickable item-border': !isPairItemOpen(index, position) }"
+                :style="pairItemStyles[index][position]"
+                :suppressed="isPairItemOpen(index, position)"
+                :aria-label="editPairItemLabel$({ number: index + 1, position: position + 1 })"
+                @click="openPairItem(index, position)"
+              >
+                <div
+                  class="item-card-text"
+                  :class="{ 'is-closed': !isPairItemOpen(index, position) }"
+                >
+                  <TipTapEditor
+                    :value="choice.content"
+                    :mode="isPairItemOpen(index, position) ? 'edit' : 'view'"
+                    format="html"
+                    :minHeight="'48px'"
+                    :autofocus="isPairItemOpen(index, position)"
+                    :imageProcessor="EditorImageProcessor"
+                    :tabindex="-1"
+                    class="editor"
+                    @update="html => setPairItemContent(index, position, html)"
+                    @minimize="closeOpenTarget"
+                  />
+                </div>
+              </ClickableRegion>
+            </template>
+            <template v-else>
+              <div
+                v-for="(choice, position) in pair"
+                :key="`${choice.id}-${position}`"
+                class="chip"
+                :style="{ borderColor: $themeTokens.fineLine }"
+              >
+                <TipTapEditor
+                  :value="choice.content"
+                  mode="view"
+                  format="html"
+                  :imageProcessor="EditorImageProcessor"
+                  :tabindex="-1"
+                  class="editor"
+                />
+              </div>
+            </template>
+          </div>
+
+          <div
+            v-if="mode === 'edit'"
+            class="pair-actions"
+            @click.stop
+          >
+            <KIconButton
+              icon="close"
+              size="small"
+              :disabled="isOnlyPair"
+              :ariaLabel="deletePairBtn$({ number: index + 1 })"
+              :tooltip="deletePairBtn$({ number: index + 1 })"
+              :color="isOnlyPair ? $themeTokens.textDisabled : $themePalette.grey.v_700"
+              @click="onRemovePair(index)"
+            />
+          </div>
+
+          <div
+            v-if="pairErrorMessages[index].length"
+            class="pair-messages"
+          >
+            <ValidationMessage
+              v-for="message in pairErrorMessages[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="addPairButton"
+          :label="addPairBtn$()"
+          @click="onAddPair"
+        />
+      </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>
+
+      <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>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  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 { 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 { hasRichTextContent, richTextComparisonKey } from '../../utils/richText';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
+
+  /** Which card currently holds the open TipTap editor. */
+  const OpenTarget = Object.freeze({
+    PROMPT: 'prompt',
+    PAIR: 'pair',
+    DISTRACTOR: 'distractor',
+    DRAFT: 'draft',
+  });
+
+  export default {
+    name: 'AssociateInteractionEditor',
+
+    components: {
+      TipTapEditor,
+      ValidationMessage,
+      AddListItemButton,
+      ClickableRegion,
+    },
+
+    setup(props, { emit }) {
+      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+      const tokens = themeTokens();
+      const palette = themePalette();
+
+      const {
+        questionLabel$,
+        editQuestionLabel$,
+        errorPromptRequired$,
+        correctPairsLabel$,
+        correctPairsDescription$,
+        correctAnswersLabel$,
+        responsePoolLabel$,
+        distractorsLabel$,
+        distractorsDescription$,
+        pairNumberLabel$,
+        addPairBtn$,
+        deletePairBtn$,
+        addDistractorBtn$,
+        deleteDistractorBtn$,
+        editPairItemLabel$,
+        editDistractorLabel$,
+        errorTooFewPairs$,
+        errorDuplicatePairContent$,
+        errorDuplicateDistractorContent$,
+        errorEmptyChoiceContent$,
+      } = qtiEditorStrings;
+
+      const questionTypeRef = computed(() => props.questionType);
+
+      const {
+        state,
+        bodyXml,
+        responseDeclarations,
+        errors,
+        addPair,
+        removePair,
+        setPair,
+        addDistractor,
+        removeDistractor,
+        setDistractorContent,
+        setPrompt,
+      } = useAssociateInteraction(props.interaction, questionTypeRef);
+
+      // 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 isPromptOpen = computed(
+        () => props.mode === 'edit' && openTarget.value?.kind === OpenTarget.PROMPT,
+      );
+
+      function isPairRowOpen(index) {
+        const target = openTarget.value;
+        return props.mode === 'edit' && target?.kind === OpenTarget.PAIR && target.index === index;
+      }
+
+      function isPairItemOpen(index, position) {
+        return isPairRowOpen(index) && openTarget.value.position === position;
+      }
+
+      // Two cards side by side leave 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 pair even closed, so it stacks throughout.
+      function isPairRowStacked(index) {
+        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
+        );
+      }
+
+      /**
+       * 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.
+       */
+      function closeOpenTarget() {
+        const target = openTarget.value;
+        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);
+        }
+      }
+
+      // 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 openPrompt() {
+        if (props.mode !== 'edit') return;
+        closeOpenTarget();
+        openTarget.value = { kind: OpenTarget.PROMPT };
+      }
+
+      function openPairItem(index, position) {
+        if (props.mode !== 'edit') return;
+        closeOpenTarget();
+        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,
+        );
+        setPair(index, pair);
+      }
+
+      function onAddPair() {
+        addPair();
+        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) {
+        closeOpenTarget();
+        removePair(index);
+        focusAfterRemoval('.pair-actions button', index, addPairButton);
+      }
+
+      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 workingInteraction = computed(() => ({
+        bodyXml: bodyXml.value,
+        responseDeclarations: responseDeclarations.value,
+      }));
+
+      watch(
+        () => props.mode,
+        newMode => {
+          if (newMode !== 'edit') {
+            discardDraft();
+            return;
+          }
+          if (!hasRichTextContent(state.value.prompt)) {
+            openPrompt();
+          } else if (state.value.pairs.length > 0) {
+            openPairItem(0, 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 errorCodes = computed(() => errors.value.map(e => e.code));
+
+      const promptHasError = computed(() =>
+        errorCodes.value.includes(ValidationError.PROMPT_REQUIRED),
+      );
+
+      const tooFewPairsError = computed(() =>
+        errorCodes.value.includes(ValidationError.TOO_FEW_PAIRS),
+      );
+
+      // 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);
+      }
+
+      const duplicatedTexts = computed(
+        () =>
+          new Set(
+            errors.value
+              .filter(e => e.code === ValidationError.DUPLICATE_DISTRACTOR_CONTENT)
+              .map(e => e.text),
+          ),
+      );
+
+      function isDuplicated(choice) {
+        return duplicatedTexts.value.has(richTextComparisonKey(choice.content));
+      }
+
+      const duplicatePairIndexes = computed(
+        () =>
+          new Set(
+            errors.value
+              .filter(e => e.code === ValidationError.DUPLICATE_PAIR_CONTENT)
+              .map(e => e.index),
+          ),
+      );
+
+      // Every fault that reddens a card in the row is also named under the row.
+      const pairErrorMessages = computed(() =>
+        state.value.pairs.map((pair, index) => {
+          const messages = [];
+          if (duplicatePairIndexes.value.has(index)) messages.push(errorDuplicatePairContent$());
+          if (pair.some(isBlank)) messages.push(errorEmptyChoiceContent$());
+          if (pair.some(isDuplicated)) messages.push(errorDuplicateDistractorContent$());
+          return messages;
+        }),
+      );
+
+      const distractorErrorMessages = computed(() =>
+        state.value.distractors.map(choice => {
+          if (isBlank(choice)) return errorEmptyChoiceContent$();
+          if (isDuplicated(choice)) return errorDuplicateDistractorContent$();
+          return null;
+        }),
+      );
+
+      function choiceHasError(choice) {
+        return isBlank(choice) || isDuplicated(choice);
+      }
+
+      function borderStyle(hasError) {
+        return { borderColor: hasError ? tokens.error : tokens.fineLine };
+      }
+
+      // A pair member turns red for its own fault or for the pair's, so the two
+      // items of an identical pair are both marked.
+      const pairItemStyles = computed(() =>
+        state.value.pairs.map((pair, index) =>
+          pair.map((choice, choiceIndex) =>
+            isPairItemOpen(index, choiceIndex)
+              ? {}
+              : borderStyle(duplicatePairIndexes.value.has(index) || choiceHasError(choice)),
+          ),
+        ),
+      );
+
+      // 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'
+          : ['item-border', { 'is-clickable': props.mode === 'edit' }],
+      );
+
+      const promptWrapperStyle = computed(() =>
+        isPromptOpen.value ? {} : borderStyle(promptHasError.value),
+      );
+
+      const isOnlyPair = computed(() => state.value.pairs.length <= 1);
+
+      const pairsSectionLabel = computed(() =>
+        props.mode === 'edit' ? correctPairsLabel$() : correctAnswersLabel$(),
+      );
+
+      // Blank pair members are left out: every blank choice keys the same, so
+      // keeping them would mark an unwritten option in the pool as correct.
+      const pairedTexts = computed(
+        () =>
+          new Set(
+            flatten(state.value.pairs)
+              .filter(choice => hasRichTextContent(choice.content))
+              .map(choice => richTextComparisonKey(choice.content)),
+          ),
+      );
+
+      // 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,
+          };
+        }),
+      );
+
+      return {
+        EditorImageProcessor,
+        rootEl,
+        addPairButton,
+        addDistractorButton,
+        state,
+        isPromptOpen,
+        promptWrapperClass,
+        promptWrapperStyle,
+        openPrompt,
+        closeOpenTarget,
+        isPairItemOpen,
+        isPairRowStacked,
+        isDistractorOpen,
+        openPairItem,
+        openDistractor,
+        setPairItemContent,
+        setDistractorContent,
+        setPrompt,
+        onRemovePair,
+        onRemoveDistractor,
+        onAddPair,
+        onAddDistractor,
+        draft,
+        draftKey,
+        setDraftContent,
+        onDiscardDraft,
+        promptHasError,
+        tooFewPairsError,
+        pairErrorMessages,
+        distractorErrorMessages,
+        pairItemStyles,
+        distractorStyles,
+        isOnlyPair,
+        pairsSectionLabel,
+        shuffledPool,
+        poolChipStyles,
+        questionLabel$,
+        editQuestionLabel$,
+        errorPromptRequired$,
+        correctPairsDescription$,
+        responsePoolLabel$,
+        distractorsLabel$,
+        distractorsDescription$,
+        pairNumberLabel$,
+        addPairBtn$,
+        deletePairBtn$,
+        addDistractorBtn$,
+        deleteDistractorBtn$,
+        editPairItemLabel$,
+        editDistractorLabel$,
+        errorTooFewPairs$,
+      };
+    },
+
+    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>
+
+  .associate-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;
+  }
+
+  .pairs-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .pair-row {
+    display: grid;
+    grid-template-areas:
+      'label cards actions'
+      'message message message';
+    grid-template-columns: auto 1fr auto;
+
+    // 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 {
+      padding: 8px;
+      background-color: v-bind('$themePalette.grey.v_50');
+      border: 1px solid v-bind('$themeTokens.fineLine');
+    }
+
+    &.is-stacked {
+      grid-template-areas:
+        'label actions'
+        'cards cards'
+        'message message';
+      grid-template-columns: 1fr auto;
+    }
+  }
+
+  .pair-number {
+    grid-area: label;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .pair-cards {
+    display: flex;
+    grid-area: cards;
+    gap: 8px;
+    align-items: stretch;
+    min-width: 0;
+
+    .is-stacked & {
+      flex-direction: column;
+      margin-top: 8px;
+
+      // A view-mode chip is a pill sized by its content, so the column that
+      // stacks it must not stretch it to the row's width.
+      > .chip {
+        align-self: flex-start;
+      }
+    }
+  }
+
+  // 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.
+  .pair-card {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    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;
+      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 {
+    display: flex;
+    grid-area: actions;
+    align-items: center;
+  }
+
+  .pair-messages {
+    display: flex;
+    flex-direction: column;
+    grid-area: message;
+    gap: 4px;
+    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.
+  .chip {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+    padding: 4px 12px;
+    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 {
+    width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/Descriptor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/Descriptor.spec.js
new file mode 100644
index 0000000000..b6eda3e34c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/Descriptor.spec.js
@@ -0,0 +1,20 @@
+import { associateInteractionDescriptor as descriptor } from '../Descriptor';
+import { qtiEditorStrings } from '../../../qtiEditorStrings';
+import { QuestionType } from '../../../constants';
+import { ASSOCIATE_XML, ASSOCIATE_DECL_XML } from '../../../utils/testingFixtures';
+
+describe('AssociateInteractionDescriptor', () => {
+  it('getTypeOptions() offers the associate question type to the type selector', () => {
+    const options = descriptor.getTypeOptions(qtiEditorStrings);
+    expect(options).toHaveLength(1);
+    expect(options[0].value).toBe(QuestionType.ASSOCIATE);
+    expect(options[0].label).toBe(qtiEditorStrings.$tr('associateLabel'));
+  });
+
+  it('buildXML() forwards its own declaration schema', () => {
+    const state = descriptor.parse(ASSOCIATE_XML, [ASSOCIATE_DECL_XML]);
+    const [declXml] = descriptor.buildXML(state, QuestionType.ASSOCIATE).responseDeclarations;
+    expect(declXml).toContain('base-type="pair"');
+    expect(declXml).toContain('cardinality="multiple"');
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/Editor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/Editor.spec.js
new file mode 100644
index 0000000000..c35d630b3d
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/Editor.spec.js
@@ -0,0 +1,603 @@
+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 AssociateEditor from '../Editor.vue';
+
+import {
+  ASSOCIATE_XML,
+  ASSOCIATE_DECL_XML,
+  mockInteractionBlock as block,
+  mockInteractionBlockWithDecl as blockWithDecl,
+} from '../../../utils/testingFixtures';
+import { QuestionType } 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 POOL_CONTENTS = ['Antonio', 'Prospero', 'Capulet', 'Montague', 'Lysander'];
+
+// One pair whose second member has no content, so the pool carries a blank
+// distractor the author still has to fill in.
+const BLANK_DISTRACTOR_XML = `<qti-associate-interaction response-identifier="RESPONSE">
+  <qti-prompt><p>Match each character to his adversary.</p></qti-prompt>
+  <qti-simple-associable-choice identifier="choice_aaa11111" match-max="1">Antonio</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_bbb22222" match-max="1">Prospero</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_fff66666" match-max="1"></qti-simple-associable-choice>
+</qti-associate-interaction>`;
+
+const ONE_PAIR_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+  <qti-correct-response>
+    <qti-value>choice_aaa11111 choice_bbb22222</qti-value>
+  </qti-correct-response>
+</qti-response-declaration>`;
+
+// Antonio is paired twice, so its match-max is 2.
+const SHARED_CHOICE_XML = `<qti-associate-interaction response-identifier="RESPONSE">
+  <qti-prompt><p>Match each character to his adversary.</p></qti-prompt>
+  <qti-simple-associable-choice identifier="choice_aaa11111" match-max="2">Antonio</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_bbb22222" match-max="1">Prospero</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_ccc33333" match-max="1">Capulet</qti-simple-associable-choice>
+</qti-associate-interaction>`;
+
+const SHARED_CHOICE_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+  <qti-correct-response>
+    <qti-value>choice_aaa11111 choice_bbb22222</qti-value>
+    <qti-value>choice_aaa11111 choice_ccc33333</qti-value>
+  </qti-correct-response>
+</qti-response-declaration>`;
+
+// The mock TipTapEditor renders a <textarea> only for the card currently open.
+const openTextarea = () => screen.queryAllByRole('textbox').find(el => el.tagName === 'TEXTAREA');
+
+const button = name => screen.getByRole('button', { name });
+const queryButton = name => screen.queryByRole('button', { name });
+
+const editPairItem = (number, position) => tr.$tr('editPairItemLabel', { number, position });
+
+const renderEditor = (props = {}) =>
+  render(AssociateEditor, {
+    props: {
+      mode: 'edit',
+      questionType: QuestionType.ASSOCIATE,
+      interaction: blockWithDecl(ASSOCIATE_XML, ASSOCIATE_DECL_XML),
+      ...props,
+    },
+    routes: new VueRouter(),
+  });
+
+const updates = emitted => emitted()['update:interaction'] || [];
+const latestBodyXml = emitted => updates(emitted).at(-1)[0].bodyXml;
+
+describe('AssociateEditor', () => {
+  beforeEach(() => {
+    mockWindowIsLarge = true;
+    mockWindowIsSmall = false;
+  });
+
+  describe('edit mode rendering', () => {
+    it('renders the prompt text from the XML', () => {
+      renderEditor();
+      expect(screen.getByText(/Match each character/)).toBeInTheDocument();
+    });
+
+    it('renders every pair member and distractor from the XML', () => {
+      renderEditor();
+      for (const content of POOL_CONTENTS) {
+        expect(screen.getByText(content)).toBeInTheDocument();
+      }
+    });
+
+    it('renders a numbered label for each pair', () => {
+      renderEditor();
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 1 }))).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 2 }))).toBeInTheDocument();
+    });
+
+    it('renders the pairs and distractors section headers', () => {
+      renderEditor();
+      expect(screen.getByText(tr.$tr('correctPairsLabel'))).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('correctPairsDescription'))).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('distractorsLabel'))).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('distractorsDescription'))).toBeInTheDocument();
+    });
+
+    it('renders the add pair and add distractor buttons', () => {
+      renderEditor();
+      expect(button(tr.$tr('addPairBtn'))).toBeInTheDocument();
+      expect(button(tr.$tr('addDistractorBtn'))).toBeInTheDocument();
+    });
+
+    it('opens the first pair item for editing when the prompt is already written', () => {
+      renderEditor();
+      expect(queryButton(editPairItem(1, 1))).not.toBeInTheDocument();
+      expect(openTextarea()).toHaveValue('Antonio');
+    });
+
+    it('opens the prompt for editing when there is no prompt yet', () => {
+      renderEditor({ interaction: block('') });
+      expect(queryButton(tr.$tr('editQuestionLabel'))).not.toBeInTheDocument();
+    });
+  });
+
+  describe('editing content', () => {
+    it('moves the open editor to the pair item that is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(editPairItem(2, 1)));
+      expect(openTextarea()).toHaveValue('Capulet');
+      expect(button(editPairItem(1, 1))).toBeInTheDocument();
+    });
+
+    it('writes the typed pair content into the emitted XML', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(editPairItem(2, 2)));
+      await user.type(openTextarea(), 'Verona');
+      expect(latestBodyXml(emitted)).toContain('Verona');
+    });
+
+    it('writes the typed prompt into the emitted XML', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(tr.$tr('editQuestionLabel')));
+      await user.type(openTextarea(), 'Who rivals whom?');
+      expect(latestBodyXml(emitted)).toContain('Who rivals whom?');
+    });
+  });
+
+  describe('pairs', () => {
+    it('appends a third pair and opens it when the add pair button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addPairBtn')));
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 3 }))).toBeInTheDocument();
+      expect(queryButton(editPairItem(3, 1))).not.toBeInTheDocument();
+    });
+
+    it('removes the pair when its delete button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('deletePairBtn', { number: 1 })));
+      expect(screen.queryByText('Antonio')).not.toBeInTheDocument();
+      expect(screen.getByText('Capulet')).toBeInTheDocument();
+    });
+
+    it('disables the delete button when a single pair remains', () => {
+      renderEditor({ interaction: block('') });
+      expect(button(tr.$tr('deletePairBtn', { number: 1 }))).toBeDisabled();
+    });
+
+    it('keeps the last pair when its delete button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('deletePairBtn', { number: 1 })));
+      await user.click(button(tr.$tr('deletePairBtn', { number: 1 })));
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 1 }))).toBeInTheDocument();
+      expect(screen.getByText('Capulet')).toBeInTheDocument();
+    });
+  });
+
+  describe('pair layout below the large breakpoint', () => {
+    const pairRows = () =>
+      within(screen.getByRole('list', { name: tr.$tr('correctPairsLabel') })).getAllByRole(
+        'listitem',
+      );
+
+    it('stacks only the row whose editor is open', async () => {
+      mockWindowIsLarge = false;
+      const user = userEvent.setup();
+      // Pair 1 item 1 opens on mount.
+      renderEditor();
+      const [first, second] = pairRows();
+      expect(first).toHaveClass('is-stacked');
+      expect(second).not.toHaveClass('is-stacked');
+
+      await user.click(button(editPairItem(2, 1)));
+      expect(first).not.toHaveClass('is-stacked');
+      expect(second).toHaveClass('is-stacked');
+    });
+
+    it('stacks no row on a large screen', () => {
+      renderEditor();
+      for (const row of pairRows()) {
+        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 pairRows()) {
+        expect(row).toHaveClass('is-stacked');
+      }
+    });
+  });
+
+  describe('adding a distractor', () => {
+    // The fixture pool 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();
+
+      const pool = screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
+      expect(within(pool).getAllByRole('listitem')).toHaveLength(1);
+    });
+
+    it('keeps the add button available while one is being written', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      expect(button(tr.$tr('addDistractorBtn'))).toBeInTheDocument();
+    });
+
+    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(), 'Demetrius');
+      const before = updates(emitted).length;
+      // Editing something else closes the editor, which is what commits it.
+      await user.click(button(editPairItem(1, 1)));
+
+      const pool = screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
+      expect(within(pool).getByText('Demetrius')).toBeInTheDocument();
+      expect(latestBodyXml(emitted)).toContain('Demetrius');
+      expect(updates(emitted).length).toBeGreaterThan(before);
+    });
+
+    it('commits the written distractor and focuses a fresh editor when add is clicked again', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Demetrius');
+      await user.click(button(tr.$tr('addDistractorBtn')));
+
+      const pool = screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
+      expect(within(pool).getByText('Demetrius')).toBeInTheDocument();
+      expect(openTextarea()).toHaveValue('');
+      expect(openTextarea()).toHaveFocus();
+    });
+
+    it('focuses the editor again when the add button is clicked with nothing written', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.click(button(tr.$tr('addDistractorBtn')));
+
+      expect(openTextarea()).toHaveFocus();
+    });
+
+    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(editPairItem(1, 1)));
+
+      const pool = screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
+      expect(within(pool).getAllByRole('listitem')).toHaveLength(1);
+    });
+
+    it('discards the written distractor when its remove button is clicked', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Demetrius');
+      await user.click(button(removeNewDistractor));
+
+      expect(screen.queryByText('Demetrius')).not.toBeInTheDocument();
+      expect(button(tr.$tr('addDistractorBtn'))).toBeInTheDocument();
+    });
+  });
+
+  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('Lysander');
+    });
+
+    it('opens a distractor whose content is blank', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: blockWithDecl(BLANK_DISTRACTOR_XML, ONE_PAIR_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(), '!');
+      expect(latestBodyXml(emitted)).toContain('Lysander!');
+    });
+
+    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('Lysander')).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(), 'Demetrius');
+      await user.click(button(editPairItem(1, 1)));
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 2 })));
+      expect(openTextarea()).toHaveValue('Demetrius');
+
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 1 })));
+      expect(openTextarea()).toBeUndefined();
+      expect(screen.getByText('Demetrius')).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_PAIR_DECL_XML) });
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 1 })));
+      await user.click(button(editPairItem(1, 1)));
+
+      const pool = screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
+      expect(within(pool).queryAllByRole('listitem')).toHaveLength(0);
+    });
+  });
+
+  describe('view mode', () => {
+    const viewProps = { mode: 'view' };
+
+    it('renders the shuffled response pool exactly once per option', () => {
+      renderEditor(viewProps);
+      expect(screen.getByText(tr.$tr('responsePoolLabel'))).toBeInTheDocument();
+      for (const content of POOL_CONTENTS) {
+        expect(screen.getAllByText(content)).toHaveLength(1);
+      }
+    });
+
+    it('repeats an option in the pool once per association it allows', () => {
+      renderEditor({
+        ...viewProps,
+        interaction: blockWithDecl(SHARED_CHOICE_XML, SHARED_CHOICE_DECL_XML),
+      });
+      expect(screen.getAllByText('Antonio')).toHaveLength(2);
+      expect(screen.getAllByText('Prospero')).toHaveLength(1);
+    });
+
+    it('hides the editing controls', () => {
+      renderEditor(viewProps);
+      expect(queryButton(tr.$tr('addPairBtn'))).not.toBeInTheDocument();
+      expect(queryButton(tr.$tr('addDistractorBtn'))).not.toBeInTheDocument();
+      expect(queryButton(tr.$tr('deletePairBtn', { number: 1 }))).not.toBeInTheDocument();
+    });
+
+    it('hides the correct answers when showAnswers is false', () => {
+      renderEditor(viewProps);
+      expect(screen.queryByText(tr.$tr('correctAnswersLabel'))).not.toBeInTheDocument();
+    });
+
+    it('lists each correct pair when showAnswers is true', () => {
+      renderEditor({ ...viewProps, showAnswers: true });
+      const answers = screen.getByRole('list', { name: tr.$tr('correctAnswersLabel') });
+      expect(within(answers).getByText('Antonio')).toBeInTheDocument();
+      expect(within(answers).getByText('Prospero')).toBeInTheDocument();
+      expect(within(answers).queryByText('Lysander')).not.toBeInTheDocument();
+    });
+
+    it('opens no editor for a pair item', async () => {
+      const user = userEvent.setup();
+      renderEditor({ ...viewProps, showAnswers: true });
+      const answers = screen.getByRole('list', { name: tr.$tr('correctAnswersLabel') });
+      expect(queryButton(editPairItem(1, 1))).not.toBeInTheDocument();
+      await user.click(within(answers).getByText('Antonio'));
+      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('emits update:interaction after adding a pair', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      await user.click(button(tr.$tr('addPairBtn')));
+      const payload = updates(emitted).at(-1)[0];
+      expect(typeof payload.bodyXml).toBe('string');
+      expect(Array.isArray(payload.responseDeclarations)).toBe(true);
+    });
+
+    it('does not emit update:interaction when moving between editors changes nothing', async () => {
+      const user = userEvent.setup();
+      const { emitted } = renderEditor();
+      // Pair 1 item 1 opens on mount; moving the open editor is not a content change.
+      await user.click(button(editPairItem(1, 2)));
+      await user.click(button(editPairItem(2, 1)));
+      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);
+    });
+  });
+
+  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-pairs errors as soon as the state changes', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: block('') });
+      await user.click(button(tr.$tr('addPairBtn')));
+      await nextTick();
+      expect(screen.getByText(tr.$tr('errorPromptRequired'))).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('errorTooFewPairs'))).toBeInTheDocument();
+    });
+
+    it('flags a pair whose two members hold the same content', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: block('') });
+      for (const position of [1, 2]) {
+        await user.click(button(editPairItem(1, position)));
+        await user.type(openTextarea(), 'Kenya');
+      }
+      await nextTick();
+      expect(screen.getByText(tr.$tr('errorDuplicatePairContent'))).toBeInTheDocument();
+    });
+
+    it('flags a distractor parsed with no content', async () => {
+      renderEditor({ interaction: blockWithDecl(BLANK_DISTRACTOR_XML, ONE_PAIR_DECL_XML) });
+      await nextTick();
+      expect(screen.getByText(tr.$tr('errorEmptyChoiceContent'))).toBeInTheDocument();
+    });
+
+    it('flags a distractor repeating a paired item in both the pool and the pair row', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Antonio');
+      await user.click(button(editPairItem(1, 2)));
+      await nextTick();
+      const distractors = screen.getByRole('list', { name: tr.$tr('distractorsLabel') });
+      const pairs = screen.getByRole('list', { name: tr.$tr('correctPairsLabel') });
+      expect(
+        within(distractors).getByText(tr.$tr('errorDuplicateDistractorContent')),
+      ).toBeInTheDocument();
+      expect(
+        within(pairs).getByText(tr.$tr('errorDuplicateDistractorContent')),
+      ).toBeInTheDocument();
+    });
+
+    it('stacks both faults on a pair that repeats itself and a distractor', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(editPairItem(1, 2)));
+      await user.clear(openTextarea());
+      await user.type(openTextarea(), 'Antonio');
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Antonio');
+      await user.click(button(editPairItem(2, 1)));
+      await nextTick();
+      const pairs = screen.getByRole('list', { name: tr.$tr('correctPairsLabel') });
+      expect(within(pairs).getByText(tr.$tr('errorDuplicatePairContent'))).toBeInTheDocument();
+      expect(
+        within(pairs).getByText(tr.$tr('errorDuplicateDistractorContent')),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('opens a pair item from the keyboard', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      button(editPairItem(2, 1)).focus();
+      await user.keyboard('{Enter}');
+      expect(queryButton(editPairItem(2, 1))).not.toBeInTheDocument();
+    });
+
+    it('adds a pair from the keyboard', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      button(tr.$tr('addPairBtn')).focus();
+      await user.keyboard('{Enter}');
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 3 }))).toBeInTheDocument();
+    });
+
+    it('moves focus to the last row when the last pair is deleted', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addPairBtn')));
+      await user.click(button(tr.$tr('deletePairBtn', { number: 3 })));
+      await nextTick();
+      expect(button(tr.$tr('deletePairBtn', { number: 2 }))).toHaveFocus();
+    });
+
+    it('moves focus to the add pair button when no removable pair is left', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('deletePairBtn', { number: 1 })));
+      await nextTick();
+      expect(button(tr.$tr('addPairBtn'))).toHaveFocus();
+    });
+
+    it('moves focus to the chip that takes a deleted distractor\u2019s place', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.type(openTextarea(), 'Demetrius');
+      await user.click(button(editPairItem(1, 1)));
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 1 })));
+      await nextTick();
+      expect(button(tr.$tr('deleteDistractorBtn', { number: 1 }))).toHaveFocus();
+    });
+
+    it('moves focus to the add distractor button when the pool empties', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 1 })));
+      await nextTick();
+      expect(button(tr.$tr('addDistractorBtn'))).toHaveFocus();
+    });
+
+    // Closing the editor already drops a blank distractor, so the delete press finds
+    // nothing left to remove — and must still place the focus it is about to lose.
+    it('moves focus on when an open blank distractor is deleted', async () => {
+      const user = userEvent.setup();
+      renderEditor({ interaction: blockWithDecl(BLANK_DISTRACTOR_XML, ONE_PAIR_DECL_XML) });
+      await user.click(button(tr.$tr('editDistractorLabel', { number: 1 })));
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 1 })));
+      await nextTick();
+      expect(button(tr.$tr('addDistractorBtn'))).toHaveFocus();
+    });
+
+    it('moves focus to the add distractor button when a draft is discarded', async () => {
+      const user = userEvent.setup();
+      renderEditor();
+      await user.click(button(tr.$tr('addDistractorBtn')));
+      await user.click(button(tr.$tr('deleteDistractorBtn', { number: 2 })));
+      await nextTick();
+      expect(button(tr.$tr('addDistractorBtn'))).toHaveFocus();
+    });
+  });
+
+  describe('graceful fallback', () => {
+    it('renders the default single blank pair when bodyXml is empty', () => {
+      renderEditor({ interaction: block('') });
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 1 }))).toBeInTheDocument();
+      expect(screen.queryByText(tr.$tr('pairNumberLabel', { number: 2 }))).not.toBeInTheDocument();
+      expect(button(tr.$tr('addPairBtn'))).toBeInTheDocument();
+    });
+
+    it('renders the default state when the XML is malformed', () => {
+      renderEditor({ interaction: block('<unclosed') });
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 1 }))).toBeInTheDocument();
+      expect(screen.queryByText(tr.$tr('pairNumberLabel', { number: 2 }))).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/parse.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/parse.spec.js
new file mode 100644
index 0000000000..c32e3ab262
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/parse.spec.js
@@ -0,0 +1,438 @@
+/* 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 {
+  buildAssociateInteractionXML as buildXML,
+  parseAssociateInteraction as parse,
+} from '../parse';
+import { ASSOCIATE_XML, ASSOCIATE_DECL_XML } from '../../../utils/testingFixtures';
+import { BaseType, Cardinality, QuestionType } from '../../../constants';
+import { parseXML } from '../../../serialization/xml';
+
+const contentsOf = pairs => pairs.map(pair => pair.map(choice => choice.content));
+
+const SCHEMA = { baseType: BaseType.PAIR, cardinality: Cardinality.MULTIPLE };
+
+const parseXmlString = xml => parseXML(xml).documentElement;
+
+describe('parse()', () => {
+  describe('fallbacks', () => {
+    it('seeds one pair of two blank choices with distinct ids when bodyXml is empty', () => {
+      const state = parse('', [ASSOCIATE_DECL_XML]);
+      expect(contentsOf(state.pairs)).toEqual([['', '']]);
+      expect(state.distractors).toEqual([]);
+      const [[first, second]] = state.pairs;
+      expect(first.id).toMatch(/^choice_/);
+      expect(second.id).toMatch(/^choice_/);
+      expect(first.id).not.toBe(second.id);
+    });
+
+    it('returns the default state when bodyXml is invalid XML', () => {
+      const state = parse('<not-valid', [ASSOCIATE_DECL_XML]);
+      expect(contentsOf(state.pairs)).toEqual([['', '']]);
+      expect(state.distractors).toEqual([]);
+    });
+
+    it('defaults prompt to an empty string when <qti-prompt> is absent', () => {
+      const xml = `<qti-associate-interaction response-identifier="RESPONSE">
+        <qti-simple-associable-choice identifier="a">A</qti-simple-associable-choice>
+      </qti-associate-interaction>`;
+      expect(parse(xml, []).prompt).toBe('');
+    });
+  });
+
+  describe('prompt and pairs', () => {
+    it('reads the prompt HTML', () => {
+      expect(parse(ASSOCIATE_XML, [ASSOCIATE_DECL_XML]).prompt).toContain('Match each character');
+    });
+
+    it('builds one pair per declared <qti-value>', () => {
+      expect(parse(ASSOCIATE_XML, [ASSOCIATE_DECL_XML]).pairs).toHaveLength(2);
+    });
+
+    it('resolves pair members to their pool content', () => {
+      const state = parse(ASSOCIATE_XML, [ASSOCIATE_DECL_XML]);
+      expect(contentsOf(state.pairs)).toEqual([
+        ['Antonio', 'Prospero'],
+        ['Capulet', 'Montague'],
+      ]);
+    });
+
+    it('preserves the member order written in the <qti-value>', () => {
+      const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+        <qti-correct-response>
+          <qti-value>choice_bbb22222 choice_aaa11111</qti-value>
+        </qti-correct-response>
+      </qti-response-declaration>`;
+      expect(contentsOf(parse(ASSOCIATE_XML, [decl]).pairs)).toEqual([['Prospero', 'Antonio']]);
+    });
+
+    it('drops a pair naming an identifier absent from the pool', () => {
+      const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+        <qti-correct-response>
+          <qti-value>choice_aaa11111 choice_missing</qti-value>
+          <qti-value>choice_ccc33333 choice_ddd44444</qti-value>
+        </qti-correct-response>
+      </qti-response-declaration>`;
+      expect(contentsOf(parse(ASSOCIATE_XML, [decl]).pairs)).toEqual([['Capulet', 'Montague']]);
+    });
+
+    it('keeps an empty <qti-value> as a pair of two blank choices', () => {
+      const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+        <qti-correct-response>
+          <qti-value></qti-value>
+          <qti-value>choice_ccc33333 choice_ddd44444</qti-value>
+        </qti-correct-response>
+      </qti-response-declaration>`;
+      expect(contentsOf(parse(ASSOCIATE_XML, [decl]).pairs)).toEqual([
+        ['', ''],
+        ['Capulet', 'Montague'],
+      ]);
+    });
+
+    it('gives the blank pair from an empty <qti-value> generated ids', () => {
+      const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+        <qti-correct-response>
+          <qti-value></qti-value>
+        </qti-correct-response>
+      </qti-response-declaration>`;
+      const [[first, second]] = parse(ASSOCIATE_XML, [decl]).pairs;
+      expect(first.id).toMatch(/^choice_/);
+      expect(second.id).toMatch(/^choice_/);
+      expect(first.id).not.toBe(second.id);
+    });
+  });
+
+  describe('distractors', () => {
+    it('treats a choice absent from the correct response as a distractor', () => {
+      const state = parse(ASSOCIATE_XML, [ASSOCIATE_DECL_XML]);
+      expect(state.distractors.map(choice => choice.content)).toEqual(['Lysander']);
+    });
+
+    it('yields one distractor per unused match-max on an unpaired choice', () => {
+      const xml = `<qti-associate-interaction response-identifier="RESPONSE">
+        <qti-simple-associable-choice identifier="choice_eee55555" match-max="2">Lysander</qti-simple-associable-choice>
+      </qti-associate-interaction>`;
+      const state = parse(xml, []);
+      expect(state.distractors.map(choice => choice.id)).toEqual([
+        'choice_eee55555',
+        'choice_eee55555',
+      ]);
+    });
+
+    it('subtracts pair appearances from match-max when counting distractors', () => {
+      const xml = `<qti-associate-interaction response-identifier="RESPONSE">
+        <qti-simple-associable-choice identifier="choice_aaa11111" match-max="2">Antonio</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="choice_bbb22222" match-max="1">Prospero</qti-simple-associable-choice>
+      </qti-associate-interaction>`;
+      const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+        <qti-correct-response>
+          <qti-value>choice_aaa11111 choice_bbb22222</qti-value>
+        </qti-correct-response>
+      </qti-response-declaration>`;
+      const state = parse(xml, [decl]);
+      expect(state.distractors.map(choice => choice.id)).toEqual(['choice_aaa11111']);
+    });
+
+    it('puts every choice in distractors when no declarations are passed', () => {
+      const state = parse(ASSOCIATE_XML, []);
+      expect(state.pairs).toEqual([]);
+      expect(state.distractors.map(choice => choice.content)).toEqual([
+        'Antonio',
+        'Prospero',
+        'Capulet',
+        'Montague',
+        'Lysander',
+      ]);
+    });
+  });
+
+  describe('identifiers', () => {
+    it('assigns a generated choice_ slug to a choice without an identifier', () => {
+      const xml = `<qti-associate-interaction response-identifier="RESPONSE">
+        <qti-simple-associable-choice>No ID</qti-simple-associable-choice>
+      </qti-associate-interaction>`;
+      expect(parse(xml, []).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 a choice whose identifier is an Object.prototype member name', () => {
+      const xml = `<qti-associate-interaction response-identifier="RESPONSE">
+        <qti-simple-associable-choice identifier="constructor" match-max="2">Antonio</qti-simple-associable-choice>
+        <qti-simple-associable-choice identifier="choice_bbb22222" match-max="1">Prospero</qti-simple-associable-choice>
+      </qti-associate-interaction>`;
+      const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+        <qti-correct-response>
+          <qti-value>constructor choice_bbb22222</qti-value>
+        </qti-correct-response>
+      </qti-response-declaration>`;
+      const state = parse(xml, [decl]);
+      expect(contentsOf(state.pairs)).toEqual([['Antonio', 'Prospero']]);
+      expect(state.distractors.map(choice => choice.id)).toEqual(['constructor']);
+    });
+  });
+});
+
+describe('buildXML()', () => {
+  const baseState = {
+    responseIdentifier: 'RESPONSE',
+    prompt: '<p>Match each character to his adversary.</p>',
+    pairs: [
+      [
+        { id: 'choice_aaa11111', content: 'Antonio' },
+        { id: 'choice_bbb22222', content: 'Prospero' },
+      ],
+      [
+        { id: 'choice_ccc33333', content: 'Capulet' },
+        { id: 'choice_ddd44444', content: 'Montague' },
+      ],
+    ],
+    distractors: [{ id: 'choice_eee55555', content: 'Lysander' }],
+  };
+
+  const build = state => buildXML(state, QuestionType.ASSOCIATE, SCHEMA);
+  const choicesOf = root => [...root.querySelectorAll('qti-simple-associable-choice')];
+  const valuesOf = decl => [...decl.querySelectorAll('qti-value')].map(n => n.textContent.trim());
+
+  describe('interaction attributes', () => {
+    it('emits the response identifier, shuffle, and one association per pair', () => {
+      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('2');
+    });
+
+    it('omits <qti-prompt> when prompt is empty', () => {
+      const root = parseXmlString(build({ ...baseState, prompt: '' }).bodyXml);
+      expect(root.querySelector('qti-prompt')).toBeNull();
+    });
+  });
+
+  describe('choice pool', () => {
+    it('merges pairs and distractors into one pool of singly-used choices', () => {
+      const root = parseXmlString(build(baseState).bodyXml);
+      expect(choicesOf(root).map(el => el.getAttribute('identifier'))).toEqual([
+        'choice_aaa11111',
+        'choice_bbb22222',
+        'choice_ccc33333',
+        'choice_ddd44444',
+        'choice_eee55555',
+      ]);
+      expect(choicesOf(root).map(el => el.getAttribute('match-max'))).toEqual([
+        '1',
+        '1',
+        '1',
+        '1',
+        '1',
+      ]);
+    });
+
+    it('emits content once for a choice reused across two pairs, with match-max="2"', () => {
+      const pairs = [
+        baseState.pairs[0],
+        [
+          { id: 'choice_ccc33333', content: 'Capulet' },
+          { id: 'choice_aaa11111', content: 'Antonio' },
+        ],
+      ];
+      const { bodyXml, responseDeclarations } = build({ ...baseState, pairs });
+      const antonio = choicesOf(parseXmlString(bodyXml)).filter(el => el.textContent === 'Antonio');
+      expect(antonio).toHaveLength(1);
+      expect(antonio[0].getAttribute('match-max')).toBe('2');
+      expect(valuesOf(parseXmlString(responseDeclarations[0]))).toEqual([
+        'choice_aaa11111 choice_bbb22222',
+        'choice_ccc33333 choice_aaa11111',
+      ]);
+    });
+
+    it('counts a distractor repeat of paired content towards match-max', () => {
+      const distractors = [{ id: 'choice_zzz00000', content: 'Antonio' }];
+      const root = parseXmlString(build({ ...baseState, distractors }).bodyXml);
+      const antonio = choicesOf(root).filter(el => el.textContent === 'Antonio');
+      expect(antonio).toHaveLength(1);
+      expect(antonio[0].getAttribute('match-max')).toBe('2');
+    });
+
+    it('keeps the first appearance of an id and reassigns the later choice reusing it', () => {
+      const pairs = [
+        baseState.pairs[0],
+        [
+          { id: 'choice_aaa11111', content: 'Capulet' },
+          { id: 'choice_ddd44444', content: 'Montague' },
+        ],
+      ];
+      const { bodyXml, responseDeclarations } = build({
+        ...baseState,
+        pairs,
+        distractors: [],
+      });
+      const root = parseXmlString(bodyXml);
+      const [capulet] = choicesOf(root).filter(el => el.textContent === 'Capulet');
+      const [antonio] = choicesOf(root).filter(el => el.textContent === 'Antonio');
+      expect(antonio.getAttribute('identifier')).toBe('choice_aaa11111');
+      expect(capulet.getAttribute('identifier')).toMatch(/^choice_/);
+      expect(capulet.getAttribute('identifier')).not.toBe('choice_aaa11111');
+      expect(valuesOf(parseXmlString(responseDeclarations[0]))[1]).toBe(
+        `${capulet.getAttribute('identifier')} choice_ddd44444`,
+      );
+    });
+
+    // Every permutation of the two normalization rules — one id per content,
+    // one content per id — resolved in favour of the first appearance.
+    describe('id normalization', () => {
+      const idsOf = root => choicesOf(root).map(el => el.getAttribute('identifier'));
+      const idOf = (root, content) =>
+        choicesOf(root)
+          .find(el => el.textContent === content)
+          .getAttribute('identifier');
+
+      it('keeps the id of the first appearance when a repeat carries a different id', () => {
+        const pairs = [
+          baseState.pairs[0],
+          [
+            { id: 'choice_ccc33333', content: 'Capulet' },
+            { id: 'choice_zzz00000', content: 'Antonio' },
+          ],
+        ];
+        const { bodyXml, responseDeclarations } = build({ ...baseState, pairs, distractors: [] });
+        const root = parseXmlString(bodyXml);
+        expect(idsOf(root)).not.toContain('choice_zzz00000');
+        expect(idOf(root, 'Antonio')).toBe('choice_aaa11111');
+        expect(valuesOf(parseXmlString(responseDeclarations[0]))[1]).toBe(
+          'choice_ccc33333 choice_aaa11111',
+        );
+      });
+
+      it('resolves a repeat and then an id conflict on the same choice', () => {
+        const pairs = [
+          baseState.pairs[0],
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_ccc33333', content: 'Capulet' },
+          ],
+          [
+            { id: 'choice_aaa11111', content: 'Montague' },
+            { id: 'choice_ddd44444', content: 'Demetrius' },
+          ],
+        ];
+        const { bodyXml, responseDeclarations } = build({ ...baseState, pairs, distractors: [] });
+        const root = parseXmlString(bodyXml);
+
+        expect(idOf(root, 'Antonio')).toBe('choice_aaa11111');
+        expect(
+          choicesOf(root)
+            .find(el => el.textContent === 'Antonio')
+            .getAttribute('match-max'),
+        ).toBe('2');
+
+        const montagueId = idOf(root, 'Montague');
+        expect(montagueId).toMatch(/^choice_/);
+        expect(montagueId).not.toBe('choice_aaa11111');
+        expect(valuesOf(parseXmlString(responseDeclarations[0]))).toEqual([
+          'choice_aaa11111 choice_bbb22222',
+          'choice_aaa11111 choice_ccc33333',
+          `${montagueId} choice_ddd44444`,
+        ]);
+      });
+
+      it('gives a third choice repeating reassigned content the reassigned id', () => {
+        const pairs = [
+          baseState.pairs[0],
+          [
+            { id: 'choice_aaa11111', content: 'Montague' },
+            { id: 'choice_ccc33333', content: 'Capulet' },
+          ],
+          [
+            { id: 'choice_ddd44444', content: 'Montague' },
+            { id: 'choice_eee55555', content: 'Lysander' },
+          ],
+        ];
+        const root = parseXmlString(build({ ...baseState, pairs, distractors: [] }).bodyXml);
+        const montague = choicesOf(root).filter(el => el.textContent === 'Montague');
+        expect(montague).toHaveLength(1);
+        expect(montague[0].getAttribute('match-max')).toBe('2');
+        expect(idsOf(root)).not.toContain('choice_ddd44444');
+      });
+    });
+
+    it('keeps two blank choices in a pair as two separate elements', () => {
+      const pairs = [
+        [
+          { id: 'choice_blank111', content: '' },
+          { id: 'choice_blank222', content: '' },
+        ],
+      ];
+      const root = parseXmlString(build({ ...baseState, pairs, distractors: [] }).bodyXml);
+      expect(choicesOf(root)).toHaveLength(2);
+    });
+  });
+
+  describe('response declaration', () => {
+    it('emits one space-separated <qti-value> per pair, preserving order', () => {
+      const decl = parseXmlString(build(baseState).responseDeclarations[0]);
+      expect(valuesOf(decl)).toEqual([
+        'choice_aaa11111 choice_bbb22222',
+        'choice_ccc33333 choice_ddd44444',
+      ]);
+    });
+
+    it('takes cardinality and base-type from the declaration schema', () => {
+      const decl = parseXmlString(build(baseState).responseDeclarations[0]);
+      expect(decl.getAttribute('cardinality')).toBe('multiple');
+      expect(decl.getAttribute('base-type')).toBe('pair');
+    });
+
+    it('omits <qti-correct-response> when there are no pairs', () => {
+      const { bodyXml, responseDeclarations } = build({ ...baseState, pairs: [] });
+      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.ASSOCIATE, SCHEMA);
+    return parse(bodyXml, responseDeclarations);
+  };
+
+  it('preserves pair contents and ids for a full associate XML', () => {
+    const original = parse(ASSOCIATE_XML, [ASSOCIATE_DECL_XML]);
+    const reparsed = roundTrip(original);
+    expect(contentsOf(reparsed.pairs)).toEqual(contentsOf(original.pairs));
+    expect(reparsed.pairs.map(pair => pair.map(choice => choice.id))).toEqual(
+      original.pairs.map(pair => pair.map(choice => choice.id)),
+    );
+  });
+
+  it('preserves distractor contents for a full associate XML', () => {
+    const original = parse(ASSOCIATE_XML, [ASSOCIATE_DECL_XML]);
+    const reparsed = roundTrip(original);
+    expect(reparsed.distractors.map(choice => choice.content).sort()).toEqual(
+      original.distractors.map(choice => choice.content).sort(),
+    );
+  });
+
+  it('preserves a pair declared as an empty <qti-value>', () => {
+    const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+      <qti-correct-response>
+        <qti-value></qti-value>
+        <qti-value>choice_ccc33333 choice_ddd44444</qti-value>
+      </qti-correct-response>
+    </qti-response-declaration>`;
+    const reparsed = roundTrip(parse(ASSOCIATE_XML, [decl]));
+    expect(contentsOf(reparsed.pairs)).toEqual([
+      ['', ''],
+      ['Capulet', 'Montague'],
+    ]);
+  });
+
+  it('preserves the default state as one pair of two blank choices', () => {
+    const reparsed = roundTrip(parse('', []));
+    expect(contentsOf(reparsed.pairs)).toEqual([['', '']]);
+    expect(reparsed.distractors).toEqual([]);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/validation.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/validation.spec.js
new file mode 100644
index 0000000000..433b0639a5
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/validation.spec.js
@@ -0,0 +1,214 @@
+import { validateAssociateInteraction } from '../validation';
+import { ValidationError } from '../../../constants';
+
+function makeState(overrides = {}) {
+  return {
+    prompt: '<p>Match each character to his adversary.</p>',
+    pairs: [
+      [
+        { id: 'choice_aaa11111', content: 'Antonio' },
+        { id: 'choice_bbb22222', content: 'Prospero' },
+      ],
+    ],
+    distractors: [{ id: 'choice_eee55555', content: 'Lysander' }],
+    ...overrides,
+  };
+}
+
+const errorCodes = errors => errors.map(e => e.code);
+
+describe('validateAssociateInteraction()', () => {
+  it('returns an empty array for a valid state', () => {
+    expect(validateAssociateInteraction(makeState())).toEqual([]);
+  });
+
+  describe('PROMPT_REQUIRED', () => {
+    it('returns error when the prompt is empty', () => {
+      expect(errorCodes(validateAssociateInteraction(makeState({ prompt: '' })))).toContain(
+        ValidationError.PROMPT_REQUIRED,
+      );
+    });
+
+    it('returns error when the prompt is tags-and-whitespace only', () => {
+      expect(
+        errorCodes(validateAssociateInteraction(makeState({ prompt: '<p>   </p>' }))),
+      ).toContain(ValidationError.PROMPT_REQUIRED);
+    });
+  });
+
+  describe('EMPTY_CHOICE_CONTENT', () => {
+    it('flags a blank pair member by id and leaves the pair invalid', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_bbb22222', content: '  ' },
+          ],
+        ],
+      });
+      const errors = validateAssociateInteraction(state);
+      expect(errors).toContainEqual({
+        code: ValidationError.EMPTY_CHOICE_CONTENT,
+        id: 'choice_bbb22222',
+      });
+      expect(errorCodes(errors)).toContain(ValidationError.TOO_FEW_PAIRS);
+    });
+
+    it('flags a blank distractor by id without invalidating the pairs', () => {
+      const state = makeState({ distractors: [{ id: 'choice_eee55555', content: '<p></p>' }] });
+      const errors = validateAssociateInteraction(state);
+      expect(errors).toContainEqual({
+        code: ValidationError.EMPTY_CHOICE_CONTENT,
+        id: 'choice_eee55555',
+      });
+      expect(errorCodes(errors)).not.toContain(ValidationError.TOO_FEW_PAIRS);
+    });
+  });
+
+  describe('DUPLICATE_PAIR_CONTENT', () => {
+    it('flags a pair whose two members hold the same content, by pair index', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_bbb22222', content: 'Antonio' },
+          ],
+        ],
+      });
+      const errors = validateAssociateInteraction(state);
+      expect(errors).toContainEqual({ code: ValidationError.DUPLICATE_PAIR_CONTENT, index: 0 });
+      expect(errorCodes(errors)).toContain(ValidationError.TOO_FEW_PAIRS);
+    });
+
+    it('treats content differing only by markup as duplicate', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_bbb22222', content: '<b>Antonio</b>' },
+          ],
+        ],
+      });
+      expect(errorCodes(validateAssociateInteraction(state))).toContain(
+        ValidationError.DUPLICATE_PAIR_CONTENT,
+      );
+    });
+
+    it('does not flag a pair whose members are both blank', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: '' },
+            { id: 'choice_bbb22222', content: '' },
+          ],
+        ],
+      });
+      expect(errorCodes(validateAssociateInteraction(state))).not.toContain(
+        ValidationError.DUPLICATE_PAIR_CONTENT,
+      );
+    });
+
+    it('does not flag content reused across two different pairs', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_bbb22222', content: 'Prospero' },
+          ],
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_ccc33333', content: 'Capulet' },
+          ],
+        ],
+      });
+      expect(validateAssociateInteraction(state)).toEqual([]);
+    });
+  });
+
+  describe('DUPLICATE_DISTRACTOR_CONTENT', () => {
+    it('flags a distractor repeated among the distractors, by its text', () => {
+      const state = makeState({
+        distractors: [
+          { id: 'choice_eee55555', content: 'Lysander' },
+          { id: 'choice_fff66666', content: '<b>Lysander</b>' },
+        ],
+      });
+      const errors = validateAssociateInteraction(state);
+      expect(errors).toContainEqual({
+        code: ValidationError.DUPLICATE_DISTRACTOR_CONTENT,
+        text: 'Lysander',
+      });
+      expect(
+        errors.filter(e => e.code === ValidationError.DUPLICATE_DISTRACTOR_CONTENT),
+      ).toHaveLength(1);
+    });
+
+    it('flags a distractor that duplicates an item in a pair', () => {
+      const state = makeState({ distractors: [{ id: 'choice_eee55555', content: 'Antonio' }] });
+      expect(validateAssociateInteraction(state)).toContainEqual({
+        code: ValidationError.DUPLICATE_DISTRACTOR_CONTENT,
+        text: 'Antonio',
+      });
+    });
+
+    it('does not flag blank distractors as duplicates of each other', () => {
+      const state = makeState({
+        distractors: [
+          { id: 'choice_eee55555', content: '' },
+          { id: 'choice_fff66666', content: '<p>  </p>' },
+        ],
+      });
+      expect(errorCodes(validateAssociateInteraction(state))).not.toContain(
+        ValidationError.DUPLICATE_DISTRACTOR_CONTENT,
+      );
+    });
+  });
+
+  describe('TOO_FEW_PAIRS', () => {
+    it('returns error when there are no pairs at all', () => {
+      expect(errorCodes(validateAssociateInteraction(makeState({ pairs: [] })))).toContain(
+        ValidationError.TOO_FEW_PAIRS,
+      );
+    });
+
+    it('returns error when every pair is invalid for a different reason', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_bbb22222', content: '' },
+          ],
+          [
+            { id: 'choice_ccc33333', content: 'Capulet' },
+            { id: 'choice_ddd44444', content: '<b>Capulet</b>' },
+          ],
+        ],
+      });
+      expect(errorCodes(validateAssociateInteraction(state))).toContain(
+        ValidationError.TOO_FEW_PAIRS,
+      );
+    });
+
+    it('does not return error when one valid pair sits among invalid ones', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: 'Antonio' },
+            { id: 'choice_bbb22222', content: 'Antonio' },
+          ],
+          [
+            { id: 'choice_ccc33333', content: '' },
+            { id: 'choice_ddd44444', content: 'Prospero' },
+          ],
+          [
+            { id: 'choice_eee55555', content: 'Capulet' },
+            { id: 'choice_fff66666', content: 'Montague' },
+          ],
+        ],
+      });
+      expect(errorCodes(validateAssociateInteraction(state))).not.toContain(
+        ValidationError.TOO_FEW_PAIRS,
+      );
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/parse.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/parse.js
new file mode 100644
index 0000000000..f1daff5d50
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/parse.js
@@ -0,0 +1,209 @@
+import flatMap from 'lodash/flatMap';
+import flatten from 'lodash/flatten';
+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} AssociateChoice
+ * @property {string} id      - QTI identifier, e.g. "choice_xlqTuVoq"
+ * @property {string} content - HTML content of the <qti-simple-associable-choice>
+ */
+
+/**
+ * @typedef {object} AssociateState
+ * @property {string}            responseIdentifier - Response identifier attribute
+ * @property {string}            prompt             - HTML content of <qti-prompt>; default ""
+ * @property {AssociateChoice[]} distractors        - Flat pool of unpaired choices
+ * @property {Array<[AssociateChoice, AssociateChoice]>} pairs - Correctly associated pairs
+ */
+
+/**
+ * @param {string} [content]
+ * @returns {AssociateChoice}
+ */
+export const newChoice = (content = '') => ({ id: generateRandomSlug('choice'), content });
+
+/**
+ * @returns {AssociateState}
+ */
+export function _defaultState() {
+  return {
+    responseIdentifier: RESPONSE_IDENTIFIER,
+    prompt: '',
+    distractors: [],
+    pairs: [[newChoice(), newChoice()]],
+  };
+}
+
+/**
+ * Extract the correct pairs from a response declaration string as id couples.
+ *
+ * An empty <qti-value/> coerces to null and is kept as such: it stands for a
+ * pair the author has yet to fill in, which the editor shows as a blank pair.
+ *
+ * @param {string[]} declarations
+ * @returns {Array<string[]|null>}
+ */
+export function _extractCorrectPairIds(declarations) {
+  const [declXml] = declarations || [];
+  if (!declXml) return [];
+
+  try {
+    const declEl = parseXML(declXml).documentElement;
+    const declaration = QTIDeclaration.fromXML(declEl);
+    return (declaration.correctResponse ?? []).map(value => (Array.isArray(value) ? value : null));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Parse <qti-associate-interaction> body XML + response declarations → AssociateState.
+ *
+ * @param {string} bodyXml
+ * @param {string[]} responseDeclarations
+ * @returns {AssociateState}
+ */
+export function parseAssociateInteraction(bodyXml, responseDeclarations) {
+  if (!bodyXml) return _defaultState();
+
+  let root;
+  try {
+    root = parseXML(bodyXml).documentElement;
+  } catch {
+    return _defaultState();
+  }
+
+  const pool = [...root.querySelectorAll('qti-simple-associable-choice')].map(el => ({
+    id: el.getAttribute('identifier') || generateRandomSlug('choice'),
+    content: el.innerHTML,
+    matchMax: parseInt(el.getAttribute('match-max'), 10) || 1,
+  }));
+  const poolById = new Map(pool.map(choice => [choice.id, choice]));
+
+  const pairs = _extractCorrectPairIds(responseDeclarations)
+    .map(ids => (ids ? ids.map(id => poolById.get(id)) : [newChoice(), newChoice()]))
+    .filter(members => members.every(Boolean))
+    .map(members => members.map(({ id, content }) => ({ id, content })));
+
+  // match-max is how many pairs a choice may join; the capacity the correct
+  // response leaves unused is what the author added as a loose option.
+  const pairedCount = new Map();
+  for (const { id } of flatten(pairs)) {
+    pairedCount.set(id, (pairedCount.get(id) || 0) + 1);
+  }
+
+  const distractors = flatMap(pool, ({ id, content, matchMax }) =>
+    Array.from({ length: Math.max(matchMax - (pairedCount.get(id) || 0), 0) }, () => ({
+      id,
+      content,
+    })),
+  );
+
+  return {
+    responseIdentifier: root.getAttribute('response-identifier') || RESPONSE_IDENTIFIER,
+    prompt: getPromptHTML(root),
+    distractors,
+    pairs,
+  };
+}
+
+/**
+ * Serialize AssociateState → { bodyXml, responseDeclarations }.
+ *
+ * @param {AssociateState} state
+ * @param {string} _questionType - unused (associate has one question type); kept for API parity
+ * @param {object} declarationSchema - { baseType: string, cardinality: string }
+ * @returns {{ bodyXml: string, responseDeclarations: string[] }}
+ */
+export function buildAssociateInteractionXML(state, _questionType, declarationSchema) {
+  const { responseIdentifier = RESPONSE_IDENTIFIER, prompt, pairs = [], distractors = [] } = state;
+
+  const idByContent = new Map();
+  const contentById = new Map();
+
+  // Preserves the id a choice already carries unless it is already bound to
+  // different content.
+  function resolveChoice({ id, content }) {
+    const key = hasRichTextContent(content) ? richTextComparisonKey(content) : '';
+
+    // Blank choices are never deduped — a freshly added pair holds two of them,
+    // and collapsing them would leave the pair unable to round-trip.
+    if (key && idByContent.has(key)) {
+      return { id: idByContent.get(key), content };
+    }
+
+    const boundKey = contentById.get(id);
+    const resolvedId =
+      boundKey === undefined || boundKey === key ? id : generateRandomSlug('choice');
+    contentById.set(resolvedId, key);
+    if (key) {
+      idByContent.set(key, resolvedId);
+    }
+    return { id: resolvedId, content };
+  }
+
+  const resolvedPairs = pairs.map(pair => pair.map(resolveChoice));
+  const resolvedDistractors = distractors.map(resolveChoice);
+
+  // Every appearance of a choice is one pairing it may take part in.
+  const pool = new Map();
+  for (const { id, content } of [...flatten(resolvedPairs), ...resolvedDistractors]) {
+    const entry = pool.get(id);
+    if (entry) {
+      entry.matchMax += 1;
+    } else {
+      pool.set(id, { id, content, matchMax: 1 });
+    }
+  }
+
+  const children = [];
+  if (prompt) {
+    children.push(buildXmlNode({ tag: 'qti-prompt', innerHTML: prompt }));
+  }
+  for (const { id, content, matchMax } of pool.values()) {
+    children.push(
+      buildXmlNode({
+        tag: 'qti-simple-associable-choice',
+        attrs: { identifier: id, 'match-max': matchMax },
+        innerHTML: content,
+      }),
+    );
+  }
+
+  const interactionEl = buildXmlNode({
+    tag: 'qti-associate-interaction',
+    attrs: {
+      'response-identifier': responseIdentifier,
+      shuffle: 'true',
+      'max-associations': pairs.length,
+    },
+    children,
+  });
+
+  const { cardinality, baseType } = declarationSchema;
+  const declaration = new QTIDeclaration({
+    identifier: responseIdentifier,
+    baseType,
+    cardinality,
+    tag: 'qti-response-declaration',
+  });
+  if (resolvedPairs.length > 0) {
+    new CorrectResponse(
+      resolvedPairs.map(pair => pair.map(choice => choice.id)),
+      declaration,
+    );
+  }
+
+  return {
+    bodyXml: serializer.serializeToString(interactionEl),
+    responseDeclarations: [serializer.serializeToString(declaration.getXML())],
+  };
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/validation.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/validation.js
new file mode 100644
index 0000000000..7a728d9cf4
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/validation.js
@@ -0,0 +1,77 @@
+import flatten from 'lodash/flatten';
+import { ValidationError } from '../../constants';
+import { hasRichTextContent, richTextComparisonKey } from '../../utils/richText';
+
+/**
+ * Validate AssociateState → ValidationError[].
+ *
+ * Choice-scoped errors carry `id`; pair-scoped errors carry the pair's `index`,
+ * because both members of a broken pair may be blank or share an id;
+ * duplication errors carry the repeated `text`, because an id may be repeated
+ * across choices and so cannot single one out.
+ *
+ * @param {object} state - AssociateState
+ * @returns {Array<{ code: string, id?: string, index?: number, text?: string }>}
+ */
+export function validateAssociateInteraction(state) {
+  const errors = [];
+  const { prompt, pairs = [], 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 readPairs = pairs.map(pair => pair.map(read));
+  const readDistractors = distractors.map(read);
+  const allChoices = [...flatten(readPairs), ...readDistractors];
+
+  for (const { id, filled } of allChoices) {
+    if (!filled) {
+      errors.push({ code: ValidationError.EMPTY_CHOICE_CONTENT, id });
+    }
+  }
+
+  let validPairs = 0;
+  readPairs.forEach(([first, second], index) => {
+    if (!first.filled || !second.filled) {
+      return;
+    }
+    if (first.key === second.key) {
+      errors.push({ code: ValidationError.DUPLICATE_PAIR_CONTENT, index });
+    } else {
+      validPairs += 1;
+    }
+  });
+
+  if (validPairs < 1) {
+    errors.push({ code: ValidationError.TOO_FEW_PAIRS });
+  }
+
+  // A distractor is there to be the wrong answer, so repeating another
+  // distractor or an item the author already paired makes it unanswerable.
+  // Content reused across two pairs stays valid — only distractors are flagged.
+  const occurrences = new Map();
+  for (const { filled, key } of allChoices) {
+    if (filled) {
+      occurrences.set(key, (occurrences.get(key) || 0) + 1);
+    }
+  }
+
+  const repeated = new Set(
+    readDistractors
+      .filter(({ filled, key }) => filled && occurrences.get(key) > 1)
+      .map(({ key }) => key),
+  );
+  for (const text of repeated) {
+    errors.push({ code: ValidationError.DUPLICATE_DISTRACTOR_CONTENT, text });
+  }
+
+  return errors;
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js
index 2b9fadd2e1..3d296148ff 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/descriptors.js
@@ -2,6 +2,7 @@ import { Placement, QtiInteraction } from '../constants';
 import { choiceInteractionDescriptor } from './choice/Descriptor';
 import { textEntryInteractionDescriptor } from './textEntry/Descriptor';
 import { orderingInteractionDescriptor } from './ordering/Descriptor';
+import { associateInteractionDescriptor } from './associate/Descriptor';
 
 /**
  * Every interaction's descriptor: matching, parsing, building and validating XML.
@@ -26,6 +27,7 @@ export const descriptors = [
   choiceInteractionDescriptor,
   textEntryInteractionDescriptor,
   orderingInteractionDescriptor,
+  associateInteractionDescriptor,
 ];
 
 /**
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js
index 1bad224177..1db98e2ce8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js
@@ -2,6 +2,7 @@ import { QtiInteraction } from '../constants';
 import ChoiceEditor from './choice/Editor.vue';
 import TextEntryEditor from './textEntry/Editor.vue';
 import OrderingEditor from './ordering/Editor.vue';
+import AssociateEditor from './associate/Editor.vue';
 
 /**
  * Entry point for the editor tree: the descriptors, plus the Vue component that edits each
@@ -15,6 +16,7 @@ export const editors = Object.freeze({
   [QtiInteraction.CHOICE]: ChoiceEditor,
   [QtiInteraction.TEXT_ENTRY]: TextEntryEditor,
   [QtiInteraction.ORDER]: OrderingEditor,
+  [QtiInteraction.ASSOCIATE]: AssociateEditor,
 });
 
 export { DEFAULT_INTERACTION, descriptors, registry } from './descriptors';
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
index 43a7fc06bc..71d674f63a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -105,6 +105,81 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     message: 'Duplicate items are not allowed',
     context: 'Validation error when two or more ordering items have identical content',
   },
+
+  associateLabel: {
+    message: 'Associate',
+    context: 'Display name for an associate question type shown in the question type selector',
+  },
+  associateDescription: {
+    message: 'Learners must associate pairs of items.',
+    context: 'Description for the associate question type in the info modal',
+  },
+  correctPairsLabel: {
+    message: 'Matching pairs',
+    context: 'Section header above the list of correctly associated pairs',
+  },
+  correctPairsDescription: {
+    message:
+      'Learners match responses from a shuffled set to each prompt. Include distractors to increase difficulty.',
+    context: 'Subtitle under the matching pairs header',
+  },
+  distractorsLabel: {
+    message: 'Distractors (optional)',
+    context: 'Section header above the choices that belong to no correct pair',
+  },
+  distractorsDescription: {
+    message: "Extra items shown in the response pool that don't match any prompt",
+    context: 'Subtitle under the distractors header',
+  },
+  responsePoolLabel: {
+    message: 'Response pool (shuffled)',
+    context: 'Header above the shuffled pool of choices learners will pick from',
+  },
+  correctAnswersLabel: {
+    message: 'Answers',
+    context: 'Header above the list of correct pairs shown when answers are revealed',
+  },
+  pairNumberLabel: {
+    message: 'Pair {number}',
+    context: 'Label to the left of a pair row, e.g. "Pair 2"',
+  },
+  addPairBtn: {
+    message: 'Add pair',
+    context: 'Button that appends a new pair',
+  },
+  deletePairBtn: {
+    message: 'Delete pair {number}',
+    context: 'Accessible label for the delete icon button next to a pair row',
+  },
+  addDistractorBtn: {
+    message: 'Add distractor',
+    context: 'Button that opens the editor for a new distractor',
+  },
+  deleteDistractorBtn: {
+    message: 'Delete distractor {number}',
+    context: 'Accessible label for the delete icon button on a distractor',
+  },
+  editPairItemLabel: {
+    message: 'Edit pair {number}, item {position}',
+    context: 'Accessible label for the clickable region to edit one item of a pair',
+  },
+  editDistractorLabel: {
+    message: 'Edit distractor {number}',
+    context: 'Accessible label for the clickable region to edit a distractor',
+  },
+  errorTooFewPairs: {
+    message: '1 or more valid pairs are required',
+    context: 'Validation error when no pair has two distinct, non-empty items',
+  },
+  errorDuplicatePairContent: {
+    message: 'Answers within a pair cannot be the same',
+    context: 'Validation error when both items of a pair have identical content',
+  },
+  errorDuplicateDistractorContent: {
+    message: 'Distractors cannot repeat another item',
+    context:
+      'Validation error when a distractor has the same content as another distractor or as an item in a pair',
+  },
   matchLabel: {
     message: 'Match',
     context: 'Display name for a match question type',
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
index 0cd93d610d..409fff95b7 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
@@ -61,6 +61,23 @@ export const ORDERING_DECL_XML = `<qti-response-declaration identifier="RESPONSE
   </qti-correct-response>
 </qti-response-declaration>`;
 
+// choice_eee55555 (Lysander) is unpaired — it is the fixture's distractor.
+export const ASSOCIATE_XML = `<qti-associate-interaction response-identifier="RESPONSE" shuffle="true" max-associations="2">
+  <qti-prompt><p>Match each character to his adversary.</p></qti-prompt>
+  <qti-simple-associable-choice identifier="choice_aaa11111" match-max="1">Antonio</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_bbb22222" match-max="1">Prospero</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_ccc33333" match-max="1">Capulet</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_ddd44444" match-max="1">Montague</qti-simple-associable-choice>
+  <qti-simple-associable-choice identifier="choice_eee55555" match-max="1">Lysander</qti-simple-associable-choice>
+</qti-associate-interaction>`;
+
+export const ASSOCIATE_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+  <qti-correct-response>
+    <qti-value>choice_aaa11111 choice_bbb22222</qti-value>
+    <qti-value>choice_ccc33333 choice_ddd44444</qti-value>
+  </qti-correct-response>
+</qti-response-declaration>`;
+
 // Full QTI Assessment Item XML Documents
 
 export const VALID_CHOICE_ITEM_DOCUMENT = `<?xml version="1.0" encoding="UTF-8"?>
@@ -281,6 +298,22 @@ export const NO_INTERACTION_ITEM_WITH_HINTS = `<?xml version="1.0" encoding="UTF
   </qti-catalog-info>
 </qti-assessment-item>`;
 
+export const VALID_ASSOCIATE_ITEM_DOCUMENT = `<?xml version="1.0" encoding="UTF-8"?>
+<qti-assessment-item
+  xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+  identifier="item-test-associate"
+  title="Test Associate Question"
+  adaptive="false"
+  time-dependent="false"
+  xml:lang="en"
+>
+  ${ASSOCIATE_DECL_XML}
+
+  <qti-item-body>
+    ${ASSOCIATE_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"
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index bb2eb37666..4db027194e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -272,7 +272,7 @@
         { immediate: true },
       );
 
-      // sync changes from the editor to the parent component, only on blur
+      // sync changes from the editor to the parent component
       const emitContentUpdate = () => {
         if (!editor.value || !isReady.value) {
           return;
@@ -316,6 +316,10 @@
         sharedEventHandlers,
         editorMode: computed(() => props.mode),
         emitMinimize: () => {
+          // Toolbar buttons suppress blur to keep the caret, so content written since
+          // the last blur is still unsynced. Flush it first: a parent acting on the
+          // close would otherwise read the content as it stood before that edit.
+          emitContentUpdate();
           emit('minimize');
         },
         handleContainerKeydown,
@@ -364,6 +368,10 @@
 
   .editor-container {
     position: relative;
+
+    /* Laid out as a flex item, this would otherwise refuse to shrink below the
+       widest thing typed into it, pushing the row it sits in past its bounds. */
+    min-width: 0;
     min-height: 200px;
     margin: auto;
     font-family:
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/__mocks__/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/__mocks__/TipTapEditor.vue
index 0fb4e0a282..eea886d266 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/__mocks__/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/__mocks__/TipTapEditor.vue
@@ -4,6 +4,7 @@
     <p v-if="value">{{ value }}</p>
     <textarea
       v-if="mode === 'edit'"
+      ref="input"
       :value="value"
       :data-autofocus="autofocus"
       @input="$emit('update', $event.target.value)"
@@ -31,6 +32,23 @@
         default: false,
       },
     },
+    watch: {
+      mode() {
+        this.$nextTick(this.focusIfAutofocused);
+      },
+    },
+    // Like the real editor, this takes focus as it mounts and when it switches
+    // into edit mode — never on a re-render in place.
+    mounted() {
+      this.focusIfAutofocused();
+    },
+    methods: {
+      focusIfAutofocused() {
+        if (this.autofocus && this.mode === 'edit') {
+          this.$refs.input.focus();
+        }
+      },
+    },
   };
 
 </script>
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 9355b1cbdd..64095e6f5f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorContentWrapper.vue
@@ -38,10 +38,14 @@
 <!-- Scoped styles for the wrapper component itself -->
 <style scoped>
 
+  /* A formula or a long URL is one unbreakable inline node, so it can be wider than
+     the editor and paint over whatever bounds it. Toolbars and popovers are siblings
+     of this element, so clipping here leaves them whole. */
   .editor-content {
     padding: 16px;
     padding-inline: 24px;
     margin-inline: 0 auto;
+    overflow: hidden;
   }
 
   .tiptap-editor {
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/TipTapEditor.spec.js b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/TipTapEditor.spec.js
index 7f412e7ef5..143dcf05c5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/TipTapEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/__tests__/TipTapEditor.spec.js
@@ -1,3 +1,7 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { nextTick } from 'vue';
+import VueRouter from 'vue-router';
 import TipTapEditor from '../TipTapEditor/TipTapEditor.vue';
 
 function makeEditorStub({ markdownOut, htmlOut }) {
@@ -87,3 +91,42 @@ describe('TipTapEditor — getContent() logic', () => {
     });
   });
 });
+
+describe('TipTapEditor — minimizing from the toolbar', () => {
+  const renderEditor = async listeners => {
+    let editor;
+    render(
+      {
+        components: { TipTapEditor },
+        template:
+          '<TipTapEditor value="<p>before</p>" mode="edit" format="html" v-on="$listeners" />',
+        mounted() {
+          editor = this.$children[0];
+        },
+      },
+      { listeners, routes: new VueRouter() },
+    );
+    // The toolbar treats its buttons as unavailable until the editor reports ready,
+    // which it does a tick after it is constructed.
+    await new Promise(resolve => setTimeout(resolve, 0));
+    await nextTick();
+    return editor;
+  };
+
+  const minimize = user => user.click(screen.getByRole('button', { name: 'Minimize Toolbar' }));
+
+  it('emits the content written since the last blur, before it emits minimize', async () => {
+    const user = userEvent.setup();
+    const update = jest.fn();
+    const onMinimize = jest.fn();
+    const editor = await renderEditor({ update, minimize: onMinimize });
+    editor.editor.commands.setContent('<p>after</p>');
+
+    await minimize(user);
+
+    expect(update).toHaveBeenCalledWith('<p>after</p>');
+    expect(update.mock.invocationCallOrder.at(-1)).toBeLessThan(
+      onMinimize.mock.invocationCallOrder[0],
+    );
+  });
+});