From 4821ffc7cd194c82f9ba416cab21c3eecb958817 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 3 Jul 2024 12:06:25 -0700
Subject: [PATCH 1/4] Add in submit quiz button for non-large screen sizes.

---
 .../learn/assets/src/views/ExamPage/index.vue | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index 10bcc8dea1f..9b249e4fc86 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -132,13 +132,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 +167,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
@@ -681,6 +695,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;

From 167b8ddf723925b72278c1489a5df7448af996ab Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 3 Jul 2024 13:23:44 -0700
Subject: [PATCH 2/4] Fixes bug in section change handling.

---
 kolibri/plugins/learn/assets/src/views/ExamPage/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index 9b249e4fc86..783b2909b9f 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -487,7 +487,7 @@
         if (index === this.currentSectionIndex) {
           return;
         }
-        this.goToQuestion(this.sections.startQuestionNumber);
+        this.goToQuestion(this.sections[index].startQuestionNumber);
       },
       handleQuestionOptionChange(opt) {
         const index = opt.value;

From 9148fe0d5e7dfd250f5a8af601aea935159739e4 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 3 Jul 2024 13:44:11 -0700
Subject: [PATCH 3/4] Revert change to class.

---
 .../plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue
index 09ec8d3f184..ff87a711182 100644
--- 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"
                   />

From 9b9b0ca332814afaa09e68ebf312a6b03b494a69 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 3 Jul 2024 13:44:44 -0700
Subject: [PATCH 4/4] Add answered/unanswered state indicators to KSelects.

---
 .../learn/assets/src/views/ExamPage/index.vue | 106 +++++++++++++++++-
 1 file changed, 104 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index 783b2909b9f..79e9a1821f4 100644
--- 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"
@@ -318,6 +380,7 @@
               total: this.exam.question_count,
             }),
             value: this.currentSection.startQuestionNumber + i,
+            disabled: question.missing,
           })) || []
         );
       },
@@ -348,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 {
@@ -482,6 +555,31 @@
         });
     },
     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) {
@@ -774,4 +872,8 @@
     border: 0;
   }
 
+  .dot {
+    margin-right: 5px;
+  }
+
 </style>