feat: add AnswerSettings and QuestionSettingsHeader components

contentcuration/contentcuration/frontend/shared/app.js

@@ -122,6 +122,7 @@ import ActionLink from 'shared/views/ActionLink';
 import Icon from 'shared/views/Icon';
 import BaseMenu from 'shared/views/BaseMenu.vue';
 import Divider from 'shared/views/Divider';
+import Teleport from 'shared/views/QTIEditor/components/Teleport.vue';
 import { initializeDB, resetDB } from 'shared/data';
 import { Session, injectVuexStore } from 'shared/data/resources';
 
@@ -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/AnswerSettings/__tests__/AnswerSettings.spec.js

@@ -0,0 +1,132 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import AnswerSettings from '../index.vue';
+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 = {
+  settings: ['shuffle', 'showAnswerCount'],
+  shuffle: false,
+  showAnswerCount: true,
+};
+
+describe('AnswerSettings', () => {
+  it('renders answer settings label', () => {
+    render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+    expect(screen.getByText(tr.$tr('answerSettingsLabel'))).toBeInTheDocument();
+  });
+
+  it('renders shuffle checkbox when included in settings', () => {
+    render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+    expect(
+      screen.getByRole('checkbox', { name: tr.$tr('shuffleAnswersLabel') }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders show answer count checkbox when included in settings', () => {
+    render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+    expect(
+      screen.getByRole('checkbox', { name: tr.$tr('showAnswerCountLabel') }),
+    ).toBeInTheDocument();
+  });
+
+  it('does not render shuffle checkbox when not in settings', () => {
+    render(AnswerSettings, {
+      props: { ...defaultProps, settings: ['showAnswerCount'] },
+      routes: new VueRouter(),
+    });
+    expect(
+      screen.queryByRole('checkbox', { name: tr.$tr('shuffleAnswersLabel') }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('does not render show answer count checkbox when not in settings', () => {
+    render(AnswerSettings, {
+      props: { ...defaultProps, settings: ['shuffle'] },
+      routes: new VueRouter(),
+    });
+    expect(
+      screen.queryByRole('checkbox', { name: tr.$tr('showAnswerCountLabel') }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('emits update:shuffle when shuffle checkbox toggled', async () => {
+    const { emitted } = render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+
+    const checkbox = screen.getByRole('checkbox', { name: tr.$tr('shuffleAnswersLabel') });
+    await fireEvent.click(checkbox);
+
+    expect(emitted()['update:shuffle']).toBeTruthy();
+    expect(emitted()['update:shuffle'][0]).toEqual([true]);
+  });
+
+  it('emits update:showAnswerCount when show answer count checkbox toggled', async () => {
+    const { emitted } = render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+
+    const checkbox = screen.getByRole('checkbox', { name: tr.$tr('showAnswerCountLabel') });
+    await fireEvent.click(checkbox);
+
+    expect(emitted()['update:showAnswerCount']).toBeTruthy();
+    expect(emitted()['update:showAnswerCount'][0]).toEqual([false]);
+  });
+
+  it('opens shuffle info modal when info button clicked', async () => {
+    render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+
+    const infoButtons = screen.getAllByRole('button', { name: tr.$tr('shuffleAnswersInfoTitle') });
+    await fireEvent.click(infoButtons[0]);
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('shuffleAnswersInfoBody'))).toBeInTheDocument();
+  });
+
+  it('opens show answer count info modal when info button clicked', async () => {
+    render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+
+    const infoButtons = screen.getAllByRole('button', {
+      name: tr.$tr('showAnswerCountInfoTitle'),
+    });
+    await fireEvent.click(infoButtons[0]);
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('showAnswerCountInfoBody'))).toBeInTheDocument();
+  });
+
+  it('closes modal when Close button clicked', async () => {
+    render(AnswerSettings, { props: defaultProps, routes: new VueRouter() });
+
+    const infoButtons = screen.getAllByRole('button', { name: tr.$tr('shuffleAnswersInfoTitle') });
+    await fireEvent.click(infoButtons[0]);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await fireEvent.click(screen.getByRole('button', { name: tr.$tr('closeBtnLabel') }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('reflects shuffle prop value in checkbox', () => {
+    render(AnswerSettings, {
+      props: { ...defaultProps, shuffle: true },
+      routes: new VueRouter(),
+    });
+
+    const checkbox = screen.getByRole('checkbox', { name: tr.$tr('shuffleAnswersLabel') });
+    expect(checkbox).toBeChecked();
+  });
+
+  it('reflects showAnswerCount prop value in checkbox', () => {
+    render(AnswerSettings, {
+      props: { ...defaultProps, showAnswerCount: false },
+      routes: new VueRouter(),
+    });
+
+    const checkbox = screen.getByRole('checkbox', { name: tr.$tr('showAnswerCountLabel') });
+    expect(checkbox).not.toBeChecked();
+  });
+});

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

@@ -0,0 +1,166 @@
+<template>
+
+  <div class="answer-settings">
+    <div
+      class="answer-settings-label"
+      :style="{ color: $themePalette.grey.v_700 }"
+    >
+      {{ answerSettingsLabel$() }}
+    </div>
+
+    <div
+      v-if="settings.includes('shuffle')"
+      class="setting-row"
+    >
+      <KCheckbox
+        :checked="shuffle"
+        :label="shuffleAnswersLabel$()"
+        :color="$themeTokens.primary"
+        @change="$emit('update:shuffle', $event)"
+      />
+      <KIconButton
+        icon="infoOutline"
+        :tooltip="shuffleAnswersInfoTitle$()"
+        :ariaLabel="shuffleAnswersInfoTitle$()"
+        size="mini"
+        :color="$themePalette.grey.v_700"
+        @click="showShuffleModal = true"
+      />
+    </div>
+
+    <div
+      v-if="settings.includes('showAnswerCount')"
+      class="setting-row"
+    >
+      <KCheckbox
+        :checked="showAnswerCount"
+        :label="showAnswerCountLabel$()"
+        :color="$themeTokens.primary"
+        @change="$emit('update:showAnswerCount', $event)"
+      />
+      <KIconButton
+        icon="infoOutline"
+        :tooltip="showAnswerCountInfoTitle$()"
+        :ariaLabel="showAnswerCountInfoTitle$()"
+        size="mini"
+        :color="$themePalette.grey.v_700"
+        @click="showAnswerCountModal = true"
+      />
+    </div>
+
+    <KModal
+      v-if="showShuffleModal"
+      :title="shuffleAnswersInfoTitle$()"
+      @cancel="showShuffleModal = false"
+    >
+      <p :style="{ color: $themeTokens.annotation }">
+        {{ shuffleAnswersInfoBody$() }}
+      </p>
+      <template #actions>
+        <KButton
+          :text="closeBtnLabel$()"
+          @click="showShuffleModal = false"
+        />
+      </template>
+    </KModal>
+
+    <KModal
+      v-if="showAnswerCountModal"
+      :title="showAnswerCountInfoTitle$()"
+      @cancel="showAnswerCountModal = false"
+    >
+      <p :style="{ color: $themeTokens.annotation }">
+        {{ showAnswerCountInfoBody$() }}
+      </p>
+      <template #actions>
+        <KButton
+          :text="closeBtnLabel$()"
+          @click="showAnswerCountModal = false"
+        />
+      </template>
+    </KModal>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref } from 'vue';
+  import { qtiEditorStrings } from '../../qtiEditorStrings';
+
+  export default {
+    name: 'AnswerSettings',
+
+    setup() {
+      const {
+        answerSettingsLabel$,
+        shuffleAnswersLabel$,
+        shuffleAnswersInfoTitle$,
+        shuffleAnswersInfoBody$,
+        showAnswerCountLabel$,
+        showAnswerCountInfoTitle$,
+        showAnswerCountInfoBody$,
+        closeBtnLabel$,
+      } = qtiEditorStrings;
+
+      const showShuffleModal = ref(false);
+      const showAnswerCountModal = ref(false);
+
+      return {
+        answerSettingsLabel$,
+        shuffleAnswersLabel$,
+        shuffleAnswersInfoTitle$,
+        shuffleAnswersInfoBody$,
+        showAnswerCountLabel$,
+        showAnswerCountInfoTitle$,
+        showAnswerCountInfoBody$,
+        closeBtnLabel$,
+        showShuffleModal,
+        showAnswerCountModal,
+      };
+    },
+
+    props: {
+      settings: {
+        type: Array,
+        required: true,
+        validator: arr => arr.every(setting => ['shuffle', 'showAnswerCount'].includes(setting)),
+      },
+      shuffle: {
+        type: Boolean,
+        default: false,
+      },
+      showAnswerCount: {
+        type: Boolean,
+        default: true,
+      },
+    },
+
+    emits: ['update:shuffle', 'update:showAnswerCount'],
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .answer-settings {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .answer-settings-label {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .setting-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+</style>

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

@@ -15,6 +15,7 @@
       :interaction="interaction"
       :mode="mode"
       :showAnswers="showAnswers"
+      :teleportTarget="teleportTarget"
       @update:interaction="interaction => $emit('update:interaction', interaction)"
     />
   </div>
@@ -66,6 +67,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"
       />