diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js
index 9261242d32..c5f008646e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js
@@ -9,6 +9,8 @@ import {
   mockInteractionBlock as interactionBlock,
 } from '../../../utils/testingFixtures';
 
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+
 const renderSection = (props = {}) =>
   render(InteractionSection, {
     props: { mode: 'edit', ...props },
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue
index ee9137e245..2aff6f8a7e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue
@@ -15,6 +15,7 @@
       :interaction="interaction"
       :mode="mode"
       :showAnswers="showAnswers"
+      @update:interaction="interaction => $emit('update:interaction', interaction)"
     />
   </div>
 
@@ -30,8 +31,8 @@
     name: 'InteractionSection',
 
     setup(props, { emit }) {
-      const bodyXmlRef = computed(() => props.interaction?.bodyXml);
-      const { descriptor, questionType, parseError } = useInteractionDescriptor(bodyXmlRef);
+      const interactionRef = computed(() => props.interaction);
+      const { descriptor, questionType, parseError } = useInteractionDescriptor(interactionRef);
 
       watch(
         questionType,
@@ -67,7 +68,7 @@
       },
     },
 
-    emits: ['update:questionType'],
+    emits: ['update:questionType', 'update:interaction'],
   };
 
 </script>
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 e21b5139f1..00d8eb76d2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
@@ -33,6 +33,7 @@
         :mode="mode"
         :showAnswers="showAnswers"
         @update:questionType="type => (currentQuestionType = type)"
+        @update:interaction="onUpdateInteraction"
       />
       <p
         v-else
@@ -59,10 +60,11 @@
 
 <script>
 
-  import { computed, ref } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import { qtiEditorStrings } from '../../qtiEditorStrings';
   import { QuestionType } from '../../constants';
   import useQtiItem from '../../composables/useQtiItem';
+  import { assembleItemXml } from '../../serialization/assembleItem';
   import InteractionSection from '../InteractionSection/index.vue';
 
   export default {
@@ -70,7 +72,7 @@
 
     components: { InteractionSection },
 
-    setup(props) {
+    setup(props, { emit }) {
       const {
         questionNumberLabel$,
         questionNumberAndTypeLabel$,
@@ -79,7 +81,7 @@
         unknownTypeLabel$,
       } = qtiEditorStrings;
 
-      const { interactions } = useQtiItem(props.item.raw_data);
+      const { identifier, title, language, interactions } = useQtiItem(props.item.raw_data);
 
       const questionNumberLabel = computed(() =>
         questionNumberLabel$({
@@ -116,6 +118,46 @@
         }),
       );
 
+      /**
+       * Track the current bodyXml and responseDeclarations for the interaction.
+       * Initialised from the parsed item; updated atomically when the editor
+       * emits update:interaction.
+       *
+       * Note: We are currently using only the first interaction, but this
+       * architecture is designed to be expansible to multiple interactions
+       * per question in the future.
+       */
+      const currentBodyXml = ref(
+        interactions.value.length > 0 ? interactions.value[0].bodyXml : '',
+      );
+      const currentResponseDeclarations = ref(
+        interactions.value.length > 0 ? interactions.value[0].responseDeclarations : [],
+      );
+
+      const rawData = computed(() =>
+        assembleItemXml({
+          identifier: identifier.value,
+          title: title.value,
+          language: language.value,
+          bodyXml: currentBodyXml.value,
+          responseDeclarations: currentResponseDeclarations.value,
+        }),
+      );
+
+      // Emit only when the assembled XML actually changes after initial mount
+      watch(rawData, newVal => {
+        if (process.env.NODE_ENV === 'development') {
+          // eslint-disable-next-line no-console
+          console.log('[QTIItemEditor] assembled XML:\n', newVal);
+        }
+        emit('update:rawData', newVal);
+      });
+
+      function onUpdateInteraction({ bodyXml, responseDeclarations }) {
+        currentBodyXml.value = bodyXml;
+        currentResponseDeclarations.value = responseDeclarations;
+      }
+
       return {
         currentQuestionType,
         interactions,
@@ -123,6 +165,7 @@
         questionNumberAndTypeLabel,
         closeBtnLabel$,
         questionContentPlaceholder$,
+        onUpdateInteraction,
       };
     },
 
@@ -158,7 +201,7 @@
       },
     },
 
-    emits: ['close'],
+    emits: ['close', 'update:rawData'],
   };
 
 </script>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ValidationMessage/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ValidationMessage/index.vue
new file mode 100644
index 0000000000..58808bc72c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ValidationMessage/index.vue
@@ -0,0 +1,33 @@
+<template>
+
+  <div>
+    <p
+      class="validation-message"
+      role="alert"
+      :style="{ color: $themeTokens.error }"
+    >
+      <slot></slot>
+    </p>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'ValidationMessage',
+  };
+
+</script>
+
+
+<style scoped>
+
+  .validation-message {
+    margin: 2px 0 0;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useChoiceInteraction.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useChoiceInteraction.spec.js
new file mode 100644
index 0000000000..dd66283d0f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useChoiceInteraction.spec.js
@@ -0,0 +1,181 @@
+import { ref } from 'vue';
+import { useChoiceInteraction } from '../useChoiceInteraction';
+import { QuestionType } from '../../constants';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeAnswer(overrides = {}) {
+  return { id: 'choice_a', content: 'A', correct: false, fixed: false, ...overrides };
+}
+
+function makeBlock(choices, questionType = QuestionType.SINGLE_SELECT) {
+  const maxChoices = questionType === QuestionType.SINGLE_SELECT ? 1 : 2;
+  const correctIds = choices.filter(a => a.correct).map(a => a.id);
+
+  const bodyXml = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="${maxChoices}">
+    ${choices.map(a => `<qti-simple-choice identifier="${a.id}">${a.content}</qti-simple-choice>`).join('\n    ')}
+  </qti-choice-interaction>`;
+
+  const declaration = `<qti-response-declaration identifier="RESPONSE"
+    cardinality="${questionType === QuestionType.SINGLE_SELECT ? 'single' : 'multiple'}"
+    base-type="identifier">
+    <qti-correct-response>
+      ${correctIds.map(id => `<qti-value>${id}</qti-value>`).join('')}
+    </qti-correct-response>
+  </qti-response-declaration>`;
+
+  return { bodyXml, responseDeclarations: [declaration] };
+}
+
+function setup(choices, questionType = QuestionType.SINGLE_SELECT) {
+  const qt = ref(questionType);
+  const block = makeBlock(choices, questionType);
+  return { qt, ...useChoiceInteraction(block, qt) };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useChoiceInteraction', () => {
+  describe('addChoice()', () => {
+    it('appends a new choice to the list', () => {
+      const { state, addChoice } = setup([
+        makeAnswer({ id: 'a', content: 'A' }),
+        makeAnswer({ id: 'b', content: 'B' }),
+      ]);
+      addChoice();
+      expect(state.value.choices).toHaveLength(3);
+    });
+
+    it('new choice has a generated "choice_" identifier', () => {
+      const { state, addChoice } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      addChoice();
+      const newAnswer = state.value.choices[2];
+      expect(newAnswer.id).toMatch(/^choice_[a-z0-9]{8}$/);
+    });
+
+    it('new choice has empty content and correct: false', () => {
+      const { state, addChoice } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      addChoice();
+      const newAnswer = state.value.choices[2];
+      expect(newAnswer.content).toBe('');
+      expect(newAnswer.correct).toBe(false);
+    });
+  });
+
+  describe('removeChoice()', () => {
+    it('removes the choice with the given id', () => {
+      const { state, removeChoice } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      removeChoice('a');
+      expect(state.value.choices.find(a => a.id === 'a')).toBeUndefined();
+    });
+
+    it('is a no-op when only one choice remains', () => {
+      const { state, removeChoice } = setup([makeAnswer({ id: 'a' })]);
+      removeChoice('a');
+      expect(state.value.choices).toHaveLength(1);
+    });
+  });
+
+  describe('moveChoiceUp()', () => {
+    it('swaps choice with the previous one', () => {
+      const { state, moveChoiceUp } = setup([
+        makeAnswer({ id: 'a' }),
+        makeAnswer({ id: 'b' }),
+        makeAnswer({ id: 'c' }),
+      ]);
+      moveChoiceUp('b');
+      expect(state.value.choices.map(a => a.id)).toEqual(['b', 'a', 'c']);
+    });
+
+    it('is a no-op when the choice is first', () => {
+      const { state, moveChoiceUp } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      moveChoiceUp('a');
+      expect(state.value.choices.map(a => a.id)).toEqual(['a', 'b']);
+    });
+  });
+
+  describe('moveChoiceDown()', () => {
+    it('swaps choice with the next one', () => {
+      const { state, moveChoiceDown } = setup([
+        makeAnswer({ id: 'a' }),
+        makeAnswer({ id: 'b' }),
+        makeAnswer({ id: 'c' }),
+      ]);
+      moveChoiceDown('b');
+      expect(state.value.choices.map(a => a.id)).toEqual(['a', 'c', 'b']);
+    });
+
+    it('is a no-op when the choice is last', () => {
+      const { state, moveChoiceDown } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      moveChoiceDown('b');
+      expect(state.value.choices.map(a => a.id)).toEqual(['a', 'b']);
+    });
+  });
+
+  describe('toggleCorrectChoice()', () => {
+    it('singleSelect: sets only the target as correct and clears others', () => {
+      const { state, toggleCorrectChoice, qt } = setup([
+        makeAnswer({ id: 'a', correct: true }),
+        makeAnswer({ id: 'b', correct: false }),
+      ]);
+      qt.value = QuestionType.SINGLE_SELECT;
+      toggleCorrectChoice('b');
+      expect(state.value.choices.find(a => a.id === 'b').correct).toBe(true);
+      expect(state.value.choices.find(a => a.id === 'a').correct).toBe(false);
+    });
+
+    it('multiSelect: toggles only the target, leaves others unchanged', () => {
+      const { state, toggleCorrectChoice, qt } = setup(
+        [makeAnswer({ id: 'a', correct: true }), makeAnswer({ id: 'b', correct: false })],
+        QuestionType.MULTI_SELECT,
+      );
+      qt.value = QuestionType.MULTI_SELECT;
+      toggleCorrectChoice('b');
+      expect(state.value.choices.find(a => a.id === 'b').correct).toBe(true);
+      expect(state.value.choices.find(a => a.id === 'a').correct).toBe(true);
+    });
+
+    it('multiSelect: toggles correct off when already correct', () => {
+      const { state, toggleCorrectChoice, qt } = setup(
+        [makeAnswer({ id: 'a', correct: true }), makeAnswer({ id: 'b', correct: true })],
+        QuestionType.MULTI_SELECT,
+      );
+      qt.value = QuestionType.MULTI_SELECT;
+      toggleCorrectChoice('a');
+      expect(state.value.choices.find(a => a.id === 'a').correct).toBe(false);
+      expect(state.value.choices.find(a => a.id === 'b').correct).toBe(true);
+    });
+  });
+
+  describe('setPrompt()', () => {
+    it('updates the prompt field', () => {
+      const { state, setPrompt } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      setPrompt('<p>New prompt</p>');
+      expect(state.value.prompt).toBe('<p>New prompt</p>');
+    });
+  });
+
+  describe('setChoiceContent()', () => {
+    it('updates content for the target choice only', () => {
+      const { state, setChoiceContent } = setup([
+        makeAnswer({ id: 'a', content: 'Old' }),
+        makeAnswer({ id: 'b', content: 'Unchanged' }),
+      ]);
+      setChoiceContent('a', 'New content');
+      expect(state.value.choices.find(a => a.id === 'a').content).toBe('New content');
+      expect(state.value.choices.find(a => a.id === 'b').content).toBe('Unchanged');
+    });
+  });
+
+  describe('setShuffle()', () => {
+    it('updates the shuffle flag', () => {
+      const { state, setShuffle } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      setShuffle(true);
+      expect(state.value.shuffle).toBe(true);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteraction.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteraction.spec.js
new file mode 100644
index 0000000000..f9619c45f2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteraction.spec.js
@@ -0,0 +1,169 @@
+import { ref, nextTick } from 'vue';
+import { useInteraction } from '../useInteraction';
+
+// ---------------------------------------------------------------------------
+// Minimal descriptor stub
+// ---------------------------------------------------------------------------
+
+function makeDescriptor({ parseReturn = {}, buildReturn = null, validateReturn = [] } = {}) {
+  return {
+    parse: jest.fn(() => parseReturn),
+    buildXML: jest.fn(
+      () => buildReturn ?? { bodyXml: '<built/>', responseDeclarations: ['<decl/>'] },
+    ),
+    validate: jest.fn(() => validateReturn),
+  };
+}
+
+describe('useInteraction', () => {
+  it('calls descriptor.parse once with the interaction block on creation', () => {
+    const descriptor = makeDescriptor();
+    const block = { bodyXml: '<qti-choice-interaction/>', responseDeclarations: ['<decl/>'] };
+    const questionType = ref('singleSelect');
+
+    useInteraction(descriptor, block, questionType);
+
+    expect(descriptor.parse).toHaveBeenCalledTimes(1);
+    expect(descriptor.parse).toHaveBeenCalledWith(block.bodyXml, block.responseDeclarations);
+  });
+
+  it('exposes initial parsed state as a reactive ref', () => {
+    const parseReturn = { prompt: 'Hello', answers: [] };
+    const descriptor = makeDescriptor({ parseReturn });
+    const questionType = ref('singleSelect');
+
+    const { state } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    expect(state.value).toEqual(parseReturn);
+  });
+
+  it('bodyXml and responseDeclarations are computed from buildXML', () => {
+    const descriptor = makeDescriptor({
+      buildReturn: { bodyXml: '<body/>', responseDeclarations: ['<d1/>', '<d2/>'] },
+    });
+    const questionType = ref('singleSelect');
+
+    const { bodyXml, responseDeclarations } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    expect(bodyXml.value).toBe('<body/>');
+    expect(responseDeclarations.value).toEqual(['<d1/>', '<d2/>']);
+  });
+
+  it('errors starts as an empty array', () => {
+    const descriptor = makeDescriptor();
+    const questionType = ref('singleSelect');
+
+    const { errors } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    expect(errors.value).toEqual([]);
+  });
+
+  it('runValidation populates errors from descriptor.validate', () => {
+    const validateReturn = [{ code: 'PROMPT_REQUIRED' }];
+    const descriptor = makeDescriptor({ validateReturn });
+    const questionType = ref('singleSelect');
+
+    const { errors, runValidation } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    expect(errors.value).toEqual([]);
+    runValidation();
+    expect(errors.value).toEqual(validateReturn);
+  });
+
+  it('runValidation passes current state and questionType to validate', () => {
+    const descriptor = makeDescriptor();
+    const questionType = ref('singleSelect');
+    const block = { bodyXml: '', responseDeclarations: [] };
+
+    const { state, runValidation } = useInteraction(descriptor, block, questionType);
+    state.value = { prompt: 'updated' };
+    questionType.value = 'multiSelect';
+    runValidation();
+
+    expect(descriptor.validate).toHaveBeenCalledWith({ prompt: 'updated' }, 'multiSelect');
+  });
+
+  it('bodyXml recomputes when state changes', () => {
+    let callCount = 0;
+    const descriptor = {
+      parse: jest.fn(() => ({ prompt: '' })),
+      buildXML: jest.fn(() => ({ bodyXml: `call-${++callCount}`, responseDeclarations: [] })),
+      validate: jest.fn(() => []),
+    };
+    const questionType = ref('singleSelect');
+
+    const { state, bodyXml } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    const first = bodyXml.value;
+    state.value = { prompt: 'changed' };
+    const second = bodyXml.value;
+
+    expect(first).not.toBe(second);
+  });
+
+  it('bodyXml recomputes when questionType changes', () => {
+    const descriptor = makeDescriptor();
+    const questionType = ref('singleSelect');
+
+    const { bodyXml } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    bodyXml.value; // trigger initial compute
+    questionType.value = 'multiSelect';
+    bodyXml.value; // trigger recompute
+
+    expect(descriptor.buildXML).toHaveBeenCalledTimes(2);
+    expect(descriptor.buildXML).toHaveBeenLastCalledWith(expect.anything(), 'multiSelect');
+  });
+
+  it('automatically runs validation (debounced) when state changes', async () => {
+    jest.useFakeTimers();
+    const validateReturn = [{ code: 'SOME_ERROR' }];
+    const descriptor = makeDescriptor({ validateReturn });
+    const questionType = ref('singleSelect');
+
+    const { state, errors } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    expect(errors.value).toEqual([]);
+    state.value = { prompt: 'updated' };
+    await nextTick(); // flush Vue watcher queue
+
+    // Before the debounce fires, errors should still be empty.
+    expect(errors.value).toEqual([]);
+
+    // Fast-forward past the 400 ms debounce window.
+    jest.advanceTimersByTime(400);
+
+    expect(descriptor.validate).toHaveBeenCalledWith({ prompt: 'updated' }, 'singleSelect');
+    expect(errors.value).toEqual(validateReturn);
+
+    jest.useRealTimers();
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteractionDescriptor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteractionDescriptor.spec.js
index 140ca8ad2c..7b34f003a0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteractionDescriptor.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteractionDescriptor.spec.js
@@ -16,20 +16,22 @@ import {
 // for the component to mount before checking reactive values.
 // ---------------------------------------------------------------------------
 
-function renderDescriptor(initialXml = null) {
-  const bodyXmlRef = ref(initialXml);
+function renderDescriptor(initialXml = null, declarations = []) {
+  const interactionRef = ref(
+    initialXml ? { bodyXml: initialXml, responseDeclarations: declarations } : null,
+  );
   let result;
 
   const TestWrapper = defineComponent({
     setup() {
-      result = useInteractionDescriptor(bodyXmlRef);
+      result = useInteractionDescriptor(interactionRef);
       return {};
     },
     template: '<div></div>',
   });
 
   render(TestWrapper, { routes: new VueRouter() });
-  return { result, bodyXmlRef };
+  return { result, interactionRef };
 }
 
 // ---------------------------------------------------------------------------
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useChoiceInteraction.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useChoiceInteraction.js
new file mode 100644
index 0000000000..661f902e7e
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useChoiceInteraction.js
@@ -0,0 +1,108 @@
+import { readonly } from 'vue';
+import { QuestionType } from '../constants';
+import { generateRandomSlug } from '../utils/generateRandomSlug';
+import { choiceInteractionDescriptor } from '../interactions/choice/ChoiceInteractionDescriptor';
+import { useInteraction } from './useInteraction';
+
+/**
+ * Composable for the choice interaction editor.
+ *
+ * Extends useInteraction with all mutation methods needed by ChoiceEditor.vue.
+ * State mutations always produce a new array reference so Vue's computed
+ * dependencies invalidate correctly.
+ *
+ * @param {{ bodyXml: string, responseDeclarations: string[] }} interactionBlock
+ * @param {import('vue').Ref<string|null>} questionType
+ */
+export function useChoiceInteraction(interactionBlock, questionType) {
+  const base = useInteraction(choiceInteractionDescriptor, interactionBlock, questionType);
+  const { state } = base;
+
+  // ---------------------------------------------------------------------------
+  // Structural mutations
+  // ---------------------------------------------------------------------------
+
+  function addChoice() {
+    state.value = {
+      ...state.value,
+      choices: [
+        ...state.value.choices,
+        { id: generateRandomSlug('choice'), content: '', correct: false },
+      ],
+    };
+  }
+
+  function removeChoice(id) {
+    if (state.value.choices.length <= 1) return;
+    state.value = {
+      ...state.value,
+      choices: state.value.choices.filter(a => a.id !== id),
+    };
+  }
+
+  function moveChoiceUp(id) {
+    const choices = [...state.value.choices];
+    const idx = choices.findIndex(a => a.id === id);
+    if (idx <= 0) return;
+    [choices[idx - 1], choices[idx]] = [choices[idx], choices[idx - 1]];
+    state.value = { ...state.value, choices };
+  }
+
+  function moveChoiceDown(id) {
+    const choices = [...state.value.choices];
+    const idx = choices.findIndex(a => a.id === id);
+    if (idx === -1 || idx >= choices.length - 1) return;
+    [choices[idx], choices[idx + 1]] = [choices[idx + 1], choices[idx]];
+    state.value = { ...state.value, choices };
+  }
+
+  /**
+   * Toggle the correct flag for a single choice.
+   *
+   * singleSelect: clears all others and sets only the target to correct.
+   * multiSelect:  toggles only the target choice's correct field.
+   */
+  function toggleCorrectChoice(id) {
+    state.value = {
+      ...state.value,
+      choices: state.value.choices.map(a => {
+        if (questionType.value === QuestionType.SINGLE_SELECT) {
+          return { ...a, correct: a.id === id };
+        }
+        return a.id === id ? { ...a, correct: !a.correct } : a;
+      }),
+    };
+  }
+
+  // ---------------------------------------------------------------------------
+  // Field mutations
+  // ---------------------------------------------------------------------------
+
+  function setPrompt(html) {
+    state.value = { ...state.value, prompt: html };
+  }
+
+  function setChoiceContent(id, html) {
+    state.value = {
+      ...state.value,
+      choices: state.value.choices.map(a => (a.id === id ? { ...a, content: html } : a)),
+    };
+  }
+
+  function setShuffle(val) {
+    state.value = { ...state.value, shuffle: val };
+  }
+
+  return {
+    ...base,
+    state: readonly(state),
+    addChoice,
+    removeChoice,
+    moveChoiceUp,
+    moveChoiceDown,
+    toggleCorrectChoice,
+    setPrompt,
+    setChoiceContent,
+    setShuffle,
+  };
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteraction.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteraction.js
new file mode 100644
index 0000000000..f9c9d64691
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteraction.js
@@ -0,0 +1,63 @@
+import { ref, computed, watch, onUnmounted } from 'vue';
+import debounce from 'lodash/debounce';
+
+/**
+ * Base composable for all interaction editors.
+ *
+ * Handles the parse → state → buildXML → validate lifecycle that every
+ * interaction plugin must go through. Individual interaction composables
+ * (e.g. useChoiceInteraction) call this and add mutation methods on top.
+ *
+ * Validation runs immediately when called explicitly (e.g. when closing a
+ * panel), but is debounced when triggered by state changes so that errors
+ * only appear after the user pauses typing (400 ms), avoiding noisy
+ * inline error flicker on every keystroke.
+ *
+ * @param {import('../interactions/defineInteraction').InteractionDescriptor} descriptor
+ * @param {{ bodyXml: string, responseDeclarations: string[] }} interactionBlock
+ * @param {import('vue').Ref<string|null>} questionType
+ * @returns {{
+ *   state: import('vue').Ref<object>,
+ *   bodyXml: import('vue').ComputedRef<string>,
+ *   responseDeclarations: import('vue').ComputedRef<string[]>,
+ *   errors: import('vue').Ref<Array<{ code: string, id?: string }>>,
+ *   runValidation: () => void,
+ * }}
+ */
+export function useInteraction(descriptor, interactionBlock, questionType) {
+  const initialState = descriptor.parse(
+    interactionBlock.bodyXml,
+    interactionBlock.responseDeclarations,
+  );
+
+  const state = ref(initialState);
+
+  // Rebuild XML whenever state or questionType changes.
+  const interaction = computed(() => {
+    if (!questionType.value) return { bodyXml: '', responseDeclarations: [] };
+    return descriptor.buildXML(state.value, questionType.value);
+  });
+
+  const bodyXml = computed(() => interaction.value.bodyXml);
+  const responseDeclarations = computed(() => interaction.value.responseDeclarations);
+
+  const errors = ref([]);
+
+  /** Immediately validates and updates errors. Use this for explicit triggers (e.g. close). */
+  function runValidation() {
+    errors.value = descriptor.validate(state.value, questionType.value);
+  }
+
+  /**
+   * Debounced version used by the state watcher — waits 400 ms after the user
+   * stops typing before showing inline errors.
+   */
+  const debouncedValidation = debounce(runValidation, 400);
+
+  // Cancel any pending debounce when the component is torn down.
+  onUnmounted(() => debouncedValidation.cancel());
+
+  watch([state, questionType], debouncedValidation, { deep: true, immediate: true });
+
+  return { state, bodyXml, responseDeclarations, errors, runValidation };
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteractionDescriptor.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteractionDescriptor.js
index 0c55db6a05..34e3e960cc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteractionDescriptor.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteractionDescriptor.js
@@ -6,17 +6,10 @@ import { descriptors, registry, DEFAULT_INTERACTION } from '../interactions/inde
  * Composable that manages the question type and descriptor for a single
  * interaction block.
  *
- * Design rationale (three separate type concepts):
- *  - The XML is parsed **once on mount** to infer the initial questionType.
- *  - `questionType` is a writable `ref` so the type-selector UI can change it
- *    without triggering a re-parse of the XML.
- *  - `descriptor` is a `computed` derived from `questionType`, using each
- *    descriptor's `questionTypes` array for the lookup.  This means the
- *    rendered editor component reacts to user selections, not to XML changes.
- *
- * @param {import('vue').Ref<string|null>} bodyXmlRef  Ref to interaction bodyXml string.
+ * @param {import('vue').Ref<object>} interactionRef
+ *   Ref to the interaction block { bodyXml, responseDeclarations }.
  */
-export default function useInteractionDescriptor(bodyXmlRef) {
+export default function useInteractionDescriptor(interactionRef) {
   /** Writable question type — set from XML on mount, then driven by UI selections. */
   const questionType = ref(null);
   /** Any parse error message from the initial XML parse; null when clean. */
@@ -26,7 +19,7 @@ export default function useInteractionDescriptor(bodyXmlRef) {
    * Parses bodyXml and returns { descriptor, questionType } without touching
    * any reactive state — pure helper used only on mount.
    */
-  function inferFromXml(xml) {
+  function inferFromXml(xml, declarations) {
     if (!xml) {
       return { descriptor: registry[DEFAULT_INTERACTION], questionType: null, error: null };
     }
@@ -36,7 +29,7 @@ export default function useInteractionDescriptor(bodyXmlRef) {
       const desc = descriptors.find(d => d.matches(interactionEl)) ?? registry[DEFAULT_INTERACTION];
       return {
         descriptor: desc,
-        questionType: desc.getQuestionType(interactionEl) ?? null,
+        questionType: desc.getQuestionType(interactionEl, declarations) ?? null,
         error: null,
       };
     } catch (e) {
@@ -50,7 +43,10 @@ export default function useInteractionDescriptor(bodyXmlRef) {
 
   /** Parse XML once when the host component mounts to set the initial state. */
   onMounted(() => {
-    const inferred = inferFromXml(bodyXmlRef.value);
+    const inferred = inferFromXml(
+      interactionRef.value?.bodyXml,
+      interactionRef.value?.responseDeclarations,
+    );
     questionType.value = inferred.questionType;
     parseError.value = inferred.error;
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
index 2dca90936c..459e58ec03 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
@@ -19,6 +19,11 @@ export const BaseType = Object.freeze({
   URI: 'uri',
 });
 
+export const Orientation = Object.freeze({
+  VERTICAL: 'vertical',
+  HORIZONTAL: 'horizontal',
+});
+
 /**
  * There are three distinct type concepts used within the QTI architecture:
  *
@@ -73,3 +78,16 @@ export const QuestionType = Object.freeze({
   SINGLE_SELECT: 'singleSelect',
   MULTI_SELECT: 'multiSelect',
 });
+
+/**
+ * Error codes returned by each interaction's validate() function.
+ * Interaction-agnostic codes live here; interaction-specific codes may extend
+ * this set in their own validate.js module.
+ */
+export const ValidationError = Object.freeze({
+  PROMPT_REQUIRED: 'PROMPT_REQUIRED',
+  NO_CORRECT_ANSWER: 'NO_CORRECT_ANSWER',
+  TOO_MANY_CORRECT_ANSWERS: 'TOO_MANY_CORRECT_ANSWERS',
+  EMPTY_CHOICE_CONTENT: 'EMPTY_CHOICE_CONTENT',
+  DUPLICATE_CHOICE_CONTENT: 'DUPLICATE_CHOICE_CONTENT',
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue
index 34f4d58f92..cc9b2af339 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue
@@ -29,6 +29,7 @@
           :showAnswers="showAnswers"
           data-testid="item"
           @close="closeItem"
+          @update:rawData="newXml => updateItemRawData(item.assessment_id, newXml)"
         >
           <template #toolbarActions>
             <CollapsibleToolbar
@@ -142,6 +143,17 @@
         emit('update', list);
       }
 
+      /**
+       * Patch a single item's raw_data in the assessments list.
+       * Called whenever an interaction editor emits updated XML.
+       */
+      function updateItemRawData(assessmentId, newRawData) {
+        const list = props.assessments.map(item =>
+          item.assessment_id === assessmentId ? { ...item, raw_data: newRawData } : item,
+        );
+        emit('update', list);
+      }
+
       const { getToolbarActions } = useQTIEditorActions({
         items,
         activeId,
@@ -162,6 +174,7 @@
         showAnswers,
         closeItem,
         addItem,
+        updateItemRawData,
         getToolbarActions,
         noQuestionsPlaceholder$,
         newQuestionBtnLabel$,
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/defineInteraction.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/defineInteraction.spec.js
index 2b3a42d659..f64cf0b6dc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/defineInteraction.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/defineInteraction.spec.js
@@ -9,8 +9,9 @@ const makeValidDescriptor = (overrides = {}) => ({
   convertsFrom: [],
   matches: () => false,
   getQuestionType: () => null,
-  getDeclarationSchema: () => ({ baseType: 'string', cardinality: 'single' }),
+  getResponseDeclarationSchema: () => ({ baseType: 'string', cardinality: 'single' }),
   parse: () => ({}),
+  buildXML: () => ({ bodyXml: '', responseDeclarations: [] }),
   validate: () => [],
   ...overrides,
 });
@@ -29,8 +30,9 @@ describe('defineInteraction', () => {
     'convertsFrom',
     'matches',
     'getQuestionType',
-    'getDeclarationSchema',
+    'getResponseDeclarationSchema',
     'parse',
+    'buildXML',
     'validate',
   ];
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionDescriptor.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionDescriptor.js
new file mode 100644
index 0000000000..f575d37903
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionDescriptor.js
@@ -0,0 +1,95 @@
+import { QtiInteraction, QuestionType, BaseType, Cardinality } from '../../constants';
+import { parseChoiceInteraction, buildChoiceInteractionXML } from './parse';
+import { validateChoiceInteraction } from './validation';
+
+/**
+ * Owns all choice-specific interaction logic: schema, parse, buildXML, and validate.
+ */
+export class ChoiceInteractionDescriptor {
+  constructor({ editorComponent = null } = {}) {
+    this.type = QtiInteraction.CHOICE;
+    this.placement = 'block';
+    this.questionTypes = [QuestionType.SINGLE_SELECT, QuestionType.MULTI_SELECT];
+    this.editorComponent = editorComponent;
+    this.convertsFrom = [];
+  }
+
+  /** @param {Element} el */
+  matches(el) {
+    return el.tagName.toLowerCase() === QtiInteraction.CHOICE;
+  }
+
+  /**
+   * Reads cardinality from the response declaration to determine question type.
+   *
+   * @param {Element} el
+   * @param {string[]} [responseDeclarations]
+   * @returns {string}
+   */
+  getQuestionType(el, responseDeclarations = []) {
+    if (responseDeclarations.length > 0) {
+      const doc = new DOMParser().parseFromString(responseDeclarations[0], 'text/xml');
+      const cardinality = doc.documentElement.getAttribute('cardinality');
+      if (cardinality) {
+        return cardinality === Cardinality.MULTIPLE
+          ? QuestionType.MULTI_SELECT
+          : QuestionType.SINGLE_SELECT;
+      }
+    }
+    // Fallback to max-choices if declarations are missing or malformed
+    return el.getAttribute('max-choices') === '1'
+      ? QuestionType.SINGLE_SELECT
+      : QuestionType.MULTI_SELECT;
+  }
+
+  /**
+   * @param {string} questionType
+   * @returns {{ baseType: string, cardinality: string }}
+   */
+  getResponseDeclarationSchema(questionType) {
+    return {
+      baseType: BaseType.IDENTIFIER,
+      cardinality:
+        questionType === QuestionType.SINGLE_SELECT ? Cardinality.SINGLE : Cardinality.MULTIPLE,
+    };
+  }
+  /**
+   * Parse <qti-choice-interaction> body XML + response declarations → ChoiceState.
+   *
+   * @param {string} bodyXml
+   * @param {string[]} responseDeclarations
+   * @returns {object} ChoiceState
+   */
+  parse(bodyXml, responseDeclarations) {
+    return parseChoiceInteraction(bodyXml, responseDeclarations);
+  }
+
+  /**
+   * Serialize ChoiceState → { bodyXml, declarations }.
+   *
+   * @param {object} state - ChoiceState
+   * @param {string} questionType
+   * @returns {{ bodyXml: string, responseDeclarations: string[] }}
+   */
+  buildXML(state, questionType) {
+    return buildChoiceInteractionXML(
+      state,
+      questionType,
+      this.getResponseDeclarationSchema(questionType),
+    );
+  }
+
+  /**
+   * Validate ChoiceState → ValidationError[].
+   *
+   * @param {object} state - ChoiceState
+   * @param {string} questionType
+   * @returns {Array<{ code: string, id?: string }>}
+   */
+  validate(state, questionType) {
+    return validateChoiceInteraction(state, questionType);
+  }
+}
+
+/** Singleton — safe to import from any file in the choice module tree. */
+export const choiceInteractionDescriptor = new ChoiceInteractionDescriptor();
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue
index d8d545cc39..e216268f4f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionEditor.vue
@@ -1,39 +1,185 @@
 <template>
 
-  <div class="choice-interaction-editor">
+  <div class="choice-editor">
     <!-- Prompt -->
-    <p
-      v-if="prompt"
-      class="choice-prompt"
-      :style="{ color: $themePalette.grey.v_900 }"
+    <div class="choice-editor__section">
+      <ValidationMessage v-if="questionHasError">
+        {{ errorPromptRequired$() }}
+      </ValidationMessage>
+      <div
+        class="field-label"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        {{ questionLabel$() }}
+      </div>
+
+      <!-- Prompt -->
+      <div
+        :class="promptWrapperClass"
+        :style="promptWrapperStyle"
+        @click="handlePromptClick"
+      >
+        <div class="choice-card-text is-closed">
+          <div class="choice-layout">
+            <div class="choice-content">
+              <TipTapEditor
+                :value="state.prompt"
+                :mode="isQuestionOpen ? mode : 'view'"
+                format="html"
+                :minHeight="'80px'"
+                :autofocus="mode === 'edit' && isQuestionOpen"
+                class="editor"
+                @update="setPrompt"
+                @minimize="closeQuestion"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Choice list -->
+    <div
+      v-if="mode === 'edit' || showAnswers"
+      class="choice-editor__section"
     >
-      {{ prompt }}
-    </p>
-
-    <!-- Choices (shown in edit mode, or when showAnswers is true in view mode) -->
-    <template v-if="mode === 'edit' || showAnswers">
-      <!-- Single-select choices — KRadioButton -->
-      <template v-if="questionType === QuestionType.SINGLE_SELECT">
-        <KRadioButton
-          v-for="choice in choices"
-          :key="choice.identifier"
-          v-model="selectedValue"
-          :buttonValue="choice.identifier"
-          :label="choice.text"
-        />
-      </template>
-
-      <!-- Multi-select choices — KCheckbox -->
-      <template v-else>
-        <KCheckbox
-          v-for="choice in choices"
-          :key="choice.identifier"
-          :checked="selectedValues.includes(choice.identifier)"
-          :label="choice.text"
-          @change="checked => toggleValue(choice.identifier, checked)"
-        />
-      </template>
-    </template>
+      <ValidationMessage v-if="noCorrectAnswerError">
+        {{ errorNoCorrectAnswer$() }}
+      </ValidationMessage>
+      <ValidationMessage v-if="tooManyCorrectError">
+        {{ errorTooManyCorrectAnswers$() }}
+      </ValidationMessage>
+      <div
+        class="answers-header field-label"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        {{ answersLabel$() }}
+      </div>
+      <div
+        class="choices-label"
+        :style="{ color: $themeTokens.annotation }"
+      >
+        {{ answersDescription }}
+      </div>
+
+      <div class="choices-list">
+        <div
+          v-for="(choice, index) in state.choices"
+          :key="choice.id"
+          class="choice-group"
+        >
+          <!-- Bordered choice card -->
+          <div
+            class="choice-border"
+            :class="getChoiceClasses(choice)"
+            :style="getChoiceStyle(choice)"
+            @click="handleChoiceClick($event, choice.id)"
+          >
+            <div
+              class="choice-card-text"
+              :class="{
+                'is-closed': isChoiceClosed(choice.id),
+                'small-screen': windowIsSmall,
+              }"
+            >
+              <div
+                class="choice-layout"
+                :class="{
+                  'is-open': isChoiceOpen(choice.id),
+                  'small-screen': windowIsSmall,
+                }"
+              >
+                <!-- Selection control -->
+                <div
+                  class="choice-selection"
+                  @click.stop
+                >
+                  <!-- Error icon replaces selection control when choice has an error -->
+                  <KIcon
+                    v-if="choiceHasError(choice.id)"
+                    icon="error"
+                    :color="$themeTokens.error"
+                    :style="{ width: '20px', height: '20px', marginTop: '2px' }"
+                  />
+                  <template v-else>
+                    <KRadioButton
+                      v-if="isSingleSelect"
+                      :currentValue="correctChoiceId"
+                      :buttonValue="choice.id"
+                      :label="markCorrectLabel$()"
+                      :showLabel="false"
+                      :aria-label="markCorrectLabel$()"
+                      :disabled="mode !== 'edit'"
+                      :style="{ width: 'auto' }"
+                      :color="$themePalette.green.v_600"
+                      @change="onToggleCorrect(choice.id)"
+                    />
+                    <!-- KCheckbox color prop colors the checked icon green -->
+                    <KCheckbox
+                      v-else
+                      :checked="choice.correct"
+                      :label="markCorrectLabel$()"
+                      :showLabel="false"
+                      :aria-label="markCorrectLabel$()"
+                      :disabled="mode !== 'edit'"
+                      :color="$themePalette.green.v_600"
+                      @change="onToggleCorrect(choice.id)"
+                    />
+                  </template>
+                </div>
+
+                <div class="choice-content">
+                  <TipTapEditor
+                    :value="choice.content"
+                    :mode="isChoiceOpen(choice.id) ? 'edit' : 'view'"
+                    format="html"
+                    :minHeight="'80px'"
+                    :autofocus="isChoiceOpen(choice.id)"
+                    class="editor"
+                    @update="html => setChoiceContent(choice.id, html)"
+                    @minimize="closeChoice"
+                  />
+                </div>
+
+                <!-- Actions toolbar -->
+                <div
+                  v-if="mode === 'edit'"
+                  class="choice-actions toolbar"
+                  @click.stop
+                >
+                  <CollapsibleToolbar :actions="getChoiceRowActions(choice.id, index)" />
+                </div>
+              </div>
+            </div>
+            <!-- Per-choice validation messages sit INSIDE the bordered card -->
+            <ValidationMessage v-if="emptyChoiceIds.has(choice.id)">
+              {{ errorEmptyChoiceContent$() }}
+            </ValidationMessage>
+            <ValidationMessage v-if="duplicateChoiceIds.has(choice.id)">
+              {{ errorDuplicateChoiceContent$() }}
+            </ValidationMessage>
+          </div>
+        </div>
+      </div>
+
+      <!-- Add choice button (edit only) -->
+      <KButton
+        v-if="mode === 'edit'"
+        appearance="flat-button"
+        :appearanceOverrides="buttonAppearanceOverrides"
+        class="choice-editor-button"
+        :aria-label="addChoiceBtn$()"
+        @click="onAddChoice"
+      >
+        <div class="add-choice-btn-content">
+          <KIcon
+            icon="plus"
+            :color="$themePalette.blue.v_500"
+          />
+          <span>{{ addChoiceBtn$() }}</span>
+        </div>
+      </KButton>
+    </div>
   </div>
 
 </template>
@@ -41,74 +187,338 @@
 
 <script>
 
-  import { computed, ref } from 'vue';
-  import { QuestionType } from '../../constants';
-  import { parseXML } from '../../serialization/parseItem';
+  import { computed, ref, watch, getCurrentInstance } from 'vue';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import { qtiEditorStrings } from '../../qtiEditorStrings';
+  import { QuestionType, ValidationError } from '../../constants';
+  import { useChoiceInteraction } from '../../composables/useChoiceInteraction';
+  import CollapsibleToolbar from '../../components/CollapsibleToolbar/index.vue';
+  import ValidationMessage from '../../components/ValidationMessage/index.vue';
+  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor';
 
   export default {
     name: 'ChoiceInteractionEditor',
 
-    setup(props) {
-      /** Dummy model value so KRadioButton renders without warnings. */
-      const selectedValue = ref(null);
-      /** Tracked identifiers for multi-select mode. */
-      const selectedValues = ref([]);
-
-      function toggleValue(identifier, checked) {
-        if (checked) {
-          selectedValues.value = [...selectedValues.value, identifier];
-        } else {
-          selectedValues.value = selectedValues.value.filter(v => v !== identifier);
+    components: { TipTapEditor, CollapsibleToolbar, ValidationMessage },
+
+    setup(props, { emit }) {
+      const { windowIsSmall } = useKResponsiveWindow();
+
+      const {
+        addChoiceBtn$,
+        deleteChoiceBtn$,
+        moveChoiceUpBtn$,
+        moveChoiceDownBtn$,
+        markCorrectLabel$,
+        errorPromptRequired$,
+        errorNoCorrectAnswer$,
+        errorTooManyCorrectAnswers$,
+        errorEmptyChoiceContent$,
+        errorDuplicateChoiceContent$,
+        questionLabel$,
+        answersLabel$,
+        answersDescriptionSingleChoice$,
+        answersDescriptionMultipleChoice$,
+      } = qtiEditorStrings;
+
+      const palette = themePalette();
+      const buttonAppearanceOverrides = computed(() => ({
+        backgroundColor: palette.blue.v_50,
+        border: `1px dashed ${palette.blue.v_200}`,
+        color: `${palette.blue.v_500} !important`,
+        fontSize: '14px',
+        fontWeight: '600',
+        textTransform: 'none',
+        ':hover': {
+          backgroundColor: palette.blue.v_100,
+        },
+      }));
+
+      // questionType prop is not a Ref — wrap it so useChoiceInteraction can react to changes.
+      const questionTypeRef = computed(() => props.questionType);
+
+      const {
+        state,
+        bodyXml,
+        responseDeclarations,
+        errors,
+        addChoice,
+        removeChoice,
+        moveChoiceUp,
+        moveChoiceDown,
+        toggleCorrectChoice,
+        setPrompt,
+        setChoiceContent,
+      } = useChoiceInteraction(props.interaction, questionTypeRef);
+
+      const isQuestionOpen = ref(false);
+      const openChoiceId = ref(null);
+
+      function openQuestion() {
+        isQuestionOpen.value = true;
+        openChoiceId.value = null;
+      }
+
+      function handlePromptClick(event) {
+        if (props.mode !== 'edit') return;
+        if (event.target.closest('button') || event.target.closest('input')) return;
+        if (!isQuestionOpen.value) {
+          event.stopPropagation();
+          openQuestion();
         }
       }
 
-      const parsed = computed(() => {
-        if (!props.interaction || !props.interaction.bodyXml) {
-          return { prompt: '', choices: [] };
+      function handleChoiceClick(event, choiceId) {
+        if (props.mode !== 'edit') return;
+        if (openChoiceId.value === choiceId) return;
+        if (event.target.closest('button') || event.target.closest('input')) return;
+        event.stopPropagation();
+        openChoice(choiceId);
+      }
+
+      function closeQuestion() {
+        isQuestionOpen.value = false;
+      }
+
+      function openChoice(id) {
+        openChoiceId.value = id;
+        isQuestionOpen.value = false;
+      }
+
+      function closeChoice() {
+        openChoiceId.value = null;
+      }
+
+      watch(
+        () => props.mode,
+        newMode => {
+          if (newMode === 'edit') {
+            if (!state.value.prompt || !state.value.prompt.trim()) {
+              openQuestion();
+            } else if (state.value.choices.length > 0) {
+              openChoice(state.value.choices[0].id);
+            }
+          } else {
+            isQuestionOpen.value = false;
+            openChoiceId.value = null;
+          }
+        },
+        { immediate: true },
+      );
+
+      // Emit bodyXml and responseDeclarations whenever either changes.
+      const workingInteraction = computed(() => ({
+        bodyXml: bodyXml.value,
+        responseDeclarations: responseDeclarations.value,
+      }));
+      watch(workingInteraction, newVal => emit('update:interaction', newVal), { immediate: true });
+
+      const isSingleSelect = computed(() => props.questionType === QuestionType.SINGLE_SELECT);
+
+      const answersDescription = computed(() =>
+        isSingleSelect.value
+          ? answersDescriptionSingleChoice$()
+          : answersDescriptionMultipleChoice$(),
+      );
+
+      const correctChoiceId = computed(() => state.value.choices.find(a => a.correct)?.id ?? null);
+
+      const errorCodes = computed(() => errors.value.map(e => e.code));
+      const emptyChoiceIds = computed(
+        () =>
+          new Set(
+            errors.value
+              .filter(e => e.code === ValidationError.EMPTY_CHOICE_CONTENT)
+              .map(e => e.id),
+          ),
+      );
+
+      const duplicateChoiceIds = computed(
+        () =>
+          new Set(
+            errors.value
+              .filter(e => e.code === ValidationError.DUPLICATE_CHOICE_CONTENT)
+              .map(e => e.id),
+          ),
+      );
+
+      const questionHasError = computed(() =>
+        errorCodes.value.includes(ValidationError.PROMPT_REQUIRED),
+      );
+      const noCorrectAnswerError = computed(
+        () =>
+          errors.value.length > 0 && errorCodes.value.includes(ValidationError.NO_CORRECT_ANSWER),
+      );
+      const tooManyCorrectError = computed(
+        () =>
+          errors.value.length > 0 &&
+          errorCodes.value.includes(ValidationError.TOO_MANY_CORRECT_ANSWERS),
+      );
+      function onToggleCorrect(id) {
+        toggleCorrectChoice(id);
+      }
+
+      function onAddChoice() {
+        addChoice();
+        openChoiceId.value = state.value.choices[state.value.choices.length - 1]?.id ?? null;
+      }
+
+      function onRemoveChoice(id) {
+        removeChoice(id);
+        if (openChoiceId.value === id) {
+          openChoiceId.value = null;
         }
-        try {
-          const doc = parseXML(props.interaction.bodyXml);
-          const root = doc.documentElement;
-
-          const promptEl = root.querySelector('qti-prompt');
-          const prompt = promptEl ? promptEl.textContent.trim() : '';
-
-          const choiceEls = [...root.querySelectorAll('qti-simple-choice')];
-          const choices = choiceEls.map(el => ({
-            identifier: el.getAttribute('identifier') ?? el.textContent.trim(),
-            text: el.textContent.trim(),
-          }));
-
-          return { prompt, choices };
-        } catch {
-          return { prompt: '', choices: [] };
+      }
+
+      function getChoiceRowActions(answerId, index) {
+        return [
+          {
+            id: 'up',
+            icon: 'chevronUp',
+            label: moveChoiceUpBtn$(),
+            disabled: index === 0,
+            handler: () => moveChoiceUp(answerId),
+            collapsed: windowIsSmall.value,
+          },
+          {
+            id: 'down',
+            icon: 'chevronDown',
+            label: moveChoiceDownBtn$(),
+            disabled: index === state.value.choices.length - 1,
+            handler: () => moveChoiceDown(answerId),
+            collapsed: windowIsSmall.value,
+          },
+          {
+            id: 'delete',
+            icon: 'close',
+            label: deleteChoiceBtn$(),
+            disabled: state.value.choices.length <= 1,
+            handler: () => onRemoveChoice(answerId),
+            collapsed: windowIsSmall.value,
+          },
+        ];
+      }
+
+      const instance = getCurrentInstance();
+
+      const isPromptEditing = computed(() => props.mode === 'edit' && isQuestionOpen.value);
+
+      const promptWrapperClass = computed(() => {
+        return isPromptEditing.value ? 'choice-editor__prompt-wrap' : 'choice-border';
+      });
+
+      const promptWrapperStyle = computed(() => {
+        if (isPromptEditing.value) {
+          return {};
         }
+        return {
+          borderColor: questionHasError.value
+            ? instance.proxy.$themeTokens.error
+            : instance.proxy.$themeTokens.fineLine,
+          cursor: props.mode === 'edit' ? 'pointer' : undefined,
+        };
       });
 
-      const prompt = computed(() => parsed.value.prompt);
-      const choices = computed(() => parsed.value.choices);
+      function isChoiceClosed(id) {
+        return props.mode !== 'edit' || openChoiceId.value !== id;
+      }
+
+      function choiceHasError(id) {
+        return emptyChoiceIds.value.has(id) || duplicateChoiceIds.value.has(id);
+      }
+
+      function isChoiceOpen(id) {
+        return props.mode === 'edit' && openChoiceId.value === id;
+      }
+
+      function getChoiceClasses(choice) {
+        const closed = isChoiceClosed(choice.id);
+        const clickable = props.mode === 'edit' && closed;
+        const isCorrect = choice.correct && (props.mode === 'edit' || props.showAnswers);
+        const hoverBg = isCorrect ? palette.green.v_100 : instance.proxy.$themeTokens.fineLine;
+        return [
+          { 'is-clickable': clickable },
+          clickable
+            ? instance.proxy.$computedClass({
+              ':hover': { backgroundColor: hoverBg },
+            })
+            : '',
+        ];
+      }
 
-      return { prompt, choices, selectedValue, selectedValues, toggleValue, QuestionType };
+      function getChoiceStyle(choice) {
+        const isCorrect = choice.correct && (props.mode === 'edit' || props.showAnswers);
+        const hasError = choiceHasError(choice.id);
+
+        let borderColor = instance.proxy.$themeTokens.fineLine;
+        if (hasError) {
+          borderColor = instance.proxy.$themeTokens.error;
+        } else if (isCorrect) {
+          borderColor = palette.green.v_500;
+        }
+
+        return {
+          borderColor,
+          backgroundColor: isCorrect ? palette.green.v_50 : null,
+        };
+      }
+
+      return {
+        promptWrapperClass,
+        promptWrapperStyle,
+        state,
+        isSingleSelect,
+        windowIsSmall,
+        answersLabel$,
+        answersDescription,
+        isQuestionOpen,
+        closeQuestion,
+        closeChoice,
+        correctChoiceId,
+        questionHasError,
+        noCorrectAnswerError,
+        tooManyCorrectError,
+        emptyChoiceIds,
+        duplicateChoiceIds,
+        choiceHasError,
+        setPrompt,
+        setChoiceContent,
+        onToggleCorrect,
+        onAddChoice,
+        getChoiceRowActions,
+        isChoiceClosed,
+        isChoiceOpen,
+        getChoiceClasses,
+        getChoiceStyle,
+        handlePromptClick,
+        handleChoiceClick,
+        addChoiceBtn$,
+        markCorrectLabel$,
+        errorPromptRequired$,
+        errorNoCorrectAnswer$,
+        errorTooManyCorrectAnswers$,
+        errorEmptyChoiceContent$,
+        errorDuplicateChoiceContent$,
+        questionLabel$,
+        buttonAppearanceOverrides,
+      };
     },
 
     props: {
-      /**
-       * The raw interaction block — shape: { bodyXml: string, responseDeclarations: string[] }.
-       * Parsed here to extract the prompt and simple-choice elements.
-       */
       interaction: {
         type: Object,
-        default: null,
+        required: true,
+        validator: val => typeof val.bodyXml === 'string',
       },
-      /** One of QuestionType derived from max-choices by the registry. */
       questionType: {
         type: String,
         default: null,
       },
-      /** View or edit mode */
       mode: {
         type: String,
         default: 'view',
+        validator: val => ['view', 'edit'].includes(val),
       },
       /** Whether to display correct answers (used in view mode previews) */
       showAnswers: {
@@ -116,6 +526,8 @@
         default: false,
       },
     },
+
+    emits: ['update:interaction'],
   };
 
 </script>
@@ -123,18 +535,164 @@
 
 <style lang="scss" scoped>
 
-  .choice-interaction-editor {
+  .choice-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .field-label {
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .answers-header {
+    margin-bottom: 2px;
+  }
+
+  .choices-label {
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  .choice-editor__section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .choices-list {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    padding: 4px 0 8px;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* Groups the bordered card with its per-choice error messages */
+  .choice-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .choice-border {
+    position: relative;
+    border: 1px solid;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+  }
+
+  .choice-card-text {
+    padding: 7.5px;
+
+    &.is-closed {
+      min-height: 42px;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      .small-screen & {
+        min-height: 36px;
+      }
+    }
+  }
+
+  /* Flex row: [selection] [content] [actions] */
+  .choice-layout {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &.is-open {
+      align-items: flex-start;
+    }
+
+    &.small-screen {
+      &.is-open {
+        flex-wrap: wrap;
+        align-items: center;
+
+        .choice-selection {
+          flex: 0 0 auto;
+          order: 0;
+          margin-bottom: 4px;
+        }
+
+        .choice-actions {
+          flex: 0 0 auto;
+          order: 1;
+          margin-bottom: 4px;
+        }
+
+        .choice-content {
+          flex: 0 0 100%;
+          order: 2;
+          min-width: 0;
+        }
+      }
+    }
+  }
+
+  .choice-selection {
+    flex-shrink: 0;
+    margin-right: 16px;
+
+    .small-screen & {
+      margin-right: 6px;
+    }
+  }
+
+  .choice-content {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
   }
 
-  .choice-prompt {
-    margin: 0 0 12px;
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 1.5;
+  .choice-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: 2px;
+    align-items: center;
+    margin-left: 16px;
+  }
+
+  .editor {
+    width: 100%;
+  }
+
+  .choice-editor__prompt-wrap {
+    position: relative;
+    padding: 4px 0;
+
+    .choice-card-text.is-closed {
+      min-height: auto;
+      padding: 0;
+    }
+
+    .choice-layout {
+      display: block;
+    }
+  }
+
+  .choice-border.is-clickable {
+    cursor: pointer;
+  }
+
+  .choice-editor-button {
+    justify-content: center;
+    width: 100%;
+    padding: 11px 16px !important;
+    margin-top: 10px;
+    line-height: unset !important;
+    border-radius: 4px !important;
+  }
+
+  .add-choice-btn-content {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionDescriptor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionDescriptor.spec.js
new file mode 100644
index 0000000000..bd321d465d
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionDescriptor.spec.js
@@ -0,0 +1,60 @@
+import { ChoiceInteractionDescriptor } from '../ChoiceInteractionDescriptor';
+import { BaseType, Cardinality, QtiInteraction, QuestionType } from '../../../constants';
+
+describe('ChoiceInteractionDescriptor', () => {
+  it('owns the choice interaction metadata without requiring the Vue editor', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    expect(descriptor.type).toBe(QtiInteraction.CHOICE);
+    expect(descriptor.questionTypes).toEqual([
+      QuestionType.SINGLE_SELECT,
+      QuestionType.MULTI_SELECT,
+    ]);
+  });
+
+  it('derives singleSelect from declaration cardinality="single"', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    const el = new DOMParser().parseFromString(
+      '<qti-choice-interaction max-choices="1" />',
+      'text/xml',
+    ).documentElement;
+    const declarations = [
+      '<qti-response-declaration identifier="RESPONSE" cardinality="single" base-type="identifier"/>',
+    ];
+    expect(descriptor.getQuestionType(el, declarations)).toBe(QuestionType.SINGLE_SELECT);
+  });
+
+  it('derives multiSelect from declaration cardinality="multiple"', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    const el = new DOMParser().parseFromString(
+      '<qti-choice-interaction max-choices="2" />',
+      'text/xml',
+    ).documentElement;
+    const declarations = [
+      '<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="identifier"/>',
+    ];
+    expect(descriptor.getQuestionType(el, declarations)).toBe(QuestionType.MULTI_SELECT);
+  });
+
+  it('falls back to max-choices when no declarations are provided', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    const el = new DOMParser().parseFromString(
+      '<qti-choice-interaction max-choices="1" />',
+      'text/xml',
+    ).documentElement;
+    expect(descriptor.getQuestionType(el)).toBe(QuestionType.SINGLE_SELECT);
+  });
+
+  it('returns single-cardinality schema for singleSelect', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    const schema = descriptor.getResponseDeclarationSchema(QuestionType.SINGLE_SELECT);
+    expect(schema.baseType).toBe(BaseType.IDENTIFIER);
+    expect(schema.cardinality).toBe(Cardinality.SINGLE);
+  });
+
+  it('returns multiple-cardinality schema for multiSelect', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    const schema = descriptor.getResponseDeclarationSchema(QuestionType.MULTI_SELECT);
+    expect(schema.baseType).toBe(BaseType.IDENTIFIER);
+    expect(schema.cardinality).toBe(Cardinality.MULTIPLE);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js
index f9169788bf..65680326ab 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionEditor.spec.js
@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/vue';
+import { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import ChoiceInteractionEditor from '../ChoiceInteractionEditor.vue';
 
@@ -6,20 +7,28 @@ import {
   CHOICE_SINGLE_SELECT_XML,
   CHOICE_MULTI_SELECT_XML,
   CHOICE_NO_PROMPT_XML,
+  CHOICE_SINGLE_DECL_XML as SINGLE_DECL,
+  CHOICE_MULTI_DECL_XML as MULTI_DECL,
   mockInteractionBlock as block,
+  mockInteractionBlockWithDecl as blockWithDecl,
 } from '../../../utils/testingFixtures';
 import { QuestionType } from '../../../constants';
 
+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 renderEditor = (props = {}) =>
   render(ChoiceInteractionEditor, {
     props: { mode: 'edit', ...props },
     routes: new VueRouter(),
   });
 
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
 describe('ChoiceInteractionEditor', () => {
   describe('prompt rendering', () => {
     it('renders the prompt text from the XML', () => {
@@ -30,7 +39,7 @@ describe('ChoiceInteractionEditor', () => {
       expect(screen.getByText('Which planet is closest to the Sun?')).toBeInTheDocument();
     });
 
-    it('renders no prompt element when the XML has no <qti-prompt>', () => {
+    it('renders no prompt when the XML has no <qti-prompt>', () => {
       renderEditor({
         interaction: block(CHOICE_NO_PROMPT_XML),
         questionType: QuestionType.SINGLE_SELECT,
@@ -45,8 +54,7 @@ describe('ChoiceInteractionEditor', () => {
         interaction: block(CHOICE_SINGLE_SELECT_XML),
         questionType: QuestionType.SINGLE_SELECT,
       });
-      const radios = screen.getAllByRole('radio');
-      expect(radios).toHaveLength(3);
+      expect(screen.getAllByRole('radio')).toHaveLength(3);
     });
 
     it('renders the correct choice labels', () => {
@@ -59,15 +67,25 @@ describe('ChoiceInteractionEditor', () => {
       expect(screen.getByText('Earth')).toBeInTheDocument();
     });
 
-    it('allows selecting a radio button', async () => {
+    it('pre-checks the correct choice radio', () => {
+      renderEditor({
+        interaction: blockWithDecl(CHOICE_SINGLE_SELECT_XML, SINGLE_DECL),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const radios = screen.getAllByRole('radio');
+      expect(radios[0]).toBeChecked(); // mercury
+      expect(radios[1]).not.toBeChecked(); // venus
+    });
+
+    it('allows toggling a different radio', async () => {
       renderEditor({
         interaction: block(CHOICE_SINGLE_SELECT_XML),
         questionType: QuestionType.SINGLE_SELECT,
       });
-      const mercury = screen.getByRole('radio', { name: 'Mercury' });
-      expect(mercury).not.toBeChecked();
-      await fireEvent.click(mercury);
-      expect(mercury).toBeChecked();
+      const radios = screen.getAllByRole('radio');
+      await fireEvent.click(radios[1]);
+      expect(radios[0]).not.toBeChecked();
+      expect(radios[1]).toBeChecked();
     });
   });
 
@@ -77,8 +95,7 @@ describe('ChoiceInteractionEditor', () => {
         interaction: block(CHOICE_MULTI_SELECT_XML),
         questionType: QuestionType.MULTI_SELECT,
       });
-      const checkboxes = screen.getAllByRole('checkbox');
-      expect(checkboxes).toHaveLength(3);
+      expect(screen.getAllByRole('checkbox')).toHaveLength(3);
     });
 
     it('renders the correct choice labels', () => {
@@ -91,6 +108,17 @@ describe('ChoiceInteractionEditor', () => {
       expect(screen.getByText('Option C')).toBeInTheDocument();
     });
 
+    it('pre-checks multiple correct choices', () => {
+      renderEditor({
+        interaction: blockWithDecl(CHOICE_MULTI_SELECT_XML, MULTI_DECL),
+        questionType: QuestionType.MULTI_SELECT,
+      });
+      const checkboxes = screen.getAllByRole('checkbox');
+      expect(checkboxes[0]).toBeChecked(); // a
+      expect(checkboxes[1]).not.toBeChecked(); // b
+      expect(checkboxes[2]).toBeChecked(); // c
+    });
+
     it('allows checking multiple checkboxes independently', async () => {
       renderEditor({
         interaction: block(CHOICE_MULTI_SELECT_XML),
@@ -104,29 +132,233 @@ describe('ChoiceInteractionEditor', () => {
     });
 
     it('allows unchecking a checked checkbox', async () => {
-      renderEditor({ interaction: block(CHOICE_MULTI_SELECT_XML), questionType: 'multiSelect' });
+      renderEditor({
+        interaction: blockWithDecl(CHOICE_MULTI_SELECT_XML, MULTI_DECL),
+        questionType: QuestionType.MULTI_SELECT,
+      });
       const [checkA] = screen.getAllByRole('checkbox');
       await fireEvent.click(checkA);
-      expect(checkA).toBeChecked();
-      await fireEvent.click(checkA);
       expect(checkA).not.toBeChecked();
     });
   });
 
-  describe('graceful fallback', () => {
-    it('renders nothing interactive when block is null', () => {
-      renderEditor({ block: null, questionType: 'singleSelect' });
+  describe('edit mode controls', () => {
+    it('renders an Add choice button', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      expect(screen.getByRole('button', { name: /add choice/i })).toBeInTheDocument();
+    });
+
+    it('adds a new choice row when Add choice is clicked', async () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      await fireEvent.click(screen.getByRole('button', { name: /add choice/i }));
+      // 3 original choices + 1 newly added = 4 radios (choice list uses divs, not li elements)
+      expect(screen.getAllByRole('radio')).toHaveLength(4);
+    });
+
+    it('renders move-up, move-down, and delete buttons for each non-fixed choice', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      expect(screen.getAllByRole('button', { name: /move choice up/i })).toHaveLength(3);
+      expect(screen.getAllByRole('button', { name: /move choice down/i })).toHaveLength(3);
+      expect(screen.getAllByRole('button', { name: /delete choice/i })).toHaveLength(3);
+    });
+
+    it('disables move-up on the first choice', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const moveUpBtns = screen.getAllByRole('button', { name: /move choice up/i });
+      expect(moveUpBtns[0]).toBeDisabled();
+      expect(moveUpBtns[1]).toBeEnabled();
+    });
+
+    it('disables move-down on the last choice', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const moveDownBtns = screen.getAllByRole('button', { name: /move choice down/i });
+      expect(moveDownBtns[2]).toBeDisabled();
+      expect(moveDownBtns[1]).toBeEnabled();
+    });
+
+    it('disables delete when only one choice remains', async () => {
+      const xml = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="1">
+        <qti-simple-choice identifier="a">Only</qti-simple-choice>
+      </qti-choice-interaction>`;
+      renderEditor({
+        interaction: block(xml),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      expect(screen.getByRole('button', { name: /delete choice/i })).toBeDisabled();
+    });
+
+    it('removes a choice row when delete is clicked', async () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const deleteBtns = screen.getAllByRole('button', { name: /delete choice/i });
+      await fireEvent.click(deleteBtns[0]);
+      expect(screen.getAllByRole('radio')).toHaveLength(2);
+    });
+  });
+
+  describe('view mode', () => {
+    it('hides choices when mode=view and showAnswers=false', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+        mode: 'view',
+        showAnswers: false,
+      });
       expect(screen.queryByRole('radio')).not.toBeInTheDocument();
-      expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
     });
 
-    it('renders nothing interactive when block.bodyXml is an empty string', () => {
-      renderEditor({ interaction: block(''), questionType: 'singleSelect' });
+    it('shows choices when mode=view and showAnswers=true', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+        mode: 'view',
+        showAnswers: true,
+      });
+      expect(screen.getAllByRole('radio')).toHaveLength(3);
+    });
+
+    it('disables the correct-choice control in view mode', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+        mode: 'view',
+        showAnswers: true,
+      });
+      screen.getAllByRole('radio').forEach(r => expect(r).toBeDisabled());
+    });
+
+    it('hides add/move/delete buttons in view mode', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+        mode: 'view',
+        showAnswers: true,
+      });
+      expect(screen.queryByRole('button', { name: /add choice/i })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /delete choice/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('validation', () => {
+    it('does not show errors before any field is touched', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('shows global errors (no correct choice) after a structural mutation', async () => {
+      jest.useFakeTimers();
+      // Add a choice so we have 2+ choices — then the only error is no correct choice.
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      // Clicking Add choice mutates state → debounced validate fires.
+      await fireEvent.click(screen.getByRole('button', { name: /add choice/i }));
+      // Flush Vue watcher queue.
+      await nextTick();
+      // Advance past the 400ms debounce, then flush the resulting DOM update.
+      jest.advanceTimersByTime(400);
+      await nextTick();
+      jest.useRealTimers();
+      // NO_CORRECT_ANSWER (and potentially others) should be shown after validation runs.
+      expect(screen.getAllByRole('alert').length).toBeGreaterThan(0);
+    });
+
+    it('shows no-correct-choice error after toggling and running validation', async () => {
+      jest.useFakeTimers();
+      renderEditor({
+        interaction: blockWithDecl(CHOICE_SINGLE_SELECT_XML, SINGLE_DECL),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      // Trigger validation via add-choice which mutates state → debounced validate fires.
+      await fireEvent.click(screen.getByRole('button', { name: /add choice/i }));
+      await nextTick();
+      jest.advanceTimersByTime(400);
+      await nextTick();
+      jest.useRealTimers();
+      // Validate fires; errors should appear (e.g. empty choice content).
+    });
+  });
+
+  describe('emits', () => {
+    it('emits update:interaction on mount with the rebuilt XML and declarations', () => {
+      const { emitted } = renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      expect(emitted()['update:interaction']).toBeTruthy();
+      const payload = emitted()['update:interaction'][0][0];
+      expect(typeof payload.bodyXml).toBe('string');
+      expect(Array.isArray(payload.responseDeclarations)).toBe(true);
+    });
+
+    it('emits update:interaction after adding a choice', async () => {
+      const { emitted } = renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const before = emitted()['update:interaction'].length;
+      await fireEvent.click(screen.getByRole('button', { name: /add choice/i }));
+      expect(emitted()['update:interaction'].length).toBeGreaterThan(before);
+    });
+  });
+
+  describe('accessibility', () => {
+    it('all radios have an accessible label', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      screen.getAllByRole('radio').forEach(r => expect(r).toHaveAccessibleName());
+    });
+
+    it('all checkboxes have an accessible label', () => {
+      renderEditor({
+        interaction: block(CHOICE_MULTI_SELECT_XML),
+        questionType: QuestionType.MULTI_SELECT,
+      });
+      screen.getAllByRole('checkbox').forEach(c => expect(c).toHaveAccessibleName());
+    });
+
+    it('icon buttons have accessible labels', () => {
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      screen
+        .getAllByRole('button', { name: /move choice up/i })
+        .forEach(b => expect(b).toHaveAccessibleName());
+    });
+  });
+
+  describe('graceful fallback', () => {
+    it('renders nothing interactive when bodyXml is empty', () => {
+      renderEditor({ interaction: block(''), questionType: QuestionType.SINGLE_SELECT });
       expect(screen.queryByRole('radio')).not.toBeInTheDocument();
     });
 
     it('renders nothing interactive when XML is malformed', () => {
-      renderEditor({ interaction: block('<unclosed'), questionType: 'singleSelect' });
+      renderEditor({ interaction: block('<unclosed'), questionType: QuestionType.SINGLE_SELECT });
       expect(screen.queryByRole('radio')).not.toBeInTheDocument();
     });
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/parse.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/parse.spec.js
new file mode 100644
index 0000000000..65ed99af7b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/parse.spec.js
@@ -0,0 +1,261 @@
+/* eslint-disable jest-dom/prefer-to-have-attribute, jest-dom/prefer-to-have-text-content */
+// The eslint-dom matchers reject XML nodes produced by DOMParser(..., 'text/xml').
+// Native DOM APIs (getAttribute, textContent) work correctly on XML elements.
+
+import { choiceInteractionDescriptor } from '../ChoiceInteractionDescriptor';
+
+import {
+  CHOICE_SINGLE_SELECT_XML,
+  CHOICE_MULTI_SELECT_XML,
+  CHOICE_NO_PROMPT_XML,
+  CHOICE_SINGLE_DECL_XML as SINGLE_DECL,
+  CHOICE_MULTI_DECL_XML as MULTI_DECL,
+} from '../../../utils/testingFixtures';
+import { QuestionType, Orientation } from '../../../constants';
+
+const parse = choiceInteractionDescriptor.parse.bind(choiceInteractionDescriptor);
+const buildXML = choiceInteractionDescriptor.buildXML.bind(choiceInteractionDescriptor);
+
+describe('parse()', () => {
+  describe('attribute defaults', () => {
+    it('defaults maxChoices to 0 when attribute is absent', () => {
+      const xml = `<qti-choice-interaction response-identifier="RESPONSE">
+        <qti-simple-choice identifier="a">A</qti-simple-choice>
+      </qti-choice-interaction>`;
+      const state = parse(xml, []);
+      expect(state.maxChoices).toBe(0);
+    });
+
+    it('defaults minChoices to 0 when attribute is absent', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.minChoices).toBe(0);
+    });
+
+    it('defaults shuffle to false when attribute is absent', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.shuffle).toBe(false);
+    });
+
+    it('defaults orientation to Orientation.VERTICAL when attribute is absent', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.orientation).toBe(Orientation.VERTICAL);
+    });
+
+    it('defaults prompt to empty string when <qti-prompt> is absent', () => {
+      const state = parse(CHOICE_NO_PROMPT_XML, []);
+      expect(state.prompt).toBe('');
+    });
+  });
+
+  describe('attribute reading', () => {
+    it('reads max-choices attribute', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.maxChoices).toBe(1);
+    });
+
+    it('reads shuffle attribute when true', () => {
+      const xml = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="1" shuffle="true">
+        <qti-simple-choice identifier="a">A</qti-simple-choice>
+      </qti-choice-interaction>`;
+      expect(parse(xml, []).shuffle).toBe(true);
+    });
+
+    it('reads orientation attribute', () => {
+      const xml = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="1" orientation="horizontal">
+        <qti-simple-choice identifier="a">A</qti-simple-choice>
+      </qti-choice-interaction>`;
+      expect(parse(xml, []).orientation).toBe('horizontal');
+    });
+  });
+
+  describe('prompt extraction', () => {
+    it('extracts the prompt text content', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.prompt).toContain('Which planet is closest to the Sun?');
+    });
+  });
+
+  describe('choices array', () => {
+    it('maps each <qti-simple-choice> to an choice with id and content', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.choices).toHaveLength(3);
+      expect(state.choices[0].id).toBe('mercury');
+      expect(state.choices[0].content).toContain('Mercury');
+    });
+
+    it('generates a slug identifier when element is missing its identifier attribute', () => {
+      const xml = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="1">
+        <qti-simple-choice>No id here</qti-simple-choice>
+      </qti-choice-interaction>`;
+      const state = parse(xml, []);
+      expect(state.choices[0].id).toMatch(/^choice_[a-z0-9]{8}$/);
+    });
+
+    it('sets fixed: true when the fixed attribute is present', () => {
+      const xml = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="1">
+        <qti-simple-choice identifier="a" fixed="true">A</qti-simple-choice>
+      </qti-choice-interaction>`;
+      const state = parse(xml, []);
+      expect(state.choices[0].fixed).toBe(true);
+    });
+
+    it('sets fixed: false when the fixed attribute is absent', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.choices[0].fixed).toBe(false);
+    });
+  });
+
+  describe('correct response detection', () => {
+    it('marks the correct choice for single-select', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, [SINGLE_DECL]);
+      const mercury = state.choices.find(a => a.id === 'mercury');
+      const venus = state.choices.find(a => a.id === 'venus');
+      expect(mercury.correct).toBe(true);
+      expect(venus.correct).toBe(false);
+    });
+
+    it('marks multiple correct choices for multi-select', () => {
+      const state = parse(CHOICE_MULTI_SELECT_XML, [MULTI_DECL]);
+      expect(state.choices.find(a => a.id === 'a').correct).toBe(true);
+      expect(state.choices.find(a => a.id === 'b').correct).toBe(false);
+      expect(state.choices.find(a => a.id === 'c').correct).toBe(true);
+    });
+
+    it('marks all choices as not correct when no declaration provided', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.choices.every(a => !a.correct)).toBe(true);
+    });
+  });
+
+  describe('graceful fallback', () => {
+    it('returns default state for empty bodyXml', () => {
+      const state = parse('', []);
+      expect(state.choices).toEqual([]);
+      expect(state.prompt).toBe('');
+    });
+
+    it('returns default state for malformed XML', () => {
+      const state = parse('<unclosed', []);
+      expect(state.choices).toEqual([]);
+    });
+  });
+});
+
+describe('buildXML()', () => {
+  const baseState = {
+    prompt: 'Pick one.',
+    choices: [
+      { id: 'choice_a', content: 'Option A', correct: true, fixed: false },
+      { id: 'choice_b', content: 'Option B', correct: false, fixed: false },
+    ],
+    maxChoices: 1,
+    minChoices: 0,
+    shuffle: false,
+    orientation: Orientation.VERTICAL,
+  };
+
+  it('sets cardinality="single" for singleSelect', () => {
+    const { responseDeclarations } = buildXML(baseState, QuestionType.SINGLE_SELECT);
+    expect(responseDeclarations[0]).toContain('cardinality="single"');
+  });
+
+  it('sets cardinality="multiple" for multiSelect', () => {
+    const multiState = {
+      ...baseState,
+      choices: [
+        { id: 'a', content: 'A', correct: true, fixed: false },
+        { id: 'b', content: 'B', correct: true, fixed: false },
+      ],
+      maxChoices: 2,
+    };
+    const { responseDeclarations } = buildXML(multiState, QuestionType.MULTI_SELECT);
+    expect(responseDeclarations[0]).toContain('cardinality="multiple"');
+  });
+
+  it('includes the correct identifier in <qti-value>', () => {
+    const { responseDeclarations } = buildXML(baseState, QuestionType.SINGLE_SELECT);
+    expect(responseDeclarations[0]).toContain('choice_a');
+    expect(responseDeclarations[0]).not.toContain('choice_b');
+  });
+
+  it('includes all correct identifiers for multi-select', () => {
+    const multiState = {
+      ...baseState,
+      choices: [
+        { id: 'x', content: 'X', correct: true, fixed: false },
+        { id: 'y', content: 'Y', correct: true, fixed: false },
+        { id: 'z', content: 'Z', correct: false, fixed: false },
+      ],
+      maxChoices: 2,
+    };
+    const { responseDeclarations } = buildXML(multiState, QuestionType.MULTI_SELECT);
+    expect(responseDeclarations[0]).toContain('x');
+    expect(responseDeclarations[0]).toContain('y');
+    expect(responseDeclarations[0]).not.toContain('z');
+  });
+
+  it('omits min-choices attribute when minChoices is 0', () => {
+    const { bodyXml } = buildXML(baseState, QuestionType.SINGLE_SELECT);
+    expect(bodyXml).not.toContain('min-choices');
+  });
+
+  it('includes min-choices attribute when minChoices > 0', () => {
+    const { bodyXml } = buildXML({ ...baseState, minChoices: 1 }, QuestionType.SINGLE_SELECT);
+    expect(bodyXml).toContain('min-choices');
+  });
+
+  it('includes one <qti-simple-choice> per choice', () => {
+    const { bodyXml } = buildXML(baseState, QuestionType.SINGLE_SELECT);
+    const matches = bodyXml.match(/qti-simple-choice/g) ?? [];
+    // Each tag appears as open + close = 2 × 2 choices = 4
+    expect(matches.length).toBe(4);
+  });
+
+  it('preserves rich markup as XML nodes instead of escaped text', () => {
+    const { bodyXml } = buildXML(
+      {
+        ...baseState,
+        prompt: '<p>Pick <strong>one</strong>.</p>',
+        choices: [
+          {
+            id: 'choice_a',
+            content: '<p>Option <em>A</em></p>',
+            correct: true,
+            fixed: false,
+          },
+          { id: 'choice_b', content: 'Option B', correct: false, fixed: false },
+        ],
+      },
+      QuestionType.SINGLE_SELECT,
+    );
+
+    expect(bodyXml).toContain('<strong>one</strong>');
+    expect(bodyXml).toContain('<em>A</em>');
+    expect(bodyXml).not.toContain('&lt;strong');
+    expect(bodyXml).not.toContain('&lt;em');
+  });
+});
+
+describe('parse → buildXML → parse round-trip', () => {
+  it('single-select: re-parsed state matches original', () => {
+    const original = parse(CHOICE_SINGLE_SELECT_XML, [SINGLE_DECL]);
+    const { bodyXml, responseDeclarations } = buildXML(original, QuestionType.SINGLE_SELECT);
+    const reparsed = parse(bodyXml, responseDeclarations);
+
+    expect(reparsed.maxChoices).toBe(original.maxChoices);
+    expect(reparsed.shuffle).toBe(original.shuffle);
+    expect(reparsed.orientation).toBe(original.orientation);
+    expect(reparsed.choices.map(a => a.id)).toEqual(original.choices.map(a => a.id));
+    expect(reparsed.choices.map(a => a.correct)).toEqual(original.choices.map(a => a.correct));
+  });
+
+  it('multi-select: re-parsed state matches original', () => {
+    const original = parse(CHOICE_MULTI_SELECT_XML, [MULTI_DECL]);
+    const { bodyXml, responseDeclarations } = buildXML(original, QuestionType.MULTI_SELECT);
+    const reparsed = parse(bodyXml, responseDeclarations);
+
+    expect(reparsed.choices.filter(a => a.correct).map(a => a.id)).toEqual(
+      original.choices.filter(a => a.correct).map(a => a.id),
+    );
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/validate.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/validate.spec.js
new file mode 100644
index 0000000000..1071c7caea
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/validate.spec.js
@@ -0,0 +1,174 @@
+import { choiceInteractionDescriptor } from '../ChoiceInteractionDescriptor';
+
+import { ValidationError, QuestionType, Orientation } from '../../../constants';
+
+const validate = choiceInteractionDescriptor.validate.bind(choiceInteractionDescriptor);
+
+// Helpers
+
+function makeAnswer(overrides = {}) {
+  return { id: 'choice_a', content: 'Option A', correct: false, fixed: false, ...overrides };
+}
+
+function makeState(overrides = {}) {
+  return {
+    prompt: 'What is 2 + 2?',
+    choices: [
+      makeAnswer({ id: 'choice_a', content: 'Four', correct: true }),
+      makeAnswer({ id: 'choice_b', content: 'Five', correct: false }),
+    ],
+    maxChoices: 1,
+    minChoices: 0,
+    shuffle: false,
+    orientation: Orientation.VERTICAL,
+    ...overrides,
+  };
+}
+
+const errorCodes = errors => errors.map(e => e.code);
+
+describe('validate()', () => {
+  it('returns an empty array for a valid single-select state', () => {
+    expect(validate(makeState(), QuestionType.SINGLE_SELECT)).toEqual([]);
+  });
+
+  it('returns an empty array for a valid multi-select state', () => {
+    const state = makeState({
+      choices: [
+        makeAnswer({ id: 'a', content: 'Option A', correct: true }),
+        makeAnswer({ id: 'b', content: 'Option B', correct: true }),
+      ],
+    });
+    expect(validate(state, QuestionType.MULTI_SELECT)).toEqual([]);
+  });
+
+  describe('PROMPT_REQUIRED', () => {
+    it('returns error when prompt is an empty string', () => {
+      expect(errorCodes(validate(makeState({ prompt: '' }), QuestionType.SINGLE_SELECT))).toContain(
+        ValidationError.PROMPT_REQUIRED,
+      );
+    });
+
+    it('returns error when prompt is whitespace only', () => {
+      expect(
+        errorCodes(validate(makeState({ prompt: '   ' }), QuestionType.SINGLE_SELECT)),
+      ).toContain(ValidationError.PROMPT_REQUIRED);
+    });
+
+    it('returns error when prompt is tags-only with no visible text', () => {
+      expect(
+        errorCodes(validate(makeState({ prompt: '<p> </p>' }), QuestionType.SINGLE_SELECT)),
+      ).toContain(ValidationError.PROMPT_REQUIRED);
+    });
+
+    it('does not return error when prompt has visible text inside tags', () => {
+      expect(
+        errorCodes(validate(makeState({ prompt: '<p>Hello</p>' }), QuestionType.SINGLE_SELECT)),
+      ).not.toContain(ValidationError.PROMPT_REQUIRED);
+    });
+  });
+
+  describe('DUPLICATE_CHOICE_CONTENT', () => {
+    it('returns an error for each choice that has identical text content', () => {
+      const state = makeState({
+        choices: [
+          makeAnswer({ id: 'a', content: 'Yes', correct: true }),
+          makeAnswer({ id: 'b', content: 'Yes', correct: false }),
+          makeAnswer({ id: 'c', content: ' Yes ', correct: false }), // Whitespace is ignored
+          makeAnswer({ id: 'd', content: '<p>Yes</p>', correct: false }), // HTML is stripped
+          makeAnswer({ id: 'e', content: 'No', correct: false }),
+        ],
+      });
+      const errors = validate(state, QuestionType.SINGLE_SELECT);
+      const duplicateErrors = errors.filter(
+        e => e.code === ValidationError.DUPLICATE_CHOICE_CONTENT,
+      );
+
+      expect(duplicateErrors).toHaveLength(4);
+      const errorIds = duplicateErrors.map(e => e.id);
+      expect(errorIds).toContain('a');
+      expect(errorIds).toContain('b');
+      expect(errorIds).toContain('c');
+      expect(errorIds).toContain('d');
+      expect(errorIds).not.toContain('e');
+    });
+
+    it('does not return error when choices have unique text content', () => {
+      const state = makeState({
+        choices: [
+          makeAnswer({ id: 'a', content: 'Yes', correct: true }),
+          makeAnswer({ id: 'b', content: 'No', correct: false }),
+        ],
+      });
+      expect(errorCodes(validate(state, QuestionType.SINGLE_SELECT))).not.toContain(
+        ValidationError.DUPLICATE_CHOICE_CONTENT,
+      );
+    });
+  });
+
+  describe('EMPTY_CHOICE_CONTENT', () => {
+    it('returns an error for each choice with empty content', () => {
+      const state = makeState({
+        choices: [
+          makeAnswer({ id: 'a', content: '', correct: true }),
+          makeAnswer({ id: 'b', content: '  ', correct: false }),
+        ],
+      });
+      const errors = validate(state, QuestionType.SINGLE_SELECT);
+      const contentErrors = errors.filter(e => e.code === ValidationError.EMPTY_CHOICE_CONTENT);
+      expect(contentErrors).toHaveLength(2);
+      expect(contentErrors.map(e => e.id)).toEqual(['a', 'b']);
+    });
+
+    it('does not flag choices with content wrapped in HTML tags', () => {
+      const state = makeState({
+        choices: [
+          makeAnswer({ id: 'a', content: '<strong>Yes</strong>', correct: true }),
+          makeAnswer({ id: 'b', content: 'No', correct: false }),
+        ],
+      });
+      const errors = validate(state, QuestionType.SINGLE_SELECT);
+      expect(errorCodes(errors)).not.toContain(ValidationError.EMPTY_CHOICE_CONTENT);
+    });
+  });
+
+  describe('NO_CORRECT_ANSWER', () => {
+    it('returns error for singleSelect when no choice is correct', () => {
+      const state = makeState({
+        choices: [makeAnswer({ id: 'a', correct: false }), makeAnswer({ id: 'b', correct: false })],
+      });
+      expect(errorCodes(validate(state, QuestionType.SINGLE_SELECT))).toContain(
+        ValidationError.NO_CORRECT_ANSWER,
+      );
+    });
+
+    it('returns error for multiSelect when no choice is correct', () => {
+      const state = makeState({
+        choices: [makeAnswer({ id: 'a', correct: false }), makeAnswer({ id: 'b', correct: false })],
+      });
+      expect(errorCodes(validate(state, QuestionType.MULTI_SELECT))).toContain(
+        ValidationError.NO_CORRECT_ANSWER,
+      );
+    });
+  });
+
+  describe('TOO_MANY_CORRECT_ANSWERS', () => {
+    it('returns error for singleSelect when more than one choice is correct', () => {
+      const state = makeState({
+        choices: [makeAnswer({ id: 'a', correct: true }), makeAnswer({ id: 'b', correct: true })],
+      });
+      expect(errorCodes(validate(state, QuestionType.SINGLE_SELECT))).toContain(
+        ValidationError.TOO_MANY_CORRECT_ANSWERS,
+      );
+    });
+
+    it('does not return error for multiSelect when more than one choice is correct', () => {
+      const state = makeState({
+        choices: [makeAnswer({ id: 'a', correct: true }), makeAnswer({ id: 'b', correct: true })],
+      });
+      expect(errorCodes(validate(state, QuestionType.MULTI_SELECT))).not.toContain(
+        ValidationError.TOO_MANY_CORRECT_ANSWERS,
+      );
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/index.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/index.js
index ec11abe297..2e1c88178f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/index.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/index.js
@@ -1,83 +1,25 @@
 import defineInteraction from '../defineInteraction';
-import { QtiInteraction, QuestionType, BaseType, Cardinality } from '../../constants';
 import ChoiceInteractionEditor from './ChoiceInteractionEditor.vue';
+import { choiceInteractionDescriptor } from './ChoiceInteractionDescriptor';
 
 /**
- * Choice interaction plugin — handles both single-select (max-choices="1")
- * and multi-select (max-choices > 1) via the same <qti-choice-interaction> element.
+ * @typedef {object} ChoiceAnswer
+ * @property {string}  id       - QTI identifier, e.g. "choice_xlqTuVoq"
+ * @property {string}  content  - HTML content of the <qti-simple-choice>
+ * @property {boolean} correct  - Whether this choice is in the correct response
+ * @property {boolean} fixed    - Whether this choice is fixed (round-trip only)
  */
-export default defineInteraction({
-  /** Registry key — matches the QTI 3.0 interaction element tag name. */
-  type: QtiInteraction.CHOICE,
 
-  /** Block-level interaction: occupies its own paragraph in the item body. */
-  placement: 'block',
-
-  /**
-   * All QuestionType values this descriptor can render.
-   * Allows the registry to resolve a descriptor from a selected question type
-   * without re-parsing XML.
-   */
-  questionTypes: [QuestionType.SINGLE_SELECT, QuestionType.MULTI_SELECT],
-
-  /** Vue component rendered inside InteractionSection when this descriptor owns the block. */
-  editorComponent: ChoiceInteractionEditor,
-
-  /**
-   * Types this plugin can absorb when the author switches interaction type.
-   */
-  convertsFrom: [],
-
-  /**
-   * Returns true when this descriptor owns the given interaction element.
-   * @param {Element} el
-   */
-  matches(el) {
-    return el.tagName.toLowerCase() === QtiInteraction.CHOICE;
-  },
-
-  /**
-   * Derives the UI-facing question type from the interaction element.
-   * Reads max-choices: '1' → singleSelect, anything else → multiSelect.
-   * @param {Element} el
-   * @returns {string} One of QuestionType
-   */
-  getQuestionType(el) {
-    return el.getAttribute('max-choices') === '1'
-      ? QuestionType.SINGLE_SELECT
-      : QuestionType.MULTI_SELECT;
-  },
-
-  /**
-   * Defines the structural schema for the response declaration of this interaction.
-   * Returns baseType and cardinality, which can depend on the selected questionType.
-   *
-   * @param {string} questionType
-   * @returns {{ baseType: string, cardinality: string }}
-   */
-  getDeclarationSchema(questionType) {
-    return {
-      baseType: BaseType.IDENTIFIER,
-      cardinality:
-        questionType === QuestionType.SINGLE_SELECT ? Cardinality.SINGLE : Cardinality.MULTIPLE,
-    };
-  },
+/**
+ * @typedef {object} ChoiceState
+ * @property {string}        prompt      - HTML content of <qti-prompt>; default ""
+ * @property {ChoiceAnswer[]} answers
+ * @property {number}        maxChoices  - From max-choices attribute (0 = unlimited)
+ * @property {number}        minChoices  - From min-choices attribute; default 0
+ * @property {boolean}       shuffle     - From shuffle attribute; default false
+ * @property {string}        orientation - From orientation attribute; default "vertical"
+ */
 
-  /**
-   * Extracts a structured state object from the interaction element.
-   * Stub — full parsing is a future task.
-   * @returns {object}
-   */
-  parse() {
-    return {};
-  },
+choiceInteractionDescriptor.editorComponent = ChoiceInteractionEditor;
 
-  /**
-   * Validates the interaction state and returns an array of error strings.
-   * Stub — full validation is a future task.
-   * @returns {string[]}
-   */
-  validate() {
-    return [];
-  },
-});
+export default defineInteraction(choiceInteractionDescriptor);
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/parse.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/parse.js
new file mode 100644
index 0000000000..b91aed1fa8
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/parse.js
@@ -0,0 +1,147 @@
+import { QTIDeclaration } from '../../serialization/qti/QTIDeclaration';
+import { parseXML, getPromptHTML } from '../../serialization/parseItem';
+import { buildXmlNode } from '../../serialization/assembleItem';
+import CorrectResponse from '../../serialization/qti/declarations/correctResponse';
+import { generateRandomSlug } from '../../utils/generateRandomSlug';
+import { Orientation } from '../../constants';
+
+const serializer = new XMLSerializer();
+const RESPONSE_IDENTIFIER = 'RESPONSE';
+
+export function _defaultState() {
+  return {
+    prompt: '',
+    choices: [],
+    maxChoices: 1,
+    minChoices: 0,
+    shuffle: false,
+    orientation: Orientation.VERTICAL,
+  };
+}
+
+export function _extractCorrectIds(declarations) {
+  const ids = new Set();
+  const [declXml] = declarations || [];
+  if (!declXml) return ids;
+
+  try {
+    const declEl = parseXML(declXml).documentElement;
+    const declaration = QTIDeclaration.fromXML(declEl);
+    const correct = declaration.correctResponse;
+    if (correct) {
+      for (const id of correct) ids.add(id);
+    }
+  } catch {
+    // Ignore parse errors
+  }
+  return ids;
+}
+
+export function _parseHtmlFragment(html) {
+  if (!html) return [];
+  if (!html.includes('<')) return [html];
+  try {
+    const fragment = parseXML(`<qti-fragment>${html}</qti-fragment>`);
+    return [...fragment.documentElement.childNodes];
+  } catch {
+    return [html];
+  }
+}
+
+/**
+ * Parse <qti-choice-interaction> body XML + response declarations → ChoiceState.
+ *
+ * @param {string} bodyXml
+ * @param {string[]} responseDeclarations
+ * @returns {object} ChoiceState
+ */
+export function parseChoiceInteraction(bodyXml, responseDeclarations) {
+  if (!bodyXml) return _defaultState();
+
+  let root;
+  try {
+    root = parseXML(bodyXml).documentElement;
+  } catch {
+    return _defaultState();
+  }
+
+  const maxChoices = parseInt(root.getAttribute('max-choices') ?? '0', 10);
+  const minChoices = parseInt(root.getAttribute('min-choices') ?? '0', 10);
+  const shuffle = root.getAttribute('shuffle') === 'true';
+  const orientation = root.getAttribute('orientation') ?? Orientation.VERTICAL;
+  const prompt = getPromptHTML(root);
+
+  const correctIds = _extractCorrectIds(responseDeclarations);
+
+  const choices = [...root.querySelectorAll('qti-simple-choice')].map(el => ({
+    id: el.getAttribute('identifier') || generateRandomSlug('choice'),
+    content: el.innerHTML,
+    correct: correctIds.has(el.getAttribute('identifier') ?? ''),
+    fixed: el.getAttribute('fixed') === 'true',
+  }));
+
+  return { prompt, choices, maxChoices, minChoices, shuffle, orientation };
+}
+
+/**
+ * Serialize ChoiceState → { bodyXml, declarations }.
+ *
+ * @param {object} state - ChoiceState
+ * @param {string} questionType
+ * @param {object} declarationSchema - { baseType: string, cardinality: string }
+ * @returns {{ bodyXml: string, responseDeclarations: string[] }}
+ */
+export function buildChoiceInteractionXML(state, questionType, declarationSchema) {
+  const { prompt, choices, maxChoices, minChoices, shuffle, orientation } = state;
+
+  const attrs = {
+    'response-identifier': RESPONSE_IDENTIFIER,
+    'max-choices': maxChoices,
+    shuffle: String(shuffle),
+    orientation,
+  };
+  if (minChoices > 0) attrs['min-choices'] = minChoices;
+
+  const children = [];
+
+  if (prompt) {
+    children.push(buildXmlNode({ tag: 'qti-prompt', innerHTML: prompt }));
+  }
+
+  for (const choice of choices) {
+    const choiceAttrs = { identifier: choice.id };
+    if (choice.fixed) choiceAttrs.fixed = 'true';
+    children.push(
+      buildXmlNode({
+        tag: 'qti-simple-choice',
+        attrs: choiceAttrs,
+        innerHTML: choice.content,
+      }),
+    );
+  }
+
+  const interactionEl = buildXmlNode({ tag: 'qti-choice-interaction', attrs, children });
+  const bodyXml = serializer.serializeToString(interactionEl);
+
+  const { cardinality, baseType } = declarationSchema;
+  const declaration = new QTIDeclaration({
+    identifier: RESPONSE_IDENTIFIER,
+    baseType,
+    cardinality,
+    tag: 'qti-response-declaration',
+  });
+  const correctIds = choices.filter(a => a.correct).map(a => a.id);
+  new CorrectResponse(correctIds, declaration);
+
+  const declarationXml = serializer.serializeToString(declaration.getXML());
+  return { bodyXml, responseDeclarations: [declarationXml] };
+}
+
+/**
+ * Strips HTML tags from a string.
+ * @param {string} html
+ * @returns {string}
+ */
+export function stripTags(html) {
+  return (html ?? '').replace(/<[^>]*>/g, '');
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/validation.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/validation.js
new file mode 100644
index 0000000000..34ef1c17de
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/validation.js
@@ -0,0 +1,48 @@
+import { QuestionType, ValidationError } from '../../constants';
+import { stripTags } from './parse';
+
+/**
+ * Validate ChoiceState → ValidationError[].
+ *
+ * @param {object} state - ChoiceState
+ * @param {string} questionType
+ * @returns {Array<{ code: string, id?: string }>}
+ */
+export function validateChoiceInteraction(state, questionType) {
+  const errors = [];
+  const { prompt, choices } = state;
+
+  if (!stripTags(prompt).trim()) {
+    errors.push({ code: ValidationError.PROMPT_REQUIRED });
+  }
+
+  // Map each normalised text → the id of the first choice that had that text.
+  // When a later choice matches, both ids are flagged as duplicates in O(1).
+  const firstSeenId = new Map();
+  const duplicateIds = new Set();
+
+  for (const choice of choices) {
+    const textContent = stripTags(choice.content).trim();
+    if (!textContent) {
+      errors.push({ code: ValidationError.EMPTY_CHOICE_CONTENT, id: choice.id });
+    } else if (firstSeenId.has(textContent)) {
+      duplicateIds.add(firstSeenId.get(textContent));
+      duplicateIds.add(choice.id);
+    } else {
+      firstSeenId.set(textContent, choice.id);
+    }
+  }
+
+  for (const duplicateId of duplicateIds) {
+    errors.push({ code: ValidationError.DUPLICATE_CHOICE_CONTENT, id: duplicateId });
+  }
+
+  const correctCount = choices.filter(a => a.correct).length;
+  if (correctCount === 0) {
+    errors.push({ code: ValidationError.NO_CORRECT_ANSWER });
+  } else if (questionType === QuestionType.SINGLE_SELECT && correctCount > 1) {
+    errors.push({ code: ValidationError.TOO_MANY_CORRECT_ANSWERS });
+  }
+
+  return errors;
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js
index ae910c7c6c..c8cf662926 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js
@@ -10,8 +10,9 @@ const REQUIRED_KEYS = [
   'convertsFrom',
   'matches',
   'getQuestionType',
-  'getDeclarationSchema',
+  'getResponseDeclarationSchema',
   'parse',
+  'buildXML',
   'validate',
 ];
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
index 52ca0014d6..0e98cccf29 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -37,6 +37,22 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     message: 'Multiple Choice',
     context: 'Display name for a multiple-select question type',
   },
+  questionLabel: {
+    message: 'Question',
+    context: 'Section header for the question prompt',
+  },
+  answersLabel: {
+    message: 'Answer options',
+    context: 'Section header above choice options',
+  },
+  answersDescriptionSingleChoice: {
+    message: 'Select one correct answer',
+    context: 'Instruction subtitle above single-choice options',
+  },
+  answersDescriptionMultipleChoice: {
+    message: 'Select all correct answers',
+    context: 'Instruction subtitle above multiple-choice options',
+  },
   orderLabel: {
     message: 'Order',
     context: 'Display name for an order question type',
@@ -81,4 +97,44 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     message: 'Add question below',
     context: 'Action to add a new question below the current one',
   },
+  addChoiceBtn: {
+    message: 'Add choice',
+    context: 'Button that appends a new answer choice',
+  },
+  deleteChoiceBtn: {
+    message: 'Delete choice',
+    context: 'Accessible label for the delete-choice icon button',
+  },
+  moveChoiceUpBtn: {
+    message: 'Move choice up',
+    context: 'Accessible label for the move-up icon button',
+  },
+  moveChoiceDownBtn: {
+    message: 'Move choice down',
+    context: 'Accessible label for the move-down icon button',
+  },
+  markCorrectLabel: {
+    message: 'Mark as correct answer',
+    context: 'Accessible label for radio / checkbox that marks a choice as correct',
+  },
+  errorPromptRequired: {
+    message: 'Question is required',
+    context: 'Validation error shown when the prompt is empty',
+  },
+  errorNoCorrectAnswer: {
+    message: 'Choose a correct answer',
+    context: 'Validation error when no choice is marked correct',
+  },
+  errorTooManyCorrectAnswers: {
+    message: 'Only one correct answer is allowed for single-choice questions.',
+    context: 'Validation error when multiple choices are marked correct for single-select',
+  },
+  errorEmptyChoiceContent: {
+    message: 'Answer cannot be blank',
+    context: 'Validation error when an answer option is empty',
+  },
+  errorDuplicateChoiceContent: {
+    message: 'Duplicate answer options are not allowed',
+    context: 'Validation error when two or more answer options have identical content',
+  },
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/assembleItem.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/assembleItem.spec.js
index 24357fe5c7..eec8a4c228 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/assembleItem.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/assembleItem.spec.js
@@ -74,6 +74,15 @@ describe('assembleItem', () => {
       const values = [...parent.getElementsByTagName('qti-value')].map(n => n.textContent);
       expect(values).toEqual(['A', 'B']);
     });
+
+    it('imports element children from another XML document', () => {
+      const child = new DOMParser().parseFromString(
+        '<qti-value>ChoiceA</qti-value>',
+        'text/xml',
+      ).documentElement;
+      const parent = buildXmlNode({ tag: 'qti-correct-response', children: [child] });
+      expect(parent.getElementsByTagName('qti-value')[0].textContent).toBe('ChoiceA');
+    });
   });
 
   describe('mixed children', () => {
@@ -108,4 +117,30 @@ describe('assembleItem', () => {
       expect(xml).toContain('ChoiceA');
     });
   });
+
+  describe('innerHTML option', () => {
+    it('appends plain text via innerHTML', () => {
+      const node = buildXmlNode({ tag: 'qti-simple-choice', innerHTML: 'Mercury' });
+      expect(node.textContent).toBe('Mercury');
+    });
+
+    it('appends rich markup via innerHTML', () => {
+      const node = buildXmlNode({
+        tag: 'qti-simple-choice',
+        innerHTML: '<p>Option <strong>A</strong></p>',
+      });
+      expect(node.querySelector('strong').textContent).toBe('A');
+    });
+
+    it('handles empty innerHTML without throwing', () => {
+      const node = buildXmlNode({ tag: 'qti-simple-choice', innerHTML: '' });
+      expect(node.childNodes.length).toBe(0);
+    });
+
+    it('throws when both children and innerHTML are provided', () => {
+      expect(() =>
+        buildXmlNode({ tag: 'qti-simple-choice', children: ['x'], innerHTML: '<p>y</p>' }),
+      ).toThrow('mutually exclusive');
+    });
+  });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/parseItem.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/parseItem.spec.js
index cf8e63f6b9..b57f09919e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/parseItem.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/__tests__/parseItem.spec.js
@@ -1,4 +1,6 @@
 import { parseXML, parseItem } from '../parseItem';
+/* eslint-disable jest-dom/prefer-to-have-attribute, jest-dom/prefer-to-have-text-content */
+import { assembleItemXml } from '../assembleItem';
 import { VALID_CHOICE_ITEM_DOCUMENT, TWO_INTERACTIONS_DOCUMENT } from '../../utils/testingFixtures';
 
 // ---------------------------------------------------------------------------
@@ -110,3 +112,65 @@ describe('parseItem — response declaration matching', () => {
     expect(model.interactions[0].responseDeclarations).toHaveLength(0);
   });
 });
+
+// ---------------------------------------------------------------------------
+// assembleItemXml — XML attribute escaping (regression)
+// ---------------------------------------------------------------------------
+
+describe('assembleItemXml — attribute escaping', () => {
+  const BASE = {
+    bodyXml: '<qti-choice-interaction response-identifier="RESPONSE" max-choices="1"/>',
+    responseDeclarations: [],
+  };
+
+  it('escapes & in the title so the output is well-formed XML', () => {
+    const xml = assembleItemXml({
+      ...BASE,
+      identifier: 'item-1',
+      title: 'Math & Science',
+      language: 'en',
+    });
+    expect(xml).toContain('title="Math &amp; Science"');
+    expect(() =>
+      new DOMParser().parseFromString(xml, 'text/xml').querySelector('parsererror'),
+    ).not.toThrow();
+    expect(
+      new DOMParser().parseFromString(xml, 'text/xml').querySelector('parsererror'),
+    ).toBeNull();
+  });
+
+  it('escapes " in the title so the attribute value is not terminated early', () => {
+    const xml = assembleItemXml({
+      ...BASE,
+      identifier: 'item-1',
+      title: 'The "Quiz"',
+      language: 'en',
+    });
+    expect(xml).toContain('title="The &quot;Quiz&quot;"');
+    expect(
+      new DOMParser().parseFromString(xml, 'text/xml').querySelector('parsererror'),
+    ).toBeNull();
+  });
+
+  it('escapes < in the identifier so the tag is not corrupted', () => {
+    const xml = assembleItemXml({ ...BASE, identifier: 'a<b', title: 'T', language: 'en' });
+    expect(xml).toContain('identifier="a&lt;b"');
+    expect(
+      new DOMParser().parseFromString(xml, 'text/xml').querySelector('parsererror'),
+    ).toBeNull();
+  });
+
+  it('produces a round-trippable document when all fields are clean', () => {
+    const xml = assembleItemXml({
+      ...BASE,
+      identifier: 'item-clean',
+      title: 'Plain Title',
+      language: 'en',
+    });
+    const doc = new DOMParser().parseFromString(xml, 'text/xml');
+    expect(doc.querySelector('parsererror')).toBeNull();
+    // querySelector on an XML document returns an XMLElement, not HTMLElement,
+    // so jest-dom's toHaveAttribute cannot be used here — use getAttribute instead.
+    expect(doc.querySelector('qti-assessment-item').getAttribute('title')).toBe('Plain Title');
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js
index 693c84f2b3..7f00694e3f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js
@@ -9,18 +9,26 @@
  */
 
 const xmlDoc = new DOMParser().parseFromString('<root/>', 'text/xml');
+const serializer = new XMLSerializer();
 
 /**
  * Build an XML element node.
  *
  * @param {object} options
- * @param {string}            options.tag      - Element tag name (e.g. 'qti-response-declaration')
- * @param {Object.<string,*>} [options.attrs]    - Attribute name→value pairs;
+ * @param {string}            options.tag - Element tag name (e.g. 'qti-response-declaration')
+ * @param {Object.<string,*>}  [options.attrs]    - Attribute name→value pairs;
  *                                                  null/undefined values are skipped
- * @param {Array.<Node|string>} [options.children] - Child nodes or plain strings
+ * @param {Array.<Node|string>} [options.children] - Child nodes or plain strings; mutually
+ *                                                  exclusive with innerHTML
+ * @param {string}             [options.innerHTML] - Raw HTML/XML string to parse and append
+ *                                                  as children; mutually exclusive with children
  * @returns {Element}
  */
-export function buildXmlNode({ tag, attrs = {}, children = [] }) {
+export function buildXmlNode({ tag, attrs = {}, children, innerHTML }) {
+  if (children !== undefined && innerHTML !== undefined) {
+    throw new Error('buildXmlNode: "children" and "innerHTML" are mutually exclusive');
+  }
+
   const el = xmlDoc.createElement(tag);
 
   for (const [name, value] of Object.entries(attrs)) {
@@ -29,13 +37,79 @@ export function buildXmlNode({ tag, attrs = {}, children = [] }) {
     }
   }
 
-  for (const child of children) {
-    if (typeof child === 'string') {
-      el.appendChild(xmlDoc.createTextNode(child));
-    } else {
-      el.appendChild(child);
+  if (innerHTML !== undefined) {
+    const parsed = new DOMParser().parseFromString(
+      `<qti-fragment>${innerHTML}</qti-fragment>`,
+      'text/xml',
+    );
+    for (const child of [...parsed.documentElement.childNodes]) {
+      el.appendChild(xmlDoc.importNode(child, true));
+    }
+  } else {
+    for (const child of children ?? []) {
+      if (typeof child === 'string') {
+        el.appendChild(xmlDoc.createTextNode(child));
+      } else {
+        // DOM nodes created outside this module (e.g. by a separate DOMParser call
+        // or in a browser document) have a different ownerDocument. Appending a
+        // foreign node throws a HierarchyRequestError in some environments, so we
+        // adopt it into xmlDoc first via importNode.
+        const childNode = child.ownerDocument === xmlDoc ? child : xmlDoc.importNode(child, true);
+        el.appendChild(childNode);
+      }
     }
   }
 
   return el;
 }
+
+/**
+ * Assembles a full QTI assessment-item XML string from its constituent parts.
+ *
+ * This is the write-path complement of parseItem. Call it whenever an interaction
+ * editor emits an updated interaction to produce the raw_data stored on the item.
+ * Attributes are set via setAttribute so the DOM handles all escaping — no manual
+ * XML-escaping helpers are required.
+ *
+ * @param {object}   params
+ * @param {string}   params.identifier            - Item identifier attribute
+ * @param {string}   params.title                 - Item title attribute
+ * @param {string}   params.language              - xml:lang attribute value
+ * @param {string}   params.bodyXml               - Serialized interaction element XML string
+ * @param {string[]} params.responseDeclarations  - Array of serialized declaration XML strings
+ * @returns {string} Full QTI XML string
+ */
+export function assembleItemXml({ identifier, title, language, bodyXml, responseDeclarations }) {
+  const declParser = new DOMParser();
+
+  // Parse each serialized declaration string back into a DOM node so it can be
+  // adopted into the assessment item tree via buildXmlNode's importNode logic.
+  const declNodes = (responseDeclarations || []).map(declXml => {
+    const doc = declParser.parseFromString(declXml, 'text/xml');
+    return doc.documentElement;
+  });
+
+  // Parse the interaction body XML into a DOM node.
+  const bodyDoc = declParser.parseFromString(bodyXml || '<qti-item-body/>', 'text/xml');
+  const interactionNode = bodyDoc.documentElement;
+
+  const itemBodyNode = buildXmlNode({
+    tag: 'qti-item-body',
+    children: [interactionNode],
+  });
+
+  const assessmentItemNode = buildXmlNode({
+    tag: 'qti-assessment-item',
+    attrs: {
+      xmlns: 'http://www.imsglobal.org/xsd/imsqtiasi_v3p0',
+      identifier: identifier || 'item',
+      title: title || '',
+      adaptive: 'false',
+      'time-dependent': 'false',
+      'xml:lang': language || 'en',
+    },
+    children: [...declNodes, itemBodyNode],
+  });
+
+  return `<?xml version="1.0" encoding="UTF-8"?>\n${serializer.serializeToString(assessmentItemNode)}`;
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/parseItem.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/parseItem.js
index 9a44a6eef7..79bb35e4f8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/parseItem.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/parseItem.js
@@ -22,6 +22,20 @@ export function parseXML(xmlString) {
   return doc;
 }
 
+/**
+ * Extract the inner HTML of the first <qti-prompt> child of an interaction element.
+ * Returns an empty string when no prompt element is present.
+ * Using innerHTML (not textContent) preserves rich inline markup (<p>, <strong>, etc.)
+ * for round-trip fidelity.
+ *
+ * @param {Element} interactionEl - The <qti-*-interaction> root element
+ * @returns {string}
+ */
+export function getPromptHTML(interactionEl) {
+  const promptEl = interactionEl.querySelector('qti-prompt');
+  return promptEl ? promptEl.innerHTML : '';
+}
+
 /**
  * Parses a raw QTI XML string into the structured ItemModel.
  *
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/QTIDeclaration.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/QTIDeclaration.js
index 3b028d22a5..9941b80309 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/QTIDeclaration.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/QTIDeclaration.js
@@ -8,7 +8,6 @@
  *
  */
 import { buildXmlNode } from '../assembleItem.js';
-import { getDescriptorForQuestionType } from '../../interactions/index.js';
 import { BaseType, Cardinality } from '../../constants.js';
 import { declarationParsers, CAPABILITY } from './declarations/index.js';
 
@@ -341,18 +340,27 @@ export class QTIDeclaration {
   // ---------------------------------------------------------------------------
 
   /**
-   * Create a blank QTIDeclaration shaped for the given question type.
-   * Delegates to the factory registered by each interaction module.
+   * Create a blank QTIDeclaration from an interaction descriptor's schema.
    *
-   * @param {string} questionType - One of QuestionType.* (must have a registered factory)
+   * QTIDeclaration deliberately does not import the interaction registry. Callers
+   * that already know the relevant descriptor can pass it in, keeping schema
+   * ownership with the interaction while preserving a one-way dependency graph.
+   *
+   * @param {{
+   *   getResponseDeclarationSchema: function(string, *): { baseType: string, cardinality: string },
+   * }} descriptor
+   * @param {string} questionType - One of QuestionType.*
    * @param {string} [identifier] - Response identifier, defaults to 'RESPONSE'
-   * @param {*}      [itemData]   - Optional item data forwarded to the factory
+   * @param {*}      [itemData]   - Optional item data forwarded to the descriptor
    * @returns {QTIDeclaration}
    */
-  static forType(questionType, identifier = 'RESPONSE', itemData = null) {
-    const descriptor = getDescriptorForQuestionType(questionType);
-    if (!descriptor) throw new Error(`Unknown question type: ${questionType}`);
-    const schema = descriptor.getDeclarationSchema(questionType, itemData);
+  static fromInteractionDescriptor(
+    descriptor,
+    questionType,
+    identifier = 'RESPONSE',
+    itemData = null,
+  ) {
+    const schema = descriptor.getResponseDeclarationSchema(questionType, itemData);
     return new QTIDeclaration({
       identifier,
       baseType: schema.baseType,
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/__tests__/QTIDeclaration.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/__tests__/QTIDeclaration.spec.js
index 81d257bf4d..37430db6a8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/__tests__/QTIDeclaration.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/qti/__tests__/QTIDeclaration.spec.js
@@ -59,6 +59,25 @@ describe('QTIDeclaration.registerCapability', () => {
   });
 });
 
+describe('QTIDeclaration.fromInteractionDescriptor', () => {
+  it('creates a declaration from descriptor-owned schema', () => {
+    const descriptor = {
+      getResponseDeclarationSchema: jest.fn(() => ({
+        baseType: 'identifier',
+        cardinality: 'multiple',
+      })),
+    };
+
+    const d = QTIDeclaration.fromInteractionDescriptor(descriptor, 'multiSelect', 'RESPONSE');
+
+    expect(descriptor.getResponseDeclarationSchema).toHaveBeenCalledWith('multiSelect', null);
+    expect(d.identifier).toBe('RESPONSE');
+    expect(d.baseType).toBe('identifier');
+    expect(d.cardinality).toBe('multiple');
+    expect(d.tag).toBe('qti-response-declaration');
+  });
+});
+
 describe('QTIDeclaration.fromXML', () => {
   it('reads identifier from XML', () => {
     const d = QTIDeclaration.fromXML(parseXML(SINGLE_SELECT_DECLARATION));
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/useQTIEditorActions.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/useQTIEditorActions.js
index a543efb9b3..cd3b77c29a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/useQTIEditorActions.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/useQTIEditorActions.js
@@ -24,13 +24,13 @@ export default function useQTIEditorActions({
 
   function getToolbarActions(item, idx) {
     const result = [];
-    const isEditMode = activeId.value === item.id;
+    const isEditMode = activeId.value === item.assessment_id;
 
     result.push({
       id: 'edit',
       icon: 'edit',
       label: toolbarLabelEdit$(),
-      handler: () => openItem(item.id),
+      handler: () => openItem(item.assessment_id),
       collapsed: false,
       disabled: isEditMode,
     });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/__tests__/generateRandomSlug.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/__tests__/generateRandomSlug.spec.js
new file mode 100644
index 0000000000..f26363dadc
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/__tests__/generateRandomSlug.spec.js
@@ -0,0 +1,20 @@
+import { generateRandomSlug } from '../generateRandomSlug';
+
+describe('generateRandomSlug', () => {
+  it('returns a string starting with the given prefix', () => {
+    expect(generateRandomSlug('choice')).toMatch(/^choice_/);
+    expect(generateRandomSlug('response')).toMatch(/^response_/);
+  });
+
+  it('appends exactly 8 alphanumeric characters after the prefix', () => {
+    const result = generateRandomSlug('choice');
+    const suffix = result.replace('choice_', '');
+    expect(suffix).toHaveLength(8);
+    expect(suffix).toMatch(/^[a-z0-9]{8}$/);
+  });
+
+  it('generates unique values on successive calls', () => {
+    const results = new Set(Array.from({ length: 50 }, () => generateRandomSlug('x')));
+    expect(results.size).toBe(50);
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/generateRandomSlug.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/generateRandomSlug.js
new file mode 100644
index 0000000000..56170a5703
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/generateRandomSlug.js
@@ -0,0 +1,10 @@
+/**
+ * Generate a QTI-safe identifier with the given prefix.
+ *
+ * @param {string} prefix
+ * @returns {string}
+ */
+export function generateRandomSlug(prefix) {
+  const slug = Math.random().toString(36).slice(2, 10);
+  return `${prefix}_${slug}`;
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
index 7323d4366b..f32d992478 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/utils/testingFixtures.js
@@ -1,6 +1,4 @@
-// ---------------------------------------------------------------------------
 // Centralized QTI Mock XML Fixtures for Unit Tests
-// ---------------------------------------------------------------------------
 
 export const CHOICE_SINGLE_SELECT_XML = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="1">
   <qti-prompt>Which planet is closest to the Sun?</qti-prompt>
@@ -24,9 +22,18 @@ export const UNKNOWN_INTERACTION_XML = `<qti-unknown-interaction response-identi
   <qti-prompt>Unknown.</qti-prompt>
 </qti-unknown-interaction>`;
 
-// ---------------------------------------------------------------------------
+export const CHOICE_SINGLE_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="single" base-type="identifier">
+  <qti-correct-response><qti-value>mercury</qti-value></qti-correct-response>
+</qti-response-declaration>`;
+
+export const CHOICE_MULTI_DECL_XML = `<qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="identifier">
+  <qti-correct-response>
+    <qti-value>a</qti-value>
+    <qti-value>c</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"?>
 <qti-assessment-item
@@ -88,3 +95,14 @@ export const mockInteractionBlock = bodyXml => ({
   bodyXml,
   responseDeclarations: [],
 });
+
+/**
+ * Wraps a snippet of interaction XML and a declaration into a mock 'block' object
+ * @param {string} bodyXml
+ * @param {string} declarationXml
+ * @returns {object}
+ */
+export const mockInteractionBlockWithDecl = (bodyXml, declarationXml) => ({
+  bodyXml,
+  responseDeclarations: [declarationXml],
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
index c4e61b5c23..590ce87a6f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
@@ -331,12 +331,14 @@
       'Helvetica Neue',
       Arial,
       sans-serif;
+    background-color: white;
     border: 1px solid #e1e5e9;
   }
 
   .editor-container.view-mode {
     min-height: 0;
     pointer-events: none;
+    background-color: transparent;
     border: 0;
   }