Survey modality

kolibri/core/assets/src/views/AttemptLogItem.vue

@@ -8,46 +8,48 @@
       )
       }}
     </component>
-    <AttemptIconDiff
-      v-if="showDiff"
-      class="diff-item item"
-      :correct="attemptLog.correct"
-      :diff="attemptLog.diff.correct"
-    />
-    <KIcon
-      v-if="attemptLog.noattempt"
-      class="item svg-item"
-      icon="notStarted"
-    />
-    <KIcon
-      v-else-if="attemptLog.correct"
-      class="item svg-item"
-      :style="{ fill: $themeTokens.correct }"
-      icon="correct"
-    />
-    <KIcon
-      v-else-if="attemptLog.error"
-      class="svg-item"
-      :style=" { fill: $themeTokens.annotation }"
-      icon="helpNeeded"
-    />
-    <KIcon
-      v-else-if="!attemptLog.correct"
-      class="item svg-item"
-      :style="{ fill: $themeTokens.incorrect }"
-      icon="incorrect"
-    />
-    <KIcon
-      v-else-if="attemptLog.hinted"
-      class="item svg-item"
-      :style=" { fill: $themeTokens.annotation }"
-      icon="hint"
-    />
-    <CoachContentLabel
-      class="coach-content-label"
-      :value="attemptLog.num_coach_contents || 0"
-      :isTopic="false"
-    />
+    <div v-if="!isSurvey" data-test="question-attempt-icons">
+      <AttemptIconDiff
+        v-if="showDiff"
+        class="diff-item item"
+        :correct="attemptLog.correct"
+        :diff="attemptLog.diff.correct"
+      />
+      <KIcon
+        v-if="attemptLog.noattempt"
+        class="item svg-item"
+        icon="notStarted"
+      />
+      <KIcon
+        v-else-if="attemptLog.correct"
+        class="item svg-item"
+        :style="{ fill: $themeTokens.correct }"
+        icon="correct"
+      />
+      <KIcon
+        v-else-if="attemptLog.error"
+        class="svg-item"
+        :style=" { fill: $themeTokens.annotation }"
+        icon="helpNeeded"
+      />
+      <KIcon
+        v-else-if="!attemptLog.correct"
+        class="item svg-item"
+        :style="{ fill: $themeTokens.incorrect }"
+        icon="incorrect"
+      />
+      <KIcon
+        v-else-if="attemptLog.hinted"
+        class="item svg-item"
+        :style=" { fill: $themeTokens.annotation }"
+        icon="hint"
+      />
+      <CoachContentLabel
+        class="coach-content-label"
+        :value="attemptLog.num_coach_contents || 0"
+        :isTopic="false"
+      />
+    </div>
   </span>
 
 </template>
@@ -75,6 +77,10 @@
         type: String,
         required: true,
       },
+      isSurvey: {
+        type: Boolean,
+        required: true,
+      },
     },
     computed: {
       showDiff() {

kolibri/core/assets/src/views/AttemptLogList.vue

@@ -18,10 +18,18 @@
       @change="handleDropdownChange($event.value)"
     >
       <template #display>
-        <AttemptLogItem :attemptLog="attemptLogs[selectedQuestionNumber]" displayTag="span" />
+        <AttemptLogItem
+          :isSurvey="isSurvey"
+          :attemptLog="attemptLogs[selectedQuestionNumber]"
+          displayTag="span"
+        />
       </template>
       <template #option="{ index }">
-        <AttemptLogItem :attemptLog="attemptLogs[index]" displayTag="span" />
+        <AttemptLogItem
+          :isSurvey="isSurvey"
+          :attemptLog="attemptLogs[index]"
+          displayTag="span"
+        />
       </template>
     </KSelect>
 
@@ -55,7 +63,7 @@
             @keydown.enter="setSelectedAttemptLog(index)"
             @keydown.space.prevent="setSelectedAttemptLog(index)"
           >
-            <AttemptLogItem :attemptLog="attemptLog" displayTag="p" />
+            <AttemptLogItem :isSurvey="isSurvey" :attemptLog="attemptLog" displayTag="p" />
           </a>
         </li>
       </template>
@@ -90,6 +98,10 @@
         type: Number,
         required: true,
       },
+      isSurvey: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       selected() {

kolibri/core/assets/src/views/ExamReport/CurrentTryOverview.vue

@@ -1,7 +1,7 @@
 <template>
 
   <table v-if="currentTryDefined" class="scores">
-    <tr v-if="!hideStatus">
+    <tr v-if="!hideStatus" data-test="try-status">
       <th>
         {{ coreString('statusLabel') }}
       </th>
@@ -10,23 +10,23 @@
         {{ progressIconLabel }}
       </td>
     </tr>
-    <tr v-if="masteryModel">
+    <tr v-if="masteryModel && !isSurvey" data-test="try-mastery-model">
       <th>
         {{ coreString('masteryModelLabel') }}
       </th>
       <td>
         <MasteryModel :masteryModel="masteryModel" />
       </td>
     </tr>
-    <tr v-if="correctDefined && !masteryModel">
+    <tr v-if="!isSurvey && correctDefined && !masteryModel" data-test="try-score">
       <th>
         {{ coreString('scoreLabel') }}
       </th>
       <td>
         {{ $formatNumber(score, { style: 'percent' }) }}
       </td>
     </tr>
-    <tr v-if="correctDefined && !masteryModel">
+    <tr v-if="!isSurvey && correctDefined && !masteryModel" data-test="try-questions-correct">
       <th>
         {{ $tr('questionsCorrectLabel') }}
       </th>
@@ -42,7 +42,7 @@
         >{{ questionsCorrectAnnotation }}</span>
       </td>
     </tr>
-    <tr v-if="currentTry.time_spent">
+    <tr v-if="!isSurvey && currentTry.time_spent" data-test="try-time-spent">
       <th>
         {{ coreString('timeSpentLabel') }}
       </th>
@@ -56,7 +56,7 @@
         >{{ timeSpentAnnotation }}</span>
       </td>
     </tr>
-    <tr>
+    <tr data-test="try-attempted-ago">
       <th>
         {{ $tr('attemptedLabel') }}
       </th>
@@ -73,6 +73,7 @@
 
 <script>
 
+  import get from 'lodash/get';
   import isPlainObject from 'lodash/isPlainObject';
   import isUndefined from 'lodash/isUndefined';
   import { mapGetters } from 'vuex';
@@ -113,7 +114,7 @@
         type: Number,
         required: true,
       },
-      // Whether to hide the current overal progress
+      // Whether to hide the current overall progress
       // used when using the CurrentTry component in the context
       // of multiple tries, where the overall progress is determined
       // from the most recent try.
@@ -128,6 +129,11 @@
         type: String,
         default: '',
       },
+      // Whether the modality is a Survey - conditionalizes styles
+      isSurvey: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       ...mapGetters(['currentUserId']),
@@ -158,11 +164,8 @@
         return 0.0;
       },
       masteryModel() {
-        if (
-          this.currentTryDefined &&
-          this.currentTry.mastery_criterion &&
-          this.currentTry.mastery_criterion.type !== 'quiz'
-        ) {
+        const masteryModel = get(this, 'currentTry.mastery_criterion.type', null);
+        if (masteryModel && masteryModel !== 'quiz') {
           return this.currentTry.mastery_criterion;
         }
         return null;
@@ -171,7 +174,9 @@
         return this.currentTryDefined && !isUndefined(this.currentTry.correct);
       },
       score() {
-        return this.currentTryDefined ? this.currentTry.correct / this.totalQuestions : 0;
+        // Get will return 0 if currentTry.correct is undefined - we || to 0 also
+        // in case the value is for some reason falsy;
+        return get(this, 'currentTry.correct', 0) / this.totalQuestions || 0;
       },
       questionsCorrectAnnotation() {
         if (
@@ -188,19 +193,20 @@
             })
           : null;
       },
+      diffTimeSpent() {
+        return Math.floor(get(this, 'currentTry.diff.time_spent', 0) / 60) || null;
+      },
       timeSpentAnnotation() {
         if (!this.currentTryDefined || !this.currentTry.diff) {
           return null;
         }
 
-        const fasterTime = this.currentTry.diff.time_spent
-          ? Math.floor(this.currentTry.diff.time_spent / 60)
-          : 0;
-
-        if (fasterTime <= -1) {
-          return this.$tr('practiceQuizReportFasterTimeLabel', { value: Math.abs(fasterTime) });
-        } else if (fasterTime >= 1) {
-          return this.$tr('practiceQuizReportSlowerTimeLabel', { value: fasterTime });
+        if (this.diffTimeSpent <= -1) {
+          return this.$tr('practiceQuizReportFasterTimeLabel', {
+            value: Math.abs(this.diffTimeSpent),
+          });
+        } else if (this.diffTimeSpent >= 1) {
+          return this.$tr('practiceQuizReportSlowerTimeLabel', { value: this.diffTimeSpent });
         }
 
         return null;