From 209ac504daa1c54164ebc799c1a24abf03010b50 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 24 Jul 2024 22:30:04 -0700
Subject: [PATCH 1/2] exam page: nonlarge timer put to top of page

---
 .../learn/assets/src/views/ExamPage/index.vue | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index 16e815756fb..ee7b75804b2 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -37,10 +37,11 @@
         >
           <main :class="{ 'column-contents-wrapper': !windowIsSmall }">
             <KPageContainer
+              v-if="windowIsLarge"
               dir="auto"
               style="overflow-x: visible"
             >
-              <KGrid v-if="windowIsLarge">
+              <KGrid>
                 <KGridItem :layout12="{ span: 8 }">
                   <h2 class="section-title">
                     {{ displaySectionTitle(currentSection, currentSectionIndex) }}
@@ -59,9 +60,23 @@
                   </div>
                 </KGridItem>
               </KGrid>
-              <div
-                v-else
-                style="overflow-x: visible"
+            </KPageContainer>
+            <div v-else>
+              <KPageContainer
+                dir="auto"
+                class="quiz-container"
+              >
+                <span>{{ coreString('timeSpentLabel') }}:</span>
+                <TimeDuration
+                  class="timer"
+                  aria-live="polite"
+                  role="timer"
+                  :seconds="time_spent"
+                />
+              </KPageContainer>
+              <KPageContainer
+                dir="auto"
+                class="quiz-container"
               >
                 <div v-if="windowIsSmall || windowIsMedium">
                   <KSelect
@@ -94,26 +109,17 @@
                     {{ currentSectionOption.label }}
                   </h2>
                 </div>
-                <p>{{ currentSection.description }}</p>
+                <p v-if="currentSection.description">{{ currentSection.description }}</p>
                 <p v-if="content && content.duration">
                   {{ learnString('suggestedTime') }}
                 </p>
-                <div :style="{ margin: '0 auto', textAlign: 'center', width: '100%' }">
-                  <span>{{ coreString('timeSpentLabel') }}:</span>
-                  <TimeDuration
-                    class="timer"
-                    aria-live="polite"
-                    role="timer"
-                    :seconds="time_spent"
-                  />
-                </div>
                 <SuggestedTime
                   v-if="content && content.duration"
                   class="timer"
                   :seconds="content.duration"
                 />
-              </div>
-            </KPageContainer>
+              </KPageContainer>
+            </div>
             <KPageContainer style="overflow-x: visible">
               <KSelect
                 v-if="windowIsSmall || windowIsMedium"
@@ -880,4 +886,13 @@
     margin-right: 5px;
   }
 
+  .section-select {
+    margin: 0;
+  }
+
+  .quiz-container {
+    padding: 1em !important;
+    overflow-x: visible;
+  }
+
 </style>

From 9b0432638208f93577bc0606472a27514c31a45f Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 24 Jul 2024 22:31:27 -0700
Subject: [PATCH 2/2] exam page: include labels on dropdowns for sections &
 questions

---
 .../plugins/learn/assets/src/views/ExamPage/index.vue  | 10 +++++++++-
 1 file changed, 9 insertions(+), 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 ee7b75804b2..7eeb3e179e7 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -83,6 +83,7 @@
                     v-if="sectionSelectOptions.length > 1"
                     :value="currentSectionOption"
                     :options="sectionSelectOptions"
+                    :label="quizSectionsLabel$()"
                     @select="handleSectionOptionChange"
                   >
                     <template #display>
@@ -126,6 +127,7 @@
                 style="margin-top: 1em"
                 :value="currentQuestionOption"
                 :options="questionSelectOptions"
+                :label="questionsLabel$()"
                 @select="handleQuestionOptionChange"
               >
                 <template #display>
@@ -311,7 +313,10 @@
 
   import { mapState } from 'vuex';
   import isEqual from 'lodash/isEqual';
-  import { displaySectionTitle } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import {
+    displaySectionTitle,
+    enhancedQuizManagementStrings,
+  } 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';
@@ -351,7 +356,10 @@
       } = useProgressTracking();
       const { windowBreakpoint, windowIsMedium, windowIsLarge, windowIsSmall } =
         useKResponsiveWindow();
+      const { quizSectionsLabel$, questionsLabel$ } = enhancedQuizManagementStrings;
       return {
+        questionsLabel$,
+        quizSectionsLabel$,
         displaySectionTitle,
         pastattempts,
         time_spent,