diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/QTIDemoPage.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/QTIDemoPage.vue
new file mode 100644
index 0000000000..bb11ec769f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/QTIDemoPage.vue
@@ -0,0 +1,72 @@
+<template>
+
+  <div>
+    <div style="padding: 16px 24px 0">
+      <div
+        style="
+  padding: 16px;
+  color: #2196f3;
+  background-color: transparent;
+  border: 1px solid #2196f3;
+  border-radius: 4px;
+        "
+      >
+        <strong>QTI Editor — Dev Demo</strong>
+        &nbsp;Hardcoded items. Changes are local only and not persisted.
+      </div>
+    </div>
+
+    <QTIEditor
+      :assessments="assessments"
+      @update="onUpdate"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref, defineComponent } from 'vue';
+  import QTIEditor from 'shared/views/QTIEditor/index';
+  import { QtiInteraction } from 'shared/views/QTIEditor/constants';
+
+  /**
+   * Hardcoded items covering three interaction types so the closed-card
+   * type label can be visually verified.
+   */
+  const INITIAL_ASSESSMENTS = [
+    {
+      id: 'demo-item-1',
+      type: QtiInteraction.CHOICE,
+      title: 'Which planet is closest to the Sun?',
+    },
+    {
+      id: 'demo-item-2',
+      type: QtiInteraction.EXTENDED_TEXT,
+      title: 'Describe the water cycle in your own words.',
+    },
+    {
+      id: 'demo-item-3',
+      type: QtiInteraction.ORDER,
+      title: 'Arrange these events in chronological order.',
+    },
+  ];
+
+  export default defineComponent({
+    name: 'QTIDemoPage',
+
+    components: { QTIEditor },
+
+    setup() {
+      const assessments = ref(INITIAL_ASSESSMENTS);
+
+      function onUpdate(newList) {
+        assessments.value = newList;
+      }
+
+      return { assessments, onUpdate };
+    },
+  });
+
+</script>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/router.js b/contentcuration/contentcuration/frontend/channelEdit/router.js
index 69615e4d7b..e0bf0ddc05 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/router.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/router.js
@@ -9,6 +9,7 @@ import TrashModal from './views/trash/TrashModal';
 import SearchOrBrowseWindow from './views/ImportFromChannels/SearchOrBrowseWindow';
 import ReviewSelectionsPage from './views/ImportFromChannels/ReviewSelectionsPage';
 import EditModal from './components/edit/EditModal';
+import QTIDemoPage from './pages/QTIDemoPage';
 import ChannelDetailsModal from 'shared/views/channel/ChannelDetailsModal';
 import ChannelModal from 'shared/views/channel/ChannelModal';
 import { RouteNames as ChannelRouteNames } from 'frontend/channelList/constants';
@@ -244,6 +245,11 @@ const router = new VueRouter({
           });
       },
     },
+    {
+      name: 'QTI_DEMO',
+      path: '/qti-demo',
+      component: QTIDemoPage,
+    },
     {
       name: RouteNames.TREE_VIEW,
       path: '/:nodeId/:detailNodeId?',
diff --git a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
index f681bc4167..2399fc6be9 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
@@ -42,4 +42,8 @@ export const commonStrings = createTranslator('CommonStrings', {
     message: 'Copy channel token',
     context: 'A label for an action that copies the channel token to the clipboard',
   },
+  optionsLabel: {
+    message: 'Options',
+    context: 'Tooltip for the generic options menu icon',
+  },
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/__tests__/CollapsibleToolbar.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/__tests__/CollapsibleToolbar.spec.js
new file mode 100644
index 0000000000..2c873ea465
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/__tests__/CollapsibleToolbar.spec.js
@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
+import CollapsibleToolbar from '../index.vue';
+import { commonStrings } from 'shared/strings/commonStrings';
+
+const { optionsLabel$ } = commonStrings;
+
+const makeAction = (overrides = {}) => ({
+  id: 'action-1',
+  icon: 'edit',
+  label: 'Edit',
+  handler: jest.fn(),
+  collapsed: false,
+  disabled: false,
+  ...overrides,
+});
+
+const renderComponent = (actions = [], optionsLabel = null) => {
+  return render(CollapsibleToolbar, {
+    props: { actions, optionsLabel },
+    routes: new VueRouter(),
+  });
+};
+
+describe('CollapsibleToolbar', () => {
+  describe('visible icon actions', () => {
+    test('renders icon buttons for non-collapsed actions with icons', () => {
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false }),
+        makeAction({ id: 'a2', label: 'Move up', icon: 'chevronUp', collapsed: false }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Move up' })).toBeInTheDocument();
+    });
+
+    test('does not render an icon button for collapsed actions', () => {
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false }),
+        makeAction({ id: 'a2', label: 'Delete', icon: 'delete', collapsed: true }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+      // 'Delete' only appears inside the dropdown, not as a standalone icon button
+      expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
+    });
+
+    test('calls the action handler when an icon button is clicked', async () => {
+      const user = userEvent.setup();
+      const handler = jest.fn();
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false, handler }),
+      ];
+      renderComponent(actions);
+      await user.click(screen.getByRole('button', { name: 'Edit' }));
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('collapsed dropdown menu', () => {
+    test('does not render the options button when there are no collapsed actions', () => {
+      const actions = [makeAction({ id: 'a1', icon: 'edit', collapsed: false })];
+      renderComponent(actions);
+      expect(screen.queryByRole('button', { name: optionsLabel$() })).not.toBeInTheDocument();
+    });
+
+    test('renders the options button when there are collapsed actions', () => {
+      const actions = [
+        makeAction({ id: 'a1', icon: 'edit', collapsed: false }),
+        makeAction({ id: 'a2', icon: null, label: 'Delete', collapsed: true, handler: jest.fn() }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: optionsLabel$() })).toBeInTheDocument();
+    });
+
+    test('renders the options button when an action has no icon (forces it to menu)', () => {
+      const actions = [makeAction({ id: 'a1', icon: null, label: 'Delete', collapsed: false })];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: optionsLabel$() })).toBeInTheDocument();
+    });
+
+    test('uses the provided optionsLabel prop for the menu button', () => {
+      const actions = [makeAction({ id: 'a1', icon: null, label: 'Delete', collapsed: true })];
+      renderComponent(actions, 'Custom options label');
+      expect(screen.getByRole('button', { name: 'Custom options label' })).toBeInTheDocument();
+    });
+  });
+
+  describe('disabled state', () => {
+    test('renders the icon button as disabled when action.disabled is true', () => {
+      const actions = [
+        makeAction({ id: 'a1', label: 'Edit', icon: 'edit', collapsed: false, disabled: true }),
+      ];
+      renderComponent(actions);
+      expect(screen.getByRole('button', { name: 'Edit' })).toBeDisabled();
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/index.vue
new file mode 100644
index 0000000000..d6491e2744
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/CollapsibleToolbar/index.vue
@@ -0,0 +1,130 @@
+<template>
+
+  <div class="collapsible-toolbar">
+    <div class="icon-actions-wrapper">
+      <KIconButton
+        v-for="action in visibleIconActions"
+        :key="action.id"
+        :icon="action.icon"
+        :tooltip="action.label"
+        :ariaLabel="action.label"
+        :disabled="action.disabled"
+        :color="action.disabled ? $themeTokens.textDisabled : $themePalette.grey.v_800"
+        @click="action.handler"
+      />
+    </div>
+
+    <KIconButton
+      v-if="collapsedMenuActions.length > 0"
+      icon="optionsVertical"
+      :color="$themePalette.grey.v_800"
+      :tooltip="optionsLabel || optionsLabel$()"
+      :ariaLabel="optionsLabel || optionsLabel$()"
+    >
+      <template #menu>
+        <KDropdownMenu
+          :options="dropdownOptions"
+          @select="handleSelect"
+        />
+      </template>
+    </KIconButton>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { commonStrings } from 'shared/strings/commonStrings';
+
+  export default {
+    name: 'CollapsibleToolbar',
+
+    setup(props) {
+      const { optionsLabel$ } = commonStrings;
+      /** Actions with an icon that are not explicitly collapsed */
+      const visibleIconActions = computed(() => {
+        return props.actions.filter(a => !a.collapsed && Boolean(a.icon));
+      });
+
+      /** Actions without an icon MUST go to the menu, along with explicitly collapsed ones */
+      const collapsedMenuActions = computed(() => {
+        return props.actions.filter(a => a.collapsed || !a.icon);
+      });
+
+      const dropdownOptions = computed(() => {
+        return collapsedMenuActions.value.map(action => ({
+          label: action.label,
+          value: action.id,
+          disabled: action.disabled,
+        }));
+      });
+
+      function handleSelect(option) {
+        const action = collapsedMenuActions.value.find(a => a.id === option.value);
+        if (action && action.handler) {
+          action.handler();
+        }
+      }
+
+      return {
+        visibleIconActions,
+        collapsedMenuActions,
+        dropdownOptions,
+        handleSelect,
+        optionsLabel$,
+      };
+    },
+
+    props: {
+      /**
+       * Array of actions:
+       * {
+       *   id: string,
+       *   icon: string | null,
+       *   label: string,
+       *   handler: Function,
+       *   collapsed?: boolean,
+       *   disabled?: boolean
+       * }
+       */
+      actions: {
+        type: Array,
+        required: true,
+        validator(actions) {
+          return actions.every(
+            a =>
+              typeof a.id === 'string' &&
+              typeof a.label === 'string' &&
+              typeof a.handler === 'function',
+          );
+        },
+      },
+      /** Tooltip text for the generic options menu icon */
+      optionsLabel: {
+        type: String,
+        default: null,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .collapsible-toolbar {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .icon-actions-wrapper {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js
new file mode 100644
index 0000000000..03122034a9
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js
@@ -0,0 +1,78 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import QTIItemEditor from '../index.vue';
+import { qtiEditorStrings } from '../../../qtiEditorStrings';
+import { QtiInteraction } from '../../../constants';
+
+const { closeBtnLabel$, questionContentPlaceholder$ } = qtiEditorStrings;
+
+const defaultProps = {
+  item: {
+    id: 'test-item-id',
+    type: QtiInteraction.CHOICE,
+    title: 'Test Choice Interaction',
+  },
+  index: 0,
+  total: 5,
+  mode: 'view',
+  displayAnswersPreview: false,
+};
+
+const renderComponent = (props = {}, slots = {}) => {
+  return render(QTIItemEditor, {
+    props: { ...defaultProps, ...props },
+    slots,
+    routes: new VueRouter(),
+  });
+};
+
+describe('QTIItemEditor', () => {
+  describe('view mode', () => {
+    test('does not show the card body', () => {
+      renderComponent({ mode: 'view' });
+      expect(screen.queryByText(questionContentPlaceholder$())).not.toBeInTheDocument();
+    });
+
+    test('does not show the close button', () => {
+      renderComponent({ mode: 'view' });
+      expect(screen.queryByRole('button', { name: closeBtnLabel$() })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('edit mode', () => {
+    test('shows the card body', () => {
+      renderComponent({ mode: 'edit' });
+      expect(screen.getByText(questionContentPlaceholder$())).toBeInTheDocument();
+    });
+
+    test('shows the close button', () => {
+      renderComponent({ mode: 'edit' });
+      expect(screen.getByRole('button', { name: closeBtnLabel$() })).toBeInTheDocument();
+    });
+
+    test('emits a close event when the close button is clicked', async () => {
+      const { emitted } = renderComponent({ mode: 'edit' });
+      await fireEvent.click(screen.getByRole('button', { name: closeBtnLabel$() }));
+      expect(emitted().close).toHaveLength(1);
+    });
+  });
+
+  describe('displayAnswersPreview', () => {
+    test('shows the card body in view mode when displayAnswersPreview is true', () => {
+      renderComponent({ mode: 'view', displayAnswersPreview: true });
+      expect(screen.getByText(questionContentPlaceholder$())).toBeInTheDocument();
+    });
+
+    test('does not show the close button even when displayAnswersPreview is true', () => {
+      renderComponent({ mode: 'view', displayAnswersPreview: true });
+      expect(screen.queryByRole('button', { name: closeBtnLabel$() })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('toolbarActions slot', () => {
+    test('renders content injected into the toolbarActions slot', () => {
+      renderComponent({}, { toolbarActions: '<button>Edit</button>' });
+      expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
new file mode 100644
index 0000000000..c4754315ec
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
@@ -0,0 +1,178 @@
+<template>
+
+  <KPageContainer
+    noPadding
+    :topMargin="0"
+    class="item question-card"
+  >
+    <div
+      class="question-card-header"
+      :style="{ borderBottom: mode === 'edit' ? `1px solid ${$themeTokens.fineLine}` : 'none' }"
+    >
+      <h3
+        class="question-card-title"
+        :style="{ color: $themePalette.grey.v_800 }"
+      >
+        <template v-if="mode === 'edit'">
+          {{ questionNumberLabel }}
+        </template>
+        <template v-else>
+          {{ questionNumberAndTypeLabel }}
+        </template>
+      </h3>
+
+      <div class="question-card-actions toolbar">
+        <slot name="toolbarActions"></slot>
+      </div>
+    </div>
+
+    <div
+      v-if="mode === 'edit' || displayAnswersPreview"
+      class="question-card-body"
+    >
+      <p :style="{ color: $themePalette.grey.v_500, margin: 0, fontStyle: 'italic' }">
+        {{ questionContentPlaceholder$() }}
+      </p>
+    </div>
+
+    <div
+      v-if="mode === 'edit'"
+      class="question-card-footer"
+    >
+      <KButton
+        :text="closeBtnLabel$()"
+        class="close-item-btn"
+        @click="$emit('close')"
+      />
+    </div>
+  </KPageContainer>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { qtiEditorStrings } from '../../qtiEditorStrings';
+  import { QtiInteraction } from '../../constants';
+
+  // QTI XML element name → i18n string key, used to build closed-card labels.
+  const INTERACTION_TYPE_STRING_KEY = {
+    [QtiInteraction.CHOICE]: 'interactionTypeChoice',
+    [QtiInteraction.ORDER]: 'interactionTypeOrder',
+    [QtiInteraction.MATCH]: 'interactionTypeMatch',
+    [QtiInteraction.TEXT_ENTRY]: 'interactionTypeTextEntry',
+    [QtiInteraction.EXTENDED_TEXT]: 'interactionTypeExtendedText',
+  };
+
+  export default {
+    name: 'QTIItemEditor',
+
+    setup(props) {
+      const {
+        questionNumberLabel$,
+        questionNumberAndTypeLabel$,
+        closeBtnLabel$,
+        questionContentPlaceholder$,
+        interactionTypeUnknown$,
+      } = qtiEditorStrings;
+
+      const questionNumberLabel = computed(() =>
+        questionNumberLabel$({
+          number: props.index + 1,
+          total: props.total,
+        }),
+      );
+
+      const questionNumberAndTypeLabel = computed(() => {
+        const typeKey = INTERACTION_TYPE_STRING_KEY[props.item.type];
+        const typeLabel = typeKey ? qtiEditorStrings[`${typeKey}$`]() : interactionTypeUnknown$();
+        return questionNumberAndTypeLabel$({
+          number: props.index + 1,
+          total: props.total,
+          type: typeLabel,
+        });
+      });
+
+      return {
+        questionNumberLabel,
+        questionNumberAndTypeLabel,
+        closeBtnLabel$,
+        questionContentPlaceholder$,
+      };
+    },
+
+    props: {
+      /** Assessment item: { id, type (QtiInteraction value), title } */
+      item: {
+        type: Object,
+        required: true,
+      },
+      /** 0-based position in the list */
+      index: {
+        type: Number,
+        required: true,
+      },
+      /** Total items in the list */
+      total: {
+        type: Number,
+        required: true,
+      },
+      /** Whether this card is currently in view or edit mode */
+      mode: {
+        type: String,
+        default: 'view',
+        validator: val => ['view', 'edit'].includes(val),
+      },
+      /** Whether to show answers previews for closed items */
+      displayAnswersPreview: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    emits: ['close'],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .question-card {
+    --question-card-horizontal-padding: 20px;
+
+    padding: 0;
+  }
+
+  .question-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px var(--question-card-horizontal-padding);
+  }
+
+  .question-card-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .question-card-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .question-card-body {
+    min-width: 0;
+    padding: 10px var(--question-card-horizontal-padding);
+  }
+
+  .question-card-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 var(--question-card-horizontal-padding) 20px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
new file mode 100644
index 0000000000..76e313f8c9
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
@@ -0,0 +1,28 @@
+export const Cardinality = Object.freeze({
+  SINGLE: 'single',
+  MULTIPLE: 'multiple',
+  ORDERED: 'ordered',
+  RECORD: 'record',
+});
+
+export const BaseType = Object.freeze({
+  IDENTIFIER: 'identifier',
+  BOOLEAN: 'boolean',
+  INTEGER: 'integer',
+  FLOAT: 'float',
+  STRING: 'string',
+  POINT: 'point',
+  PAIR: 'pair',
+  DIRECTED_PAIR: 'directedPair',
+  DURATION: 'duration',
+  FILE: 'file',
+  URI: 'uri',
+});
+
+export const QtiInteraction = Object.freeze({
+  CHOICE: 'choiceInteraction',
+  ORDER: 'orderInteraction',
+  MATCH: 'matchInteraction',
+  TEXT_ENTRY: 'textEntryInteraction',
+  EXTENDED_TEXT: 'extendedTextInteraction',
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue
new file mode 100644
index 0000000000..0d2e34e32b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue
@@ -0,0 +1,214 @@
+<template>
+
+  <div :style="containerStyle">
+    <template v-if="items && items.length">
+      <KPageContainer
+        class="show-answers-container"
+        :topMargin="0"
+        noPadding
+      >
+        <div class="show-answers-inner">
+          <KCheckbox
+            v-model="displayAnswersPreview"
+            :label="showAnswers$()"
+            class="ma-0"
+            data-testid="showAnswersCheckbox"
+            style="font-size: 16px"
+          />
+        </div>
+      </KPageContainer>
+
+      <div class="question-list">
+        <QTIItemEditor
+          v-for="(item, idx) in items"
+          :key="item.id"
+          :item="item"
+          :index="idx"
+          :total="items.length"
+          :mode="activeId === item.id ? 'edit' : 'view'"
+          :displayAnswersPreview="displayAnswersPreview"
+          data-testid="item"
+          @close="closeItem"
+        >
+          <template #toolbarActions>
+            <CollapsibleToolbar
+              :actions="getToolbarActions(item, idx)"
+              data-testid="toolbar"
+            />
+          </template>
+        </QTIItemEditor>
+      </div>
+    </template>
+
+    <div v-else>
+      {{ noQuestionsPlaceholder$() }}
+    </div>
+
+    <KButton
+      :text="newQuestionBtnLabel$()"
+      style="margin-top: 16px; margin-left: 0"
+      data-testid="newQuestionBtn"
+      @click="addItem()"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { v4 as uuidv4 } from 'uuid';
+  import { ref, computed } from 'vue';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { qtiEditorStrings } from './qtiEditorStrings';
+  import { QtiInteraction } from './constants';
+  import QTIItemEditor from './components/QTIItemEditor/index';
+  import CollapsibleToolbar from './components/CollapsibleToolbar/index.vue';
+  import useQTIEditorActions from './useQTIEditorActions';
+
+  // Custom uuid4 function to match our dashless uuids on the server side
+  function uuid4() {
+    return uuidv4().replace(/-/g, '');
+  }
+
+  /** Creates a blank item with a stable UUID and the default interaction type. */
+  function createBlankItem() {
+    return {
+      id: uuid4(),
+      type: QtiInteraction.CHOICE,
+      title: '',
+    };
+  }
+
+  export default {
+    name: 'QTIEditor',
+
+    components: { QTIItemEditor, CollapsibleToolbar },
+
+    setup(props, { emit }) {
+      const { windowIsSmall } = useKResponsiveWindow();
+
+      const containerStyle = computed(() => ({
+        maxWidth: '1200px',
+        margin: '0 auto',
+        padding: windowIsSmall.value ? '16px' : '32px',
+      }));
+
+      const items = computed(() => props.assessments);
+
+      const activeId = ref(null);
+      const displayAnswersPreview = ref(false);
+
+      function openItem(id) {
+        activeId.value = id;
+      }
+
+      function closeItem() {
+        activeId.value = null;
+      }
+
+      /**
+       * Add a blank item.
+       * @param {Object} [opts]
+       * @param {number} [opts.atIndex] splice position; defaults to end of list
+       */
+      function addItem({ atIndex } = {}) {
+        const newItem = createBlankItem();
+        const list = [...props.assessments];
+        const pos = atIndex !== undefined ? atIndex : list.length;
+        list.splice(pos, 0, newItem);
+        emit('update', list);
+        // open the newly created card
+        activeId.value = newItem.id;
+      }
+
+      function deleteItem(item) {
+        if (activeId.value === item.id) closeItem();
+        emit(
+          'update',
+          props.assessments.filter(i => i.id !== item.id),
+        );
+      }
+
+      function moveItemUp(idx) {
+        if (idx === 0) return;
+        const list = [...props.assessments];
+        [list[idx - 1], list[idx]] = [list[idx], list[idx - 1]];
+        emit('update', list);
+      }
+
+      function moveItemDown(idx) {
+        if (idx === props.assessments.length - 1) return;
+        const list = [...props.assessments];
+        [list[idx], list[idx + 1]] = [list[idx + 1], list[idx]];
+        emit('update', list);
+      }
+
+      const { getToolbarActions } = useQTIEditorActions({
+        items,
+        activeId,
+        windowIsSmall,
+        openItem,
+        moveItemUp,
+        moveItemDown,
+        addItem,
+        deleteItem,
+      });
+
+      const { noQuestionsPlaceholder$, newQuestionBtnLabel$, showAnswers$ } = qtiEditorStrings;
+
+      return {
+        containerStyle,
+        items,
+        activeId,
+        displayAnswersPreview,
+        closeItem,
+        addItem,
+        getToolbarActions,
+        noQuestionsPlaceholder$,
+        newQuestionBtnLabel$,
+        showAnswers$,
+      };
+    },
+
+    props: {
+      /**
+       * Ordered list of assessment items. Each item must have:
+       *   id    {String}  — stable unique identifier (UUID)
+       *   type  {String}  — a QtiInteraction value
+       *   title {String}  — optional display title
+       *
+       * Array index is the display order.
+       * This component never mutates the prop — it emits `update` with the new list.
+       */
+      assessments: {
+        type: Array,
+        default: () => [],
+      },
+    },
+
+    emits: ['update'],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .show-answers-container {
+    margin-bottom: 16px;
+  }
+
+  .show-answers-inner {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+  }
+
+  .question-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
new file mode 100644
index 0000000000..b4a852f9f7
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -0,0 +1,80 @@
+import { createTranslator } from 'shared/i18n';
+
+export const qtiEditorStrings = createTranslator('QTIEditorStrings', {
+  noQuestionsPlaceholder: {
+    message: 'No questions yet',
+    context: 'Shown when the question list is empty',
+  },
+  newQuestionBtnLabel: {
+    message: 'New question',
+    context: 'Button that adds a new question to the list',
+  },
+  questionNumberLabel: {
+    message: 'Question {number} of {total}',
+    context: 'Card header when card is open, e.g. "Question 2 of 5"',
+  },
+  questionNumberAndTypeLabel: {
+    message: 'Question {number} of {total} \u2014 {type}',
+    context: 'Card header when card is closed, e.g. "Question 1 of 3 \u2014 Choice"',
+  },
+  closeBtnLabel: {
+    message: 'Close',
+    context: 'Button that collapses the open question card',
+  },
+  questionContentPlaceholder: {
+    message: 'Question content editor coming soon',
+    context: 'Placeholder inside an open card until interaction editors are built',
+  },
+  showAnswers: {
+    message: 'Show answers',
+    context: 'Checkbox label to toggle displaying answers/previews',
+  },
+  interactionTypeChoice: {
+    message: 'Choice',
+    context: 'Display name for choiceInteraction',
+  },
+  interactionTypeOrder: {
+    message: 'Order',
+    context: 'Display name for orderInteraction',
+  },
+  interactionTypeMatch: {
+    message: 'Match',
+    context: 'Display name for matchInteraction',
+  },
+  interactionTypeTextEntry: {
+    message: 'Text entry',
+    context: 'Display name for textEntryInteraction',
+  },
+  interactionTypeExtendedText: {
+    message: 'Extended text',
+    context: 'Display name for extendedTextInteraction',
+  },
+  interactionTypeUnknown: {
+    message: 'Unknown type',
+    context: 'Fallback when an item has an unrecognised interaction type',
+  },
+  toolbarLabelEdit: {
+    message: 'Edit',
+    context: 'Action to edit the item',
+  },
+  toolbarLabelMoveUp: {
+    message: 'Move up',
+    context: 'Action to move the item up',
+  },
+  toolbarLabelMoveDown: {
+    message: 'Move down',
+    context: 'Action to move the item down',
+  },
+  toolbarLabelDelete: {
+    message: 'Delete',
+    context: 'Action to delete the item',
+  },
+  toolbarLabelAddAbove: {
+    message: 'Add question above',
+    context: 'Action to add a new question above the current one',
+  },
+  toolbarLabelAddBelow: {
+    message: 'Add question below',
+    context: 'Action to add a new question below the current one',
+  },
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/QTIEditor/useQTIEditorActions.js b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/useQTIEditorActions.js
new file mode 100644
index 0000000000..a543efb9b3
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/useQTIEditorActions.js
@@ -0,0 +1,84 @@
+import { qtiEditorStrings } from './qtiEditorStrings';
+
+/**
+ * Generates the toolbar actions array for a specific QTI item in the list.
+ */
+export default function useQTIEditorActions({
+  items,
+  activeId,
+  windowIsSmall,
+  openItem,
+  moveItemUp,
+  moveItemDown,
+  addItem,
+  deleteItem,
+}) {
+  const {
+    toolbarLabelEdit$,
+    toolbarLabelMoveUp$,
+    toolbarLabelMoveDown$,
+    toolbarLabelAddAbove$,
+    toolbarLabelAddBelow$,
+    toolbarLabelDelete$,
+  } = qtiEditorStrings;
+
+  function getToolbarActions(item, idx) {
+    const result = [];
+    const isEditMode = activeId.value === item.id;
+
+    result.push({
+      id: 'edit',
+      icon: 'edit',
+      label: toolbarLabelEdit$(),
+      handler: () => openItem(item.id),
+      collapsed: false,
+      disabled: isEditMode,
+    });
+
+    result.push({
+      id: 'move-up',
+      icon: 'chevronUp',
+      label: toolbarLabelMoveUp$(),
+      handler: () => moveItemUp(idx),
+      collapsed: windowIsSmall.value,
+      disabled: idx === 0,
+    });
+
+    result.push({
+      id: 'move-down',
+      icon: 'chevronDown',
+      label: toolbarLabelMoveDown$(),
+      handler: () => moveItemDown(idx),
+      collapsed: windowIsSmall.value,
+      disabled: idx === items.value.length - 1,
+    });
+
+    result.push(
+      {
+        id: 'add-above',
+        icon: null,
+        label: toolbarLabelAddAbove$(),
+        handler: () => addItem({ atIndex: idx }),
+        collapsed: true,
+      },
+      {
+        id: 'add-below',
+        icon: null,
+        label: toolbarLabelAddBelow$(),
+        handler: () => addItem({ atIndex: idx + 1 }),
+        collapsed: true,
+      },
+      {
+        id: 'delete',
+        icon: 'close',
+        label: toolbarLabelDelete$(),
+        handler: () => deleteItem(item),
+        collapsed: true,
+      },
+    );
+
+    return result;
+  }
+
+  return { getToolbarActions };
+}