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 8a9d19fe02..9708a3397c 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
@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 import QTIItemEditor from '../index.vue';
 import { qtiEditorStrings } from '../../../qtiEditorStrings';
 import { AssessmentItemTypes } from '../../../constants';
+import { VALID_ASSOCIATE_ITEM_DOCUMENT } from '../../../utils/testingFixtures';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
 jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
@@ -13,7 +14,13 @@ jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
   };
 });
 
-const { closeBtnLabel$, questionContentPlaceholder$ } = qtiEditorStrings;
+const {
+  closeBtnLabel$,
+  questionContentPlaceholder$,
+  associateLabel$,
+  unknownTypeLabel$,
+  responsePoolLabel$,
+} = qtiEditorStrings;
 
 const defaultProps = {
   item: {
@@ -77,6 +84,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(new RegExp(associateLabel$()))).toBeInTheDocument();
+      expect(screen.queryByText(new RegExp(unknownTypeLabel$()))).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 40711ad6f9..ee2f245975 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
@@ -132,6 +132,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..dc6ef2a073
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useAssociateInteraction.spec.js
@@ -0,0 +1,115 @@
+import { ref } from 'vue';
+import { useAssociateInteraction } from '../useAssociateInteraction';
+import { ASSOCIATE_XML, ASSOCIATE_DECL_XML } from '../../utils/testingFixtures';
+import { QuestionType, ValidationError } from '../../constants';
+
+const GENERATED_ID = /^choice_[a-zA-Z0-9]{8}$/;
+
+const contentsOf = pairs => pairs.map(pair => pair.map(choice => choice.content));
+
+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(state.value.pairs).toHaveLength(3);
+      const [first, second] = state.value.pairs[2];
+      expect(first.content).toBe('');
+      expect(second.content).toBe('');
+      expect(first.id).toMatch(GENERATED_ID);
+      expect(second.id).toMatch(GENERATED_ID);
+      expect(first.id).not.toBe(second.id);
+    });
+
+    it('leaves the existing pairs untouched', () => {
+      const { state, addPair } = setup();
+      addPair();
+      expect(contentsOf(state.value.pairs.slice(0, 2))).toEqual([
+        ['Antonio', 'Prospero'],
+        ['Capulet', 'Montague'],
+      ]);
+    });
+
+    it('rebuilds bodyXml so the mutation reaches the emitted interaction', () => {
+      const { bodyXml, addPair } = setup();
+      const before = bodyXml.value;
+      addPair();
+      expect(bodyXml.value).not.toBe(before);
+    });
+  });
+
+  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']]);
+    });
+  });
+
+  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);
+    });
+  });
+
+  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>']);
+    });
+  });
+
+  describe('runValidation()', () => {
+    it('populates errors for an invalid state', () => {
+      const { setPrompt, runValidation, errors } = setup();
+      setPrompt('');
+      runValidation();
+      expect(errors.value.map(e => e.code)).toContain(ValidationError.PROMPT_REQUIRED);
+    });
+  });
+});
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..1e4903a92f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useAssociateInteraction.js
@@ -0,0 +1,71 @@
+import { readonly } from 'vue';
+import { generateRandomSlug } from '../utils/generateRandomSlug';
+import { associateInteractionDescriptor } from '../interactions/associate/AssociateInteractionDescriptor';
+import { useInteraction } from './useInteraction';
+
+const blankChoice = () => ({ id: generateRandomSlug('choice'), content: '' });
+
+/**
+ * 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, [blankChoice(), blankChoice()]] };
+  }
+
+  function removePair(index) {
+    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() {
+    state.value = { ...state.value, distractors: [...state.value.distractors, blankChoice()] };
+  }
+
+  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 3fa2bcd6a4..c668382b56 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',
 });
@@ -81,6 +82,7 @@ export const QuestionType = Object.freeze({
   TEXT_ENTRY: 'textEntry',
   FREE_RESPONSE: 'freeResponse',
   ORDERING: 'ordering',
+  ASSOCIATE: 'associate',
 });
 
 /**
@@ -98,6 +100,8 @@ 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',
 });
 
 export const RESPONSE_IDENTIFIER = 'RESPONSE';
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/AssociateInteractionDescriptor.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/AssociateInteractionDescriptor.js
new file mode 100644
index 0000000000..bac3347bd3
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/AssociateInteractionDescriptor.js
@@ -0,0 +1,85 @@
+import { QtiInteraction, QuestionType, BaseType, Cardinality } from '../../constants';
+import { parseAssociateInteraction, buildAssociateInteractionXML } from './parse';
+import { validateAssociateInteraction } from './validate';
+
+/**
+ * Owns all associate-specific interaction logic: schema, parse, buildXML, and validate.
+ */
+export class AssociateInteractionDescriptor {
+  constructor({ editorComponent = null } = {}) {
+    this.type = QtiInteraction.ASSOCIATE;
+    this.placement = 'block';
+    this.questionTypes = [QuestionType.ASSOCIATE];
+    this.editorComponent = editorComponent;
+    this.convertsFrom = [];
+  }
+
+  getTypeOptions(tr) {
+    return [
+      {
+        value: QuestionType.ASSOCIATE,
+        label: tr.associateLabel$(),
+        description: tr.associateDescription$(),
+      },
+    ];
+  }
+
+  /** @param {Element} el */
+  matches(el) {
+    return el.tagName.toLowerCase() === QtiInteraction.ASSOCIATE;
+  }
+
+  /**
+   * 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/AssociateInteractionEditor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/AssociateInteractionEditor.vue
new file mode 100644
index 0000000000..d6088435bb
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/AssociateInteractionEditor.vue
@@ -0,0 +1,854 @@
+<template>
+
+  <div class="associate-layout">
+    <!-- Prompt -->
+    <div class="editor-section">
+      <ValidationMessage v-if="promptHasError">
+        {{ errorPromptRequired$() }}
+      </ValidationMessage>
+      <div
+        class="field-label"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        {{ questionLabel$() }}
+      </div>
+      <ClickableRegion
+        :class="promptWrapperClass"
+        :style="promptWrapperStyle"
+        :suppressed="mode !== 'edit' || isPromptOpen"
+        :aria-label="editQuestionLabel$()"
+        @click="handlePromptClick"
+      >
+        <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 }"
+      >
+        <div
+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ responsePoolLabel$() }}
+        </div>
+        <ul
+          class="chip-list"
+          :aria-label="responsePoolLabel$()"
+        >
+          <li
+            v-for="choice in shuffledPool"
+            :key="choice.id"
+            class="chip"
+            :style="poolChipStyle(choice.id)"
+          >
+            <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">
+        <div
+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ pairsSectionLabel }}
+        </div>
+        <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': windowIsSmall, '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="item-border pair-card"
+                :class="{ 'is-clickable': !isPairItemOpen(index, position) }"
+                :style="cardStyle(choice.id)"
+                :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"
+              :ariaLabel="deletePairBtn$({ number: index + 1 })"
+              :tooltip="deletePairBtn$({ number: index + 1 })"
+              :color="$themePalette.grey.v_800"
+              @click="onRemovePair(index)"
+            />
+          </div>
+
+          <ValidationMessage
+            v-if="pairErrorMessage(index)"
+            class="pair-message"
+          >
+            {{ pairErrorMessage(index) }}
+          </ValidationMessage>
+        </li>
+      </ol>
+
+      <AddListItemButton
+        v-if="mode === 'edit'"
+        :label="addPairBtn$()"
+        @click="onAddPair"
+      />
+    </div>
+
+    <!-- Distractors -->
+    <div
+      v-if="mode === 'edit'"
+      class="editor-section"
+    >
+      <div class="section-headers">
+        <div
+          class="section-label"
+          :style="{ color: $themePalette.grey.v_700 }"
+        >
+          {{ distractorsLabel$() }}
+        </div>
+        <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="isDistractorOpen(index) ? 'distractor-editing' : 'chip is-tinted'"
+            :style="cardStyle(choice.id)"
+          >
+            <ClickableRegion
+              class="chip-region"
+              :class="{ 'is-clickable': !isDistractorOpen(index) }"
+              :suppressed="isDistractorOpen(index)"
+              :aria-label="editDistractorLabel$({ number: index + 1 })"
+              @click="openDistractor(index)"
+            >
+              <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"
+              />
+            </ClickableRegion>
+            <KIconButton
+              icon="close"
+              size="mini"
+              :ariaLabel="deleteDistractorBtn$({ number: index + 1 })"
+              :tooltip="deleteDistractorBtn$({ number: index + 1 })"
+              :color="$themePalette.grey.v_800"
+              @click="onRemoveDistractor(index)"
+            />
+          </li>
+        </ul>
+
+        <ValidationMessage v-if="hasBlankDistractor">
+          {{ errorEmptyChoiceContent$() }}
+        </ValidationMessage>
+
+        <AddListItemButton
+          :label="addDistractorBtn$()"
+          @click="onAddDistractor"
+        />
+      </div>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed, ref, watch } from 'vue';
+  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 { stripTags } from '../../utils/stripTags';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
+  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
+
+  /** Fisher–Yates, on a copy — the learner sees the pool in a random order. */
+  function shuffled(items) {
+    const result = [...items];
+    for (let i = result.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [result[i], result[j]] = [result[j], result[i]];
+    }
+    return result;
+  }
+
+  export default {
+    name: 'AssociateInteractionEditor',
+
+    components: {
+      TipTapEditor,
+      ValidationMessage,
+      AddListItemButton,
+      ClickableRegion,
+    },
+
+    setup(props, { emit }) {
+      const { 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$,
+        errorEmptyChoiceContent$,
+      } = qtiEditorStrings;
+
+      const questionTypeRef = computed(() => props.questionType);
+
+      const {
+        state,
+        bodyXml,
+        responseDeclarations,
+        errors,
+        addPair,
+        removePair,
+        setPair,
+        addDistractor,
+        removeDistractor,
+        setDistractorContent,
+        setPrompt,
+      } = useAssociateInteraction(props.interaction, questionTypeRef);
+
+      // Which card holds the open TipTap editor: the prompt, one member of one
+      // pair, or one distractor. At most one is open at a time.
+      const openTarget = ref(null);
+
+      const isPromptOpen = computed(
+        () => props.mode === 'edit' && openTarget.value?.kind === 'prompt',
+      );
+
+      function isPairItemOpen(index, position) {
+        const target = openTarget.value;
+        return (
+          props.mode === 'edit' &&
+          target?.kind === 'pair' &&
+          target.index === index &&
+          target.position === position
+        );
+      }
+
+      function isDistractorOpen(index) {
+        const target = openTarget.value;
+        return props.mode === 'edit' && target?.kind === 'distractor' && target.index === index;
+      }
+
+      function openPrompt() {
+        openTarget.value = { kind: 'prompt' };
+      }
+
+      function closeOpenTarget() {
+        openTarget.value = null;
+      }
+
+      function handlePromptClick() {
+        if (props.mode === 'edit') openPrompt();
+      }
+
+      function openPairItem(index, position) {
+        if (props.mode === 'edit') openTarget.value = { kind: 'pair', index, position };
+      }
+
+      function openDistractor(index) {
+        if (props.mode === 'edit') openTarget.value = { kind: '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() {
+        addDistractor();
+        openDistractor(state.value.distractors.length - 1);
+      }
+
+      // Open targets are held by index, so a deletion shifts the ones after it —
+      // close the editor rather than let it land on a different item.
+      function onRemovePair(index) {
+        closeOpenTarget();
+        removePair(index);
+      }
+
+      function onRemoveDistractor(index) {
+        closeOpenTarget();
+        removeDistractor(index);
+      }
+
+      const workingInteraction = computed(() => ({
+        bodyXml: bodyXml.value,
+        responseDeclarations: responseDeclarations.value,
+      }));
+
+      watch(
+        () => props.mode,
+        newMode => {
+          if (newMode !== 'edit') {
+            closeOpenTarget();
+            return;
+          }
+          if (!stripTags(state.value.prompt).trim()) {
+            openPrompt();
+          } else if (state.value.pairs.length > 0) {
+            openPairItem(0, 0);
+          }
+          emit('update:interaction', workingInteraction.value);
+        },
+        { immediate: true },
+      );
+
+      watch(workingInteraction, newVal => {
+        if (props.mode === 'edit') emit('update:interaction', newVal);
+      });
+
+      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),
+      );
+
+      const emptyChoiceIds = computed(
+        () =>
+          new Set(
+            errors.value
+              .filter(e => e.code === ValidationError.EMPTY_CHOICE_CONTENT)
+              .map(e => e.id),
+          ),
+      );
+
+      const duplicatePairIndexes = computed(
+        () =>
+          new Set(
+            errors.value
+              .filter(e => e.code === ValidationError.DUPLICATE_PAIR_CONTENT)
+              .map(e => e.index),
+          ),
+      );
+
+      function pairErrorMessage(index) {
+        if (duplicatePairIndexes.value.has(index)) return errorDuplicatePairContent$();
+        const pair = state.value.pairs[index];
+        if (pair.some(choice => emptyChoiceIds.value.has(choice.id))) {
+          return errorEmptyChoiceContent$();
+        }
+        return null;
+      }
+
+      const hasBlankDistractor = computed(() =>
+        state.value.distractors.some(choice => emptyChoiceIds.value.has(choice.id)),
+      );
+
+      function cardStyle(id) {
+        return {
+          borderColor: emptyChoiceIds.value.has(id) ? tokens.error : tokens.fineLine,
+        };
+      }
+
+      const promptWrapperClass = computed(() =>
+        isPromptOpen.value
+          ? 'prompt-wrapper'
+          : ['item-border', { 'is-clickable': props.mode === 'edit' }],
+      );
+
+      const promptWrapperStyle = computed(() =>
+        isPromptOpen.value
+          ? {}
+          : { borderColor: promptHasError.value ? tokens.error : tokens.fineLine },
+      );
+
+      const pairsSectionLabel = computed(() =>
+        props.mode === 'edit' ? correctPairsLabel$() : correctAnswersLabel$(),
+      );
+
+      const pairedIds = computed(() => new Set(state.value.pairs.flat().map(c => c.id)));
+
+      const shuffledPool = computed(() => {
+        const byId = new Map(
+          [...state.value.pairs.flat(), ...state.value.distractors].map(c => [c.id, c]),
+        );
+        return shuffled([...byId.values()]);
+      });
+
+      function poolChipStyle(id) {
+        const isCorrect = props.showAnswers && pairedIds.value.has(id);
+        return {
+          borderColor: isCorrect ? palette.green.v_600 : tokens.fineLine,
+          backgroundColor: isCorrect ? palette.green.v_50 : null,
+        };
+      }
+
+      return {
+        EditorImageProcessor,
+        state,
+        windowIsSmall,
+        isPromptOpen,
+        promptWrapperClass,
+        promptWrapperStyle,
+        handlePromptClick,
+        closeOpenTarget,
+        isPairItemOpen,
+        isDistractorOpen,
+        openPairItem,
+        openDistractor,
+        setPairItemContent,
+        setDistractorContent,
+        setPrompt,
+        onRemovePair,
+        onRemoveDistractor,
+        onAddPair,
+        onAddDistractor,
+        promptHasError,
+        tooFewPairsError,
+        pairErrorMessage,
+        hasBlankDistractor,
+        cardStyle,
+        pairsSectionLabel,
+        shuffledPool,
+        poolChipStyle,
+        questionLabel$,
+        editQuestionLabel$,
+        errorPromptRequired$,
+        correctPairsDescription$,
+        responsePoolLabel$,
+        distractorsLabel$,
+        distractorsDescription$,
+        pairNumberLabel$,
+        addPairBtn$,
+        deletePairBtn$,
+        addDistractorBtn$,
+        deleteDistractorBtn$,
+        editPairItemLabel$,
+        editDistractorLabel$,
+        errorTooFewPairs$,
+        errorEmptyChoiceContent$,
+      };
+    },
+
+    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'],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .associate-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .editor-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .field-label {
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .section-headers {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin-bottom: 4px;
+  }
+
+  .section-label {
+    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;
+
+    .item-card-text.is-closed {
+      min-height: auto;
+      padding: 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 pair card sits on the tinted row, so it carries the surface colour itself.
+  .pair-card {
+    flex: 1;
+    min-width: 0;
+    background-color: v-bind('$themeTokens.surface');
+
+    .item-card-text {
+      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-message {
+    grid-area: message;
+    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;
+    padding: 4px 12px;
+    background-color: v-bind('$themeTokens.surface');
+    border: 1px solid;
+    border-radius: 4px;
+
+    // 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;
+    }
+  }
+
+  .chip-region {
+    min-width: 0;
+    border-radius: 4px;
+
+    &.is-clickable {
+      cursor: pointer;
+    }
+  }
+
+  .distractor-editing {
+    display: flex;
+    flex-basis: 100%;
+    align-items: center;
+    padding: 4px 12px;
+    border: 1px solid;
+    border-radius: 4px;
+
+    .chip-region {
+      flex: 1;
+    }
+  }
+
+  .editor {
+    width: 100%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/AssociateInteractionDescriptor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/AssociateInteractionDescriptor.spec.js
new file mode 100644
index 0000000000..292a81fdf4
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/AssociateInteractionDescriptor.spec.js
@@ -0,0 +1,49 @@
+import { associateInteractionDescriptor as descriptor } from '../AssociateInteractionDescriptor';
+import { parseXML } from '../../../serialization/parseItem';
+import { qtiEditorStrings } from '../../../qtiEditorStrings';
+import { QtiInteraction, QuestionType } from '../../../constants';
+import {
+  ASSOCIATE_XML,
+  ASSOCIATE_DECL_XML,
+  ORDERING_XML,
+  CHOICE_SINGLE_SELECT_XML,
+} from '../../../utils/testingFixtures';
+
+const elementOf = xml => parseXML(xml).documentElement;
+
+describe('AssociateInteractionDescriptor', () => {
+  it('declares the associate interaction tag, block placement, and question type', () => {
+    expect(descriptor.type).toBe(QtiInteraction.ASSOCIATE);
+    expect(descriptor.placement).toBe('block');
+    expect(descriptor.questionTypes).toEqual([QuestionType.ASSOCIATE]);
+  });
+
+  describe('matches()', () => {
+    it('matches a <qti-associate-interaction> element', () => {
+      expect(descriptor.matches(elementOf(ASSOCIATE_XML))).toBe(true);
+    });
+
+    it('does not match other interaction elements', () => {
+      expect(descriptor.matches(elementOf(ORDERING_XML))).toBe(false);
+      expect(descriptor.matches(elementOf(CHOICE_SINGLE_SELECT_XML))).toBe(false);
+    });
+  });
+
+  it('getQuestionType() returns the associate question type', () => {
+    expect(descriptor.getQuestionType()).toBe(QuestionType.ASSOCIATE);
+  });
+
+  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__/AssociateInteractionEditor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/AssociateInteractionEditor.spec.js
new file mode 100644
index 0000000000..aa3631bab9
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/AssociateInteractionEditor.spec.js
@@ -0,0 +1,225 @@
+import { render, screen, within, fireEvent } from '@testing-library/vue';
+import { nextTick } from 'vue';
+import VueRouter from 'vue-router';
+import AssociateInteractionEditor from '../AssociateInteractionEditor.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');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({ windowIsSmall: ref(false) }),
+  };
+});
+
+const POOL_CONTENTS = ['Antonio', 'Prospero', 'Capulet', 'Montague', 'Lysander'];
+
+// The mock TipTapEditor renders a <textarea> only for the card currently open.
+const openTextarea = () => screen.getAllByRole('textbox').find(el => el.tagName === 'TEXTAREA');
+
+const renderEditor = (props = {}) =>
+  render(AssociateInteractionEditor, {
+    props: {
+      mode: 'edit',
+      questionType: QuestionType.ASSOCIATE,
+      interaction: blockWithDecl(ASSOCIATE_XML, ASSOCIATE_DECL_XML),
+      ...props,
+    },
+    routes: new VueRouter(),
+  });
+
+describe('AssociateInteractionEditor', () => {
+  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(screen.getByRole('button', { name: tr.$tr('addPairBtn') })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: tr.$tr('addDistractorBtn') })).toBeInTheDocument();
+    });
+
+    it('appends a third pair when the add pair button is clicked', async () => {
+      renderEditor();
+      await fireEvent.click(screen.getByRole('button', { name: tr.$tr('addPairBtn') }));
+      expect(screen.getByText(tr.$tr('pairNumberLabel', { number: 3 }))).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: tr.$tr('deletePairBtn', { number: 3 }) }),
+      ).toBeInTheDocument();
+    });
+
+    it('appends a second distractor when the add distractor button is clicked', async () => {
+      renderEditor();
+      await fireEvent.click(screen.getByRole('button', { name: tr.$tr('addDistractorBtn') }));
+      expect(
+        screen.getByRole('button', { name: tr.$tr('deleteDistractorBtn', { number: 2 }) }),
+      ).toBeInTheDocument();
+    });
+
+    it('removes the pair when its delete button is clicked', async () => {
+      renderEditor();
+      await fireEvent.click(
+        screen.getByRole('button', { name: tr.$tr('deletePairBtn', { number: 1 }) }),
+      );
+      expect(screen.queryByText('Antonio')).not.toBeInTheDocument();
+      expect(screen.getByText('Capulet')).toBeInTheDocument();
+    });
+
+    it('closes the open editor when an earlier distractor is deleted', async () => {
+      renderEditor();
+      const addDistractor = screen.getByRole('button', { name: tr.$tr('addDistractorBtn') });
+      await fireEvent.click(addDistractor);
+      await fireEvent.click(addDistractor);
+      await fireEvent.click(
+        screen.getByRole('button', { name: tr.$tr('editDistractorLabel', { number: 2 }) }),
+      );
+      expect(openTextarea()).toBeInTheDocument();
+
+      await fireEvent.click(
+        screen.getByRole('button', { name: tr.$tr('deleteDistractorBtn', { number: 1 }) }),
+      );
+      expect(openTextarea()).toBeUndefined();
+    });
+
+    it('removes the distractor when its delete button is clicked', async () => {
+      renderEditor();
+      await fireEvent.click(
+        screen.getByRole('button', { name: tr.$tr('deleteDistractorBtn', { number: 1 }) }),
+      );
+      expect(screen.queryByText('Lysander')).not.toBeInTheDocument();
+    });
+  });
+
+  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('hides the editing controls', () => {
+      renderEditor(viewProps);
+      expect(screen.queryByRole('button', { name: tr.$tr('addPairBtn') })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 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();
+    });
+  });
+
+  describe('emits', () => {
+    it('emits update:interaction on mount in edit mode', () => {
+      const { emitted } = renderEditor();
+      const payload = emitted()['update:interaction'][0][0];
+      expect(typeof payload.bodyXml).toBe('string');
+      expect(Array.isArray(payload.responseDeclarations)).toBe(true);
+    });
+
+    it('emits update:interaction again after adding a pair', async () => {
+      const { emitted } = renderEditor();
+      const before = emitted()['update:interaction'].length;
+      await fireEvent.click(screen.getByRole('button', { name: tr.$tr('addPairBtn') }));
+      expect(emitted()['update:interaction'].length).toBeGreaterThan(before);
+    });
+
+    it('does not emit update:interaction in view mode', () => {
+      const { emitted } = renderEditor({ mode: 'view', showAnswers: true });
+      expect(emitted()['update:interaction']).toBeFalsy();
+    });
+  });
+
+  describe('validation', () => {
+    it('shows no errors before any mutation', () => {
+      renderEditor();
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('surfaces errors once a mutation settles the debounce', async () => {
+      jest.useFakeTimers();
+      renderEditor({ interaction: block('') });
+      await fireEvent.click(screen.getByRole('button', { name: tr.$tr('addPairBtn') }));
+      await nextTick();
+      jest.advanceTimersByTime(400);
+      await nextTick();
+      jest.useRealTimers();
+      expect(screen.getAllByRole('alert').length).toBeGreaterThan(0);
+      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 () => {
+      jest.useFakeTimers();
+      renderEditor({ interaction: block('') });
+      for (const position of [1, 2]) {
+        await fireEvent.click(
+          screen.getByRole('button', {
+            name: tr.$tr('editPairItemLabel', { number: 1, position }),
+          }),
+        );
+        await fireEvent.update(openTextarea(), 'Kenya');
+      }
+      await nextTick();
+      jest.advanceTimersByTime(400);
+      await nextTick();
+      jest.useRealTimers();
+      expect(screen.getByText(tr.$tr('errorDuplicatePairContent'))).toBeInTheDocument();
+    });
+  });
+
+  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(screen.getByRole('button', { name: tr.$tr('addPairBtn') })).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..d76471b258
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/parse.spec.js
@@ -0,0 +1,367 @@
+/* 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 {
+  _defaultState,
+  buildAssociateInteractionXML as buildXML,
+  parseAssociateInteraction as parse,
+} from '../parse';
+import { ASSOCIATE_XML, ASSOCIATE_DECL_XML } from '../../../utils/testingFixtures';
+import { BaseType, Cardinality, QuestionType } from '../../../constants';
+
+const contentsOf = pairs => pairs.map(pair => pair.map(choice => choice.content));
+
+const SCHEMA = { baseType: BaseType.PAIR, cardinality: Cardinality.MULTIPLE };
+
+function parseXmlString(xml) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xml, 'text/xml');
+  const err = doc.querySelector('parseerror, parsererror');
+  if (err) throw new Error(`Invalid XML: ${err.textContent}`);
+  return doc.documentElement;
+}
+
+describe('_defaultState()', () => {
+  it('seeds a single pair of two blank choices', () => {
+    const state = _defaultState();
+    expect(contentsOf(state.pairs)).toEqual([['', '']]);
+  });
+
+  it('gives the two seeded choices distinct generated ids', () => {
+    const [[first, second]] = _defaultState().pairs;
+    expect(first.id).toMatch(/^choice_/);
+    expect(second.id).toMatch(/^choice_/);
+    expect(first.id).not.toBe(second.id);
+  });
+});
+
+describe('parse()', () => {
+  describe('fallbacks', () => {
+    it('returns the default state when bodyXml is empty', () => {
+      const state = parse('', [ASSOCIATE_DECL_XML]);
+      expect(state.pairs).toHaveLength(1);
+      expect(state.distractors).toEqual([]);
+    });
+
+    it('returns the default state when bodyXml is invalid XML', () => {
+      const state = parse('<not-valid', [ASSOCIATE_DECL_XML]);
+      expect(state.pairs).toHaveLength(1);
+      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('drops an empty <qti-value>, keeping the well-formed pairs', () => {
+      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('drops a pair naming identifiers that only exist on Object.prototype', () => {
+      const decl = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="pair">
+        <qti-correct-response>
+          <qti-value>constructor toString</qti-value>
+        </qti-correct-response>
+      </qti-response-declaration>`;
+      expect(parse(ASSOCIATE_XML, [decl]).pairs).toEqual([]);
+    });
+  });
+
+  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('subtracts pair appearances for a choice named after an Object.prototype member', () => {
+      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>`;
+      expect(parse(xml, [decl]).distractors.map(choice => choice.id)).toEqual(['constructor']);
+    });
+
+    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_/);
+    });
+  });
+});
+
+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('sets max-associations to the number of pairs', () => {
+      const root = parseXmlString(build(baseState).bodyXml);
+      expect(root.getAttribute('max-associations')).toBe('2');
+    });
+
+    it('always emits shuffle="true"', () => {
+      const root = parseXmlString(build(baseState).bodyXml);
+      expect(root.getAttribute('shuffle')).toBe('true');
+    });
+
+    it('emits the response identifier from state', () => {
+      const root = parseXmlString(build(baseState).bodyXml);
+      expect(root.getAttribute('response-identifier')).toBe('RESPONSE');
+    });
+
+    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 distinct 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',
+      ]);
+    });
+
+    it('gives every singly-used choice match-max="1"', () => {
+      const root = parseXmlString(build(baseState).bodyXml);
+      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('reassigns the id of a later choice that reuses an id with different content', () => {
+      const pairs = [
+        baseState.pairs[0],
+        [
+          { id: 'choice_aaa11111', content: 'Capulet' },
+          { id: 'choice_ddd44444', content: 'Montague' },
+        ],
+      ];
+      const { bodyXml, responseDeclarations } = build({
+        ...baseState,
+        pairs,
+        distractors: [],
+      });
+      const [capulet] = choicesOf(parseXmlString(bodyXml)).filter(
+        el => el.textContent === 'Capulet',
+      );
+      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`,
+      );
+    });
+
+    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('sets cardinality="multiple"', () => {
+      const decl = parseXmlString(build(baseState).responseDeclarations[0]);
+      expect(decl.getAttribute('cardinality')).toBe('multiple');
+    });
+
+    it('sets base-type="pair"', () => {
+      const decl = parseXmlString(build(baseState).responseDeclarations[0]);
+      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 the default state as one pair of two blank choices', () => {
+    const reparsed = roundTrip(_defaultState());
+    expect(contentsOf(reparsed.pairs)).toEqual([['', '']]);
+    expect(reparsed.distractors).toEqual([]);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/validate.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/validate.spec.js
new file mode 100644
index 0000000000..3f655f5797
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/__tests__/validate.spec.js
@@ -0,0 +1,153 @@
+import { validateAssociateInteraction } from '../validate';
+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('TOO_FEW_PAIRS', () => {
+    it('returns error when there are no pairs at all', () => {
+      expect(errorCodes(validateAssociateInteraction(makeState({ pairs: [] })))).toContain(
+        ValidationError.TOO_FEW_PAIRS,
+      );
+    });
+
+    it('does not return error when a later pair is complete and distinct', () => {
+      const state = makeState({
+        pairs: [
+          [
+            { id: 'choice_aaa11111', content: '' },
+            { id: 'choice_bbb22222', content: 'Prospero' },
+          ],
+          [
+            { id: 'choice_ccc33333', content: 'Capulet' },
+            { id: 'choice_ddd44444', content: 'Montague' },
+          ],
+        ],
+      });
+      expect(errorCodes(validateAssociateInteraction(state))).not.toContain(
+        ValidationError.TOO_FEW_PAIRS,
+      );
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/index.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/index.js
new file mode 100644
index 0000000000..07e1a74550
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/index.js
@@ -0,0 +1,5 @@
+import defineInteraction from '../defineInteraction';
+import AssociateInteractionEditor from './AssociateInteractionEditor.vue';
+import { associateInteractionDescriptor } from './AssociateInteractionDescriptor';
+
+export default defineInteraction(associateInteractionDescriptor, AssociateInteractionEditor);
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..79a94eba1b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/parse.js
@@ -0,0 +1,204 @@
+import { QTIDeclaration } from '../../serialization/qti/QTIDeclaration';
+import { getPromptHTML, parseXML } from '../../serialization/parseItem';
+import { buildXmlNode } from '../../serialization/assembleItem';
+import CorrectResponse from '../../serialization/qti/declarations/correctResponse';
+import { generateRandomSlug } from '../../utils/generateRandomSlug';
+import { stripTags } from '../../utils/stripTags';
+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
+ */
+
+/**
+ * @returns {AssociateState}
+ */
+export function _defaultState() {
+  return {
+    responseIdentifier: RESPONSE_IDENTIFIER,
+    prompt: '',
+    distractors: [],
+    pairs: [
+      [
+        { id: generateRandomSlug('choice'), content: '' },
+        { id: generateRandomSlug('choice'), content: '' },
+      ],
+    ],
+  };
+}
+
+/**
+ * Extract the correct pairs from a response declaration string as id couples.
+ *
+ * @param {string[]} declarations
+ * @returns {string[][]}
+ */
+export function _extractCorrectPairIds(declarations) {
+  const [declXml] = declarations || [];
+  if (!declXml) return [];
+
+  try {
+    const declEl = parseXML(declXml).documentElement;
+    const declaration = QTIDeclaration.fromXML(declEl);
+    // An empty <qti-value/> coerces to null rather than to an id couple.
+    return (declaration.correctResponse ?? []).filter(Array.isArray);
+  } 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.map(id => poolById.get(id)))
+    .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 pairs.flat()) {
+    pairedCount.set(id, (pairedCount.get(id) || 0) + 1);
+  }
+
+  const distractors = pool.flatMap(({ 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 = stripTags(content).trim();
+
+    // 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 [...resolvedPairs.flat(), ...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/validate.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/validate.js
new file mode 100644
index 0000000000..88e903c893
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/associate/validate.js
@@ -0,0 +1,47 @@
+import { ValidationError } from '../../constants';
+import { stripTags } from '../../utils/stripTags';
+
+const text = content => stripTags(content).trim();
+
+/**
+ * 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.
+ *
+ * @param {object} state - AssociateState
+ * @returns {Array<{ code: string, id?: string, index?: number }>}
+ */
+export function validateAssociateInteraction(state) {
+  const errors = [];
+  const { prompt, pairs = [], distractors = [] } = state;
+
+  if (!text(prompt)) {
+    errors.push({ code: ValidationError.PROMPT_REQUIRED });
+  }
+
+  for (const { id, content } of [...pairs.flat(), ...distractors]) {
+    if (!text(content)) {
+      errors.push({ code: ValidationError.EMPTY_CHOICE_CONTENT, id });
+    }
+  }
+
+  let validPairs = 0;
+  pairs.forEach(([first, second], index) => {
+    const [firstText, secondText] = [text(first.content), text(second.content)];
+    if (!firstText || !secondText) {
+      return;
+    }
+    if (firstText === secondText) {
+      errors.push({ code: ValidationError.DUPLICATE_PAIR_CONTENT, index });
+    } else {
+      validPairs += 1;
+    }
+  });
+
+  if (validPairs < 1) {
+    errors.push({ code: ValidationError.TOO_FEW_PAIRS });
+  }
+
+  return errors;
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js
index 107a549a6b..c2c80201c0 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 choiceDescriptor from './choice/index';
 import textEntryDescriptor from './textEntry/index';
 import orderingDescriptor from './ordering/index';
+import associateDescriptor from './associate/index';
 
 /**
  * The default interaction type used as fallback when no descriptor matches
@@ -13,7 +14,12 @@ export const DEFAULT_INTERACTION = QtiInteraction.CHOICE;
  * Ordered list of all registered interaction descriptors.
  * Searched in order; the first whose `matches(el)` returns true wins.
  */
-export const descriptors = [choiceDescriptor, textEntryDescriptor, orderingDescriptor];
+export const descriptors = [
+  choiceDescriptor,
+  textEntryDescriptor,
+  orderingDescriptor,
+  associateDescriptor,
+];
 
 /**
  * Registry map keyed by descriptor.type for O(1) direct lookup.
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
index f597368a2e..2ecff6e6c5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -99,6 +99,76 @@ 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: 'Connect pairs',
+    context: 'Display name for an associate question type shown in the question type selector',
+  },
+  associateDescription: {
+    message: 'Learners must draw connections between 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 appends 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',
+  },
   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 24c12a77c2..64bf49506d 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"?>
@@ -91,6 +108,22 @@ export const VALID_CHOICE_ITEM_DOCUMENT = `<?xml version="1.0" encoding="UTF-8"?
   </qti-item-body>
 </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"