drop-down section and question counter on mobile exampage

learningequality · May 31, 2024 · 946b42f · 946b42f
1 parent bab6c45
commit 946b42f
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 7 deletions.
diff --git a/kolibri/plugins/learn/assets/src/modules/examViewer/index.js b/kolibri/plugins/learn/assets/src/modules/examViewer/index.js
@@ -18,4 +18,31 @@ export default {
       Object.assign(state, defaultState());
     },
   },
+  getters: {
+    sections(state) {
+      if (!state.exam.question_sources) return [];
+      return state.exam.question_sources;
+    },
+    currentQuestion(state) {
+      if (state.questions.length === 0) return null;
+      return state.questions[state.questionNumber];
+    },
+    currentSection(state, { currentQuestion, sections }) {
+      return sections.find(section =>
+        section.questions.map(q => q.item).includes(currentQuestion.item)
+      );
+    },
+    sectionSelectOptions(state, { sections }) {
+      return (
+        sections.map((section, i) => ({
+          label: section.section_title,
+          value: i,
+        })) || []
+      );
+    },
+    currentSectionOption(state, { currentSection, sectionSelectOptions }) {
+      if (!currentSection) return {};
+      return sectionSelectOptions.find(opt => opt.label === currentSection.section_title);
+    },
+  },
 };
diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -16,7 +16,7 @@
 
     </template>
 
-    <KCircularLoader v-if="loading" />
+    <KCircularLoader v-if="loading || !currentQuestion" />
 
     <div v-else>
       <SidePanelModal
@@ -86,8 +86,14 @@
         <KGridItem :layout12="{ span: 8 }" class="column-pane">
           <main :class="{ 'column-contents-wrapper': !windowIsSmall }">
 
-            <KPageContainer dir="auto">
-              <h2 class="section-title">
+            <KPageContainer dir="auto" style="overflow-x: visible;">
+              <KSelect
+                v-if="(windowIsSmall || windowIsMedium)"
+                :value="currentSectionOption"
+                :options="sectionSelectOptions"
+                @select="handleSectionOptionChange"
+              />
+              <h2 v-else class="section-title">
                 {{ currentSection.section_title }}
               </h2>
               <p> {{ currentSection.description }} </p>
@@ -109,7 +115,13 @@
 
             </KPageContainer>
             <KPageContainer>
-              <h2 class="number-of-questions">
+              <KSelect
+                v-if="(windowIsSmall || windowIsMedium)"
+                :value="currentQuestionOption"
+                :options="questionSelectOptions"
+                @select="handleQuestionOptionChange"
+              />
+              <h2 v-else class="number-of-questions">
                 {{ $tr('question', { num: questionNumber + 1, total: exam.question_count }) }}
               </h2>
               <ContentRenderer
@@ -222,7 +234,7 @@
 
 <script>
 
-  import { mapState } from 'vuex';
+  import { mapGetters, mapState } from 'vuex';
   import isEqual from 'lodash/isEqual';
   import debounce from 'lodash/debounce';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
@@ -294,14 +306,37 @@
       ...mapState({
         loading: state => state.core.loading,
       }),
+      ...mapGetters('examViewer', [
+        'currentQuestion',
+        'currentSection',
+        'sectionSelectOptions',
+        'currentSectionOption',
+        'currentQuestionOption',
+      ]),
       ...mapState('examViewer', ['exam', 'contentNodeMap', 'questions', 'questionNumber']),
+      questionSelectOptions() {
+        if (!this.currentSection) return { questions: [] };
+        return (
+          this.currentSection.questions.map((question, i) => ({
+            label: this.$tr('question', {
+              num: i + 1,
+              total: this.currentSection.questions.length,
+            }),
+            value: question.item,
+          })) || []
+        );
+      },
+      currentQuestionOption() {
+        if (!this.currentQuestion) return {};
+        return this.questionSelectOptions.find(opt => opt.value === this.currentQuestion.item);
+      },
       currentSection() {
         return this.sections.find(section =>
           section.questions.map(q => q.item).includes(this.currentQuestion.item)
         );
       },
       sections() {
-        return this.exam.question_sources;
+        return this.exam.question_sources || [];
       },
       /**
        * @returns {Array} List of all question "item" in the exam - item being a unique identifier
@@ -382,7 +417,10 @@
       // We generate a special item value to save to the backend that encodes
       // both the itemId and the nodeId
       attemptLogItemValue() {
-        return this.currentQuestion?.item || null;
+        if (!this.currentQuestion) {
+          return null;
+        }
+        return this.currentQuestion.item;
       },
       questionsAnswered() {
         return Object.keys(
@@ -461,6 +499,12 @@
         });
     },
     methods: {
+      handleSectionOptionChange(opt) {
+        this.goToQuestion(this.sections[opt.value].questions[0].item);
+      },
+      handleQuestionOptionChange(opt) {
+        this.goToQuestion(opt.value);
+      },
       findFirstEl() {
         this.$refs.resourcePanel.focusFirstEl();
       },