Handle select practice quiz

learningequality · Jan 30, 2025 · 5d416a4 · 5d416a4
1 parent c0a33a3
commit 5d416a4
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 67 deletions.
diff --git a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
@@ -13,6 +13,14 @@ import useFetch from './useFetch';
  * This utility handles selection rules, manages fetch states for channels, bookmarks,
  * and topic trees, and offers methods to add, remove, or override selected resources.
  *
+ * @param {Object} options
+ * @param {Object} options.bookmarks Configuration object for bookmarks fetch. It can contain
+ * `filters` an object with extra query params, and `annotator` a function to annotate the results.
+ * @param {Object} options.channels Configuration object for channels fetch. It can contain
+ * `filters` an object with extra query params, and `annotator` a function to annotate the results.
+ * @param {Object} options.topicTree Configuration object for topic tree fetch. It can contain
+ * `filters` an object with extra query params, and `annotator` a function to annotate the results.
+ *
  * @typedef {Object} UseResourceSelectionResponse
  * @property {Object} topic Topic tree object, contains the information of the topic,
  *   its ascendants and children.

diff --git a/kolibri/plugins/coach/assets/src/routes/examRoutes.js b/kolibri/plugins/coach/assets/src/routes/examRoutes.js
@@ -77,24 +77,11 @@ export default [
             path: 'section-order',
             component: SectionOrder,
           },
-          // {
-          //   name: PageNames.QUIZ_SELECT_RESOURCES,
-          //   path: 'select-resources/:topic_id?',
-          //   component: ResourceSelection,
-          // },
-          // {
-          //   name: PageNames.QUIZ_SELECT_PRACTICE_QUIZ,
-          //   path: 'select-quiz/:topic_id?',
-          //   component: ResourceSelection,
-          //   props: {
-          //     selectPracticeQuiz: true,
-          //   },
-          // },
         ],
       },
       {
         name: PageNames.QUIZ_SELECT_RESOURCES,
-        path: 'select-resources/',
+        path: 'select-resources',
         component: QuizResourceSelection,
         redirect: 'select-resources/landing-settings',
         children: [
@@ -128,31 +115,25 @@ export default [
           },
           {
             name: PageNames.QUIZ_SELECT_RESOURCES_SETTINGS,
-            path: 'landing-settings',
+            path: 'settings',
             component: QuestionsSettings,
           },
-          // {
-          //   name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
-          //   path: 'index',
-          //   component: SelectionIndex,
-          // },
-          // {
-          //   name: PageNames.LESSON_SELECT_RESOURCES_BOOKMARKS,
-          //   path: 'bookmarks',
-          //   component: SelectFromBookmarks,
-          // },
-          // {
-          //   name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
-          //   path: 'channels',
-          //   component: SelectFromChannels,
-          // },
-          // {
-          //   name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
-          //   path: 'preview-resources',
-          //   component: ManageSelectedResources,
-          // },
         ],
       },
+      {
+        name: PageNames.QUIZ_SELECT_PRACTICE_QUIZ,
+        path: 'select-quiz',
+        redirect: to => {
+          const { params } = to;
+          return {
+            name: PageNames.QUIZ_SELECT_RESOURCES_INDEX,
+            params,
+            query: {
+              selectPracticeQuiz: true,
+            },
+          };
+        },
+      },
     ],
   },
   {

diff --git a/.../plugins/coach/assets/src/views/common/resourceSelection/subPages/SelectFromBookmarks.vue b/.../plugins/coach/assets/src/views/common/resourceSelection/subPages/SelectFromBookmarks.vue
@@ -2,7 +2,7 @@
 
   <div>
     <QuizResourceSelectionHeader
-      v-if="target === SelectionTarget.QUIZ"
+      v-if="target === SelectionTarget.QUIZ && !settings.selectPracticeQuiz"
       class="mb-16"
       hideSearch
       :settings="settings"
@@ -15,13 +15,15 @@
       :channelsLink="channelsLink"
       :fetchMore="fetchMore"
       :loadingMore="loadingMore"
+      :multi="!settings?.selectPracticeQuiz"
       :selectionRules="selectionRules"
       :selectAllRules="selectAllRules"
       :selectedResources="selectedResources"
       :contentCardMessage="contentCardMessage"
       :noSelectableResourcesIds="noSelectableResourcesIds"
       @selectResources="$emit('selectResources', $event)"
       @deselectResources="$emit('deselectResources', $event)"
+      @setSelectedResources="$emit('setSelectedResources', $event)"
     />
   </div>
 

diff --git a/...i/plugins/coach/assets/src/views/common/resourceSelection/subPages/SelectFromChannels.vue b/...i/plugins/coach/assets/src/views/common/resourceSelection/subPages/SelectFromChannels.vue
@@ -15,11 +15,21 @@
     </div>
 
     <QuizResourceSelectionHeader
-      v-if="target === SelectionTarget.QUIZ"
+      v-if="target === SelectionTarget.QUIZ && !settings.selectPracticeQuiz"
       class="mb-16"
       :settings="settings"
     />
 
+    <div
+      v-if="target === SelectionTarget.QUIZ && settings.selectPracticeQuiz"
+      class="d-flex-end mb-16"
+    >
+      <KButton
+        icon="filter"
+        :text="searchLabel$()"
+      />
+    </div>
+
     <div class="topic-info">
       <h2>
         <KIcon
@@ -44,13 +54,15 @@
       :hasMore="hasMore"
       :fetchMore="fetchMore"
       :loadingMore="loadingMore"
+      :multi="!settings?.selectPracticeQuiz"
       :selectionRules="selectionRules"
       :selectAllRules="selectAllRules"
       :selectedResources="selectedResources"
       :contentCardMessage="contentCardMessage"
       :unselectableResourceIds="unselectableResourceIds"
       @selectResources="$emit('selectResources', $event)"
       @deselectResources="$emit('deselectResources', $event)"
+      @setSelectedResources="$emit('setSelectedResources', $event)"
     />
   </div>
 
@@ -83,13 +95,19 @@
       const { manageLessonResourcesTitle$ } = coachStrings;
       const instance = getCurrentInstance();
 
-      const { selectResourcesDescription$ } = enhancedQuizManagementStrings;
-      const title =
-        props.target === SelectionTarget.LESSON
-          ? manageLessonResourcesTitle$()
-          : selectResourcesDescription$({ sectionTitle: props.sectionTitle });
+      const { selectResourcesDescription$, selectPracticeQuizLabel$ } =
+        enhancedQuizManagementStrings;
 
-      props.setTitle(title);
+      const getTitle = () => {
+        if (props.target === SelectionTarget.LESSON) {
+          return manageLessonResourcesTitle$();
+        }
+        if (props.settings.selectPracticeQuiz) {
+          return selectPracticeQuizLabel$();
+        }
+        return selectResourcesDescription$({ sectionTitle: props.sectionTitle });
+      };
+      props.setTitle(getTitle());
 
       const redirectBack = () => {
         instance.proxy.$router.push({
@@ -210,6 +228,15 @@
 
 <style scoped>
 
+  .d-flex-end {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .mb-16 {
+    margin-bottom: 16px;
+  }
+
   .side-panel-subtitle {
     font-size: 16px;
     font-weight: 600;

diff --git a/kolibri/plugins/coach/assets/src/views/common/resourceSelection/subPages/SelectionIndex.vue b/kolibri/plugins/coach/assets/src/views/common/resourceSelection/subPages/SelectionIndex.vue
@@ -19,10 +19,19 @@
       </div>
 
       <QuizResourceSelectionHeader
-        v-if="target === SelectionTarget.QUIZ"
+        v-if="target === SelectionTarget.QUIZ && !settings.selectPracticeQuiz"
         class="mb-24"
         :settings="settings"
       />
+      <div
+        v-if="target === SelectionTarget.QUIZ && settings.selectPracticeQuiz"
+        class="d-flex-end mb-24"
+      >
+        <KButton
+          icon="filter"
+          :text="searchLabel$()"
+        />
+      </div>
 
       <KCardGrid layout="1-1-1">
         <KCard
@@ -108,15 +117,21 @@
         searchLabel$,
       } = coreStrings;
 
-      const { selectResourcesDescription$ } = enhancedQuizManagementStrings;
+      const { selectResourcesDescription$, selectPracticeQuizLabel$ } =
+        enhancedQuizManagementStrings;
       const { manageLessonResourcesTitle$ } = coachStrings;
 
-      const title =
-        props.target === SelectionTarget.LESSON
-          ? manageLessonResourcesTitle$()
-          : selectResourcesDescription$({ sectionTitle: props.sectionTitle });
+      const getTitle = () => {
+        if (props.target === SelectionTarget.LESSON) {
+          return manageLessonResourcesTitle$();
+        }
+        if (props.settings.selectPracticeQuiz) {
+          return selectPracticeQuizLabel$();
+        }
+        return selectResourcesDescription$({ sectionTitle: props.sectionTitle });
+      };
 
-      props.setTitle(title);
+      props.setTitle(getTitle());
       props.setGoBack(null);
 
       return {
@@ -226,6 +241,11 @@
     margin-bottom: 16px;
   }
 
+  .d-flex-end {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   .mb-24 {
     margin-bottom: 24px;
   }

diff --git a/.../coach/assets/src/views/quizzes/CreateExamPage/sidePanels/QuizResourceSelection/index.vue b/.../coach/assets/src/views/quizzes/CreateExamPage/sidePanels/QuizResourceSelection/index.vue
@@ -77,7 +77,7 @@
           @click="continueAction.handler"
         />
         <template v-else>
-          <div v-if="!selectPracticeQuiz">
+          <div v-if="!settings.selectPracticeQuiz">
             <span v-if="tooManyQuestions">
               {{
                 tooManyQuestions$({
@@ -103,7 +103,7 @@
             <KButton
               primary
               :text="
-                selectPracticeQuiz
+                settings.selectPracticeQuiz
                   ? selectQuiz$()
                   : addNumberOfQuestions$({ count: Math.max(1, settings.questionCount) })
               "
@@ -148,7 +148,7 @@
       SidePanelModal,
     },
     mixins: [commonCoreStrings],
-    setup(props) {
+    setup() {
       const { $store, $router } = getCurrentInstance().proxy;
       const route = computed(() => $store.state.route);
       const {
@@ -162,10 +162,13 @@
       } = injectQuizCreation();
       const showCloseConfirmation = ref(false);
 
+      const { selectPracticeQuiz } = route.value.query;
+
       const settings = ref({
         maxQuestions: null,
         questionCount: null,
         isChoosingManually: null,
+        selectPracticeQuiz,
       });
       watch(
         activeQuestions,
@@ -181,8 +184,6 @@
         { immediate: true },
       );
 
-      const selectPracticeQuiz = computed(() => props.selectPracticeQuiz);
-
       const {
         questionsUnusedInSection$,
         tooManyQuestions$,
@@ -245,7 +246,7 @@
       });
 
       const isPracticeQuiz = item =>
-        !selectPracticeQuiz.value || get(item, ['options', 'modality'], false) === 'QUIZ';
+        !selectPracticeQuiz || get(item, ['options', 'modality'], false) === 'QUIZ';
 
       const { topic, loading, treeFetch, channelsFetch, bookmarksFetch } = useResourceSelection({
         bookmarks: {
@@ -255,7 +256,7 @@
         channels: {
           filters: {
             contains_exercise: true,
-            contains_quiz: selectPracticeQuiz.value ? true : null,
+            contains_quiz: selectPracticeQuiz ? true : null,
           },
           annotator: results =>
             annotateTopicsWithDescendantCounts(
@@ -273,7 +274,7 @@
         topicTree: {
           filters: {
             kind_in: [ContentNodeKinds.EXERCISE, ContentNodeKinds.TOPIC],
-            contains_quiz: selectPracticeQuiz.value ? true : null,
+            contains_quiz: selectPracticeQuiz ? true : null,
           },
           annotator: annotateTopicsWithDescendantCounts,
         },
@@ -310,7 +311,7 @@
       });
 
       const disableSave = computed(() => {
-        if (selectPracticeQuiz.value) {
+        if (selectPracticeQuiz) {
           return !workingPoolHasChanged.value;
         }
         return (
@@ -391,12 +392,6 @@
         numberOfSelectedResources$,
       };
     },
-    props: {
-      selectPracticeQuiz: {
-        type: Boolean,
-        default: false,
-      },
-    },
     beforeRouteLeave(_, __, next) {
       if (!this.showCloseConfirmation && this.workingPoolHasChanged) {
         this.showCloseConfirmation = true;
@@ -407,7 +402,7 @@
     },
     methods: {
       saveSelectedResource() {
-        if (this.selectPracticeQuiz) {
+        if (this.settings.selectPracticeQuiz) {
           if (this.workingResourcePool.length !== 1) {
             throw new Error('Only one resource can be selected for a practice quiz');
           }
@@ -444,7 +439,7 @@
       },
       // The message put onto the content's card when listed
       contentCardMessage(content) {
-        if (this.selectPracticeQuiz) {
+        if (this.settings.selectPracticeQuiz) {
           return;
         }
         if (content.kind !== ContentNodeKinds.EXERCISE) {