refactor: standardize assessment item schema and rename preview toggle to showAnswers in QTIEditor

Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>

Author: Abhishek-Punhani

contentcuration/contentcuration/frontend/channelEdit/pages/QTIDemoPage.vue

@@ -30,7 +30,7 @@
   import { ref, defineComponent } from 'vue';
   import { CHOICE_ITEM_XML, MULTI_CHOICE_ITEM_XML } from './qtiDemoData';
   import QTIEditor from 'shared/views/QTIEditor/index';
-  import { QtiInteraction } from 'shared/views/QTIEditor/constants';
+  import { AssessmentItemTypes } from 'shared/views/QTIEditor/constants';
 
   /**
    * Hardcoded items covering different states:
@@ -40,26 +40,22 @@
    */
   const INITIAL_ASSESSMENTS = [
     {
-      id: 'demo-item-1',
-      type: QtiInteraction.CHOICE,
-      title: 'Which planet is closest to the Sun?',
+      assessment_id: 'demo-item-1',
+      type: AssessmentItemTypes.QTI,
       raw_data: CHOICE_ITEM_XML,
     },
     {
-      id: 'demo-item-2',
-      type: QtiInteraction.CHOICE,
-      title: 'Select all the prime numbers.',
+      assessment_id: 'demo-item-2',
+      type: AssessmentItemTypes.QTI,
       raw_data: MULTI_CHOICE_ITEM_XML,
     },
     {
-      id: 'demo-item-3',
-      type: QtiInteraction.EXTENDED_TEXT,
-      title: 'Describe the water cycle in your own words.',
+      assessment_id: 'demo-item-3',
+      type: AssessmentItemTypes.QTI,
     },
     {
-      id: 'demo-item-4',
-      type: QtiInteraction.ORDER,
-      title: 'Arrange these events in chronological order.',
+      assessment_id: 'demo-item-4',
+      type: AssessmentItemTypes.QTI,
     },
   ];
 

contentcuration/contentcuration/frontend/channelEdit/pages/qtiDemoData.js

@@ -1,3 +1,5 @@
+import { AssessmentItemTypes } from 'shared/views/QTIEditor/constants';
+
 /**
  * Demo item 1: a real choice interaction XML so the full load path can
  * be verified end-to-end (parseItem → useQtiItem → InteractionSection →
@@ -74,3 +76,26 @@ export const MULTI_CHOICE_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
     </qti-choice-interaction>
   </qti-item-body>
 </qti-assessment-item>`;
+
+/**
+ * Hardcoded items covering different states:
+ *  - item-1: has raw_data (real QTI XML) → exercises the full load path
+ *  - item-2: no raw_data → shows placeholder (blank new item state)
+ *  - item-3: no raw_data → shows placeholder
+ */
+export const INITIAL_ASSESSMENTS = [
+  {
+    assessment_id: 'demo-item-1',
+    type: AssessmentItemTypes.QTI,
+    raw_data: CHOICE_ITEM_XML,
+  },
+  {
+    assessment_id: 'demo-item-2',
+    type: AssessmentItemTypes.QTI,
+    raw_data: MULTI_CHOICE_ITEM_XML,
+  },
+  {
+    assessment_id: 'demo-item-3',
+    type: AssessmentItemTypes.QTI,
+  },
+];

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js

@@ -5,7 +5,7 @@ import InteractionSection from '../index.vue';
 import {
   CHOICE_SINGLE_SELECT_XML,
   UNKNOWN_INTERACTION_XML,
-  mockInteractionBlock as block,
+  mockInteractionBlock as interactionBlock,
 } from '../../../utils/testingFixtures';
 
 const renderSection = (props = {}) =>
@@ -21,26 +21,26 @@ const renderSection = (props = {}) =>
 describe('InteractionSection', () => {
   describe('choice interaction', () => {
     it('renders the prompt from the XML via ChoiceInteractionEditor', () => {
-      renderSection({ block: block(CHOICE_SINGLE_SELECT_XML) });
+      renderSection({ interaction: interactionBlock(CHOICE_SINGLE_SELECT_XML) });
       expect(screen.getByText('Which planet is closest to the Sun?')).toBeInTheDocument();
     });
 
     it('renders radio buttons for a single-select choice interaction', () => {
-      renderSection({ block: block(CHOICE_SINGLE_SELECT_XML) });
+      renderSection({ interaction: interactionBlock(CHOICE_SINGLE_SELECT_XML) });
       const radios = screen.getAllByRole('radio');
       expect(radios).toHaveLength(3);
     });
 
     it('renders the choice labels', () => {
-      renderSection({ block: block(CHOICE_SINGLE_SELECT_XML) });
+      renderSection({ interaction: interactionBlock(CHOICE_SINGLE_SELECT_XML) });
       expect(screen.getByText('Mercury')).toBeInTheDocument();
       expect(screen.getByText('Venus')).toBeInTheDocument();
     });
   });
 
   describe('parse error handling', () => {
     it('shows a parse error message and no interaction when XML is malformed', () => {
-      renderSection({ block: block('not-xml<{{') });
+      renderSection({ interaction: interactionBlock('not-xml<{{') });
       expect(screen.queryByRole('radio')).not.toBeInTheDocument();
       // At minimum no interactive elements render
       expect(screen.queryByRole('radio')).not.toBeInTheDocument();
@@ -51,7 +51,9 @@ describe('InteractionSection', () => {
   describe('unknown interaction type', () => {
     it('falls back silently when the interaction tag is unrecognized', () => {
       // Should not throw — just renders the fallback component
-      expect(() => renderSection({ block: block(UNKNOWN_INTERACTION_XML) })).not.toThrow();
+      expect(() =>
+        renderSection({ interaction: interactionBlock(UNKNOWN_INTERACTION_XML) }),
+      ).not.toThrow();
     });
   });
 });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue

@@ -12,8 +12,9 @@
       v-else
       :key="descriptor.type"
       :questionType="questionType"
-      :block="block"
+      :interaction="interaction"
       :mode="mode"
+      :showAnswers="showAnswers"
     />
   </div>
 
@@ -22,22 +23,30 @@
 
 <script>
 
-  import { computed } from 'vue';
+  import { computed, watch } from 'vue';
   import useInteractionDescriptor from '../../composables/useInteractionDescriptor';
 
   export default {
     name: 'InteractionSection',
 
-    setup(props) {
-      const bodyXmlRef = computed(() => props.block.bodyXml);
+    setup(props, { emit }) {
+      const bodyXmlRef = computed(() => props.interaction?.bodyXml);
       const { descriptor, questionType, parseError } = useInteractionDescriptor(bodyXmlRef);
 
+      watch(
+        questionType,
+        newType => {
+          if (newType) emit('update:questionType', newType);
+        },
+        { immediate: true },
+      );
+
       return { descriptor, questionType, parseError };
     },
 
     props: {
       /** The raw XML block representing an interaction and its response declarations */
-      block: {
+      interaction: {
         type: Object,
         required: true,
       },
@@ -46,7 +55,14 @@
         type: String,
         default: 'view',
       },
+      /** Whether to display correct answers (used in view mode previews) */
+      showAnswers: {
+        type: Boolean,
+        default: false,
+      },
     },
+
+    emits: ['update:questionType'],
   };
 
 </script>

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js

@@ -15,7 +15,7 @@ const defaultProps = {
   index: 0,
   total: 5,
   mode: 'view',
-  displayAnswersPreview: false,
+  showAnswers: false,
 };
 
 const renderComponent = (props = {}, slots = {}) => {
@@ -57,14 +57,14 @@ describe('QTIItemEditor', () => {
     });
   });
 
-  describe('displayAnswersPreview', () => {
-    test('shows the card body in view mode when displayAnswersPreview is true', () => {
-      renderComponent({ mode: 'view', displayAnswersPreview: true });
+  describe('showAnswers', () => {
+    test('shows the card body in view mode when showAnswers is true', () => {
+      renderComponent({ mode: 'view', showAnswers: true });
       expect(screen.getByText(questionContentPlaceholder$())).toBeInTheDocument();
     });
 
-    test('does not show the close button even when displayAnswersPreview is true', () => {
-      renderComponent({ mode: 'view', displayAnswersPreview: true });
+    test('does not show the close button even when showAnswers is true', () => {
+      renderComponent({ mode: 'view', showAnswers: true });
       expect(screen.queryByRole('button', { name: closeBtnLabel$() })).not.toBeInTheDocument();
     });
   });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue

@@ -29,9 +29,10 @@
     <div class="question-card-body">
       <InteractionSection
         v-if="interactions.length > 0"
-        :block="interactions[0]"
+        :interaction="interactions[0]"
         :mode="mode"
-        :displayAnswersPreview="displayAnswersPreview"
+        :showAnswers="showAnswers"
+        @update:questionType="type => (currentQuestionType = type)"
       />
       <p
         v-else
@@ -58,23 +59,12 @@
 
 <script>
 
-  import { computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { qtiEditorStrings } from '../../qtiEditorStrings';
-  import { QtiInteraction } from '../../constants';
-  import useInteractionDescriptor from '../../composables/useInteractionDescriptor';
+  import { AssessmentItemTypes, QuestionType } from '../../constants';
   import useQtiItem from '../../composables/useQtiItem';
   import InteractionSection from '../InteractionSection/index.vue';
 
-  // QTI interaction tag name → i18n string key, used for closed-card labels
-  // on items that have no raw_data yet (blank new items).
-  const INTERACTION_TYPE_STRING_KEY = {
-    [QtiInteraction.CHOICE]: 'interactionTypeSingleChoice', // defaults to single choice if no XML yet
-    [QtiInteraction.ORDER]: 'interactionTypeOrder',
-    [QtiInteraction.MATCH]: 'interactionTypeMatch',
-    [QtiInteraction.TEXT_ENTRY]: 'interactionTypeTextEntry',
-    [QtiInteraction.EXTENDED_TEXT]: 'interactionTypeExtendedText',
-  };
-
   export default {
     name: 'QTIItemEditor',
 
@@ -98,28 +88,16 @@
         }),
       );
 
-      const firstBlockXml = computed(() =>
-        interactions.value.length > 0 ? interactions.value[0].bodyXml : null,
-      );
-      const { descriptor, questionType } = useInteractionDescriptor(firstBlockXml);
+      const currentQuestionType = ref(props.item.type || AssessmentItemTypes.QTI);
 
-      /**
-       * Derives the type label for the closed-card header.
-       * When raw_data is present: parses the first interaction's bodyXml and uses
-       * the matching descriptor's label — this is the source of truth from the XML.
-       * When raw_data is absent (blank new items): falls back to item.type enum lookup.
-       */
       const interactionTypeLabel = computed(() => {
-        if (firstBlockXml.value) {
-          if (descriptor.value?.type === QtiInteraction.CHOICE) {
-            return questionType.value === 'singleSelect'
-              ? qtiEditorStrings.interactionTypeSingleChoice$()
-              : qtiEditorStrings.interactionTypeMultipleChoice$();
-          }
-          return descriptor.value ? descriptor.value.label : interactionTypeUnknown$();
+        if (currentQuestionType.value === QuestionType.SINGLE_SELECT) {
+          return qtiEditorStrings.interactionTypeSingleChoice$();
+        }
+        if (currentQuestionType.value === QuestionType.MULTI_SELECT) {
+          return qtiEditorStrings.interactionTypeMultipleChoice$();
         }
-        const typeKey = INTERACTION_TYPE_STRING_KEY[props.item.type];
-        return typeKey ? qtiEditorStrings[`${typeKey}$`]() : interactionTypeUnknown$();
+        return interactionTypeUnknown$();
       });
 
       const questionNumberAndTypeLabel = computed(() =>
@@ -131,6 +109,7 @@
       );
 
       return {
+        currentQuestionType,
         interactions,
         questionNumberLabel,
         questionNumberAndTypeLabel,
@@ -141,7 +120,7 @@
 
     props: {
       /**
-       * Assessment item: { id, type (QtiInteraction value), title, raw_data? }
+       * Assessment item: { assessment_id, type, raw_data? }
        * raw_data is the full QTI XML string; absent on blank newly-created items.
        */
       item: {
@@ -165,7 +144,7 @@
         validator: val => ['view', 'edit'].includes(val),
       },
       /** Whether to show answer previews for closed items */
-      displayAnswersPreview: {
+      showAnswers: {
         type: Boolean,
         default: false,
       },

contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteractionDescriptor.spec.js

@@ -2,7 +2,7 @@ import { render } from '@testing-library/vue';
 import { defineComponent, ref, nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import useInteractionDescriptor from '../useInteractionDescriptor';
-import { QtiInteraction } from '../../constants';
+import { QtiInteraction, QuestionType } from '../../constants';
 
 import {
   CHOICE_SINGLE_SELECT_XML,
@@ -45,12 +45,12 @@ describe('useInteractionDescriptor', () => {
 
     it('resolves questionType as singleSelect when max-choices is 1', () => {
       const { result } = renderDescriptor(CHOICE_SINGLE_SELECT_XML);
-      expect(result.questionType.value).toBe('singleSelect');
+      expect(result.questionType.value).toBe(QuestionType.SINGLE_SELECT);
     });
 
     it('resolves questionType as multiSelect when max-choices > 1', () => {
       const { result } = renderDescriptor(CHOICE_MULTI_SELECT_XML);
-      expect(result.questionType.value).toBe('multiSelect');
+      expect(result.questionType.value).toBe(QuestionType.MULTI_SELECT);
     });
 
     it('returns null parseError for valid XML', () => {
@@ -114,19 +114,19 @@ describe('useInteractionDescriptor', () => {
       bodyXmlRef.value = CHOICE_SINGLE_SELECT_XML;
       await nextTick();
 
-      expect(result.questionType.value).toBe('singleSelect');
+      expect(result.questionType.value).toBe(QuestionType.SINGLE_SELECT);
     });
 
     it('recomputes questionType when switching from single-select to multi-select', async () => {
       const { result, bodyXmlRef } = renderDescriptor(CHOICE_SINGLE_SELECT_XML);
       await nextTick();
 
-      expect(result.questionType.value).toBe('singleSelect');
+      expect(result.questionType.value).toBe(QuestionType.SINGLE_SELECT);
 
       bodyXmlRef.value = CHOICE_MULTI_SELECT_XML;
       await nextTick();
 
-      expect(result.questionType.value).toBe('multiSelect');
+      expect(result.questionType.value).toBe(QuestionType.MULTI_SELECT);
     });
   });
 });