Merge pull request #12412 from rtibbles/submit!

Add in submit quiz button for non-large screen sizes.
learningequality · Jul 3, 2024 · 00d9db7 · 00d9db7
2 parents 08ae627 + 9b9b0ca
commit 00d9db7
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 7 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue
@@ -77,7 +77,7 @@
                 >
                   <KIcon
                     v-if="question.missing"
-                    class="published"
+                    class="dot"
                     icon="warning"
                     :color="$themePalette.yellow.v_1100"
                   />

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -68,7 +68,24 @@
                     :value="currentSectionOption"
                     :options="sectionSelectOptions"
                     @select="handleSectionOptionChange"
-                  />
+                  >
+                    <template #display>
+                      <KIcon
+                        class="dot"
+                        :icon="sectionQuestionsIcon(currentSectionIndex)"
+                        :color="sectionQuestionsIconColor(currentSectionIndex)"
+                      />
+                      <span>{{ currentSectionOption.label }}</span>
+                    </template>
+                    <template #option="{ index, option }">
+                      <KIcon
+                        class="dot"
+                        :icon="sectionQuestionsIcon(index)"
+                        :color="sectionQuestionsIconColor(index)"
+                      />
+                      <span>{{ option.label }}</span>
+                    </template>
+                  </KSelect>
                   <h2
                     v-else-if="currentSectionOption.label"
                     class="section-select"
@@ -103,7 +120,52 @@
                 :value="currentQuestionOption"
                 :options="questionSelectOptions"
                 @select="handleQuestionOptionChange"
-              />
+              >
+                <template #display>
+                  <KIcon
+                    v-if="currentQuestionOption.disabled"
+                    class="dot"
+                    icon="warning"
+                    :color="$themePalette.yellow.v_1100"
+                  />
+                  <KIcon
+                    v-else
+                    class="dot"
+                    :icon="
+                      isAnswered(currentQuestionOption.value)
+                        ? 'unpublishedResource'
+                        : 'unpublishedChange'
+                    "
+                    :color="
+                      isAnswered(currentQuestionOption.value)
+                        ? $themeTokens.progress
+                        : $themeTokens.textDisabled
+                    "
+                  />
+                  <span>
+                    {{ currentQuestionOption.label }}
+                  </span>
+                </template>
+                <template #option="{ option }">
+                  <KIcon
+                    v-if="option.disabled"
+                    class="dot"
+                    icon="warning"
+                    :color="$themePalette.yellow.v_1100"
+                  />
+                  <KIcon
+                    v-else
+                    class="dot"
+                    :icon="isAnswered(option.value) ? 'unpublishedResource' : 'unpublishedChange'"
+                    :color="
+                      isAnswered(option.value) ? $themeTokens.progress : $themeTokens.textDisabled
+                    "
+                  />
+                  <span>
+                    {{ option.label }}
+                  </span>
+                </template>
+              </KSelect>
               <h2
                 v-else
                 class="number-of-questions"
@@ -132,13 +194,12 @@
         </KGridItem>
       </KGrid>
       <BottomAppBar :maxWidth="null">
-        <component :is="windowIsSmall ? 'div' : 'KButtonGroup'">
+        <KButtonGroup :class="{ spread: !windowIsLarge }">
           <KButton
             :disabled="questionNumber === 0"
             :primary="true"
             :dir="layoutDirReset"
             :appearanceOverrides="navigationButtonStyle"
-            :class="{ 'left-align': windowIsSmall }"
             :aria-label="$tr('previousQuestion')"
             @click="goToPreviousQuestion"
           >
@@ -168,7 +229,22 @@
               />
             </template>
           </KButton>
-        </component>
+          <!-- below prev/next buttons in tab and DOM order -->
+          <KButton
+            v-if="!windowIsLarge && questionsUnanswered === 0"
+            :text="$tr('submitExam')"
+            :primary="true"
+            appearance="raised-button"
+            @click="finishExam"
+          />
+          <KButton
+            v-else-if="!windowIsLarge && !missingResources"
+            :text="$tr('submitExam')"
+            :primary="false"
+            appearance="flat-button"
+            @click="toggleModal"
+          />
+        </KButtonGroup>
 
         <!-- below prev/next buttons in tab and DOM order, in footer -->
         <div
@@ -304,6 +380,7 @@
               total: this.exam.question_count,
             }),
             value: this.currentSection.startQuestionNumber + i,
+            disabled: question.missing,
           })) || []
         );
       },
@@ -334,6 +411,16 @@
       currentSectionOption() {
         return this.sectionSelectOptions[this.currentSectionIndex];
       },
+      sectionCompletionMap() {
+        const answeredAttemptItems = this.pastattempts.filter(a => a.answer).map(a => a.item);
+        return this.sections.reduce((acc, { questions }, index) => {
+          acc[index] = questions
+            .filter(q => answeredAttemptItems.includes(q.item))
+            .map(q => q.item);
+
+          return acc;
+        }, {});
+      },
       gridStyle() {
         if (!this.windowIsSmall) {
           return {
@@ -468,12 +555,37 @@
         });
     },
     methods: {
+      sectionQuestionsIconColor(index) {
+        const answered = this.sectionCompletionMap[index].length;
+        const total = this.sections[index].questions.length;
+        if (answered === total) {
+          return this.$themeTokens.progress;
+        } else if (answered > 0) {
+          return this.$themeTokens.progress;
+        }
+        return this.$themeTokens.textDisabled;
+      },
+      sectionQuestionsIcon(index) {
+        const answered = this.sectionCompletionMap[index].length;
+        const total = this.sections[index].questions.length;
+        if (answered === total) {
+          return 'unpublishedResource';
+        } else if (answered > 0) {
+          return 'unpublishedChange';
+        }
+        return 'unpublishedChange';
+      },
+      isAnswered(questionIndex) {
+        const question = this.questions[questionIndex];
+        const attempt = this.pastattempts.find(attempt => attempt.item === question.item);
+        return attempt && attempt.answer;
+      },
       handleSectionOptionChange(opt) {
         const index = opt.value;
         if (index === this.currentSectionIndex) {
           return;
         }
-        this.goToQuestion(this.sections.startQuestionNumber);
+        this.goToQuestion(this.sections[index].startQuestionNumber);
       },
       handleQuestionOptionChange(opt) {
         const index = opt.value;
@@ -681,6 +793,19 @@
     text-align: center;
   }
 
+  .spread {
+    display: flex;
+    justify-content: space-between;
+    // Swap the display order of the next and submit buttons
+    :nth-child(2) {
+      order: 3;
+    }
+
+    :nth-child(3) {
+      order: 2;
+    }
+  }
+
   .left-align {
     position: absolute;
     left: 10px;
@@ -747,4 +872,8 @@
     border: 0;
   }
 
+  .dot {
+    margin-right: 5px;
+  }
+
 </style>