From 954d39e90761cd62b2af370bec4a64d9e8c57961 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sat, 11 Jul 2026 02:07:58 +0300
Subject: [PATCH 01/10] feat: add qti textentry numeric example

---
 .../qti_viewer/frontend/components/__fixtures__/items.js      | 4 ++--
 .../qti_viewer/frontend/components/__fixtures__/structure.js  | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
index 23d8094b4b4..1bf2ce17bc2 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
+++ b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:581072841c36d499fa9401c73cb6a9ef87b298d9e86cf76be420c7101eeb80ba
-size 864016
+oid sha256:b1e8ed3139406e75848801ca80ca046d4b8449abd0a5e199762ddf03747b857a
+size 862145
diff --git a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/structure.js b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/structure.js
index 5c7806fd006..39f9cc25c8f 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/structure.js
+++ b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/structure.js
@@ -449,6 +449,10 @@ export default [
             identifier: 'q20-textentry-sv-1',
             title: 'Richard III',
           },
+          {
+            identifier: 'q20-textentry-sv-1a',
+            title: 'Richard III - MathML',
+          },
         ],
       },
       {

From 42ac6085c90cd0c30474a85ff0a3defd2b8b3797 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sat, 11 Jul 2026 02:22:06 +0300
Subject: [PATCH 02/10] feat: utilize numeric keypad for qti textEntry
 interaction

---
 .../frontend/components/AssessmentItem.vue    |  13 +-
 .../frontend/components/QTIViewer.vue         |   2 +
 .../interactions/TextEntryInteraction.vue     | 198 ++++++++++++++++--
 3 files changed, 194 insertions(+), 19 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue b/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
index fb9745fdb46..6b1254bd606 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
@@ -13,6 +13,7 @@
       >
         <SafeHTML :html="itemBodyMarkup" />
       </div>
+      <NumericKeypad :lang="lang" />
     </template>
   </div>
 
@@ -21,13 +22,15 @@
 
 <script>
 
-  import { computed, inject, provide, watch } from 'vue';
+  import { computed, inject, provide, ref, watch } from 'vue';
   import cloneDeep from 'lodash/cloneDeep';
   import { createSafeHTML } from 'kolibri-common/components/SafeHTML';
   import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
   import { useQTIContext } from '../composables/useQTIContext';
   import { getItemBodyGuides, numberPassageGaps } from '../utils/itemBodyGuidance';
   import AnswerGuide from './AnswerGuide.vue';
+  import useKeypad from 'kolibri-common/composables/useKeypad';
+  import NumericKeypad from 'kolibri-common/components/NumericKeypad';
   import ChoiceInteraction from './interactions/ChoiceInteraction.vue';
   import Prompt from './Prompt.vue';
   import SimpleChoice from './interactions/SimpleChoice.vue';
@@ -66,6 +69,7 @@
     components: {
       AnswerGuide,
       SafeHTML,
+      NumericKeypad,
     },
     setup(props) {
       const itemBody = computed(() => {
@@ -98,6 +102,12 @@
 
       const { responses, processResponses } = qtiContext;
 
+      const lang = inject('lang', ref(null));
+      // Hosts the shared keypad state
+      useKeypad();
+
+      const responses = {};
+
       function setFromAnswerState() {
         for (const [id, variable] of Object.entries(responses.value)) {
           if (id in injectedAnswerState.value && injectedAnswerState.value[id] != null) {
@@ -150,6 +160,7 @@
         itemBodyMarkup,
         guides,
         passageStyles,
+        lang,
       };
     },
     props: {
diff --git a/kolibri/plugins/qti_viewer/frontend/components/QTIViewer.vue b/kolibri/plugins/qti_viewer/frontend/components/QTIViewer.vue
index 9003fcba958..12d910195a3 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/QTIViewer.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/QTIViewer.vue
@@ -215,6 +215,8 @@
               environmentIdentifier: __version,
             },
         ),
+        'lang',
+        computed(() => props.lang),
       );
 
       provide(
diff --git a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
index 28333b25701..0fe4d7f1eb7 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
@@ -2,24 +2,29 @@
 
   <input
     v-if="interactive"
-    v-model="variable"
+    ref="inputEl"
     v-bind="inputAttrs"
+    :value="rawValue"
     :class="['qti-text-entry-interaction', attrsClass, $computedClass({ ':focus': coreOutline })]"
     :aria-label="textEntryLabel$()"
     :placeholder="placeholder"
+    :inputmode="inputMode"
     :style="{
       minWidth: `${Math.min(expectedLength ?? 20, 20)}ch`,
       maxWidth: '90%',
       border: `1px solid ${$themeTokens.fineLine}`,
     }"
-    :type="inputType"
+    type="text"
     autocomplete="off"
+    @input="onInput"
+    @focus="onFocus"
+    @blur="onBlur"
   >
   <div
     v-else
     :class="['qti-text-entry-interaction', 'qti-text-entry-interaction-report', attrsClass]"
   >
-    {{ variable || placeholder }}
+    {{ reportDisplayValue || placeholder }}
   </div>
 
 </template>
@@ -27,9 +32,11 @@
 
 <script>
 
-  import { computed, inject } from 'vue';
+  import { computed, inject, nextTick, onBeforeUnmount, ref, unref, watch } from 'vue';
   import { themeTokens, themeOutlineStyle } from 'kolibri-design-system/lib/styles/theme';
   import { createTranslator } from 'kolibri/utils/i18n';
+  import { injectKeypad } from 'kolibri-common/composables/useKeypad';
+  import { normalizeNumerals, localizeNumerals } from 'kolibri-common/utils/numeralNormalization';
   import useTypedProps from '../../composables/useTypedProps';
   import {
     NumberProp,
@@ -51,6 +58,15 @@
 
   const { textEntryLabel$ } = strings;
 
+  // prevent keys that are not valid for the baseType from being added to the input field
+  const SIMPLE_KEY_CHARS = {
+    DECIMAL: '.',
+    PERCENT: '%',
+    PI: 'π',
+    FRAC: '⁄',
+  };
+  const ALWAYS_EXCLUDED_KEYS = ['PERCENT', 'PI', 'FRAC'];
+
   export default {
     name: 'TextEntryInteraction',
     tag: 'qti-text-entry-interaction',
@@ -60,6 +76,8 @@
       const responses = inject('responses', {});
       const typedProps = useTypedProps(props);
       const interactive = inject('interactive', true);
+      const keypad = injectKeypad();
+      const lang = inject('lang', ref(null));
 
       const getContextAttrs = () => {
         if (!context || !context.attrs) {
@@ -80,7 +98,6 @@
         'step',
         'minlength',
         'maxlength',
-        'inputmode',
         'spellcheck',
         'autocapitalize',
         'autocorrect',
@@ -132,33 +149,177 @@
         return responses.value[typedProps.responseIdentifier.value];
       });
 
-      const variable = computed({
-        get() {
-          return inputDeclaration.value.value || '';
-        },
-        set(newValue) {
-          inputDeclaration.value.value = newValue;
+      const baseType = computed(() => inputDeclaration.value?.baseType);
+
+      const isNumeric = computed(() => {
+        return baseType.value === BASE_TYPE.INTEGER || baseType.value === BASE_TYPE.FLOAT;
+      });
+
+      const rawValue = ref(
+        inputDeclaration.value?.value == null ? '' : String(inputDeclaration.value.value),
+      );
+      const lastCommittedRaw = ref(rawValue.value);
+
+      // To keep rawValue in sync with the underlying response variable
+      watch(
+        () => inputDeclaration.value?.value,
+        newVal => {
+          const v = newVal == null ? '' : String(newVal);
+          if (v !== lastCommittedRaw.value) {
+            rawValue.value = v;
+            lastCommittedRaw.value = v;
+          }
         },
+      );
+
+      function commit(newRaw) {
+        if (!inputDeclaration.value) {
+          return false;
+        }
+        const candidate = isNumeric.value ? normalizeNumerals(newRaw) : newRaw;
+        try {
+          inputDeclaration.value.value = candidate;
+          lastCommittedRaw.value = candidate;
+          return true;
+        } catch (e) {
+          return false;
+        }
+      }
+
+      function onInput(event) {
+        rawValue.value = event.target.value;
+        commit(rawValue.value);
+      }
+
+      // Report-mode display only
+      const reportDisplayValue = computed(() => {
+        if (!isNumeric.value) {
+          return lastCommittedRaw.value;
+        }
+        const langId = unref(lang)?.id ?? unref(lang);
+        return localizeNumerals(lastCommittedRaw.value, langId);
       });
 
-      const inputType = computed(() => {
-        const baseType = inputDeclaration.value?.baseType;
-        if (baseType === BASE_TYPE.INTEGER || baseType === BASE_TYPE.FLOAT) {
-          return 'number';
+      const inputMode = computed(() => (isNumeric.value ? 'decimal' : undefined));
+
+      // --- Keypad wiring
+      // Caret is a plain index into the flat string here — not Perseus's
+      // expression-tree cursor. The returned value feeds the composable's
+      // opaque cursor ref; this component doesn't read it back.
+
+      const inputEl = ref(null);
+
+      const excludeKeys = computed(() => {
+        const keys = [...ALWAYS_EXCLUDED_KEYS];
+        if (baseType.value === BASE_TYPE.INTEGER) {
+          // A decimal point isn't a valid integer literal character.
+          keys.push('DECIMAL');
+        }
+        return keys;
+      });
+
+      function setCaret(pos) {
+        nextTick(() => {
+          if (inputEl.value) {
+            inputEl.value.setSelectionRange(pos, pos);
+          }
+        });
+      }
+
+      function handleKey(keyId) {
+        const el = inputEl.value;
+        if (!el) {
+          return null;
+        }
+        const start = el.selectionStart ?? el.value.length;
+        const end = el.selectionEnd ?? start;
+        let value = rawValue.value;
+        let caret = start;
+
+        if (keyId === 'BACKSPACE') {
+          if (start !== end) {
+            value = value.slice(0, start) + value.slice(end);
+          } else if (start > 0) {
+            value = value.slice(0, start - 1) + value.slice(start);
+            caret = start - 1;
+          }
+        } else if (keyId === 'LEFT') {
+          caret = Math.max(0, start - 1);
+          setCaret(caret);
+          return caret;
+        } else if (keyId === 'RIGHT') {
+          caret = Math.min(value.length, start + 1);
+          setCaret(caret);
+          return caret;
+        } else if (keyId === 'UP' || keyId === 'DOWN') {
+          return start;
+        } else if (keyId === 'NEGATIVE') {
+          if (value.startsWith('-')) {
+            value = value.slice(1);
+            caret = Math.max(0, start - 1);
+          } else {
+            value = '-' + value;
+            caret = start + 1;
+          }
+        } else {
+          const char = keyId.startsWith('NUM_') ? keyId.slice(4) : SIMPLE_KEY_CHARS[keyId];
+          if (!char) {
+            return start;
+          }
+          value = value.slice(0, start) + char + value.slice(end);
+          caret = start + char.length;
+        }
+
+        rawValue.value = value;
+        commit(value);
+        setCaret(caret);
+        return caret;
+      }
+
+      function onFocus() {
+        if (!unref(interactive) || !isNumeric.value || !keypad) {
+          return;
+        }
+        keypad.setKeyHandler(handleKey);
+        keypad.configure({
+          keypadType: 'FRACTION',
+          showVerticalNav: false,
+          excludeKeys: excludeKeys.value,
+        });
+        keypad.activate();
+      }
+
+      function onBlur() {
+        if (!commit(rawValue.value)) {
+          // fallback
+          rawValue.value = lastCommittedRaw.value;
+        }
+        if (keypad) {
+          keypad.dismiss();
+        }
+      }
+
+      onBeforeUnmount(() => {
+        if (keypad) {
+          keypad.dismiss();
         }
-        return 'text';
       });
 
       return {
         $themeTokens,
         textEntryLabel$,
-        variable,
+        rawValue,
+        reportDisplayValue,
         placeholder: typedProps.placeholderText,
         interactive,
-        inputType,
+        inputMode,
         coreOutline: themeOutlineStyle(),
         inputAttrs,
         attrsClass,
+        inputEl,
+        onInput,
+        onFocus,
+        onBlur,
       };
     },
     props: {
@@ -180,6 +341,7 @@
 <style scoped>
 
   .qti-text-entry-interaction {
+    display: block;
     padding: 4px 8px;
     border-radius: 4px;
   }

From a9315b9f1aea53659c4d1dfec3a1c2795fd090b1 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sat, 11 Jul 2026 02:36:47 +0300
Subject: [PATCH 03/10] feat: utilize answer guide for short answer interaction

---
 .../frontend/components/AnswerGuide.vue       |  4 ++
 .../interactions/TextEntryInteraction.vue     | 58 +++++++++++--------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/AnswerGuide.vue b/kolibri/plugins/qti_viewer/frontend/components/AnswerGuide.vue
index 1f64c5191a0..1e96b49fe85 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/AnswerGuide.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/AnswerGuide.vue
@@ -44,6 +44,10 @@
       context:
         'Tells the learner to complete the passage by choosing an option in each inline dropdown gap',
     },
+    shortAnswer: {
+      message: 'Short answer only:',
+      context: 'Tells the learner to type their answer in a text entry interaction',
+    },
   });
 
   export default {
diff --git a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
index 0fe4d7f1eb7..fbfe23f36b2 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
@@ -1,30 +1,32 @@
 <template>
 
-  <input
-    v-if="interactive"
-    ref="inputEl"
-    v-bind="inputAttrs"
-    :value="rawValue"
-    :class="['qti-text-entry-interaction', attrsClass, $computedClass({ ':focus': coreOutline })]"
-    :aria-label="textEntryLabel$()"
-    :placeholder="placeholder"
-    :inputmode="inputMode"
-    :style="{
-      minWidth: `${Math.min(expectedLength ?? 20, 20)}ch`,
-      maxWidth: '90%',
-      border: `1px solid ${$themeTokens.fineLine}`,
-    }"
-    type="text"
-    autocomplete="off"
-    @input="onInput"
-    @focus="onFocus"
-    @blur="onBlur"
-  >
-  <div
-    v-else
-    :class="['qti-text-entry-interaction', 'qti-text-entry-interaction-report', attrsClass]"
-  >
-    {{ reportDisplayValue || placeholder }}
+  <div class="qti-text-entry-interaction-wrapper">
+    <AnswerGuide :text="answerGuideText" />
+    <input
+      v-if="interactive"
+      ref="inputEl"
+      v-bind="inputAttrs"
+      :value="rawValue"
+      :class="['qti-text-entry-interaction', attrsClass, $computedClass({ ':focus': coreOutline })]"
+      :aria-label="textEntryLabel$()"
+      :placeholder="placeholder"
+      :inputmode="inputMode"
+      :style="{
+        minWidth: `${Math.min(expectedLength ?? 20, 20)}ch`,
+        border: `1px solid ${$themeTokens.fineLine}`,
+      }"
+      type="text"
+      autocomplete="off"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    >
+    <div
+      v-else
+      :class="['qti-text-entry-interaction', 'qti-text-entry-interaction-report', attrsClass]"
+    >
+      {{ reportDisplayValue || placeholder }}
+    </div>
   </div>
 
 </template>
@@ -46,6 +48,7 @@
     FormatProp,
   } from '../../utils/props';
   import { BASE_TYPE } from '../../constants';
+  import AnswerGuide, { answerGuideStrings } from '../AnswerGuide.vue';
 
   const $themeTokens = themeTokens();
 
@@ -70,6 +73,9 @@
   export default {
     name: 'TextEntryInteraction',
     tag: 'qti-text-entry-interaction',
+    components: {
+      AnswerGuide,
+    },
     inheritAttrs: false,
 
     setup(props, context) {
@@ -308,6 +314,7 @@
       return {
         $themeTokens,
         textEntryLabel$,
+        answerGuideText: answerGuideStrings.shortAnswer$(),
         rawValue,
         reportDisplayValue,
         placeholder: typedProps.placeholderText,
@@ -342,6 +349,7 @@
 
   .qti-text-entry-interaction {
     display: block;
+    width: 100%;
     padding: 4px 8px;
     border-radius: 4px;
   }

From 09ac785e24a799a66896fb3f7d1ac324ccf7b428 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Sat, 11 Jul 2026 02:53:56 +0300
Subject: [PATCH 04/10] test: update text entry interaction tests

---
 .../__tests__/TextEntryInteraction.spec.js    | 181 +++++++++++++++---
 1 file changed, 156 insertions(+), 25 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js b/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
index 6016a44ff53..d2e15af3d07 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
+++ b/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
@@ -1,9 +1,25 @@
-import { fireEvent, screen } from '@testing-library/vue';
+import { fireEvent, screen, waitFor } from '@testing-library/vue';
+import numericKeypadStrings from 'kolibri-common/strings/numericKeypadStrings';
 import items from '../../__fixtures__/items';
 import { renderAssessmentItem } from '../../__tests__/helpers';
+import { answerGuideStrings } from '../../AnswerGuide.vue';
+
+const {
+  negative$,
+  percent$,
+  pi$,
+  fractionExcludingExpression$,
+  upArrow$,
+  downArrow$,
+  leftArrow$,
+  rightArrow$,
+  delete$,
+} = numericKeypadStrings;
 
 // Every QTI text-entry fixture: confirms it parses and renders the expected input count.
 // A successful render-and-count implicitly asserts the XML parsed without error.
+// All text-entry inputs render as type="text" regardless of base-type (see 'string vs
+// numeric text entry' below), so a plain textbox count is sufficient here now.
 const smokeFixtures = [
   ['q20-textentry', 1],
   ['q20-textentry-sv-3', 1],
@@ -17,33 +33,34 @@ const smokeFixtures = [
 describe('Smoke', () => {
   it.each(smokeFixtures)('%s renders %d inputs', (id, inputCount) => {
     renderAssessmentItem(items[id].xml);
-    const textboxes = screen.queryAllByRole('textbox');
-    const spinbuttons = screen.queryAllByRole('spinbutton');
-    expect(textboxes.length + spinbuttons.length).toBe(inputCount);
+    expect(screen.getAllByRole('textbox')).toHaveLength(inputCount);
+  });
+});
+
+describe('Answer guide', () => {
+  it('shows the short-answer guide text', () => {
+    renderAssessmentItem(items['q20-textentry'].xml);
+    expect(screen.getByText(answerGuideStrings.shortAnswer$())).toBeVisible();
   });
 });
 
-// Behavior tests run once per base type — the component has distinct code paths
-// for string (textbox) vs numeric (spinbutton) inputs.
+// Behavior tests run once per base type. Both render type="text" now (numeric fields use
+// inputmode="decimal" instead of type="number", so the keypad can use selectionStart/
+// selectionEnd for caret-based insertion) — the split here is about response coercion and
+// keypad engagement, not about DOM input type.
 const variants = [
   {
     label: 'string',
     fixtureId: 'q20-textentry',
-    role: 'textbox',
-    htmlType: 'text',
     typedValue: 'hello',
     storedValue: 'hello',
-    emptyValue: '',
     responseIdentifier: 'RESPONSE',
   },
   {
-    label: 'number',
+    label: 'numeric',
     fixtureId: 'amp-07-nextgen',
-    role: 'spinbutton',
-    htmlType: 'number',
     typedValue: '42',
     storedValue: 42,
-    emptyValue: null,
     responseIdentifier: 'RESPONSE',
   },
 ];
@@ -51,51 +68,165 @@ const variants = [
 describe.each(variants)('$label text entry', variant => {
   const xml = () => items[variant.fixtureId].xml;
 
-  it(`renders an input of type ${'$htmlType'}`, () => {
+  it('renders a text input', () => {
     renderAssessmentItem(xml());
-    expect(screen.getByRole(variant.role)).toHaveAttribute('type', variant.htmlType);
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
   });
 
   it('exposes an accessible label and disables autocomplete', () => {
     renderAssessmentItem(xml());
-    const input = screen.getByRole(variant.role);
+    const input = screen.getByRole('textbox');
     expect(input.hasAttribute('aria-label') || input.hasAttribute('aria-labelledby')).toBe(true);
     expect(input).toHaveAttribute('autocomplete', 'off');
   });
 
   it('updates value when typed into', async () => {
     renderAssessmentItem(xml());
-    const input = screen.getByRole(variant.role);
+    const input = screen.getByRole('textbox');
     await fireEvent.update(input, variant.typedValue);
-    expect(input).toHaveValue(variant.storedValue);
+    // DOM value is always the string form; the coerced/typed response value
+    // (e.g. a real number for numeric base-types) is asserted separately below.
+    expect(input).toHaveValue(variant.typedValue);
   });
 
   it('round-trips answer state', async () => {
     const { checkAnswer, setAnswerState } = renderAssessmentItem(xml());
-    const input = screen.getByRole(variant.role);
+    const input = screen.getByRole('textbox');
 
     await fireEvent.update(input, variant.typedValue);
     const result = checkAnswer();
     expect(result.answerState[variant.responseIdentifier]).toEqual(variant.storedValue);
 
     setAnswerState({});
-    await screen.findByRole(variant.role);
-    expect(input).toHaveValue(variant.emptyValue);
+    await screen.findByRole('textbox');
+    expect(screen.getByRole('textbox')).toHaveValue('');
 
     setAnswerState(result.answerState);
-    await screen.findByRole(variant.role);
-    expect(input).toHaveValue(variant.storedValue);
+    await screen.findByRole('textbox');
+    expect(screen.getByRole('textbox')).toHaveValue(variant.typedValue);
   });
 
   it('restores value from injected answerState on mount', () => {
     renderAssessmentItem(xml(), {
       answerState: { [variant.responseIdentifier]: variant.storedValue },
     });
-    expect(screen.getByRole(variant.role)).toHaveValue(variant.storedValue);
+    expect(screen.getByRole('textbox')).toHaveValue(variant.typedValue);
   });
 
   it('shows read-only div when not interactive', () => {
     renderAssessmentItem(xml(), { interactive: false });
-    expect(screen.queryByRole(variant.role)).not.toBeInTheDocument();
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+  });
+});
+
+// Regression coverage for the `0`-is-falsy bug: `value || placeholder` / `value || ''`
+// treats a legitimate zero answer as empty.
+describe('Zero value handling (regression)', () => {
+  const xml = () => items['amp-07-nextgen'].xml;
+
+  it('displays 0 in the editable field rather than falling back to empty', () => {
+    renderAssessmentItem(xml(), { answerState: { RESPONSE: 0 } });
+    expect(screen.getByRole('textbox')).toHaveValue('0');
+  });
+
+  it('displays 0 in report mode rather than the placeholder', () => {
+    renderAssessmentItem(xml(), { answerState: { RESPONSE: 0 }, interactive: false });
+    expect(screen.getByText('0', { selector: '.qti-text-entry-interaction-report' })).toBeVisible();
+  });
+});
+
+describe('Numeric keypad', () => {
+  const xml = () => items['amp-07-nextgen'].xml;
+
+  it('opens on focus for a numeric field', async () => {
+    renderAssessmentItem(xml());
+    await fireEvent.focus(screen.getByRole('textbox'));
+    expect(screen.getByRole('button', { name: negative$() })).toBeVisible();
+  });
+
+  it('does not open for a string field', async () => {
+    renderAssessmentItem(items['q20-textentry'].xml);
+    await fireEvent.focus(screen.getByRole('textbox'));
+    expect(screen.queryByRole('button', { name: negative$() })).not.toBeInTheDocument();
+  });
+
+  it('excludes %, π, and ⁄ from the rendered keys', async () => {
+    renderAssessmentItem(xml());
+    await fireEvent.focus(screen.getByRole('textbox'));
+    expect(screen.queryByRole('button', { name: percent$() })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: pi$() })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: fractionExcludingExpression$() }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('excludes vertical nav (UP/DOWN) but keeps LEFT/RIGHT', async () => {
+    renderAssessmentItem(xml());
+    await fireEvent.focus(screen.getByRole('textbox'));
+    expect(screen.queryByRole('button', { name: upArrow$() })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: downArrow$() })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: leftArrow$() })).toBeVisible();
+    expect(screen.getByRole('button', { name: rightArrow$() })).toBeVisible();
+  });
+
+  it('closes on blur', async () => {
+    renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.focus(input);
+    expect(screen.getByRole('button', { name: negative$() })).toBeVisible();
+
+    await fireEvent.blur(input);
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: negative$() })).not.toBeInTheDocument();
+    });
+  });
+
+  // regression coverage
+  it('pressing the negative-sign key on an empty field does not throw', async () => {
+    renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.focus(input);
+
+    await fireEvent.click(screen.getByRole('button', { name: negative$() }));
+    expect(input).toHaveValue('-');
+  });
+
+  it('committing a digit after the negative sign updates the response', async () => {
+    const { checkAnswer } = renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.focus(input);
+
+    await fireEvent.click(screen.getByRole('button', { name: negative$() }));
+    await fireEvent.click(screen.getByRole('button', { name: '3' }));
+
+    expect(input).toHaveValue('-3');
+    expect(checkAnswer().answerState.RESPONSE).toEqual(-3);
+  });
+
+  it('backspace removes the character before the caret', async () => {
+    renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.focus(input);
+
+    await fireEvent.click(screen.getByRole('button', { name: '1' }));
+    await fireEvent.click(screen.getByRole('button', { name: '2' }));
+    await fireEvent.click(screen.getByRole('button', { name: delete$() }));
+
+    expect(input).toHaveValue('1');
+  });
+
+  it('inserts a digit at the caret position, not just at the end', async () => {
+    renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.focus(input);
+
+    await fireEvent.click(screen.getByRole('button', { name: '1' }));
+    await fireEvent.click(screen.getByRole('button', { name: '2' }));
+    expect(input).toHaveValue('12');
+
+    await fireEvent.click(screen.getByRole('button', { name: leftArrow$() }));
+    await fireEvent.click(screen.getByRole('button', { name: '9' }));
+
+    expect(input).toHaveValue('192');
   });
 });

From 90d2b8fafaa803b1351369f9e6b60d698bde2cd8 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 21 Jul 2026 16:01:08 +0300
Subject: [PATCH 05/10] fix: initialize() runs on nextTick because sortable 
 may not have run yet

---
 packages/kolibri-common/components/sortable/DragContainer.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/kolibri-common/components/sortable/DragContainer.vue b/packages/kolibri-common/components/sortable/DragContainer.vue
index 7c459506514..0b9534cab88 100644
--- a/packages/kolibri-common/components/sortable/DragContainer.vue
+++ b/packages/kolibri-common/components/sortable/DragContainer.vue
@@ -47,6 +47,10 @@
       this.$nextTick(this.initialize);
     },
     beforeDestroy() {
+      // initialize() runs on nextTick, so it may not have run yet
+      if (!this.sortable) {
+        return;
+      }
       this.sortable.destroy();
       this.$el.removeEventListener('focusout', this.handleFocusOut);
     },

From e355c8da3f469b06d9ad711a612d6c3d0bc3162c Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Tue, 21 Jul 2026 16:19:04 +0300
Subject: [PATCH 06/10] feat(textentry): add support for custom widths

---
 .../interactions/TextEntryInteraction.vue     | 36 +++++++++++++++----
 .../__tests__/TextEntryInteraction.spec.js    | 34 ++++++++++++++++++
 2 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
index fbfe23f36b2..fe879479997 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
@@ -11,10 +11,7 @@
       :aria-label="textEntryLabel$()"
       :placeholder="placeholder"
       :inputmode="inputMode"
-      :style="{
-        minWidth: `${Math.min(expectedLength ?? 20, 20)}ch`,
-        border: `1px solid ${$themeTokens.fineLine}`,
-      }"
+      :style="{ ...widthStyle, border: `1px solid ${$themeTokens.fineLine}` }"
       type="text"
       autocomplete="off"
       @input="onInput"
@@ -24,6 +21,7 @@
     <div
       v-else
       :class="['qti-text-entry-interaction', 'qti-text-entry-interaction-report', attrsClass]"
+      :style="widthStyle"
     >
       {{ reportDisplayValue || placeholder }}
     </div>
@@ -70,6 +68,11 @@
   };
   const ALWAYS_EXCLUDED_KEYS = ['PERCENT', 'PI', 'FRAC'];
 
+  const INPUT_WIDTH_CLASS = /(?:^|\s)qti-input-width-(\d+)(?=\s|$)/;
+  // Horizontal padding and border of .qti-text-entry-interaction, which is border-box sized.
+  const INPUT_HORIZONTAL_CHROME = '18px';
+  const DEFAULT_WIDTH_CHARS = 20;
+
   export default {
     name: 'TextEntryInteraction',
     tag: 'qti-text-entry-interaction',
@@ -151,6 +154,26 @@
 
       const attrsClass = computed(() => getContextAttrs().class);
 
+      // `qti-input-width-N`
+      const inputWidthChars = computed(() => {
+        const match = INPUT_WIDTH_CLASS.exec(attrsClass.value || '');
+        return match ? Number(match[1]) : null;
+      });
+
+      const widthStyle = computed(() => {
+        if (inputWidthChars.value === null) {
+          // expected-length is only a hint at the answer's size, so it just sets a floor
+          const expected =
+            props.expectedLength == null ? DEFAULT_WIDTH_CHARS : typedProps.expectedLength.value;
+          return { minWidth: `${Math.min(expected, DEFAULT_WIDTH_CHARS)}ch` };
+        }
+        // The character count is the room for the text, so the box-sizing chrome sits outside it.
+        return {
+          width: `calc(${inputWidthChars.value}ch + ${INPUT_HORIZONTAL_CHROME})`,
+          maxWidth: '100%',
+        };
+      });
+
       const inputDeclaration = computed(() => {
         return responses.value[typedProps.responseIdentifier.value];
       });
@@ -323,6 +346,7 @@
         coreOutline: themeOutlineStyle(),
         inputAttrs,
         attrsClass,
+        widthStyle,
         inputEl,
         onInput,
         onFocus,
@@ -348,14 +372,14 @@
 <style scoped>
 
   .qti-text-entry-interaction {
-    display: block;
+    box-sizing: border-box;
+    display: inline-block;
     width: 100%;
     padding: 4px 8px;
     border-radius: 4px;
   }
 
   .qti-text-entry-interaction-report {
-    box-sizing: border-box;
     width: 100%;
     min-height: 1.5em;
     padding: 8px;
diff --git a/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js b/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
index d2e15af3d07..1c68a5b17b3 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
+++ b/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
@@ -135,6 +135,40 @@ describe('Zero value handling (regression)', () => {
   });
 });
 
+// `qti-input-width-N`
+describe('Custom widths', () => {
+  it('sizes each field to the character count named by its qti-input-width class', () => {
+    renderAssessmentItem(items['q20-textentry-composite'].xml);
+    const widths = screen.getAllByRole('textbox').map(input => input.style.width);
+    expect(widths).toEqual([
+      // the fixture leads with an unsized field, then walks the width vocabulary
+      '',
+      ...[1, 2, 3, 4, 5, 6, 10, 15, 20, 25, 30, 35, 40, 45, 50, 72].map(
+        chars => `calc(${chars}ch + 18px)`,
+      ),
+    ]);
+  });
+
+  it('caps a sized field at the width of its container', () => {
+    renderAssessmentItem(items['q20-textentry-composite'].xml);
+    expect(screen.getAllByRole('textbox')[16]).toHaveStyle({ maxWidth: '100%' });
+  });
+
+  it('applies the same width in report mode', () => {
+    renderAssessmentItem(items['amp-07-nextgen'].xml, { interactive: false });
+    expect(document.querySelector('.qti-text-entry-interaction-report')).toHaveStyle({
+      width: 'calc(10ch + 18px)',
+    });
+  });
+
+  it('falls back to an expected-length minimum when no width class is given', () => {
+    renderAssessmentItem(items['q20-textentry'].xml);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveStyle({ width: '' });
+    expect(input).toHaveStyle({ minWidth: '20ch' });
+  });
+});
+
 describe('Numeric keypad', () => {
   const xml = () => items['amp-07-nextgen'].xml;
 

From 8be89dd8552c659849a31a2bf2dc3408243f9ab9 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 22 Jul 2026 16:09:48 +0300
Subject: [PATCH 07/10] fix: manually merge qti items.js instead of git lfs

---
 .../qti_viewer/frontend/components/__fixtures__/items.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
index 1bf2ce17bc2..d0d373cadd1 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
+++ b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b1e8ed3139406e75848801ca80ca046d4b8449abd0a5e199762ddf03747b857a
-size 862145
+oid sha256:2ef3ef938c435379a01e74b47e3856536b212fff7b837f6d714e6d895dd75210
+size 865023

From a42e2e631f4391b35ef3dfa634a00852ad65f556 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 22 Jul 2026 16:22:06 +0300
Subject: [PATCH 08/10] fix: merge conflicts

---
 .../plugins/qti_viewer/frontend/components/AssessmentItem.vue  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue b/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
index 6b1254bd606..289d896690b 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
@@ -31,6 +31,7 @@
   import AnswerGuide from './AnswerGuide.vue';
   import useKeypad from 'kolibri-common/composables/useKeypad';
   import NumericKeypad from 'kolibri-common/components/NumericKeypad';
+  import { useQTIContext } from '../composables/useQTIContext';
   import ChoiceInteraction from './interactions/ChoiceInteraction.vue';
   import Prompt from './Prompt.vue';
   import SimpleChoice from './interactions/SimpleChoice.vue';
@@ -106,8 +107,6 @@
       // Hosts the shared keypad state
       useKeypad();
 
-      const responses = {};
-
       function setFromAnswerState() {
         for (const [id, variable] of Object.entries(responses.value)) {
           if (id in injectedAnswerState.value && injectedAnswerState.value[id] != null) {

From 840fa4524ee4e5cfd17e07cf76e2ae8b7bdee7a2 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 22 Jul 2026 16:49:42 +0300
Subject: [PATCH 09/10] feat(textentry): support pattern masks

---
 .../interactions/TextEntryInteraction.vue     | 106 +++++++++++++++---
 .../__tests__/TextEntryInteraction.spec.js    |  70 ++++++++++++
 2 files changed, 160 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
index fe879479997..28e324361a9 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/interactions/TextEntryInteraction.vue
@@ -2,22 +2,44 @@
 
   <div class="qti-text-entry-interaction-wrapper">
     <AnswerGuide :text="answerGuideText" />
-    <input
-      v-if="interactive"
-      ref="inputEl"
-      v-bind="inputAttrs"
-      :value="rawValue"
-      :class="['qti-text-entry-interaction', attrsClass, $computedClass({ ':focus': coreOutline })]"
-      :aria-label="textEntryLabel$()"
-      :placeholder="placeholder"
-      :inputmode="inputMode"
-      :style="{ ...widthStyle, border: `1px solid ${$themeTokens.fineLine}` }"
-      type="text"
-      autocomplete="off"
-      @input="onInput"
-      @focus="onFocus"
-      @blur="onBlur"
-    >
+    <template v-if="interactive">
+      <input
+        ref="inputEl"
+        v-bind="inputAttrs"
+        :value="rawValue"
+        :class="[
+          'qti-text-entry-interaction',
+          attrsClass,
+          $computedClass({ ':focus': coreOutline }),
+        ]"
+        :aria-label="textEntryLabel$()"
+        :aria-invalid="showPatternError ? 'true' : undefined"
+        :aria-describedby="patternErrorId"
+        :placeholder="placeholder"
+        :inputmode="inputMode"
+        :style="{
+          ...widthStyle,
+          border: `1px solid ${showPatternError ? $themeTokens.error : $themeTokens.fineLine}`,
+        }"
+        type="text"
+        autocomplete="off"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+      >
+      <p
+        v-if="patternErrorId"
+        :id="patternErrorId"
+        class="qti-text-entry-interaction-error"
+        :style="{ color: $themeTokens.error }"
+      >
+        <KIcon
+          icon="error"
+          :color="$themeTokens.error"
+        />
+        {{ patternMaskMessage }}
+      </p>
+    </template>
     <div
       v-else
       :class="['qti-text-entry-interaction', 'qti-text-entry-interaction-report', attrsClass]"
@@ -33,6 +55,8 @@
 <script>
 
   import { computed, inject, nextTick, onBeforeUnmount, ref, unref, watch } from 'vue';
+  import { compile } from 'xspattern';
+  import logger from 'kolibri-logging';
   import { themeTokens, themeOutlineStyle } from 'kolibri-design-system/lib/styles/theme';
   import { createTranslator } from 'kolibri/utils/i18n';
   import { injectKeypad } from 'kolibri-common/composables/useKeypad';
@@ -48,6 +72,8 @@
   import { BASE_TYPE } from '../../constants';
   import AnswerGuide, { answerGuideStrings } from '../AnswerGuide.vue';
 
+  const logging = logger.getLogger(__filename);
+
   const $themeTokens = themeTokens();
 
   const strings = createTranslator('TextEntryInteractionStrings', {
@@ -73,6 +99,8 @@
   const INPUT_HORIZONTAL_CHROME = '18px';
   const DEFAULT_WIDTH_CHARS = 20;
 
+  let patternMessageCount = 0;
+
   export default {
     name: 'TextEntryInteraction',
     tag: 'qti-text-entry-interaction',
@@ -231,6 +259,40 @@
 
       const inputMode = computed(() => (isNumeric.value ? 'decimal' : undefined));
 
+      // --- Pattern mask
+      const patternMatcher = computed(() => {
+        const pattern = typedProps.patternMask.value;
+        if (!pattern) {
+          return null;
+        }
+        try {
+          return compile(pattern);
+        } catch (e) {
+          // An unparseable mask is an authoring error in the item, not a learner error.
+          logging.warn(`Ignoring invalid QTI pattern-mask "${pattern}":`, e.message);
+          return null;
+        }
+      });
+
+      // Per the QTI spec the mask flags an invalid response after entry — it never blocks
+      // keystrokes, and never gates commit(). This is presentational only.
+      const isPatternValid = computed(() => {
+        if (!patternMatcher.value || !rawValue.value) {
+          return true;
+        }
+        return patternMatcher.value(rawValue.value);
+      });
+
+      // Only surface the error once the learner has left the field
+      const touched = ref(false);
+      const showPatternError = computed(() => touched.value && !isPatternValid.value);
+
+      const patternMaskMessage = computed(() => getContextAttrs()['data-patternmask-message']);
+      const messageId = `qti-patternmask-message-${(patternMessageCount += 1)}`;
+      const patternErrorId = computed(() =>
+        showPatternError.value && patternMaskMessage.value ? messageId : undefined,
+      );
+
       // --- Keypad wiring
       // Caret is a plain index into the flat string here — not Perseus's
       // expression-tree cursor. The returned value feeds the composable's
@@ -319,6 +381,7 @@
       }
 
       function onBlur() {
+        touched.value = true;
         if (!commit(rawValue.value)) {
           // fallback
           rawValue.value = lastCommittedRaw.value;
@@ -347,6 +410,9 @@
         inputAttrs,
         attrsClass,
         widthStyle,
+        showPatternError,
+        patternMaskMessage,
+        patternErrorId,
         inputEl,
         onInput,
         onFocus,
@@ -379,6 +445,14 @@
     border-radius: 4px;
   }
 
+  .qti-text-entry-interaction-error {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin: 4px 0 0;
+    font-size: 12px;
+  }
+
   .qti-text-entry-interaction-report {
     width: 100%;
     min-height: 1.5em;
diff --git a/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js b/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
index 1c68a5b17b3..ad4e6e299bf 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
+++ b/kolibri/plugins/qti_viewer/frontend/components/interactions/__tests__/TextEntryInteraction.spec.js
@@ -135,6 +135,76 @@ describe('Zero value handling (regression)', () => {
   });
 });
 
+// pattern-mask
+describe('Pattern mask', () => {
+  // pattern-mask="([0-9.]{0,6})" with a data-patternmask-message
+  const xml = () => items['q20-textentry-sv-3'].xml;
+  const patternMessage = 'Maximum of 6 digits or decimal points permitted';
+
+  it('does not flag an invalid value while it is still being typed', async () => {
+    renderAssessmentItem(xml());
+    await fireEvent.update(screen.getByRole('textbox'), '1234567');
+    expect(screen.queryByText(patternMessage)).not.toBeInTheDocument();
+    expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-invalid');
+  });
+
+  it('flags an invalid value once the field is left', async () => {
+    renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.update(input, '1234567');
+    await fireEvent.blur(input);
+    expect(screen.getByText(patternMessage)).toBeVisible();
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('points the input at its message via aria-describedby', async () => {
+    renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.update(input, '1234567');
+    await fireEvent.blur(input);
+    const messageId = input.getAttribute('aria-describedby');
+    expect(messageId).toBeTruthy();
+    expect(document.getElementById(messageId)).toHaveTextContent(patternMessage);
+  });
+
+  it('accepts a value that satisfies the mask', async () => {
+    renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.update(input, '12.34');
+    await fireEvent.blur(input);
+    expect(screen.queryByText(patternMessage)).not.toBeInTheDocument();
+  });
+
+  it('does not flag an empty field', async () => {
+    renderAssessmentItem(xml());
+    await fireEvent.blur(screen.getByRole('textbox'));
+    expect(screen.queryByText(patternMessage)).not.toBeInTheDocument();
+  });
+
+  // The mask is presentational: a response that violates it is still recorded, so the
+  // learner's work is never silently discarded.
+  it('still records a response that violates the mask', async () => {
+    const { checkAnswer } = renderAssessmentItem(xml());
+    const input = screen.getByRole('textbox');
+    await fireEvent.update(input, '1234567');
+    await fireEvent.blur(input);
+    expect(checkAnswer().answerState.RESPONSE).toBe('1234567');
+  });
+
+  // An unparseable mask is an authoring error in the item; it must not break the question.
+  // The accompanying warning can't be asserted here — setup.js silences kolibri-logging.
+  it('ignores a malformed mask instead of throwing', async () => {
+    // Anchored on the hyphenated attribute: the item body also describes its own mask in
+    // prose as `patternmask="([0-9.]{0,6})"`, which a plain string replace would hit first.
+    renderAssessmentItem(xml().replace(/pattern-mask="[^"]*"/, 'pattern-mask="[unclosed"'));
+    const input = screen.getByRole('textbox');
+    await fireEvent.update(input, '1234567');
+    await fireEvent.blur(input);
+    expect(input).toHaveValue('1234567');
+    expect(screen.queryByText(patternMessage)).not.toBeInTheDocument();
+  });
+});
+
 // `qti-input-width-N`
 describe('Custom widths', () => {
   it('sizes each field to the character count named by its qti-input-width class', () => {

From 1f15cbbd2a282d4992e93f885c4dd971262c0bb7 Mon Sep 17 00:00:00 2001
From: habibayman <habibaayman2004@outlook.com>
Date: Wed, 29 Jul 2026 17:56:04 +0300
Subject: [PATCH 10/10] fix: merge conflicts

---
 .../qti_viewer/frontend/components/AssessmentItem.vue        | 5 ++---
 .../qti_viewer/frontend/components/__fixtures__/items.js     | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue b/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
index 289d896690b..56490b38c25 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
+++ b/kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue
@@ -26,12 +26,11 @@
   import cloneDeep from 'lodash/cloneDeep';
   import { createSafeHTML } from 'kolibri-common/components/SafeHTML';
   import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
-  import { useQTIContext } from '../composables/useQTIContext';
-  import { getItemBodyGuides, numberPassageGaps } from '../utils/itemBodyGuidance';
-  import AnswerGuide from './AnswerGuide.vue';
   import useKeypad from 'kolibri-common/composables/useKeypad';
   import NumericKeypad from 'kolibri-common/components/NumericKeypad';
   import { useQTIContext } from '../composables/useQTIContext';
+  import { getItemBodyGuides, numberPassageGaps } from '../utils/itemBodyGuidance';
+  import AnswerGuide from './AnswerGuide.vue';
   import ChoiceInteraction from './interactions/ChoiceInteraction.vue';
   import Prompt from './Prompt.vue';
   import SimpleChoice from './interactions/SimpleChoice.vue';
diff --git a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
index d0d373cadd1..527da3e0da9 100644
--- a/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
+++ b/kolibri/plugins/qti_viewer/frontend/components/__fixtures__/items.js
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2ef3ef938c435379a01e74b47e3856536b212fff7b837f6d714e6d895dd75210
-size 865023
+oid sha256:8d178d906052fa4401d5e24ba5c31a3d039d6a4838ec5ac68ea9534e4d0f0102
+size 865024