ensure all uses of attemptloglist are given sections

learningequality · Jun 4, 2024 · ab359ce · ab359ce
1 parent 22be019
commit ab359ce
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 8 deletions.
diff --git a/kolibri/core/assets/src/views/AttemptLogList.vue b/kolibri/core/assets/src/views/AttemptLogList.vue
@@ -19,13 +19,15 @@
     >
       <template #display>
         <AttemptLogItem
+          class="attempt-selected"
           :isSurvey="isSurvey"
           :attemptLog="attemptLogs[selectedQuestionNumber]"
           displayTag="span"
         />
       </template>
       <template #option="{ index }">
         <AttemptLogItem
+          class="attempt-option"
           :isSurvey="isSurvey"
           :attemptLog="attemptLogs[index]"
           displayTag="span"
@@ -55,9 +57,15 @@
               class="accordion-header-label"
               :aria-expanded="isExpanded(index)"
               :aria-controls="`section-question-panel-${index}`"
-              :text="title"
               @click="toggle(index)"
-            />
+            >
+              <span>{{ title }}</span>
+              <KIcon
+                class="chevron-icon"
+                :icon="(isExpanded(index)) ?
+                  'chevronUp' : 'chevronRight'"
+              />
+            </KButton>
           </h3>
         </template>
         <template #content>
@@ -288,10 +296,38 @@
 
   .history-select {
     max-width: 90%;
-    padding-top: 16px;
+    padding: 0.5em 0;
     margin: auto;
   }
 
+  /deep/.ui-select-dropdown {
+    left: 0;
+  }
+
+  .attempt-option {
+    position: relative;
+    width: calc(100% - 1em);
+
+    /deep/.svg-item {
+      position: absolute;
+      top: 50%;
+      right: 0.5em;
+      z-index: 1;
+      vertical-align: middle;
+      transform: translateY(-50%);
+    }
+  }
+
+  .attempt-selected {
+    /deep/.svg-item {
+      position: absolute;
+      top: 50%;
+      right: 0.5em;
+      vertical-align: middle;
+      transform: translateY(-50%);
+    }
+  }
+
   .attempt-item {
     display: block;
     min-width: 120px;
@@ -306,12 +342,37 @@
   }
 
   .accordion-header-label {
-    padding-left: 1em;
+    display: block;
+    width: calc(100% - 1em);
+    height: 100%;
+    padding: 1em;
 
     // Removes underline from section headings
     /deep/.link-text {
       text-decoration: none;
     }
   }
 
+  .chevron-icon {
+    position: absolute;
+    top: 50%;
+    right: 0.5em;
+    vertical-align: middle;
+    transform: translateY(-50%);
+  }
+
+  .accordion-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.5;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.3s ease;
+  }
+
 </style>
diff --git a/kolibri/core/assets/src/views/ExamReport/index.vue b/kolibri/core/assets/src/views/ExamReport/index.vue
@@ -79,7 +79,7 @@
         :attemptLogs="attemptLogs"
         :selectedQuestionNumber="questionNumber"
         :isSurvey="isSurvey"
-        :sections="exam.question_sources"
+        :sections="sections"
         @select="navigateToQuestion"
       />
     </template>
@@ -94,7 +94,7 @@
           :attemptLogs="attemptLogs"
           :selectedQuestionNumber="questionNumber"
           :isSurvey="isSurvey"
-          :sections="exam.question_sources"
+          :sections="sections"
           @select="navigateToQuestion"
         />
         <div
@@ -156,7 +156,6 @@
 
 <script>
 
-  import { mapState } from 'vuex';
   import sortBy from 'lodash/sortBy';
   import isFinite from 'lodash/isFinite';
   import isNumber from 'lodash/isNumber';
@@ -256,6 +255,12 @@
         type: Function,
         required: true,
       },
+      // The exam.question_sources value
+      sections: {
+        type: Array,
+        required: true,
+        default: () => [],
+      },
       // An array of questions in the format:
       // {
       //   exercise_id: <exercise_id>,
@@ -318,7 +323,6 @@
       };
     },
     computed: {
-      ...mapState('examReportViewer', ['exam']),
       attemptLogs() {
         if (this.isQuiz || this.isSurvey) {
           return this.quizAttempts();

diff --git a/kolibri/plugins/coach/assets/src/views/common/LearnerQuizReport.vue b/kolibri/plugins/coach/assets/src/views/common/LearnerQuizReport.vue
@@ -13,6 +13,7 @@
       :exerciseContentNodes="exerciseContentNodes"
       :navigateTo="navigateTo"
       :questions="questions"
+      :sections="exam.question_sources"
     />
   </KPageContainer>
 

diff --git a/kolibri/plugins/learn/assets/src/views/LearnExamReportViewer.vue b/kolibri/plugins/learn/assets/src/views/LearnExamReportViewer.vue
@@ -19,6 +19,7 @@
           :exerciseContentNodes="exerciseContentNodes"
           :navigateTo="navigateTo"
           :questions="questions"
+          :sections="exam.question_sources"
           @noCompleteTries="noCompleteTries"
         />
       </div>

diff --git a/kolibri/plugins/learn/assets/src/views/QuizRenderer/QuizReport.vue b/kolibri/plugins/learn/assets/src/views/QuizRenderer/QuizReport.vue
@@ -17,6 +17,7 @@
     :questions="questions"
     :isSurvey="isSurvey"
     :isQuiz="!isSurvey"
+    :sections="exam.question_sources"
   >
     <template #actions>
       <KButton @click="$emit('repeat')">