feat: add ordering interaction type to QTI editor with full implementation and tests

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

Author: Abhishek-Punhani

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

@@ -174,14 +174,55 @@ export const FREE_RESPONSE_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
   </qti-item-body>
 </qti-assessment-item>`;
 
+/**
+ * Demo item 6: ordering interaction — learner arranges planets in correct order.
+ * Uses cardinality="ordered" and base-type="identifier" per QTI 3.0 §3.2.10.
+ */
+export const ORDERING_ITEM_XML = `<?xml version="1.0" encoding="UTF-8"?>
+<qti-assessment-item
+  xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+  identifier="item-ordering"
+  title="Order the planets by distance from the Sun"
+  adaptive="false"
+  time-dependent="false"
+  xml:lang="en"
+>
+  <qti-response-declaration
+    identifier="RESPONSE"
+    cardinality="ordered"
+    base-type="identifier"
+  >
+    <qti-correct-response>
+      <qti-value>order_mercury</qti-value>
+      <qti-value>order_venus</qti-value>
+      <qti-value>order_earth</qti-value>
+      <qti-value>order_mars</qti-value>
+    </qti-correct-response>
+  </qti-response-declaration>
+
+  <qti-item-body>
+    <qti-order-interaction
+      response-identifier="RESPONSE"
+      orientation="vertical"
+      shuffle="true"
+    >
+      <qti-prompt><p>Arrange the planets in order from closest to farthest from the Sun.</p></qti-prompt>
+      <qti-simple-choice identifier="order_mercury">Mercury</qti-simple-choice>
+      <qti-simple-choice identifier="order_venus">Venus</qti-simple-choice>
+      <qti-simple-choice identifier="order_earth">Earth</qti-simple-choice>
+      <qti-simple-choice identifier="order_mars">Mars</qti-simple-choice>
+    </qti-order-interaction>
+  </qti-item-body>
+</qti-assessment-item>`;
+
 /**
  * Hardcoded items covering different states:
  *  - item-1: single-select choice interaction
  *  - item-2: multi-select choice interaction
  *  - item-numeric: numeric text-entry
  *  - item-text-entry: string text-entry with case-sensitive answers
  *  - item-free-response: free-response text-entry (no correct answer)
- *  - item-blank: no raw_data → shows placeholder (blank new item state)
+ *  - item-ordering: ordering interaction (planets by distance from the Sun)
  */
 export const INITIAL_ASSESSMENTS = [
   {
@@ -210,7 +251,8 @@ export const INITIAL_ASSESSMENTS = [
     raw_data: FREE_RESPONSE_ITEM_XML,
   },
   {
-    assessment_id: 'demo-item-blank',
+    assessment_id: 'demo-item-ordering',
     type: AssessmentItemTypes.QTI,
+    raw_data: ORDERING_ITEM_XML,
   },
 ];

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

@@ -131,6 +131,7 @@
           [QuestionType.NUMERIC]: qtiEditorStrings.numericLabel$,
           [QuestionType.TEXT_ENTRY]: qtiEditorStrings.textEntryLabel$,
           [QuestionType.FREE_RESPONSE]: qtiEditorStrings.freeResponseLabel$,
+          [QuestionType.ORDERING]: qtiEditorStrings.orderingLabel$,
         };
         return (QUESTION_TYPE_LABELS[type] ?? unknownTypeLabel$)();
       });

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

@@ -0,0 +1,124 @@
+import { ref } from 'vue';
+import { useOrderingInteraction } from '../useOrderingInteraction';
+import { ORDERING_XML, ORDERING_DECL_XML } from '../../utils/testingFixtures';
+import { QuestionType, ValidationError, Orientation } from '../../constants';
+
+function makeInteractionBlock(bodyXml = ORDERING_XML, declarationXml = ORDERING_DECL_XML) {
+  return { bodyXml, responseDeclarations: [declarationXml] };
+}
+
+describe('useOrderingInteraction', () => {
+  function setup(bodyXml, declarationXml) {
+    const questionType = ref(QuestionType.ORDERING);
+    return useOrderingInteraction(makeInteractionBlock(bodyXml, declarationXml), questionType);
+  }
+
+  describe('initial state', () => {
+    it('parses items correctly from the fixture XML', () => {
+      const { state } = setup();
+      expect(state.value.items).toHaveLength(3);
+      expect(state.value.items[0].id).toBe('order_aaa11111');
+    });
+
+    it('starts with an empty errors array', () => {
+      const { errors } = setup();
+      expect(errors.value).toEqual([]);
+    });
+
+    it('orientation defaults to vertical', () => {
+      const { state } = setup();
+      expect(state.value.orientation).toBe(Orientation.VERTICAL);
+    });
+  });
+
+  describe('addItem()', () => {
+    it('appends a new item with a generated order_ identifier', () => {
+      const { state, addItem } = setup();
+      const before = state.value.items.length;
+      addItem();
+      expect(state.value.items).toHaveLength(before + 1);
+      expect(state.value.items[before].id).toMatch(/^order_/);
+    });
+
+    it('new item starts with empty content', () => {
+      const { state, addItem } = setup();
+      addItem();
+      const last = state.value.items[state.value.items.length - 1];
+      expect(last.content).toBe('');
+    });
+  });
+
+  describe('removeItem()', () => {
+    it('removes the item with the given id', () => {
+      const { state, removeItem } = setup();
+      const idToRemove = state.value.items[0].id;
+      removeItem(idToRemove);
+      expect(state.value.items.find(i => i.id === idToRemove)).toBeUndefined();
+    });
+
+    it('is a no-op when only one item remains', () => {
+      const { state, removeItem } = setup();
+      // Remove until one left
+      while (state.value.items.length > 1) {
+        removeItem(state.value.items[0].id);
+      }
+      const lastId = state.value.items[0].id;
+      removeItem(lastId);
+      expect(state.value.items).toHaveLength(1);
+    });
+  });
+
+  describe('moveItemUp()', () => {
+    it('swaps the item at index N with the one at index N-1', () => {
+      const { state, moveItemUp } = setup();
+      const [firstId, secondId] = state.value.items.map(i => i.id);
+      moveItemUp(secondId);
+      expect(state.value.items[0].id).toBe(secondId);
+      expect(state.value.items[1].id).toBe(firstId);
+    });
+
+    it('is a no-op when the item is already at the top', () => {
+      const { state, moveItemUp } = setup();
+      const firstId = state.value.items[0].id;
+      moveItemUp(firstId);
+      expect(state.value.items[0].id).toBe(firstId);
+    });
+  });
+
+  describe('moveItemDown()', () => {
+    it('swaps the item at index N with the one at index N+1', () => {
+      const { state, moveItemDown } = setup();
+      const [firstId, secondId] = state.value.items.map(i => i.id);
+      moveItemDown(firstId);
+      expect(state.value.items[0].id).toBe(secondId);
+      expect(state.value.items[1].id).toBe(firstId);
+    });
+
+    it('is a no-op when the item is already at the bottom', () => {
+      const { state, moveItemDown } = setup();
+      const lastId = state.value.items[state.value.items.length - 1].id;
+      moveItemDown(lastId);
+      expect(state.value.items[state.value.items.length - 1].id).toBe(lastId);
+    });
+  });
+
+  describe('setItemContent()', () => {
+    it('updates only the targeted item content', () => {
+      const { state, setItemContent } = setup();
+      const targetId = state.value.items[1].id;
+      setItemContent(targetId, '<p>Updated</p>');
+      expect(state.value.items[1].content).toBe('<p>Updated</p>');
+      // Other items untouched
+      expect(state.value.items[0].content).toBe(state.value.items[0].content);
+    });
+  });
+
+  describe('runValidation()', () => {
+    it('populates errors for an invalid state', () => {
+      const { runValidation, errors, setPrompt } = setup();
+      setPrompt('');
+      runValidation();
+      expect(errors.value.some(e => e.code === ValidationError.PROMPT_REQUIRED)).toBe(true);
+    });
+  });
+});

contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useOrderingInteraction.js

@@ -0,0 +1,68 @@
+import { readonly } from 'vue';
+import { generateRandomSlug } from '../utils/generateRandomSlug';
+import { orderingInteractionDescriptor } from '../interactions/ordering/OrderingInteractionDescriptor';
+import { useInteraction } from './useInteraction';
+
+/**
+ * Composable for the ordering interaction editor.
+ *
+ * @param {{ bodyXml: string, responseDeclarations: string[] }} interactionBlock
+ * @param {import('vue').Ref<string|null>} questionType
+ */
+export function useOrderingInteraction(interactionBlock, questionType) {
+  const base = useInteraction(orderingInteractionDescriptor, interactionBlock, questionType);
+  const { state } = base;
+
+  function addItem() {
+    state.value = {
+      ...state.value,
+      items: [...state.value.items, { id: generateRandomSlug('order'), content: '', fixed: false }],
+    };
+  }
+
+  function removeItem(id) {
+    if (state.value.items.length <= 1) return;
+    state.value = {
+      ...state.value,
+      items: state.value.items.filter(item => item.id !== id),
+    };
+  }
+
+  function moveItemUp(id) {
+    const items = [...state.value.items];
+    const idx = items.findIndex(item => item.id === id);
+    if (idx <= 0) return;
+    [items[idx - 1], items[idx]] = [items[idx], items[idx - 1]];
+    state.value = { ...state.value, items };
+  }
+
+  function moveItemDown(id) {
+    const items = [...state.value.items];
+    const idx = items.findIndex(item => item.id === id);
+    if (idx === -1 || idx >= items.length - 1) return;
+    [items[idx], items[idx + 1]] = [items[idx + 1], items[idx]];
+    state.value = { ...state.value, items };
+  }
+
+  function setItemContent(id, html) {
+    state.value = {
+      ...state.value,
+      items: state.value.items.map(item => (item.id === id ? { ...item, content: html } : item)),
+    };
+  }
+
+  function setPrompt(html) {
+    state.value = { ...state.value, prompt: html };
+  }
+
+  return {
+    ...base,
+    state: readonly(state),
+    addItem,
+    removeItem,
+    moveItemUp,
+    moveItemDown,
+    setItemContent,
+    setPrompt,
+  };
+}

contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js

@@ -80,6 +80,7 @@ export const QuestionType = Object.freeze({
   NUMERIC: 'numeric',
   TEXT_ENTRY: 'textEntry',
   FREE_RESPONSE: 'freeResponse',
+  ORDERING: 'ordering',
 });
 
 /**
@@ -96,6 +97,7 @@ export const ValidationError = Object.freeze({
   INVALID_NUMERIC_VALUE: 'INVALID_NUMERIC_VALUE',
   EMPTY_ANSWER_CONTENT: 'EMPTY_ANSWER_CONTENT',
   DUPLICATE_ANSWER_CONTENT: 'DUPLICATE_ANSWER_CONTENT',
+  TOO_FEW_CHOICES: 'TOO_FEW_CHOICES',
 });
 
 export const RESPONSE_IDENTIFIER = 'RESPONSE';

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/index.js

@@ -1,6 +1,7 @@
 import { QtiInteraction } from '../constants';
 import choiceDescriptor from './choice/index';
 import textEntryDescriptor from './textEntry/index';
+import orderingDescriptor from './ordering/index';
 
 /**
  * The default interaction type used as fallback when no descriptor matches
@@ -12,7 +13,7 @@ export const DEFAULT_INTERACTION = QtiInteraction.CHOICE;
  * Ordered list of all registered interaction descriptors.
  * Searched in order; the first whose `matches(el)` returns true wins.
  */
-export const descriptors = [choiceDescriptor, textEntryDescriptor];
+export const descriptors = [choiceDescriptor, textEntryDescriptor, orderingDescriptor];
 
 /**
  * Registry map keyed by descriptor.type for O(1) direct lookup.

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/ordering/OrderingInteractionDescriptor.js

@@ -0,0 +1,85 @@
+import { QtiInteraction, QuestionType, BaseType, Cardinality } from '../../constants';
+import { parseOrderingInteraction, buildOrderingInteractionXML } from './parse';
+import { validateOrderingInteraction } from './validate';
+
+/**
+ * Owns all ordering-specific interaction logic: schema, parse, buildXML, and validate.
+ */
+export class OrderingInteractionDescriptor {
+  constructor({ editorComponent = null } = {}) {
+    this.type = QtiInteraction.ORDER;
+    this.placement = 'block';
+    this.questionTypes = [QuestionType.ORDERING];
+    this.editorComponent = editorComponent;
+    this.convertsFrom = [];
+  }
+
+  getTypeOptions(tr) {
+    return [
+      {
+        value: QuestionType.ORDERING,
+        label: tr.orderingLabel$(),
+        description: tr.orderingDescription$(),
+      },
+    ];
+  }
+
+  /** @param {Element} el */
+  matches(el) {
+    return el.tagName.toLowerCase() === QtiInteraction.ORDER;
+  }
+
+  /**
+   * Ordering always has exactly one question type.
+   *
+   * @returns {string}
+   */
+  getQuestionType() {
+    return QuestionType.ORDERING;
+  }
+
+  /**
+   * @returns {{ baseType: string, cardinality: string }}
+   */
+  getResponseDeclarationSchema() {
+    return {
+      baseType: BaseType.IDENTIFIER,
+      cardinality: Cardinality.ORDERED,
+    };
+  }
+
+  /**
+   * Parse <qti-order-interaction> body XML + response declarations → OrderingState.
+   *
+   * @param {string} bodyXml
+   * @param {string[]} responseDeclarations
+   * @returns {object} OrderingState
+   */
+  parse(bodyXml, responseDeclarations) {
+    return parseOrderingInteraction(bodyXml, responseDeclarations);
+  }
+
+  /**
+   * Serialize OrderingState → { bodyXml, responseDeclarations }.
+   *
+   * @param {object} state - OrderingState
+   * @param {string} questionType
+   * @returns {{ bodyXml: string, responseDeclarations: string[] }}
+   */
+  buildXML(state, questionType) {
+    return buildOrderingInteractionXML(state, questionType, this.getResponseDeclarationSchema());
+  }
+
+  /**
+   * Validate OrderingState → ValidationError[].
+   *
+   * @param {object} state - OrderingState
+   * @returns {Array<{ code: string, id?: string }>}
+   */
+  validate(state) {
+    return validateOrderingInteraction(state);
+  }
+}
+
+/** Singleton — safe to import from any file in the ordering module tree. */
+export const orderingInteractionDescriptor = new OrderingInteractionDescriptor();