feat: add AnswerSettings and QuestionSettingsHeader components

contentcuration/contentcuration/frontend/shared/app.js

@@ -109,6 +109,7 @@ import { Workbox, messageSW } from 'workbox-window';
 import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
 import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
 
+import Teleport from 'vue2-teleport';
 import AnalyticsPlugin from './analytics/plugin';
 import { theme, icons } from 'shared/vuetify';
 
@@ -259,6 +260,7 @@ Vue.component('ActionLink', ActionLink);
 Vue.component('BaseMenu', BaseMenu);
 Vue.component('Divider', Divider);
 Vue.component('Icon', Icon);
+Vue.component('Teleport', Teleport);
 
 function initiateServiceWorker() {
   // Second conditional must be removed if you are doing dev work on the service

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

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/vue';
 import { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import InteractionSection from '../index.vue';
+import { qtiEditorStrings as tr } from '../../../qtiEditorStrings';
 
 import {
   CHOICE_SINGLE_SELECT_XML,
@@ -10,6 +11,13 @@ import {
 } from '../../../utils/testingFixtures';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({ windowIsSmall: ref(false) }),
+  };
+});
 
 const renderSection = (props = {}) =>
   render(InteractionSection, {
@@ -41,7 +49,7 @@ describe('InteractionSection', () => {
   describe('parse error handling', () => {
     it('shows a parse error when XML is malformed', () => {
       renderSection({ interaction: interactionBlock('not-xml<{{') });
-      expect(screen.getByText('This question could not be loaded')).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('errorParsingQuestion'))).toBeInTheDocument();
     });
   });
 

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

@@ -7,16 +7,36 @@
     >
       {{ parseError }}
     </p>
-    <component
-      :is="descriptor.editorComponent"
-      v-else
-      :key="descriptor.type"
-      :questionType="questionType"
-      :interaction="interaction"
-      :mode="mode"
-      :showAnswers="showAnswers"
-      @update:interaction="interaction => $emit('update:interaction', interaction)"
-    />
+    <div v-else>
+      <Teleport
+        v-if="teleportTarget"
+        :to="teleportTarget"
+      >
+        <QuestionTypeSelector
+          v-if="mode === 'edit'"
+          :questionType="questionType"
+          :questionTypeOptions="typeOptions"
+          :settingsTargetId="settingsTargetId"
+          @update:questionType="
+            newType => {
+              questionType = newType;
+              $emit('update:questionType', newType);
+            }
+          "
+        />
+      </Teleport>
+
+      <component
+        :is="descriptor.editorComponent"
+        :key="descriptor.type"
+        :questionType="questionType"
+        :interaction="interaction"
+        :mode="mode"
+        :showAnswers="showAnswers"
+        :teleportTarget="`#${settingsTargetId}`"
+        @update:interaction="interaction => $emit('update:interaction', interaction)"
+      />
+    </div>
   </div>
 
 </template>
@@ -26,13 +46,19 @@
 
   import { computed, watch } from 'vue';
   import useInteractionDescriptor from '../../composables/useInteractionDescriptor';
+  import QuestionTypeSelector from '../QuestionTypeSelector/index.vue';
 
   export default {
     name: 'InteractionSection',
 
+    components: {
+      QuestionTypeSelector,
+    },
+
     setup(props, { emit }) {
       const interactionRef = computed(() => props.interaction);
-      const { descriptor, questionType, parseError } = useInteractionDescriptor(interactionRef);
+      const { descriptor, questionType, typeOptions, parseError } =
+        useInteractionDescriptor(interactionRef);
 
       watch(
         questionType,
@@ -42,7 +68,14 @@
         { immediate: true },
       );
 
-      return { descriptor, questionType, parseError };
+      const settingsTargetId = computed(() => {
+        if (props.teleportTarget && props.teleportTarget.startsWith('#')) {
+          return `${props.teleportTarget.substring(1)}-answer-settings`;
+        }
+        return 'qti-interaction-settings';
+      });
+
+      return { descriptor, questionType, typeOptions, parseError, settingsTargetId };
     },
 
     props: {
@@ -66,6 +99,10 @@
         type: Boolean,
         default: false,
       },
+      teleportTarget: {
+        type: String,
+        default: '',
+      },
     },
 
     emits: ['update:questionType', 'update:interaction'],

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

@@ -5,6 +5,13 @@ import { qtiEditorStrings } from '../../../qtiEditorStrings';
 import { AssessmentItemTypes } from '../../../constants';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({ windowIsSmall: ref(false) }),
+  };
+});
 
 const { closeBtnLabel$, questionContentPlaceholder$ } = qtiEditorStrings;
 

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

@@ -26,12 +26,15 @@
       </div>
     </div>
 
+    <div :id="`qti-question-settings-${index}`"></div>
+
     <div class="question-card-body">
       <InteractionSection
         v-if="interactions.length > 0"
         :interaction="interactions[0]"
         :mode="mode"
         :showAnswers="showAnswers"
+        :teleportTarget="`#qti-question-settings-${index}`"
         @update:questionType="type => (currentQuestionType = type)"
         @update:interaction="onUpdateInteraction"
       />

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

@@ -0,0 +1,86 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import QuestionTypeSelector from '../index.vue';
+import { QuestionType } from '../../../constants';
+import { qtiEditorStrings as tr } from '../../../qtiEditorStrings';
+
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({ windowIsSmall: ref(false) }),
+  };
+});
+
+const defaultProps = {
+  questionType: QuestionType.SINGLE_SELECT,
+  questionTypeOptions: [
+    {
+      value: QuestionType.SINGLE_SELECT,
+      label: tr.$tr('singleSelectLabel'),
+      description: tr.$tr('singleChoiceDescription'),
+    },
+    {
+      value: QuestionType.MULTI_SELECT,
+      label: tr.$tr('multiSelectLabel'),
+      description: tr.$tr('multipleSelectionDescription'),
+    },
+  ],
+  mode: 'edit',
+};
+
+const renderHeader = (props = {}) =>
+  render(QuestionTypeSelector, {
+    props: { ...defaultProps, ...props },
+    routes: new VueRouter(),
+  });
+
+describe('QuestionTypeSelector', () => {
+  it('renders the type meta-label in edit mode', () => {
+    renderHeader();
+    expect(screen.getByText(tr.$tr('typeLabel'))).toBeInTheDocument();
+  });
+
+  it('renders a KSelect with the selected option label (not raw enum)', () => {
+    renderHeader();
+    expect(screen.getByText(tr.$tr('singleSelectLabel'))).toBeInTheDocument();
+    expect(screen.queryByText(QuestionType.SINGLE_SELECT)).not.toBeInTheDocument();
+  });
+
+  it('renders the globe icon inside the KSelect via #display slot', () => {
+    renderHeader();
+    expect(document.querySelector('.select-globe-icon')).not.toBeNull();
+    expect(document.querySelector('.select-display-row')).not.toBeNull();
+  });
+
+  it('opens type info modal when info button clicked', async () => {
+    renderHeader();
+
+    const helpButton = screen.getByRole('button', { name: tr.$tr('responseTypeInfoTitle') });
+    await fireEvent.click(helpButton);
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('singleChoiceDescription'))).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('multipleSelectionDescription'))).toBeInTheDocument();
+  });
+
+  it('closes type info modal when Close button clicked', async () => {
+    renderHeader();
+
+    await fireEvent.click(screen.getByRole('button', { name: tr.$tr('responseTypeInfoTitle') }));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await fireEvent.click(screen.getByRole('button', { name: tr.$tr('closeBtnLabel') }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('disables selector when only one option available', () => {
+    renderHeader({
+      questionTypeOptions: [defaultProps.questionTypeOptions[0]],
+    });
+
+    const hiddenInput = document.querySelector('input[type="hidden"]');
+    expect(hiddenInput).not.toBeNull();
+    expect(screen.getByText(tr.$tr('typeLabel'))).toBeInTheDocument();
+  });
+});