Updates to sections in ExamPage

kolibri/core/assets/src/views/AttemptLogList.vue

@@ -62,7 +62,7 @@
         v-for="(section, index) in sections"
         :id="`section-questions-${index}`"
         :key="`section-questions-${index}`"
-        :title="section.section_title"
+        :title="displaySectionTitle(section, index)"
         @focus="expand(index)"
       >
         <template #heading="{ title }">
@@ -189,9 +189,12 @@
 
 <script>
 
+  import {
+    displaySectionTitle,
+    enhancedQuizManagementStrings,
+  } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import useAccordion from 'kolibri-common/components/useAccordion';
   import { coreStrings } from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import AccordionItem from 'kolibri-common/components/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/AccordionContainer';
   import { computed, watch } from 'kolibri.lib.vueCompositionApi';
@@ -236,7 +239,7 @@
       const sectionSelectOptions = computed(() => {
         return sections.value.map((section, index) => ({
           value: index,
-          label: section.section_title,
+          label: displaySectionTitle(section, index),
         }));
       });
 
@@ -305,6 +308,7 @@
       return {
         handleSectionChange,
         handleQuestionChange,
+        displaySectionTitle,
         quizSectionsLabel$,
         questionsLabel$,
         expand,

kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js

@@ -522,6 +522,11 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       "Text shown on a modal pop-up window when the user clicks the 'Start Quiz' button. This explains what will happen when the user confirms the action of starting the quiz.",
   },
+  canNoLongerEditQuizNotice: {
+    message: 'You will no longer be able to edit the quiz.',
+    context:
+      'In the modal pop-up window when the user clicks the "Start Quiz" button, explains that they will not be able to edit the quiz after starting it.',
+  },
   openQuizModalEmptySections: {
     message: 'Any sections without questions will be removed from the quiz.',
     context:

kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue

@@ -140,6 +140,7 @@
           @submit="handleOpenQuiz(activeQuiz.id)"
         >
           <p>{{ openQuizModalDetail$() }}</p>
+          <p>{{ canNoLongerEditQuizNotice$() }}</p>
           <p
             v-if="
               activeQuiz.data_model_version === 3 &&
@@ -240,6 +241,7 @@
         newQuizAction$,
         filterQuizStatus$,
         quizClosedLabel$,
+        canNoLongerEditQuizNotice$,
       } = coachStrings;
 
       const statusSelected = ref({
@@ -275,6 +277,7 @@
         titleLabel$,
         recipientsLabel$,
         sizeLabel$,
+        canNoLongerEditQuizNotice$,
         statusLabel$,
         newQuizAction$,
         filterQuizStatus$,

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue

@@ -391,6 +391,7 @@
         questionsDeletedNotification$,
         expandAll$,
         collapseAll$,
+        questionDeletionConfirmation$,
       } = enhancedQuizManagementStrings;
 
       const {
@@ -404,7 +405,7 @@
         setActiveSection,
         updateQuiz,
         selectAllQuestions,
-
+        replacementQuestionPool,
         // Computed
         toggleQuestionInSelection,
         allSections,
@@ -454,6 +455,7 @@
         addQuizSectionQuestionsInstructions$,
         editSectionLabel$,
         deleteSectionLabel$,
+        questionDeletionConfirmation$,
         replaceAction$,
         questionList$,
         sectionDeletedNotification$,
@@ -479,6 +481,7 @@
         activeSection,
         activeResourceMap,
         activeResourcePool,
+        replacementQuestionPool,
         activeQuestions,
         selectedActiveQuestions,
       };

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue

@@ -12,7 +12,7 @@
     <h1 class="section-header">
       {{ replaceQuestions$() }}
     </h1>
-    <p>{{ replaceQuestionsExplaination$() }}</p>
+    <p>{{ replaceQuestionsHeading$() }}</p>
     <span
       class="divider"
       :style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
@@ -193,6 +193,7 @@
         closeConfirmationMessage$,
         closeConfirmationTitle$,
         replaceQuestionsExplaination$,
+        replaceQuestionsHeading$,
         numberOfSelectedReplacements$,
         numberOfQuestionsReplaced$,
         noUndoWarning$,
@@ -322,6 +323,7 @@
         closeConfirmationTitle$,
         noUndoWarning$,
         replaceQuestionsExplaination$,
+        replaceQuestionsHeading$,
         selectMoreQuestion$,
         selectFewerQuestion$,
         collapseAll$,

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue

@@ -251,7 +251,9 @@
       @cancel="handleCancelDelete"
       @submit="handleConfirmDelete"
     >
-      {{ deleteConfirmation$({ section_title: activeSection.section_title }) }}
+      {{ deleteConfirmation$(
+        { section_title: displaySectionTitle(activeSection, activeSectionIndex) }
+      ) }}
     </KModal>
   </div>
 
@@ -340,7 +342,7 @@
       }
 
       function handleConfirmDelete() {
-        const section_title = activeSection.value.section_title;
+        const section_title = displaySectionTitle(activeSection.value, activeSectionIndex.value);
         removeSection(showDeleteConfirmation.value);
         router.replace({
           name: PageNames.EXAM_CREATION_ROOT,

kolibri/plugins/learn/assets/src/modules/examViewer/index.js

@@ -1,3 +1,5 @@
+import { displaySectionTitle } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+
 function defaultState() {
   return {
     contentNodeMap: {},
@@ -27,22 +29,27 @@ export default {
       if (state.questions.length === 0) return null;
       return state.questions[state.questionNumber];
     },
-    currentSection(state, { currentQuestion, sections }) {
-      return sections.find(section =>
+    currentSection(state, { sections, currentSectionIndex }) {
+      return sections[currentSectionIndex];
+    },
+    currentSectionIndex(state, { currentQuestion, sections }) {
+      return sections.findIndex(section =>
         section.questions.map(q => q.item).includes(currentQuestion.item)
       );
     },
     sectionSelectOptions(state, { sections }) {
       return (
         sections.map((section, i) => ({
-          label: section.section_title,
+          label: displaySectionTitle(section, i),
           value: i,
         })) || []
       );
     },
     currentSectionOption(state, { currentSection, sectionSelectOptions }) {
       if (!currentSection) return {};
-      return sectionSelectOptions.find(opt => opt.label === currentSection.section_title);
+      return sectionSelectOptions.find(
+        (opt, i) => opt.label === displaySectionTitle(currentSection, i)
+      );
     },
   },
 };

kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue

@@ -9,7 +9,7 @@
       v-for="(section, index) in sections"
       :id="`section-questions-${index}`"
       :key="`section-questions-${index}`"
-      :title="section.section_title"
+      :title="displaySectionTitle(section, index)"
       @focus="expand(index)"
     >
       <template #heading="{ title }">
@@ -97,6 +97,7 @@
 
 <script>
 
+  import { displaySectionTitle } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import AccordionItem from 'kolibri-common/components/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/AccordionContainer';
   import isEqual from 'lodash/isEqual';
@@ -120,6 +121,7 @@
       const { collapse, expand, isExpanded, toggle } = useAccordion(sections);
 
       return {
+        displaySectionTitle,
         collapse,
         expand,
         isExpanded,

kolibri/plugins/learn/assets/src/views/ExamPage/index.vue

@@ -43,7 +43,7 @@
                   :layout12="{ span: 8 }"
                 >
                   <h2 class="section-title">
-                    {{ currentSection.section_title }}
+                    {{ displaySectionTitle(currentSection, currentSectionIndex) }}
                   </h2>
                   <p> {{ currentSection.description }} </p>
                 </KGridItem>
@@ -226,6 +226,7 @@
 
   import { mapGetters, mapState } from 'vuex';
   import isEqual from 'lodash/isEqual';
+  import { displaySectionTitle } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import debounce from 'lodash/debounce';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
@@ -269,6 +270,7 @@
         windowIsSmall,
       } = useKResponsiveWindow();
       return {
+        displaySectionTitle,
         pastattempts,
         time_spent,
         initContentSession,
@@ -296,6 +298,7 @@
       ...mapGetters('examViewer', [
         'currentQuestion',
         'currentSection',
+        'currentSectionIndex',
         'sectionSelectOptions',
         'currentSectionOption',
         'currentQuestionOption',

packages/kolibri-common/strings/enhancedQuizManagementStrings.js

@@ -73,7 +73,7 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
     message: 'Add questions',
   },
   selectFoldersOrExercises: {
-    message: 'Select folders or exercises from these channels',
+    message: 'Select resources from these channels',
   },
   numberOfSelectedBookmarks: {
     message: '{ count, number } { count, plural, one { bookmark } other { bookmarks }}',
@@ -102,6 +102,9 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   replaceAction: {
     message: 'Replace',
   },
+  replaceQuestionsHeading: {
+    message: 'The new questions you select will replace the current ones.',
+  },
   replaceQuestionsExplaination: {
     message: 'The new questions you selected will replace the current ones.',
   },
@@ -220,8 +223,7 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
     context: 'Message of modal when a user tries to replace questions but the pool is empty',
   },
   addMoreResourcesWithNonEmptyPool: {
-    message:
-      'Please add more resources to this section, or go back and only select up to { available, number } { available, plural, one { question } other { questions } } to be replaced.',
+    message: 'Please add more resources to this section, or go back and select fewer questions',
     context:
       'Message of modal when a user tries to replace more questions than are available in the pool',
   },
@@ -241,6 +243,10 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   saveAndClose: {
     message: 'Save and close',
   },
+  questionDeletionConfirmation: {
+    message:
+      'Are you sure you want to remove { count, number } { count, plural, one { question } other { questions }} from this section?',
+  },
 });
 
 const { sectionLabel$ } = enhancedQuizManagementStrings;