Update preview plan quiz

kolibri/plugins/coach/assets/src/routes/planExamRoutes.js

@@ -6,6 +6,7 @@ import ReplaceQuestions from '../views/plan/CreateExamPage/ReplaceQuestions.vue'
 import CoachExamsPage from '../views/plan/CoachExamsPage';
 import QuizSummaryPage from '../views/plan/QuizSummaryPage';
 import SectionOrder from '../views/plan/CreateExamPage/SectionOrder';
+import { generateQuestionListHandler } from '../modules/questionList/handlers';
 
 export default [
   {
@@ -53,8 +54,9 @@ export default [
   },
   {
     name: QuizSummaryPage.name,
-    path: '/:classId/plan/quizzes/:quizId',
+    path: '/:classId/plan/quizzes/:quizId/:tabId?',
     component: QuizSummaryPage,
+    handler: generateQuestionListHandler(['quizId']),
     meta: {
       titleParts: ['QUIZ_NAME', 'quizzesLabel', 'CLASS_NAME'],
     },

kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue

@@ -20,6 +20,7 @@
             />
           </h1>
           <StatusElapsedTime
+            v-if="examOrLesson !== 'exam'"
             v-show="!$isPrint"
             :date="createdDate"
             actionType="created"

kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue

@@ -82,16 +82,23 @@
       >
         <KGridItem
           class="status-label"
-          :layout4="{ span: 4 }"
+          style="padding-bottom: 16px"
+          :layout4="{ span: 3 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="{ span: 10 }"
         >
-          {{ $tr('reportVisibleToLearnersLabel') }}
+          <span> {{ $tr('reportVisibleToLearnersLabel') }} </span>
+          <StatusElapsedTime
+            v-if="exam.active"
+            :date="examDateOpened"
+            actionType="madeVisible"
+            style="font-weight: normal"
+          />
         </KGridItem>
         <KGridItem
-          :layout4="{ span: 4 }"
+          :layout4="{ span: 1 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="{ span: 2 }"
         >
           <KSwitch
             name="toggle-quiz-visibility"
@@ -104,74 +111,71 @@
         </KGridItem>
       </div>
 
-      <!-- Class name  -->
-      <div
-        v-show="$isPrint"
-        class="status-item"
-      >
+      <!-- Recipients  -->
+      <div class="status-item">
         <KGridItem
           class="status-label"
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Label"
         >
-          {{ coachString('classLabel') }}
+          {{ coachString('recipientsLabel') }}
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Value"
         >
           <div>
-            {{ className }}
+            <Recipients
+              :groupNames="groupAndAdHocLearnerNames"
+              :hasAssignments="exam.assignments.length > 0"
+            />
           </div>
         </KGridItem>
       </div>
 
-      <!-- Recipients  -->
+      <!-- Average Score -->
       <div class="status-item">
         <KGridItem
           class="status-label"
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Label"
         >
-          {{ coachString('recipientsLabel') }}
+          <span>{{ coachString('avgScoreLabel') }}</span>
+          <AverageScoreTooltip
+            v-show="!$isPrint"
+            class="avg-score-info"
+          />
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Value"
         >
-          <div>
-            <Recipients
-              :groupNames="groupAndAdHocLearnerNames"
-              :hasAssignments="exam.assignments.length > 0"
-            />
-          </div>
+          <Score :value="avgScore" />
         </KGridItem>
       </div>
 
-      <!-- Average Score -->
+      <!-- Class name  -->
       <div class="status-item">
         <KGridItem
           class="status-label"
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Label"
         >
-          <span>{{ coachString('avgScoreLabel') }}</span>
-          <AverageScoreTooltip
-            v-show="!$isPrint"
-            class="avg-score-info"
-          />
+          {{ coachString('classLabel') }}
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Value"
         >
-          <Score :value="avgScore" />
+          <div>
+            {{ className }}
+          </div>
         </KGridItem>
       </div>
 
@@ -215,7 +219,29 @@
           :layout8="{ span: 4 }"
           :layout12="{ span: 12 }"
         >
-          <p>{{ exam.size_string ? exam.size_string : '--' }}</p>
+          <span>{{ exam.size_string ? exam.size_string : '--' }}</span>
+        </KGridItem>
+      </div>
+
+      <!-- Date created -->
+      <div class="status-item">
+        <KGridItem
+          class="status-label"
+          :layout4="{ span: 4 }"
+          :layout8="{ span: 4 }"
+          :layout12="layout12Label"
+        >
+          {{ coreString('dateCreated') }}
+        </KGridItem>
+        <KGridItem
+          :layout4="{ span: 4 }"
+          :layout8="{ span: 4 }"
+          :layout12="layout12Value"
+        >
+          <ElapsedTime
+            :date="examDateCreated"
+            style="margin-top: 8px"
+          />
         </KGridItem>
       </div>
     </KGrid>
@@ -347,6 +373,13 @@
           ':hover': { 'background-color': this.$darken1(this.$themePalette.red.v_1100) },
         };
       },
+      examDateCreated() {
+        if (this.exam.date_created) {
+          return new Date(this.exam.date_created);
+        } else {
+          return null;
+        }
+      },
       examDateArchived() {
         if (this.exam.date_archived) {
           return new Date(this.exam.date_archived);

kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue

@@ -18,7 +18,7 @@
   const HOUR = MINUTE * 60;
   const DAY = HOUR * 24;
 
-  const ACTION_TYPES = ['created', 'closed', 'opened'];
+  const ACTION_TYPES = ['created', 'closed', 'opened', 'madeVisible'];
 
   export default {
     name: 'StatusElapsedTime',
@@ -64,6 +64,8 @@
               return this.$tr('closedSecondsAgo', strParams);
             case 'opened':
               return this.$tr('openedSecondsAgo', strParams);
+            case 'madeVisible':
+              return this.$tr('madeVisibleSecondsAgo', strParams);
             default:
               return '';
           }
@@ -78,6 +80,8 @@
               return this.$tr('closedMinutesAgo', strParams);
             case 'opened':
               return this.$tr('openedMinutesAgo', strParams);
+            case 'madeVisible':
+              return this.$tr('madeVisibleMinutesAgo', strParams);
             default:
               return '';
           }
@@ -92,6 +96,8 @@
               return this.$tr('closedHoursAgo', strParams);
             case 'opened':
               return this.$tr('openedHoursAgo', strParams);
+            case 'madeVisible':
+              return this.$tr('madeVisibleHoursAgo', strParams);
             default:
               return '';
           }
@@ -105,6 +111,8 @@
             return this.$tr('closedDaysAgo', strParams);
           case 'opened':
             return this.$tr('openedDaysAgo', strParams);
+          case 'madeVisible':
+            return this.$tr('madeVisibleDaysAgo', strParams);
           default:
             return '';
         }
@@ -182,6 +190,26 @@
         message: 'Started {days} {days, plural, one {day} other {days}} ago',
         context: 'Indicates that a quiz was started a number of days prior to the current date.',
       },
+      madeVisibleSecondsAgo: {
+        message: 'Made visible {seconds} {seconds, plural, one {second} other {seconds}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of seconds prior to the current time, but is always less than 1 minute ago.',
+      },
+      madeVisibleMinutesAgo: {
+        message: 'Made visible {minutes} {minutes, plural, one {minute} other {minutes}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of minutes prior to the current time, but the time is always less than 1 hour ago.',
+      },
+      madeVisibleHoursAgo: {
+        message: 'Made visible {hours} {hours, plural, one {hour} other {hours}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of hours prior to the current time, but the time is always less than one day ago',
+      },
+      madeVisibleDaysAgo: {
+        message: 'Made visible {days} {days, plural, one {day} other {days}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of days prior to the current date.',
+      },
     },
   };
 

kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue

@@ -1,17 +1,17 @@
 <template>
 
-  <KButton
+  <KIconButton
     hasDropdown
+    icon="optionsHorizontal"
     appearance="flat-button"
-    :text="coreString('optionsLabel')"
   >
     <template #menu>
       <KDropdownMenu
         :options="options"
         @select="$emit('select', $event.value)"
       />
     </template>
-  </KButton>
+  </KIconButton>
 
 </template>