From 31a8d05f4f4e403e141f5f676473dae5329dd717 Mon Sep 17 00:00:00 2001
From: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Date: Wed, 10 Jun 2026 00:28:46 +0530
Subject: [PATCH] feat: Initial  Scaffold for  QTI editor components and add a
 development page

Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
---
 .../frontend/channelEdit/constants.js         |   1 +
 .../channelEdit/pages/QTIDemoPage.vue         |  72 ++++++
 .../frontend/channelEdit/router.js            |   6 +
 .../components/QTIItemEditor/index.vue        | 231 ++++++++++++++++++
 .../shared/views/QTIEditor/constants.js       |  28 +++
 .../frontend/shared/views/QTIEditor/index.vue | 214 ++++++++++++++++
 .../views/QTIEditor/qtiEditorStrings.js       |  68 ++++++
 7 files changed, 620 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/channelEdit/pages/QTIDemoPage.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js

diff --git a/contentcuration/contentcuration/frontend/channelEdit/constants.js b/contentcuration/contentcuration/frontend/channelEdit/constants.js
index 8932058ecf..2658a5cd19 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/constants.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/constants.js
@@ -18,6 +18,7 @@ export const RouteNames = {
   TRASH: 'TRASH',
   ADD_PREVIOUS_STEPS: 'ADD_PREVIOUS_STEPS',
   ADD_NEXT_STEPS: 'ADD_NEXT_STEPS',
+  QTI_DEMO: 'QTI_DEMO',
 };
 
 export const viewModes = {
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..7414d8e712 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: RouteNames.QTI_DEMO,
+      path: '/qti-demo',
+      component: QTIDemoPage,
+    },
     {
       name: RouteNames.TREE_VIEW,
       path: '/:nodeId/:detailNodeId?',
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..0088de8d0d
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue
@@ -0,0 +1,231 @@
+<template>
+
+  <KPageContainer
+    noPadding
+    :topMargin="0"
+    class="item question-card"
+    :class="{ closed: !isOpen }"
+    data-test="item"
+    @click.native="onCardClick"
+  >
+    <div
+      class="question-card-header"
+      :style="{ borderBottom: isOpen ? `1px solid ${$themePalette.grey.v_200}` : 'none' }"
+    >
+      <h3
+        class="question-card-title"
+        :style="{ color: $themePalette.grey.v_800 }"
+      >
+        <template v-if="isOpen">
+          {{ questionNumberLabel }}
+        </template>
+        <template v-else>
+          {{ questionNumberAndTypeLabel }}
+        </template>
+      </h3>
+
+      <div class="question-card-actions toolbar">
+        <AssessmentItemToolbar
+          :iconActionsConfig="iconActionsConfig"
+          :menuActionsConfig="menuActionsConfig"
+          :displayMenu="true"
+          :canMoveUp="canMoveUp"
+          :canMoveDown="canMoveDown"
+          :canEdit="!isOpen"
+          :collapse="windowIsSmall"
+          :itemLabel="toolbarItemLabel"
+          analyticsLabel="QTI Question"
+          data-test="toolbar"
+          @click="action => $emit('action', action)"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="isOpen || displayAnswersPreview"
+      class="question-card-body"
+    >
+      <p :style="{ color: $themePalette.grey.v_500, margin: 0, fontStyle: 'italic' }">
+        {{ questionContentPlaceholder }}
+      </p>
+    </div>
+
+    <div
+      v-if="isOpen"
+      class="question-card-footer"
+    >
+      <KButton
+        :text="closeBtnLabel"
+        class="close-item-btn"
+        data-test="closeBtn"
+        @click="$emit('close')"
+      />
+    </div>
+  </KPageContainer>
+
+</template>
+
+
+<script>
+
+  import { computed, defineComponent } from 'vue';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { useQTIStr } from '../../qtiEditorStrings';
+  import { QtiInteraction } from '../../constants';
+  import AssessmentItemToolbar from 'frontend/channelEdit/components/AssessmentItemToolbar';
+  import { AssessmentItemToolbarActions } from 'frontend/channelEdit/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 defineComponent({
+    name: 'QTIItemEditor',
+
+    components: { AssessmentItemToolbar },
+
+    setup(props, { emit }) {
+      const { windowIsSmall } = useKResponsiveWindow();
+
+      const questionNumberLabel = computed(() =>
+        useQTIStr('questionNumberLabel', {
+          number: props.index,
+          total: props.total,
+        }),
+      );
+
+      const questionNumberAndTypeLabel = computed(() => {
+        const typeKey = INTERACTION_TYPE_STRING_KEY[props.item.type];
+        const typeLabel = typeKey ? useQTIStr(typeKey) : useQTIStr('interactionTypeUnknown');
+        return useQTIStr('questionNumberAndTypeLabel', {
+          number: props.index,
+          total: props.total,
+          type: typeLabel,
+        });
+      });
+      const toolbarItemLabel = useQTIStr('toolbarItemLabel');
+      const closeBtnLabel = useQTIStr('closeBtnLabel');
+      const questionContentPlaceholder = useQTIStr('questionContentPlaceholder');
+
+      const canMoveUp = computed(() => props.index > 1);
+      const canMoveDown = computed(() => props.index < props.total);
+
+      const iconActionsConfig = [
+        [AssessmentItemToolbarActions.MOVE_ITEM_UP, { collapse: true }],
+        [AssessmentItemToolbarActions.MOVE_ITEM_DOWN, { collapse: true }],
+      ];
+      const menuActionsConfig = [
+        AssessmentItemToolbarActions.ADD_ITEM_ABOVE,
+        AssessmentItemToolbarActions.ADD_ITEM_BELOW,
+        AssessmentItemToolbarActions.DELETE_ITEM,
+      ];
+
+      function onCardClick(event) {
+        if (props.isOpen) return;
+        if (
+          event.target.closest('.toolbar') !== null ||
+          event.target.closest('.close-item-btn') !== null
+        ) {
+          return;
+        }
+        emit('open');
+      }
+
+      return {
+        windowIsSmall,
+        questionNumberLabel,
+        questionNumberAndTypeLabel,
+        toolbarItemLabel,
+        closeBtnLabel,
+        questionContentPlaceholder,
+        canMoveUp,
+        canMoveDown,
+        iconActionsConfig,
+        menuActionsConfig,
+        onCardClick,
+      };
+    },
+
+    props: {
+      /** Assessment item: { id, type (QtiInteraction value), title } */
+      item: {
+        type: Object,
+        required: true,
+      },
+      /** 1-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 expanded */
+      isOpen: {
+        type: Boolean,
+        default: false,
+      },
+      /** Whether to show answers previews for closed items */
+      displayAnswersPreview: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  });
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .question-card {
+    --question-card-horizontal-padding: 20px;
+
+    position: relative;
+    min-height: 75px;
+    padding: 0;
+    margin-bottom: 16px;
+
+    &.closed {
+      cursor: pointer;
+    }
+  }
+
+  .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..1e39672c0e
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/index.vue
@@ -0,0 +1,214 @@
+<template>
+
+  <div :style="[containerStyle, { padding: '16px' }]">
+    <template v-if="items && items.length">
+      <KPageContainer
+        class="show-answers-container"
+        :topMargin="0"
+        noPadding
+      >
+        <div class="show-answers-inner">
+          <Checkbox
+            v-model="displayAnswersPreview"
+            :label="showAnswersLabel"
+            class="ma-0"
+            data-test="showAnswersCheckbox"
+            style="font-size: 16px"
+          />
+        </div>
+      </KPageContainer>
+
+      <transition-group
+        name="list-complete"
+        tag="div"
+      >
+        <QTIItemEditor
+          v-for="(item, idx) in items"
+          :key="item.id"
+          :item="item"
+          :index="idx + 1"
+          :total="items.length"
+          :isOpen="activeId === item.id"
+          :displayAnswersPreview="displayAnswersPreview"
+          data-test="item"
+          @open="openItem(item.id)"
+          @close="closeItem"
+          @action="onItemAction($event, item, idx)"
+        />
+      </transition-group>
+    </template>
+
+    <div v-else>
+      {{ noQuestionsPlaceholder }}
+    </div>
+
+    <KButton
+      :text="newQuestionBtnLabel"
+      style="margin-top: 16px; margin-left: 0"
+      data-test="newQuestionBtn"
+      @click="addItem()"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref, computed, defineComponent } from 'vue';
+  import { v4 as uuidv4 } from 'uuid';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { useQTIStr } from './qtiEditorStrings';
+  import { QtiInteraction } from './constants';
+  import QTIItemEditor from './components/QTIItemEditor/index';
+  import Checkbox from 'shared/views/form/Checkbox';
+  import { AssessmentItemToolbarActions } from 'frontend/channelEdit/constants';
+
+  /** Creates a blank item with a stable UUID and the default interaction type. */
+  function createBlankItem() {
+    return {
+      id: uuidv4(),
+      type: QtiInteraction.CHOICE,
+      title: '',
+    };
+  }
+
+  export default defineComponent({
+    name: 'QTIEditor',
+
+    components: { QTIItemEditor, Checkbox },
+
+    setup(props, { emit }) {
+      const { windowIsSmall } = useKResponsiveWindow();
+
+      const containerStyle = computed(() =>
+        windowIsSmall.value ? {} : { maxWidth: '85%', margin: '0 auto' },
+      );
+
+      const items = computed(() => props.assessments);
+
+      const activeId = ref(null);
+      const displayAnswersPreview = ref(false);
+
+      function openItem(id) {
+        activeId.value = id;
+      }
+
+      function closeItem() {
+        activeId.value = null;
+      }
+
+      const cloneList = () => [...props.assessments];
+
+      /**
+       * 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 = cloneList();
+        const pos = atIndex !== undefined ? atIndex : list.length;
+        list.splice(pos, 0, newItem);
+        emit('update', list);
+        // Open the newly created card on the next tick
+        setTimeout(() => {
+          activeId.value = newItem.id;
+        }, 0);
+      }
+
+      function deleteItem(item) {
+        if (activeId.value === item.id) closeItem();
+        emit(
+          'update',
+          cloneList().filter(i => i.id !== item.id),
+        );
+      }
+
+      function moveItemUp(idx) {
+        if (idx === 0) return;
+        const list = cloneList();
+        [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 = cloneList();
+        [list[idx], list[idx + 1]] = [list[idx + 1], list[idx]];
+        emit('update', list);
+      }
+
+      function onItemAction(action, item, idx) {
+        switch (action) {
+          case AssessmentItemToolbarActions.EDIT_ITEM:
+            openItem(item.id);
+            break;
+          case AssessmentItemToolbarActions.DELETE_ITEM:
+            deleteItem(item);
+            break;
+          case AssessmentItemToolbarActions.ADD_ITEM_ABOVE:
+            addItem({ atIndex: idx });
+            break;
+          case AssessmentItemToolbarActions.ADD_ITEM_BELOW:
+            addItem({ atIndex: idx + 1 });
+            break;
+          case AssessmentItemToolbarActions.MOVE_ITEM_UP:
+            moveItemUp(idx);
+            break;
+          case AssessmentItemToolbarActions.MOVE_ITEM_DOWN:
+            moveItemDown(idx);
+            break;
+        }
+      }
+
+      return {
+        noQuestionsPlaceholder: useQTIStr('noQuestionsPlaceholder'),
+        newQuestionBtnLabel: useQTIStr('newQuestionBtnLabel'),
+        showAnswersLabel: useQTIStr('showAnswers'),
+        containerStyle,
+        items,
+        activeId,
+        displayAnswersPreview,
+        openItem,
+        closeItem,
+        addItem,
+        onItemAction,
+      };
+    },
+
+    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;
+  }
+
+</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..a134e7b9a3
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/QTIEditor/qtiEditorStrings.js
@@ -0,0 +1,68 @@
+import { createTranslator } from 'shared/i18n';
+
+const NAMESPACE = 'QTIEditorStrings';
+
+const MESSAGES = {
+  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"',
+  },
+  toolbarItemLabel: {
+    message: 'question',
+    context: 'Noun used by the toolbar for accessible action labels',
+  },
+  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',
+  },
+};
+
+export const qtiEditorStrings = createTranslator(NAMESPACE, MESSAGES);
+
+export function useQTIStr(key, args) {
+  return qtiEditorStrings.$tr(key, args);
+}