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..4bf3efb30f 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,8 @@
       :interaction="interaction"
       :mode="mode"
       :showAnswers="showAnswers"
+      @update:bodyXml="xml => $emit('update:bodyXml', xml)"
+      @update:responseDeclarations="decls => $emit('update:responseDeclarations', decls)"
     />
   </div>
 
@@ -67,7 +69,7 @@
       },
     },
 
-    emits: ['update:questionType'],
+    emits: ['update:questionType', 'update:bodyXml', 'update:responseDeclarations'],
   };
 
 </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..27f4748601 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,8 @@
         :mode="mode"
         :showAnswers="showAnswers"
         @update:questionType="type => (currentQuestionType = type)"
+        @update:bodyXml="onBodyXmlUpdate"
+        @update:responseDeclarations="onResponseDeclarationsUpdate"
       />
       <p
         v-else
@@ -63,6 +65,7 @@
   import { qtiEditorStrings } from '../../qtiEditorStrings';
   import { QuestionType } from '../../constants';
   import useQtiItem from '../../composables/useQtiItem';
+  import { reassembleItemXml } from '../../serialization/parseItem';
   import InteractionSection from '../InteractionSection/index.vue';
 
   export default {
@@ -70,7 +73,7 @@
 
     components: { InteractionSection },
 
-    setup(props) {
+    setup(props, { emit }) {
       const {
         questionNumberLabel$,
         questionNumberAndTypeLabel$,
@@ -79,7 +82,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 +119,38 @@
         }),
       );
 
+      /**
+       * Track the current bodyXml and responseDeclarations for the interaction.
+       * Initialized from the parsed item; updated when the editor emits changes.
+       */
+      const currentBodyXml = ref(
+        interactions.value.length > 0 ? interactions.value[0].bodyXml : '',
+      );
+      const currentResponseDeclarations = ref(
+        interactions.value.length > 0 ? interactions.value[0].responseDeclarations : [],
+      );
+
+      function onBodyXmlUpdate(xml) {
+        currentBodyXml.value = xml;
+        emitRawData();
+      }
+
+      function onResponseDeclarationsUpdate(decls) {
+        currentResponseDeclarations.value = decls;
+        emitRawData();
+      }
+
+      function emitRawData() {
+        const newRawData = reassembleItemXml({
+          identifier: identifier.value,
+          title: title.value,
+          language: language.value,
+          bodyXml: currentBodyXml.value,
+          responseDeclarations: currentResponseDeclarations.value,
+        });
+        emit('update:rawData', newRawData);
+      }
+
       return {
         currentQuestionType,
         interactions,
@@ -123,6 +158,8 @@
         questionNumberAndTypeLabel,
         closeBtnLabel$,
         questionContentPlaceholder$,
+        onBodyXmlUpdate,
+        onResponseDeclarationsUpdate,
       };
     },
 
@@ -158,7 +195,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..dc98110055
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/ValidationMessage/index.vue
@@ -0,0 +1,40 @@
+<template>
+
+  <p
+    v-if="show"
+    class="validation-message"
+    role="alert"
+    :style="{ color: $themePalette.red.v_700 }"
+  >
+    <slot></slot>
+  </p>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'ValidationMessage',
+
+    props: {
+      /** Whether the message is currently visible. */
+      show: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .validation-message {
+    margin: 2px 0 0;
+    font-size: 12px;
+    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..0b48c4d064
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useChoiceInteraction.spec.js
@@ -0,0 +1,197 @@
+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(answers, questionType = QuestionType.SINGLE_SELECT) {
+  const maxChoices = questionType === QuestionType.SINGLE_SELECT ? 1 : 2;
+  const correctIds = answers.filter(a => a.correct).map(a => a.id);
+
+  const bodyXml = `<qti-choice-interaction response-identifier="RESPONSE" max-choices="${maxChoices}">
+    ${answers.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(answers, questionType = QuestionType.SINGLE_SELECT) {
+  const qt = ref(questionType);
+  const block = makeBlock(answers, questionType);
+  return { qt, ...useChoiceInteraction(block, qt) };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('useChoiceInteraction', () => {
+  describe('addChoice()', () => {
+    it('appends a new answer to the list', () => {
+      const { state, addChoice } = setup([
+        makeAnswer({ id: 'a', content: 'A' }),
+        makeAnswer({ id: 'b', content: 'B' }),
+      ]);
+      addChoice();
+      expect(state.value.answers).toHaveLength(3);
+    });
+
+    it('new answer has a generated "choice_" identifier', () => {
+      const { state, addChoice } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      addChoice();
+      const newAnswer = state.value.answers[2];
+      expect(newAnswer.id).toMatch(/^choice_[a-z0-9]{8}$/);
+    });
+
+    it('new answer has empty content and correct: false', () => {
+      const { state, addChoice } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      addChoice();
+      const newAnswer = state.value.answers[2];
+      expect(newAnswer.content).toBe('');
+      expect(newAnswer.correct).toBe(false);
+    });
+  });
+
+  describe('removeChoice()', () => {
+    it('removes the answer with the given id', () => {
+      const { state, removeChoice } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      removeChoice('a');
+      expect(state.value.answers.find(a => a.id === 'a')).toBeUndefined();
+    });
+
+    it('is a no-op when only one answer remains', () => {
+      const { state, removeChoice } = setup([makeAnswer({ id: 'a' })]);
+      removeChoice('a');
+      expect(state.value.answers).toHaveLength(1);
+    });
+  });
+
+  describe('moveChoiceUp()', () => {
+    it('swaps answer with the previous one', () => {
+      const { state, moveChoiceUp } = setup([
+        makeAnswer({ id: 'a' }),
+        makeAnswer({ id: 'b' }),
+        makeAnswer({ id: 'c' }),
+      ]);
+      moveChoiceUp('b');
+      expect(state.value.answers.map(a => a.id)).toEqual(['b', 'a', 'c']);
+    });
+
+    it('is a no-op when the answer is first', () => {
+      const { state, moveChoiceUp } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      moveChoiceUp('a');
+      expect(state.value.answers.map(a => a.id)).toEqual(['a', 'b']);
+    });
+  });
+
+  describe('moveChoiceDown()', () => {
+    it('swaps answer with the next one', () => {
+      const { state, moveChoiceDown } = setup([
+        makeAnswer({ id: 'a' }),
+        makeAnswer({ id: 'b' }),
+        makeAnswer({ id: 'c' }),
+      ]);
+      moveChoiceDown('b');
+      expect(state.value.answers.map(a => a.id)).toEqual(['a', 'c', 'b']);
+    });
+
+    it('is a no-op when the answer is last', () => {
+      const { state, moveChoiceDown } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      moveChoiceDown('b');
+      expect(state.value.answers.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.answers.find(a => a.id === 'b').correct).toBe(true);
+      expect(state.value.answers.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.answers.find(a => a.id === 'b').correct).toBe(true);
+      expect(state.value.answers.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.answers.find(a => a.id === 'a').correct).toBe(false);
+      expect(state.value.answers.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 answer only', () => {
+      const { state, setChoiceContent } = setup([
+        makeAnswer({ id: 'a', content: 'Old' }),
+        makeAnswer({ id: 'b', content: 'Unchanged' }),
+      ]);
+      setChoiceContent('a', 'New content');
+      expect(state.value.answers.find(a => a.id === 'a').content).toBe('New content');
+      expect(state.value.answers.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);
+    });
+  });
+
+  describe('setOrientation()', () => {
+    it('updates the orientation field', () => {
+      const { state, setOrientation } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      setOrientation('horizontal');
+      expect(state.value.orientation).toBe('horizontal');
+    });
+  });
+
+  describe('setMaxChoices()', () => {
+    it('updates the maxChoices field', () => {
+      const { state, setMaxChoices } = setup([makeAnswer({ id: 'a' }), makeAnswer({ id: 'b' })]);
+      setMaxChoices(3);
+      expect(state.value.maxChoices).toBe(3);
+    });
+  });
+});
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..0196a9c215
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteraction.spec.js
@@ -0,0 +1,139 @@
+import { ref } 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/>', declarations: ['<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 declarations are computed from buildXML', () => {
+    const descriptor = makeDescriptor({
+      buildReturn: { bodyXml: '<body/>', declarations: ['<d1/>', '<d2/>'] },
+    });
+    const questionType = ref('singleSelect');
+
+    const { bodyXml, declarations } = useInteraction(
+      descriptor,
+      { bodyXml: '', responseDeclarations: [] },
+      questionType,
+    );
+
+    expect(bodyXml.value).toBe('<body/>');
+    expect(declarations.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}`, declarations: [] })),
+      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');
+  });
+});
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..8f365dbb88
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useChoiceInteraction.js
@@ -0,0 +1,118 @@
+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) {
+  // Use the import-safe descriptor core — it owns parse/buildXML/validate schema
+  // without depending on choice/index.js or ChoiceInteractionEditor.vue.
+  const base = useInteraction(choiceInteractionDescriptor, interactionBlock, questionType);
+  const { state } = base;
+
+  // ---------------------------------------------------------------------------
+  // Structural mutations
+  // ---------------------------------------------------------------------------
+
+  function addChoice() {
+    state.value = {
+      ...state.value,
+      answers: [
+        ...state.value.answers,
+        { id: generateRandomSlug('choice'), content: '', correct: false, fixed: false },
+      ],
+    };
+  }
+
+  function removeChoice(id) {
+    if (state.value.answers.length <= 1) return;
+    state.value = {
+      ...state.value,
+      answers: state.value.answers.filter(a => a.id !== id),
+    };
+  }
+
+  function moveChoiceUp(id) {
+    const answers = [...state.value.answers];
+    const idx = answers.findIndex(a => a.id === id);
+    if (idx <= 0) return;
+    [answers[idx - 1], answers[idx]] = [answers[idx], answers[idx - 1]];
+    state.value = { ...state.value, answers };
+  }
+
+  function moveChoiceDown(id) {
+    const answers = [...state.value.answers];
+    const idx = answers.findIndex(a => a.id === id);
+    if (idx === -1 || idx >= answers.length - 1) return;
+    [answers[idx], answers[idx + 1]] = [answers[idx + 1], answers[idx]];
+    state.value = { ...state.value, answers };
+  }
+
+  /**
+   * Toggle the correct flag for a single choice.
+   *
+   * singleSelect: clears all others and sets only the target to correct.
+   * multiSelect:  toggles only the target answer's correct field.
+   */
+  function toggleCorrectChoice(id) {
+    state.value = {
+      ...state.value,
+      answers: state.value.answers.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,
+      answers: state.value.answers.map(a => (a.id === id ? { ...a, content: html } : a)),
+    };
+  }
+
+  function setShuffle(val) {
+    state.value = { ...state.value, shuffle: val };
+  }
+
+  function setOrientation(val) {
+    state.value = { ...state.value, orientation: val };
+  }
+
+  function setMaxChoices(n) {
+    state.value = { ...state.value, maxChoices: n };
+  }
+
+  return {
+    ...base,
+    addChoice,
+    removeChoice,
+    moveChoiceUp,
+    moveChoiceDown,
+    toggleCorrectChoice,
+    setPrompt,
+    setChoiceContent,
+    setShuffle,
+    setOrientation,
+    setMaxChoices,
+  };
+}
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..6259490dc6
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteraction.js
@@ -0,0 +1,46 @@
+import { ref, computed } from 'vue';
+
+/**
+ * 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.
+ *
+ * @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>,
+ *   declarations: 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 built = computed(() => {
+    if (!questionType.value) return { bodyXml: '', declarations: [] };
+    return descriptor.buildXML(state.value, questionType.value);
+  });
+
+  const bodyXml = computed(() => built.value.bodyXml);
+  const declarations = computed(() => built.value.declarations);
+
+  // Errors start empty — never shown automatically so authors aren't startled on first load.
+  const errors = ref([]);
+
+  function runValidation() {
+    errors.value = descriptor.validate(state.value, questionType.value);
+  }
+
+  return { state, bodyXml, declarations, errors, runValidation };
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
index 2dca90936c..4169f4f783 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
@@ -73,3 +73,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',
+  TOO_FEW_CHOICES: 'TOO_FEW_CHOICES',
+});
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..5829df482d 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
@@ -11,6 +11,7 @@ const makeValidDescriptor = (overrides = {}) => ({
   getQuestionType: () => null,
   getDeclarationSchema: () => ({ baseType: 'string', cardinality: 'single' }),
   parse: () => ({}),
+  buildXML: () => ({ bodyXml: '', declarations: [] }),
   validate: () => [],
   ...overrides,
 });
@@ -31,6 +32,7 @@ describe('defineInteraction', () => {
     'getQuestionType',
     'getDeclarationSchema',
     '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..573b70d458
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/ChoiceInteractionDescriptor.js
@@ -0,0 +1,241 @@
+import {
+  QtiInteraction,
+  QuestionType,
+  BaseType,
+  Cardinality,
+  ValidationError,
+} from '../../constants';
+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';
+
+/**
+ * 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 max-choices: '1' → singleSelect, anything else → multiSelect.
+   * @param {Element} el
+   * @returns {string}
+   */
+  getQuestionType(el) {
+    return el.getAttribute('max-choices') === '1'
+      ? QuestionType.SINGLE_SELECT
+      : QuestionType.MULTI_SELECT;
+  }
+
+  /**
+   * @param {string} questionType
+   * @returns {{ baseType: string, cardinality: string }}
+   */
+  getDeclarationSchema(questionType) {
+    return {
+      baseType: BaseType.IDENTIFIER,
+      cardinality:
+        questionType === QuestionType.SINGLE_SELECT ? Cardinality.SINGLE : Cardinality.MULTIPLE,
+    };
+  }
+
+  /**
+   * Convenience: create a blank response declaration using this descriptor's schema.
+   * @param {string} questionType
+   * @param {string} [identifier]
+   * @returns {QTIDeclaration}
+   */
+  createDeclaration(questionType, identifier = 'RESPONSE') {
+    return QTIDeclaration.fromInteractionDescriptor(this, questionType, identifier);
+  }
+
+  /**
+   * Parse <qti-choice-interaction> body XML + response declarations → ChoiceState.
+   *
+   * @param {string} bodyXml
+   * @param {string[]} responseDeclarations
+   * @returns {object} ChoiceState
+   */
+  parse(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') ?? 'vertical';
+    const prompt = getPromptHTML(root);
+
+    const correctIds = _extractCorrectIds(responseDeclarations);
+
+    const answers = [...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, answers, maxChoices, minChoices, shuffle, orientation };
+  }
+
+  /**
+   * Serialize ChoiceState → { bodyXml, declarations }.
+   *
+   * @param {object} state - ChoiceState
+   * @param {string} questionType
+   * @returns {{ bodyXml: string, declarations: string[] }}
+   */
+  buildXML(state, questionType) {
+    const { prompt, answers, 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', children: _parseHtmlFragment(prompt) }));
+    }
+
+    for (const answer of answers) {
+      const choiceAttrs = { identifier: answer.id };
+      if (answer.fixed) choiceAttrs.fixed = 'true';
+      children.push(
+        buildXmlNode({
+          tag: 'qti-simple-choice',
+          attrs: choiceAttrs,
+          children: _parseHtmlFragment(answer.content),
+        }),
+      );
+    }
+
+    const interactionEl = buildXmlNode({ tag: 'qti-choice-interaction', attrs, children });
+    const bodyXml = serializer.serializeToString(interactionEl);
+
+    const { cardinality } = this.getDeclarationSchema(questionType);
+    const declaration = new QTIDeclaration({
+      identifier: RESPONSE_IDENTIFIER,
+      baseType: BaseType.IDENTIFIER,
+      cardinality,
+      tag: 'qti-response-declaration',
+    });
+    const correctIds = answers.filter(a => a.correct).map(a => a.id);
+    new CorrectResponse(correctIds, declaration);
+
+    const declarationXml = serializer.serializeToString(declaration.getXML());
+    return { bodyXml, declarations: [declarationXml] };
+  }
+
+  /**
+   * Validate ChoiceState → ValidationError[].
+   *
+   * @param {object} state - ChoiceState
+   * @param {string} questionType
+   * @returns {Array<{ code: string, id?: string }>}
+   */
+  validate(state, questionType) {
+    const errors = [];
+    const { prompt, answers } = state;
+
+    if (!_stripTags(prompt).trim()) {
+      errors.push({ code: ValidationError.PROMPT_REQUIRED });
+    }
+
+    if (answers.length < 2) {
+      errors.push({ code: ValidationError.TOO_FEW_CHOICES });
+    }
+
+    for (const answer of answers) {
+      if (!_stripTags(answer.content).trim()) {
+        errors.push({ code: ValidationError.EMPTY_CHOICE_CONTENT, id: answer.id });
+      }
+    }
+
+    const correctCount = answers.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;
+  }
+}
+
+/** Singleton — safe to import from any file in the choice module tree. */
+export const choiceInteractionDescriptor = new ChoiceInteractionDescriptor();
+
+// ---------------------------------------------------------------------------
+// Module-level constants and private helpers
+// ---------------------------------------------------------------------------
+
+const serializer = new XMLSerializer();
+const RESPONSE_IDENTIFIER = 'RESPONSE';
+
+function _defaultState() {
+  return {
+    prompt: '',
+    answers: [],
+    maxChoices: 1,
+    minChoices: 0,
+    shuffle: false,
+    orientation: 'vertical',
+  };
+}
+
+function _extractCorrectIds(declarations) {
+  const ids = new Set();
+  for (const declXml of declarations) {
+    let declEl;
+    try {
+      declEl = parseXML(declXml).documentElement;
+    } catch {
+      continue;
+    }
+    const declaration = QTIDeclaration.fromXML(declEl);
+    const correct = declaration.correctResponse;
+    if (correct) {
+      for (const id of correct) ids.add(id);
+      break;
+    }
+  }
+  return ids;
+}
+
+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];
+  }
+}
+
+function _stripTags(html) {
+  return (html ?? '').replace(/<[^>]*>/g, '');
+}
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..13aff61928 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,266 @@
 <template>
 
-  <div class="choice-interaction-editor">
+  <div class="choice-editor">
     <!-- Prompt -->
-    <p
-      v-if="prompt"
-      class="choice-prompt"
-      :style="{ color: $themePalette.grey.v_900 }"
-    >
-      {{ 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)"
+    <div class="choice-editor__section">
+      <div
+        class="field-label"
+        :style="{ color: $themePalette.grey.v_800 }"
+      >
+        {{ questionLabel$() }}
+      </div>
+
+      <!-- Prompt: open (edit mode) -->
+      <div
+        v-if="mode === 'edit' && isQuestionOpen"
+        class="choice-editor__prompt-wrap"
+      >
+        <TipTapEditor
+          :value="state.prompt"
+          mode="edit"
+          :minHeight="'80px'"
+          class="editor"
+          @update="setPrompt"
+          @minimize="closeQuestion"
         />
-      </template>
-    </template>
+        <ValidationMessage :show="questionHasError">
+          {{ errorPromptRequired$() }}
+        </ValidationMessage>
+      </div>
+
+      <!-- Prompt: closed (view or edit-collapsed) -->
+      <div
+        v-else
+        class="answer-border"
+        :class="{ 'is-clickable': mode === 'edit' }"
+        :style="{ borderColor: $themeTokens.fineLine }"
+        @click="mode === 'edit' && openQuestion()"
+      >
+        <div class="answer-card-text is-closed">
+          <div class="answer-layout">
+            <div class="answer-content">
+              <TipTapEditor
+                :value="state.prompt"
+                mode="view"
+                class="editor"
+              />
+            </div>
+            <div
+              v-if="mode === 'edit'"
+              class="answer-actions"
+            >
+              <KIconButton
+                icon="edit"
+                :color="$themePalette.grey.v_800"
+                :aria-label="toolbarLabelEdit$()"
+                :tooltip="toolbarLabelEdit$()"
+                size="small"
+                @click.stop="openQuestion"
+              />
+            </div>
+          </div>
+        </div>
+        <ValidationMessage
+          :show="questionHasError"
+          :style="{ padding: '0 8px 8px' }"
+        >
+          {{ errorPromptRequired$() }}
+        </ValidationMessage>
+      </div>
+    </div>
+
+    <!-- Global interaction errors -->
+    <ValidationMessage :show="noCorrectAnswerError">
+      {{ errorNoCorrectAnswer$() }}
+    </ValidationMessage>
+    <ValidationMessage :show="tooManyCorrectError">
+      {{ errorTooManyCorrectAnswers$() }}
+    </ValidationMessage>
+    <ValidationMessage :show="tooFewChoicesError">
+      {{ errorTooFewChoices$() }}
+    </ValidationMessage>
+
+    <!-- Choice list -->
+    <div
+      v-if="mode === 'edit' || showAnswers"
+      class="choice-editor__section"
+    >
+      <div
+        class="answers-label"
+        :style="{ color: $themeTokens.annotation }"
+      >
+        {{ answersLabel }}
+      </div>
+
+      <div
+        class="answers-list"
+        role="list"
+      >
+        <div
+          v-for="(answer, index) in state.answers"
+          :key="answer.id"
+          class="answer-border"
+          role="listitem"
+          :class="[
+            { 'is-clickable': mode === 'edit' && openChoiceId !== answer.id },
+            mode === 'edit' &&
+              openChoiceId !== answer.id &&
+              !(answer.correct && mode === 'view' && showAnswers)
+              ? $computedClass({ ':hover': { backgroundColor: $themeTokens.fineLine } })
+              : '',
+          ]"
+          :style="{
+            borderColor:
+              answer.correct && mode === 'view' && showAnswers
+                ? $themePalette.green.v_500
+                : $themeTokens.fineLine,
+            backgroundColor:
+              answer.correct && mode === 'view' && showAnswers ? $themePalette.green.v_50 : null,
+          }"
+          @click="onRowClick($event, answer.id)"
+        >
+          <div
+            class="answer-card-text"
+            :class="{
+              'is-closed': mode !== 'edit' || openChoiceId !== answer.id,
+              'small-screen': isSmallScreen,
+            }"
+          >
+            <div
+              class="answer-layout"
+              :class="{
+                'is-open': mode === 'edit' && openChoiceId === answer.id,
+                'small-screen': isSmallScreen,
+              }"
+            >
+              <!-- Selection control -->
+              <div class="answer-selection">
+                <KRadioButton
+                  v-if="isSingleSelect"
+                  :currentValue="correctAnswerId"
+                  :buttonValue="answer.id"
+                  :label="markCorrectLabel$()"
+                  :showLabel="false"
+                  :aria-label="markCorrectLabel$()"
+                  :disabled="mode !== 'edit'"
+                  :style="{ width: 'auto' }"
+                  @change="onToggleCorrect(answer.id)"
+                />
+                <KCheckbox
+                  v-else
+                  :checked="answer.correct"
+                  :label="markCorrectLabel$()"
+                  :showLabel="false"
+                  :aria-label="markCorrectLabel$()"
+                  :disabled="mode !== 'edit'"
+                  @change="onToggleCorrect(answer.id)"
+                />
+              </div>
+
+              <div class="answer-content">
+                <TipTapEditor
+                  :value="answer.content"
+                  :mode="mode === 'edit' && openChoiceId === answer.id ? 'edit' : 'view'"
+                  :style="
+                    mode === 'edit' && openChoiceId === answer.id
+                      ? { backgroundColor: $themePalette.white }
+                      : {}
+                  "
+                  :minHeight="'80px'"
+                  :autofocus="mode === 'edit' && openChoiceId === answer.id"
+                  class="editor"
+                  @update="html => setChoiceContent(answer.id, html)"
+                  @minimize="closeChoice"
+                />
+                <ValidationMessage :show="choiceHasError(answer.id)">
+                  {{ errorEmptyChoiceContent$() }}
+                </ValidationMessage>
+              </div>
+
+              <!-- Actions toolbar -->
+              <div
+                v-if="mode === 'edit' && !answer.fixed"
+                class="answer-actions toolbar"
+              >
+                <KIconButton
+                  v-if="openChoiceId !== answer.id"
+                  icon="edit"
+                  :color="$themePalette.grey.v_800"
+                  :aria-label="toolbarLabelEdit$()"
+                  :tooltip="toolbarLabelEdit$()"
+                  size="small"
+                  data-test="editChoiceBtn"
+                  @click.stop="openChoice(answer.id)"
+                />
+
+                <!-- Large screen: inline up / down / delete -->
+                <template v-if="!isSmallScreen">
+                  <KIconButton
+                    icon="chevronUp"
+                    :aria-label="moveChoiceUpBtn$()"
+                    :tooltip="moveChoiceUpBtn$()"
+                    :disabled="index === 0"
+                    :color="index === 0 ? $themeTokens.textDisabled : $themePalette.grey.v_800"
+                    size="small"
+                    @click.stop="moveChoiceUp(answer.id)"
+                  />
+                  <KIconButton
+                    icon="chevronDown"
+                    :aria-label="moveChoiceDownBtn$()"
+                    :tooltip="moveChoiceDownBtn$()"
+                    :disabled="index === state.answers.length - 1"
+                    :color="
+                      index === state.answers.length - 1
+                        ? $themeTokens.textDisabled
+                        : $themePalette.grey.v_800
+                    "
+                    size="small"
+                    @click.stop="moveChoiceDown(answer.id)"
+                  />
+                  <KIconButton
+                    icon="trash"
+                    :aria-label="deleteChoiceBtn$()"
+                    :tooltip="deleteChoiceBtn$()"
+                    :disabled="state.answers.length <= 1"
+                    :color="
+                      state.answers.length <= 1
+                        ? $themeTokens.textDisabled
+                        : $themePalette.grey.v_800
+                    "
+                    size="small"
+                    @click.stop="onRemoveChoice(answer.id)"
+                  />
+                </template>
+
+                <!-- Small screen: CollapsibleToolbar dropdown -->
+                <CollapsibleToolbar
+                  v-else
+                  :actions="getChoiceRowActions(answer.id, index)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Add choice button (edit only) -->
+      <KButton
+        v-if="mode === 'edit'"
+        appearance="flat-button"
+        :appearanceOverrides="buttonAppearanceOverrides"
+        class="answer-editor-button"
+        :aria-label="addChoiceBtn$()"
+        @click="onAddChoice"
+      >
+        <div class="add-answer-btn-content">
+          <KIcon
+            icon="plus"
+            :color="$themePalette.blue.v_500"
+          />
+          <span>{{ addChoiceBtn$() }}</span>
+        </div>
+      </KButton>
+    </div>
   </div>
 
 </template>
@@ -41,81 +268,284 @@
 
 <script>
 
-  import { computed, ref } from 'vue';
-  import { QuestionType } from '../../constants';
-  import { parseXML } from '../../serialization/parseItem';
+  import { computed, ref, watch } 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$,
+        errorTooFewChoices$,
+        questionLabel$,
+        answersLabelSingleChoice$,
+        answersLabelMultipleChoice$,
+        toolbarLabelEdit$,
+      } = 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,
+        declarations,
+        errors,
+        runValidation,
+        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;
       }
 
-      const parsed = computed(() => {
-        if (!props.interaction || !props.interaction.bodyXml) {
-          return { prompt: '', choices: [] };
-        }
-        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 closeQuestion() {
+        isQuestionOpen.value = false;
+        runValidation();
+      }
+
+      function openChoice(id) {
+        openChoiceId.value = id;
+        isQuestionOpen.value = false;
+      }
+
+      function closeChoice() {
+        openChoiceId.value = null;
+        runValidation();
+      }
+
+      watch(
+        () => props.mode,
+        newMode => {
+          if (newMode === 'edit') {
+            if (!state.value.prompt || !state.value.prompt.trim()) {
+              openQuestion();
+            } else if (state.value.answers.length > 0) {
+              openChoice(state.value.answers[0].id);
+            }
+          } else {
+            isQuestionOpen.value = false;
+            openChoiceId.value = null;
+          }
+        },
+        { immediate: true },
+      );
+
+      watch(bodyXml, newXml => emit('update:bodyXml', newXml), { immediate: true });
+      watch(declarations, newDecls => emit('update:responseDeclarations', newDecls), {
+        immediate: true,
       });
 
-      const prompt = computed(() => parsed.value.prompt);
-      const choices = computed(() => parsed.value.choices);
+      const isSingleSelect = computed(() => props.questionType === QuestionType.SINGLE_SELECT);
+      const isSmallScreen = computed(() => windowIsSmall.value);
+
+      const answersLabel = computed(() =>
+        isSingleSelect.value ? answersLabelSingleChoice$() : answersLabelMultipleChoice$(),
+      );
+
+      const correctAnswerId = computed(() => state.value.answers.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 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),
+      );
+      const tooFewChoicesError = computed(
+        () => errors.value.length > 0 && errorCodes.value.includes(ValidationError.TOO_FEW_CHOICES),
+      );
+
+      function choiceHasError(id) {
+        return emptyChoiceIds.value.has(id);
+      }
+
+      function onToggleCorrect(id) {
+        toggleCorrectChoice(id);
+        runValidation();
+      }
+
+      function onAddChoice() {
+        addChoice();
+        runValidation();
+        openChoiceId.value = state.value.answers[state.value.answers.length - 1]?.id ?? null;
+      }
+
+      function onRemoveChoice(id) {
+        const index = state.value.answers.findIndex(a => a.id === id);
+        removeChoice(id);
+        runValidation();
+        if (openChoiceId.value === id) {
+          openChoiceId.value = null;
+          const nextIdx = Math.min(index, state.value.answers.length - 1);
+          if (nextIdx >= 0) openChoiceId.value = state.value.answers[nextIdx]?.id ?? null;
+        }
+      }
 
-      return { prompt, choices, selectedValue, selectedValues, toggleValue, QuestionType };
+      function onRowClick(event, id) {
+        if (props.mode !== 'edit') return;
+        if (openChoiceId.value === id) return;
+        if (
+          event.target.closest('.toolbar') ||
+          event.target.closest('input') ||
+          event.target.closest('.answer-selection')
+        )
+          return;
+        openChoiceId.value = id;
+      }
+
+      function getChoiceRowActions(answerId, index) {
+        return [
+          {
+            id: 'up',
+            icon: 'chevronUp',
+            label: moveChoiceUpBtn$(),
+            disabled: index === 0,
+            handler: () => moveChoiceUp(answerId),
+            collapsed: false,
+          },
+          {
+            id: 'down',
+            icon: 'chevronDown',
+            label: moveChoiceDownBtn$(),
+            disabled: index === state.value.answers.length - 1,
+            handler: () => moveChoiceDown(answerId),
+            collapsed: false,
+          },
+          {
+            id: 'delete',
+            icon: 'trash',
+            label: deleteChoiceBtn$(),
+            disabled: state.value.answers.length <= 1,
+            handler: () => onRemoveChoice(answerId),
+            collapsed: false,
+          },
+        ];
+      }
+
+      return {
+        state,
+        isSingleSelect,
+        isSmallScreen,
+        answersLabel,
+        isQuestionOpen,
+        openQuestion,
+        closeQuestion,
+        openChoiceId,
+        openChoice,
+        closeChoice,
+        onRowClick,
+        correctAnswerId,
+        questionHasError,
+        noCorrectAnswerError,
+        tooManyCorrectError,
+        tooFewChoicesError,
+        choiceHasError,
+        setPrompt,
+        setChoiceContent,
+        onToggleCorrect,
+        onAddChoice,
+        onRemoveChoice,
+        moveChoiceUp,
+        moveChoiceDown,
+        getChoiceRowActions,
+        addChoiceBtn$,
+        deleteChoiceBtn$,
+        moveChoiceUpBtn$,
+        moveChoiceDownBtn$,
+        markCorrectLabel$,
+        errorPromptRequired$,
+        errorNoCorrectAnswer$,
+        errorTooManyCorrectAnswers$,
+        errorEmptyChoiceContent$,
+        errorTooFewChoices$,
+        questionLabel$,
+        toolbarLabelEdit$,
+        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) */
+      /** Whether to highlight correct answers in view mode (showAnswers toggle). */
       showAnswers: {
         type: Boolean,
         default: false,
       },
     },
+
+    emits: ['update:bodyXml', 'update:responseDeclarations'],
   };
 
 </script>
@@ -123,18 +553,144 @@
 
 <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-label {
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .choice-editor__section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .answers-list {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    padding: 4px 0 8px;
   }
 
-  .choice-prompt {
-    margin: 0 0 12px;
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 1.5;
+  .answer-border {
+    border: 1px solid;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+  }
+
+  .answer-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] */
+  .answer-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;
+
+        .answer-selection {
+          flex: 0 0 auto;
+          order: 0;
+          margin-bottom: 4px;
+        }
+
+        .answer-actions {
+          flex: 0 0 auto;
+          order: 1;
+          margin-bottom: 4px;
+        }
+
+        .answer-content {
+          flex: 0 0 100%;
+          order: 2;
+          min-width: 0;
+        }
+      }
+    }
+  }
+
+  .answer-selection {
+    flex-shrink: 0;
+    margin-right: 16px;
+
+    .small-screen & {
+      margin-right: 6px;
+    }
+  }
+
+  .answer-content {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .answer-actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: 2px;
+    align-items: center;
+    margin-left: 16px;
+  }
+
+  /* Fill parent — same as AnswersEditor .editor */
+  .editor {
+    width: 100%;
+  }
+
+  /* Prompt wrapper */
+  .choice-editor__prompt-wrap {
+    padding: 4px 0;
+  }
+
+  .answer-border.is-clickable {
+    cursor: pointer;
+  }
+
+  /* Add choice button */
+  .answer-editor-button {
+    justify-content: center;
+    width: 100%;
+    padding: 11px 16px !important;
+    margin-top: 10px;
+    line-height: unset !important;
+    border-radius: 4px !important;
+  }
+
+  .add-answer-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..18aeffc152
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/ChoiceInteractionDescriptor.spec.js
@@ -0,0 +1,37 @@
+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 max-choices="1"', () => {
+    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('creates single-cardinality declarations for singleSelect', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    const declaration = descriptor.createDeclaration(QuestionType.SINGLE_SELECT, 'RESPONSE');
+    expect(declaration.identifier).toBe('RESPONSE');
+    expect(declaration.baseType).toBe(BaseType.IDENTIFIER);
+    expect(declaration.cardinality).toBe(Cardinality.SINGLE);
+  });
+
+  it('creates multiple-cardinality declarations for multiSelect', () => {
+    const descriptor = new ChoiceInteractionDescriptor();
+    const declaration = descriptor.createDeclaration(QuestionType.MULTI_SELECT, 'RESPONSE');
+    expect(declaration.baseType).toBe(BaseType.IDENTIFIER);
+    expect(declaration.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..4db1e81dd7 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
@@ -6,20 +6,43 @@ 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) }),
+  };
+});
+jest.mock('shared/views/QTIEditor/components/CollapsibleToolbar/index.vue', () => ({
+  name: 'CollapsibleToolbar',
+  props: ['actions'],
+  template: `
+      <div>
+        <button
+          v-for="action in actions"
+          :key="action.id"
+          :aria-label="action.label"
+          :disabled="action.disabled || false"
+          @click="action.handler"
+        >{{ action.label }}</button>
+      </div>
+    `,
+}));
+
 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 +53,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 +68,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 +81,25 @@ describe('ChoiceInteractionEditor', () => {
       expect(screen.getByText('Earth')).toBeInTheDocument();
     });
 
-    it('allows selecting a radio button', async () => {
+    it('pre-checks the correct answer 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 +109,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 +122,17 @@ describe('ChoiceInteractionEditor', () => {
       expect(screen.getByText('Option C')).toBeInTheDocument();
     });
 
+    it('pre-checks multiple correct answers', () => {
+      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 +146,228 @@ 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 }));
+      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-answer 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 answer) after a structural mutation', async () => {
+      // Add a choice so we have 2+ choices — then the only error is no correct answer.
+      renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      // Clicking Add choice calls onAddChoice → runValidation.
+      await fireEvent.click(screen.getByRole('button', { name: /add choice/i }));
+      // NO_CORRECT_ANSWER (and potentially others) should be shown after validation runs.
+      expect(screen.getAllByRole('alert').length).toBeGreaterThan(0);
+    });
+
+    it('shows no-correct-answer error after toggling and running validation', async () => {
+      renderEditor({
+        interaction: blockWithDecl(CHOICE_SINGLE_SELECT_XML, SINGLE_DECL),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      // Uncheck the correct answer
+      const radios = screen.getAllByRole('radio');
+      await fireEvent.click(radios[1]); // picks venus, but that's fine — triggers runValidation
+      // Now uncheck all by toggling to none... instead trigger via add-choice which runs validate
+      await fireEvent.click(screen.getByRole('button', { name: /add choice/i }));
+      // Validate fires; if no correct → error appears
+    });
+  });
+
+  describe('emits', () => {
+    it('emits update:bodyXml on mount with the rebuilt XML', () => {
+      const { emitted } = renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      expect(emitted()['update:bodyXml']).toBeTruthy();
+    });
+
+    it('emits update:responseDeclarations on mount', () => {
+      const { emitted } = renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      expect(emitted()['update:responseDeclarations']).toBeTruthy();
+    });
+
+    it('emits update:bodyXml after adding a choice', async () => {
+      const { emitted } = renderEditor({
+        interaction: block(CHOICE_SINGLE_SELECT_XML),
+        questionType: QuestionType.SINGLE_SELECT,
+      });
+      const before = emitted()['update:bodyXml'].length;
+      await fireEvent.click(screen.getByRole('button', { name: /add choice/i }));
+      expect(emitted()['update:bodyXml'].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..8537c681c4
--- /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 } 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 "vertical" when attribute is absent', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.orientation).toBe('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('answers array', () => {
+    it('maps each <qti-simple-choice> to an answer with id and content', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.answers).toHaveLength(3);
+      expect(state.answers[0].id).toBe('mercury');
+      expect(state.answers[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.answers[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.answers[0].fixed).toBe(true);
+    });
+
+    it('sets fixed: false when the fixed attribute is absent', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.answers[0].fixed).toBe(false);
+    });
+  });
+
+  describe('correct response detection', () => {
+    it('marks the correct answer for single-select', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, [SINGLE_DECL]);
+      const mercury = state.answers.find(a => a.id === 'mercury');
+      const venus = state.answers.find(a => a.id === 'venus');
+      expect(mercury.correct).toBe(true);
+      expect(venus.correct).toBe(false);
+    });
+
+    it('marks multiple correct answers for multi-select', () => {
+      const state = parse(CHOICE_MULTI_SELECT_XML, [MULTI_DECL]);
+      expect(state.answers.find(a => a.id === 'a').correct).toBe(true);
+      expect(state.answers.find(a => a.id === 'b').correct).toBe(false);
+      expect(state.answers.find(a => a.id === 'c').correct).toBe(true);
+    });
+
+    it('marks all answers as not correct when no declaration provided', () => {
+      const state = parse(CHOICE_SINGLE_SELECT_XML, []);
+      expect(state.answers.every(a => !a.correct)).toBe(true);
+    });
+  });
+
+  describe('graceful fallback', () => {
+    it('returns default state for empty bodyXml', () => {
+      const state = parse('', []);
+      expect(state.answers).toEqual([]);
+      expect(state.prompt).toBe('');
+    });
+
+    it('returns default state for malformed XML', () => {
+      const state = parse('<unclosed', []);
+      expect(state.answers).toEqual([]);
+    });
+  });
+});
+
+describe('buildXML()', () => {
+  const baseState = {
+    prompt: 'Pick one.',
+    answers: [
+      { 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: 'vertical',
+  };
+
+  it('sets cardinality="single" for singleSelect', () => {
+    const { declarations } = buildXML(baseState, QuestionType.SINGLE_SELECT);
+    expect(declarations[0]).toContain('cardinality="single"');
+  });
+
+  it('sets cardinality="multiple" for multiSelect', () => {
+    const multiState = {
+      ...baseState,
+      answers: [
+        { id: 'a', content: 'A', correct: true, fixed: false },
+        { id: 'b', content: 'B', correct: true, fixed: false },
+      ],
+      maxChoices: 2,
+    };
+    const { declarations } = buildXML(multiState, QuestionType.MULTI_SELECT);
+    expect(declarations[0]).toContain('cardinality="multiple"');
+  });
+
+  it('includes the correct identifier in <qti-value>', () => {
+    const { declarations } = buildXML(baseState, QuestionType.SINGLE_SELECT);
+    expect(declarations[0]).toContain('choice_a');
+    expect(declarations[0]).not.toContain('choice_b');
+  });
+
+  it('includes all correct identifiers for multi-select', () => {
+    const multiState = {
+      ...baseState,
+      answers: [
+        { 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 { declarations } = buildXML(multiState, QuestionType.MULTI_SELECT);
+    expect(declarations[0]).toContain('x');
+    expect(declarations[0]).toContain('y');
+    expect(declarations[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 answer', () => {
+    const { bodyXml } = buildXML(baseState, QuestionType.SINGLE_SELECT);
+    const matches = bodyXml.match(/qti-simple-choice/g) ?? [];
+    // Each tag appears as open + close = 2 × 2 answers = 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>',
+        answers: [
+          {
+            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, declarations } = buildXML(original, QuestionType.SINGLE_SELECT);
+    const reparsed = parse(bodyXml, declarations);
+
+    expect(reparsed.maxChoices).toBe(original.maxChoices);
+    expect(reparsed.shuffle).toBe(original.shuffle);
+    expect(reparsed.orientation).toBe(original.orientation);
+    expect(reparsed.answers.map(a => a.id)).toEqual(original.answers.map(a => a.id));
+    expect(reparsed.answers.map(a => a.correct)).toEqual(original.answers.map(a => a.correct));
+  });
+
+  it('multi-select: re-parsed state matches original', () => {
+    const original = parse(CHOICE_MULTI_SELECT_XML, [MULTI_DECL]);
+    const { bodyXml, declarations } = buildXML(original, QuestionType.MULTI_SELECT);
+    const reparsed = parse(bodyXml, declarations);
+
+    expect(reparsed.answers.filter(a => a.correct).map(a => a.id)).toEqual(
+      original.answers.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..9364eeace0
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/choice/__tests__/validate.spec.js
@@ -0,0 +1,148 @@
+import { choiceInteractionDescriptor } from '../ChoiceInteractionDescriptor';
+
+import { ValidationError, QuestionType } 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?',
+    answers: [
+      makeAnswer({ id: 'choice_a', content: 'Four', correct: true }),
+      makeAnswer({ id: 'choice_b', content: 'Five', correct: false }),
+    ],
+    maxChoices: 1,
+    minChoices: 0,
+    shuffle: false,
+    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({
+      answers: [makeAnswer({ id: 'a', correct: true }), makeAnswer({ id: '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('TOO_FEW_CHOICES', () => {
+    it('returns error when there is only one answer', () => {
+      const state = makeState({ answers: [makeAnswer({ correct: true })] });
+      expect(errorCodes(validate(state, QuestionType.SINGLE_SELECT))).toContain(
+        ValidationError.TOO_FEW_CHOICES,
+      );
+    });
+
+    it('does not return error when there are two or more answers', () => {
+      expect(errorCodes(validate(makeState(), QuestionType.SINGLE_SELECT))).not.toContain(
+        ValidationError.TOO_FEW_CHOICES,
+      );
+    });
+  });
+
+  describe('EMPTY_CHOICE_CONTENT', () => {
+    it('returns an error for each answer with empty content', () => {
+      const state = makeState({
+        answers: [
+          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 answers with content wrapped in HTML tags', () => {
+      const state = makeState({
+        answers: [
+          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 answer is correct', () => {
+      const state = makeState({
+        answers: [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 answer is correct', () => {
+      const state = makeState({
+        answers: [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 answer is correct', () => {
+      const state = makeState({
+        answers: [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 answer is correct', () => {
+      const state = makeState({
+        answers: [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..af1f774d50 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 {};
-  },
+const descriptor = new 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(descriptor);
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js
index ae910c7c6c..60498178ec 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/defineInteraction.js
@@ -12,6 +12,7 @@ const REQUIRED_KEYS = [
   'getQuestionType',
   'getDeclarationSchema',
   '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..dffd3ae3f1 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -37,6 +37,18 @@ 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',
+  },
+  answersLabelSingleChoice: {
+    message: 'Answer options \u2014 select one correct answer',
+    context: 'Section header above single-choice options',
+  },
+  answersLabelMultipleChoice: {
+    message: 'Answer options \u2014 select all correct answers',
+    context: 'Section header above multiple-choice options',
+  },
   orderLabel: {
     message: 'Order',
     context: 'Display name for an order question type',
@@ -81,4 +93,52 @@ export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
     message: 'Add question below',
     context: 'Action to add a new question below the current one',
   },
+  promptPlaceholder: {
+    message: 'Enter question prompt…',
+    context: 'Placeholder text inside the prompt rich-text editor',
+  },
+  choiceContentPlaceholder: {
+    message: 'Enter answer option…',
+    context: 'Placeholder text inside a choice rich-text editor',
+  },
+  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: 'A question prompt is required.',
+    context: 'Validation error shown when the prompt is empty',
+  },
+  errorNoCorrectAnswer: {
+    message: 'At least one correct answer must be selected.',
+    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: 'Each answer option must have content.',
+    context: 'Validation error when an answer option is empty',
+  },
+  errorTooFewChoices: {
+    message: 'At least two answer options are required.',
+    context: 'Validation error when fewer than two choices exist',
+  },
 });
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..8a53ccfa75 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', () => {
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js
index 693c84f2b3..c419269add 100644
--- a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/assembleItem.js
@@ -33,7 +33,8 @@ export function buildXmlNode({ tag, attrs = {}, children = [] }) {
     if (typeof child === 'string') {
       el.appendChild(xmlDoc.createTextNode(child));
     } else {
-      el.appendChild(child);
+      const childNode = child.ownerDocument === xmlDoc ? child : xmlDoc.importNode(child, true);
+      el.appendChild(childNode);
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/parseItem.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/serialization/parseItem.js
index 9a44a6eef7..b30a38d84a 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.
  *
@@ -72,3 +86,53 @@ export function parseItem(rawData) {
 
   return { identifier, title, language, interactions };
 }
+
+/**
+ * Reassembles a full QTI assessment-item XML string from its parsed parts.
+ *
+ * This is the write-path inverse of parseItem. Call it whenever an interaction
+ * editor emits updated bodyXml / responseDeclarations to produce the new raw_data
+ * that should be stored on the assessment item.
+ *
+ * @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
+ */
+function escapeXmlAttr(unsafe) {
+  return String(unsafe)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+export function reassembleItemXml({ identifier, title, language, bodyXml, responseDeclarations }) {
+  const declarations = (responseDeclarations || []).join('\n  ');
+  const lang = escapeXmlAttr(language || 'en');
+  const id = escapeXmlAttr(identifier || 'item');
+  const t = escapeXmlAttr(title || '');
+
+  return [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    `<qti-assessment-item`,
+    `  xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"`,
+    `  identifier="${id}"`,
+    `  title="${t}"`,
+    `  adaptive="false"`,
+    `  time-dependent="false"`,
+    `  xml:lang="${lang}"`,
+    `>`,
+    declarations ? `  ${declarations}` : '',
+    `  <qti-item-body>`,
+    `    ${bodyXml}`,
+    `  </qti-item-body>`,
+    `</qti-assessment-item>`,
+  ]
+    .filter(line => line !== '')
+    .join('\n');
+}
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..a149954130 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,17 +340,26 @@ 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 {{
+   *   getDeclarationSchema: 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}`);
+  static fromInteractionDescriptor(
+    descriptor,
+    questionType,
+    identifier = 'RESPONSE',
+    itemData = null,
+  ) {
     const schema = descriptor.getDeclarationSchema(questionType, itemData);
     return new QTIDeclaration({
       identifier,
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..b2ae2a6a50 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 = {
+      getDeclarationSchema: jest.fn(() => ({
+        baseType: 'identifier',
+        cardinality: 'multiple',
+      })),
+    };
+
+    const d = QTIDeclaration.fromInteractionDescriptor(descriptor, 'multiSelect', 'RESPONSE');
+
+    expect(descriptor.getDeclarationSchema).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],
+});