From 41e0ac39b2fefc5acb065cdfb7dd8eaf7b4fdc85 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 27 Sep 2024 08:12:45 -0500
Subject: [PATCH 1/8] Move reports into quizsummarypage

---
 .../coach/assets/src/routes/planExamRoutes.js |   2 +-
 .../src/views/plan/QuizSummaryPage/index.vue  | 121 +++++++++++++-----
 2 files changed, 92 insertions(+), 31 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index 1b75a290b67..d5f1a26077b 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -53,7 +53,7 @@ export default [
   },
   {
     name: QuizSummaryPage.name,
-    path: '/:classId/plan/quizzes/:quizId',
+    path: '/:classId/plan/quizzes/:quizId/:tabId?',
     component: QuizSummaryPage,
     meta: {
       titleParts: ['QUIZ_NAME', 'quizzesLabel', 'CLASS_NAME'],
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index ee1db0ddf9c..bfd2a0721d9 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -36,20 +36,26 @@
           v-if="!loading"
           :topMargin="16"
         >
-          <section v-if="selectedQuestions">
-            <h2>
-              {{ coachString('numberOfQuestions', { value: selectedQuestions.length }) }}
-            </h2>
-
-            <p>
-              {{ orderDescriptionString }}
-            </p>
-
-            <QuestionListPreview
-              :sections="quiz.question_sources || []"
-              :selectedExercises="selectedExercises"
+          <ReportsControls @export="exportCSV" />
+          <HeaderTabs :enablePrint="true">
+            <KTabsList
+              ref="tabList"
+              :tabsId="QUIZZES_TABS_ID"
+              :ariaLabel="coachString('detailsLabel')"
+              :activeTabId="QuizzesTabs.REPORT"
+              :tabs="tabs"
+              @click="() => saveTabsClick(QUIZZES_TABS_ID)"
+            />
+          </HeaderTabs>
+          <KTabsPanel
+            :tabsId="QUIZZES_TABS_ID"
+            :activeTabId="QuizzesTabs.REPORT"
+          >
+            <ReportsLearnersTable
+              :entries="table"
+              :questionCount="exam.question_count"
             />
-          </section>
+          </KTabsPanel>
         </KPageContainer>
       </KGridItem>
     </KGrid>
@@ -68,8 +74,9 @@
 <script>
 
   import { mapState } from 'vuex';
-  import fromPairs from 'lodash/fromPairs';
   import find from 'lodash/find';
+  import sortBy from 'lodash/sortBy';
+  import fromPairs from 'lodash/fromPairs';
   import { ERROR_CONSTANTS } from 'kolibri.coreVue.vuex.constants';
   import CatchErrors from 'kolibri.utils.CatchErrors';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -77,10 +84,15 @@
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants';
+  import { QUIZZES_TABS_ID, QuizzesTabs } from '../../../constants/tabsConstants';
+
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
-  import QuestionListPreview from '../CreateExamPage/QuestionListPreview';
   import { coachStringsMixin } from '../../common/commonCoachStrings';
+  import ReportsControls from '../../reports/ReportsControls';
+  import ReportsLearnersTable from '../../reports/ReportsLearnersTable';
+  import * as csvFields from '../../../csv/fields';
+  import CSVExporter from '../../../csv/exporter';
   import QuizOptionsDropdownMenu from './QuizOptionsDropdownMenu';
   import ManageExamModals from './ManageExamModals';
   import {
@@ -94,8 +106,9 @@
     name: 'QuizSummaryPage',
     components: {
       CoachAppBarPage,
+      ReportsControls,
       ManageExamModals,
-      QuestionListPreview,
+      ReportsLearnersTable,
       QuizOptionsDropdownMenu,
     },
     mixins: [commonCoach, coachStringsMixin, commonCoreStrings],
@@ -122,19 +135,15 @@
         selectedExercises: {},
         loading: true,
         currentAction: '',
+        QUIZZES_TABS_ID,
+        QuizzesTabs,
       };
     },
     computed: {
       ...mapState(['classList']),
-      selectedQuestions() {
-        return this.quiz.question_sources.reduce((acc, section) => {
-          acc = [...acc, ...section.questions];
-          return acc;
-        }, []);
-      },
-      quizIsRandomized() {
-        return !this.quiz.learners_see_fixed_order;
-      },
+      // quizIsRandomized() {
+      //   return !this.quiz.learners_see_fixed_order;
+      // },
       avgScore() {
         return this.getExamAvgScore(this.$route.params.quizId, this.recipients);
       },
@@ -144,14 +153,45 @@
       recipients() {
         return this.getLearnersForExam(this.exam);
       },
-      orderDescriptionString() {
-        return this.quizIsRandomized
-          ? this.randomizedSectionOptionDescription$()
-          : this.fixedSectionOptionDescription$();
-      },
+      // orderDescriptionString() {
+      //   return this.quizIsRandomized
+      //     ? this.randomizedSectionOptionDescription$()
+      //     : this.fixedSectionOptionDescription$();
+      // },
       classId() {
         return this.$route.params.classId;
       },
+      tabs() {
+        const tabsList = [
+          {
+            id: QuizzesTabs.REPORT,
+            label: this.coachString('reportLabel'),
+            to: this.classRoute('ReportsQuizLearnerListPage'),
+          },
+        ];
+        const isDraftExam = this.exam && this.exam.draft;
+        if (!isDraftExam) {
+          tabsList.push({
+            id: QuizzesTabs.DIFFICULT_QUESTIONS,
+            label: this.coachString('difficultQuestionsLabel'),
+            to: this.classRoute('ReportsQuizQuestionListPage'),
+          });
+        }
+        return tabsList;
+      },
+      table() {
+        const learners = this.recipients.map(learnerId => this.learnerMap[learnerId]);
+        const sorted = sortBy(learners, ['name']);
+        return sorted.map(learner => {
+          const tableRow = {
+            groups: this.getGroupNamesForLearner(learner.id),
+            statusObj: this.getExamStatusObjForLearner(this.exam.id, learner.id),
+            link: this.detailLink(learner.id),
+          };
+          Object.assign(tableRow, learner);
+          return tableRow;
+        });
+      },
     },
     beforeRouteEnter(to, from, next) {
       return fetchQuizSummaryPageData(to.params.quizId)
@@ -255,6 +295,27 @@
             this.$store.dispatch('handleApiError', { error });
           });
       },
+      detailLink(learnerId) {
+        return this.classRoute(PageNames.REPORTS_QUIZ_LEARNER_PAGE_ROOT, {
+          learnerId,
+        });
+      },
+      exportCSV() {
+        const columns = [
+          ...csvFields.name(),
+          ...csvFields.learnerProgress('statusObj.status'),
+          ...csvFields.score(),
+          ...csvFields.quizQuestionsAnswered(this.exam),
+          ...csvFields.list('groups', 'groupsLabel'),
+        ];
+
+        const exporter = new CSVExporter(columns, this.className);
+        exporter.addNames({
+          resource: this.exam.title,
+        });
+
+        exporter.export(this.table);
+      },
     },
     $trs: {
       uniqueTitleError: {

From 950f81adcbbe5b71db44892d661119905c7b31c5 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 27 Sep 2024 09:50:39 -0500
Subject: [PATCH 2/8] Add ReportsDifficultQuestionsTable

---
 .../coach/assets/src/routes/planExamRoutes.js |  2 +
 .../src/views/plan/QuizSummaryPage/index.vue  | 77 +++++++++++++---
 .../ReportsDifficultQuestionsTable.vue        | 91 +++++++++++++++++++
 3 files changed, 158 insertions(+), 12 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue

diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index d5f1a26077b..ff0f1a3b83a 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/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 [
   {
@@ -55,6 +56,7 @@ export default [
     name: QuizSummaryPage.name,
     path: '/:classId/plan/quizzes/:quizId/:tabId?',
     component: QuizSummaryPage,
+    handler: generateQuestionListHandler(['quizId']),
     meta: {
       titleParts: ['QUIZ_NAME', 'quizzesLabel', 'CLASS_NAME'],
     },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index bfd2a0721d9..ef305ea8ac4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -42,19 +42,29 @@
               ref="tabList"
               :tabsId="QUIZZES_TABS_ID"
               :ariaLabel="coachString('detailsLabel')"
-              :activeTabId="QuizzesTabs.REPORT"
+              :activeTabId="activeTabId"
               :tabs="tabs"
               @click="() => saveTabsClick(QUIZZES_TABS_ID)"
             />
           </HeaderTabs>
           <KTabsPanel
             :tabsId="QUIZZES_TABS_ID"
-            :activeTabId="QuizzesTabs.REPORT"
+            :activeTabId="activeTabId"
           >
-            <ReportsLearnersTable
-              :entries="table"
-              :questionCount="exam.question_count"
-            />
+            <template #[QuizzesTabs.REPORT]>
+              <ReportsLearnersTable
+                ref="table"
+                :entries="learnersTable"
+                :questionCount="exam.question_count"
+              />
+            </template>
+            <template #[QuizzesTabs.DIFFICULT_QUESTIONS]>
+              <ReportsDifficultQuestionsTable
+                ref="table"
+                :entries="difficultQuestionsTable"
+                :isMissingResource="exam.missing_resource"
+              />
+            </template>
           </KTabsPanel>
         </KPageContainer>
       </KGridItem>
@@ -73,7 +83,7 @@
 
 <script>
 
-  import { mapState } from 'vuex';
+  import { mapState, mapGetters } from 'vuex';
   import find from 'lodash/find';
   import sortBy from 'lodash/sortBy';
   import fromPairs from 'lodash/fromPairs';
@@ -85,12 +95,14 @@
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants';
   import { QUIZZES_TABS_ID, QuizzesTabs } from '../../../constants/tabsConstants';
+  import { useCoachTabs } from '../../../composables/useCoachTabs';
 
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import { coachStringsMixin } from '../../common/commonCoachStrings';
   import ReportsControls from '../../reports/ReportsControls';
   import ReportsLearnersTable from '../../reports/ReportsLearnersTable';
+  import ReportsDifficultQuestionsTable from '../../reports/ReportsDifficultQuestionsTable';
   import * as csvFields from '../../../csv/fields';
   import CSVExporter from '../../../csv/exporter';
   import QuizOptionsDropdownMenu from './QuizOptionsDropdownMenu';
@@ -110,17 +122,23 @@
       ManageExamModals,
       ReportsLearnersTable,
       QuizOptionsDropdownMenu,
+      ReportsDifficultQuestionsTable,
     },
     mixins: [commonCoach, coachStringsMixin, commonCoreStrings],
     setup() {
       const { randomizedSectionOptionDescription$, fixedSectionOptionDescription$ } =
         enhancedQuizManagementStrings;
       const { createSnackbar, clearSnackbar } = useSnackbar();
+
+      const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
+
       return {
         randomizedSectionOptionDescription$,
         fixedSectionOptionDescription$,
+        wereTabsClickedRecently,
         createSnackbar,
         clearSnackbar,
+        saveTabsClick,
       };
     },
     data() {
@@ -141,14 +159,26 @@
     },
     computed: {
       ...mapState(['classList']),
+      ...mapGetters('questionList', ['difficultQuestions']),
+
       // quizIsRandomized() {
       //   return !this.quiz.learners_see_fixed_order;
       // },
+      quizId() {
+        return this.$route.params.quizId;
+      },
+      activeTabId() {
+        const { tabId } = this.$route.params;
+        if (Object.values(QuizzesTabs).includes(tabId)) {
+          return tabId;
+        }
+        return QuizzesTabs.REPORT;
+      },
       avgScore() {
-        return this.getExamAvgScore(this.$route.params.quizId, this.recipients);
+        return this.getExamAvgScore(this.quizId, this.recipients);
       },
       exam() {
-        return this.examMap[this.$route.params.quizId];
+        return this.examMap[this.quizId];
       },
       recipients() {
         return this.getLearnersForExam(this.exam);
@@ -166,20 +196,24 @@
           {
             id: QuizzesTabs.REPORT,
             label: this.coachString('reportLabel'),
-            to: this.classRoute('ReportsQuizLearnerListPage'),
           },
         ];
+
         const isDraftExam = this.exam && this.exam.draft;
         if (!isDraftExam) {
           tabsList.push({
             id: QuizzesTabs.DIFFICULT_QUESTIONS,
             label: this.coachString('difficultQuestionsLabel'),
-            to: this.classRoute('ReportsQuizQuestionListPage'),
           });
         }
+
+        tabsList.forEach(tab => {
+          tab.to = this.classRoute('QuizSummaryPage', { quizId: this.quizId, tabId: tab.id });
+        });
+
         return tabsList;
       },
-      table() {
+      learnersTable() {
         const learners = this.recipients.map(learnerId => this.learnerMap[learnerId]);
         const sorted = sortBy(learners, ['name']);
         return sorted.map(learner => {
@@ -192,6 +226,13 @@
           return tableRow;
         });
       },
+      difficultQuestionsTable() {
+        return this.difficultQuestions.map(question => {
+          const tableRow = {};
+          Object.assign(tableRow, question);
+          return tableRow;
+        });
+      },
     },
     beforeRouteEnter(to, from, next) {
       return fetchQuizSummaryPageData(to.params.quizId)
@@ -202,6 +243,18 @@
           next(vm => vm.setError(error));
         });
     },
+    mounted() {
+      // focus the active tab but only when it's likely
+      // that this header was re-mounted as a result
+      // of navigation after clicking a tab (focus shouldn't
+      // be manipulated programatically in other cases, e.g.
+      // when visiting the page for the first time)
+      if (this.wereTabsClickedRecently(this.QUIZZES_TABS_ID)) {
+        this.$nextTick(() => {
+          this.$refs.tabList.focusActiveTab();
+        });
+      }
+    },
     methods: {
       // @public
       setData(data) {
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
new file mode 100644
index 00000000000..9b1d3bdbc90
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -0,0 +1,91 @@
+<template>
+
+  <CoreTable :emptyMessage="questionListEmptyState$()">
+    <template #headers>
+      <th>{{ questionLabel$() }}</th>
+      <th>{{ helpNeededLabel$() }}</th>
+    </template>
+    <template #tbody>
+      <transition-group
+        tag="tbody"
+        name="list"
+      >
+        <tr
+          v-for="(tableRow, index) in entries"
+          :key="tableRow.item + index"
+        >
+          <td>
+            <span v-if="$isPrint">{{ tableRow.title }}</span>
+            <KRouterLink
+              v-if="!isMissingResource"
+              :text="tableRow.title"
+              :to="questionLink(tableRow.item)"
+              icon="question"
+            />
+            <span v-else> <KIcon icon="question" />{{ tableRow.title }} </span>
+          </td>
+          <td>
+            <LearnerProgressRatio
+              :verb="VERBS.needHelp"
+              :icon="ICONS.help"
+              :total="tableRow.total"
+              :count="tableRow.total - tableRow.correct"
+              :verbosity="1"
+            />
+          </td>
+        </tr>
+      </transition-group>
+    </template>
+  </CoreTable>
+
+</template>
+
+
+<script>
+
+  import commonCoach from '../common';
+  import LearnerProgressRatio from '../common/status/LearnerProgressRatio';
+  import { coachStrings } from '../common/commonCoachStrings';
+  import { PageNames } from './../../constants';
+
+  export default {
+    name: 'ReportsDifficultQuestionsTable',
+    components: {
+      LearnerProgressRatio,
+    },
+    mixins: [commonCoach],
+    setup() {
+      const { questionListEmptyState$, questionLabel$, helpNeededLabel$ } = coachStrings;
+
+      return {
+        questionListEmptyState$,
+        questionLabel$,
+        helpNeededLabel$,
+      };
+    },
+    props: {
+      entries: {
+        type: Array,
+        default: () => [],
+      },
+      isMissingResource: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      questionLink(questionId) {
+        return this.classRoute(
+          this.group
+            ? PageNames.REPORTS_GROUP_REPORT_QUIZ_QUESTION_PAGE_ROOT
+            : PageNames.REPORTS_QUIZ_QUESTION_PAGE_ROOT,
+          {
+            questionId,
+            quizId: this.$route.params.quizId,
+          },
+        );
+      },
+    },
+  };
+
+</script>

From a5356189cdc032ce42dfaa0266002c68a3aef842 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 27 Sep 2024 10:33:53 -0500
Subject: [PATCH 3/8] add export csv

---
 .../src/views/plan/QuizSummaryPage/index.vue  | 17 +----------
 .../ReportsDifficultQuestionsTable.vue        | 29 +++++++++++++++++++
 .../views/reports/ReportsLearnersTable.vue    | 24 +++++++++++++++
 3 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index ef305ea8ac4..9122a9f1f16 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -103,8 +103,6 @@
   import ReportsControls from '../../reports/ReportsControls';
   import ReportsLearnersTable from '../../reports/ReportsLearnersTable';
   import ReportsDifficultQuestionsTable from '../../reports/ReportsDifficultQuestionsTable';
-  import * as csvFields from '../../../csv/fields';
-  import CSVExporter from '../../../csv/exporter';
   import QuizOptionsDropdownMenu from './QuizOptionsDropdownMenu';
   import ManageExamModals from './ManageExamModals';
   import {
@@ -354,20 +352,7 @@
         });
       },
       exportCSV() {
-        const columns = [
-          ...csvFields.name(),
-          ...csvFields.learnerProgress('statusObj.status'),
-          ...csvFields.score(),
-          ...csvFields.quizQuestionsAnswered(this.exam),
-          ...csvFields.list('groups', 'groupsLabel'),
-        ];
-
-        const exporter = new CSVExporter(columns, this.className);
-        exporter.addNames({
-          resource: this.exam.title,
-        });
-
-        exporter.export(this.table);
+        this.$refs.table.exportCSV?.();
       },
     },
     $trs: {
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
index 9b1d3bdbc90..d32dc295ca9 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -46,6 +46,8 @@
   import commonCoach from '../common';
   import LearnerProgressRatio from '../common/status/LearnerProgressRatio';
   import { coachStrings } from '../common/commonCoachStrings';
+  import * as csvFields from '../../csv/fields';
+  import CSVExporter from '../../csv/exporter';
   import { PageNames } from './../../constants';
 
   export default {
@@ -73,6 +75,14 @@
         default: false,
       },
     },
+    computed: {
+      exam() {
+        return this.examMap[this.$route.params.quizId];
+      },
+      group() {
+        return this.$route.params.groupId && this.groupMap[this.$route.params.groupId];
+      },
+    },
     methods: {
       questionLink(questionId) {
         return this.classRoute(
@@ -85,6 +95,25 @@
           },
         );
       },
+      /**
+       * @public
+       */
+      exportCSV() {
+        const columns = [...csvFields.questionTitle(), ...csvFields.helpNeeded()];
+
+        const exporter = new CSVExporter(columns, this.className);
+        const names = {
+          resource: this.exam.title,
+          difficultQuestions: this.coachString('difficultQuestionsLabel'),
+        };
+
+        if (this.group) {
+          names.group = this.group.name;
+        }
+        exporter.addNames(names);
+
+        exporter.export(this.entries);
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue
index 0e0fd9be25a..355fe4f1121 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue
@@ -103,6 +103,8 @@
   import isUndefined from 'lodash/isUndefined';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
+  import * as csvFields from '../../csv/fields';
+  import CSVExporter from '../../csv/exporter';
 
   export default {
     name: 'ReportsLearnersTable',
@@ -142,6 +144,9 @@
       anyTries() {
         return this.entries.some(entry => !isUndefined(entry.statusObj.tries));
       },
+      exam() {
+        return this.examMap[this.$route.params.quizId];
+      },
     },
     methods: {
       completedQuestionsCountLabel(answered, total) {
@@ -181,6 +186,25 @@
       showQuizStatus(entry) {
         return this.questionCount && !isUndefined(entry.statusObj.num_answered);
       },
+      /**
+       * @public
+       */
+      exportCSV() {
+        const columns = [
+          ...csvFields.name(),
+          ...csvFields.learnerProgress('statusObj.status'),
+          ...csvFields.score(),
+          ...csvFields.quizQuestionsAnswered(this.exam),
+          ...csvFields.list('groups', 'groupsLabel'),
+        ];
+
+        const exporter = new CSVExporter(columns, this.className);
+        exporter.addNames({
+          resource: this.exam.title,
+        });
+
+        exporter.export(this.entries);
+      },
     },
     $trs: {
       allQuestionsAnswered: {

From 35f1795f254ce11c1b1cd4f8a10818cd6a0a4544 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 11:13:25 -0500
Subject: [PATCH 4/8] Add info to quizStatus

---
 .../assets/src/views/common/QuizStatus.vue    | 72 +++++++++++++------
 .../src/views/plan/QuizSummaryPage/index.vue  |  1 -
 .../ReportsDifficultQuestionsTable.vue        |  6 +-
 3 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
index 39043b50884..9c3ec7475b8 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
@@ -104,18 +104,15 @@
         </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 }"
@@ -123,12 +120,15 @@
           :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"
@@ -136,23 +136,22 @@
           :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"
@@ -160,18 +159,16 @@
           :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 +212,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="{ span: 12 }"
+        >
+          {{ coreString('dateCreated') }}
+        </KGridItem>
+        <KGridItem
+          :layout4="{ span: 4 }"
+          :layout8="{ span: 4 }"
+          :layout12="{ span: 12 }"
+        >
+          <ElapsedTime
+            :date="examDateCreated"
+            style="margin-top: 8px"
+          />
         </KGridItem>
       </div>
     </KGrid>
@@ -347,6 +366,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);
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 9122a9f1f16..3078b353cd3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -62,7 +62,6 @@
               <ReportsDifficultQuestionsTable
                 ref="table"
                 :entries="difficultQuestionsTable"
-                :isMissingResource="exam.missing_resource"
               />
             </template>
           </KTabsPanel>
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
index d32dc295ca9..214608b8d55 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -17,7 +17,7 @@
           <td>
             <span v-if="$isPrint">{{ tableRow.title }}</span>
             <KRouterLink
-              v-if="!isMissingResource"
+              v-if="!exam.missing_resource"
               :text="tableRow.title"
               :to="questionLink(tableRow.item)"
               icon="question"
@@ -70,10 +70,6 @@
         type: Array,
         default: () => [],
       },
-      isMissingResource: {
-        type: Boolean,
-        default: false,
-      },
     },
     computed: {
       exam() {

From 6ebe48a5363de1d2730460f2c5e91cd16cb5ec37 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 14:53:29 -0500
Subject: [PATCH 5/8] Add made visible label

---
 .../assets/src/views/common/QuizStatus.vue    | 17 +++++++----
 .../src/views/common/StatusElapsedTime.vue    | 28 +++++++++++++++++++
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
index 9c3ec7475b8..23d88a3786a 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
+++ b/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"
diff --git a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue b/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
index 1cedce05165..623b4ef6aee 100644
--- a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
@@ -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.',
+      },
     },
   };
 

From b117f6aa1233bd814b1eee76880ebf3c3355413a Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 15:18:57 -0500
Subject: [PATCH 6/8] Update preview button and quiz summary options

---
 .../assets/src/views/common/QuizLessonDetailsHeader.vue     | 1 +
 .../coach/assets/src/views/common/StatusElapsedTime.vue     | 2 +-
 .../views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue  | 6 +++---
 .../coach/assets/src/views/plan/QuizSummaryPage/index.vue   | 4 ++++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue b/kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue
index 539bbb0eb5d..bc13a4a914d 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue
+++ b/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"
diff --git a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue b/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
index 623b4ef6aee..10604b587f8 100644
--- a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
+++ b/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',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue
index 922bca565d5..81f7cbe1ead 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue
@@ -1,9 +1,9 @@
 <template>
 
-  <KButton
+  <KIconButton
     hasDropdown
+    icon="optionsHorizontal"
     appearance="flat-button"
-    :text="coreString('optionsLabel')"
   >
     <template #menu>
       <KDropdownMenu
@@ -11,7 +11,7 @@
         @select="$emit('select', $event.value)"
       />
     </template>
-  </KButton>
+  </KIconButton>
 
 </template>
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 3078b353cd3..83bd1b70c03 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -12,6 +12,10 @@
           examOrLesson="exam"
         >
           <template #dropdown>
+            <KButton
+              :text="coachString('previewAction')"
+              style="margin-right: 8px"
+            />
             <QuizOptionsDropdownMenu
               optionsFor="plan"
               :draft="exam && exam.draft"

From a51769c8a802a8fbab3a450b3ebe9e6f6aacdc04 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 15:43:40 -0500
Subject: [PATCH 7/8] Update learners label

---
 .../coach/assets/src/views/plan/QuizSummaryPage/index.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 83bd1b70c03..36e0ea02ad0 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -196,7 +196,7 @@
         const tabsList = [
           {
             id: QuizzesTabs.REPORT,
-            label: this.coachString('reportLabel'),
+            label: this.coachString('learnersLabel'),
           },
         ];
 
@@ -209,7 +209,7 @@
         }
 
         tabsList.forEach(tab => {
-          tab.to = this.classRoute('QuizSummaryPage', { quizId: this.quizId, tabId: tab.id });
+          tab.to = this.classRoute('QuizSummaryPage', { tabId: tab.id });
         });
 
         return tabsList;

From d915ea27c67992f6a9c290f618bffaa004f33e52 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 16:30:30 -0500
Subject: [PATCH 8/8] Fix print state

---
 .../coach/assets/src/views/common/QuizStatus.vue    |  4 ++--
 .../assets/src/views/plan/QuizSummaryPage/index.vue |  6 +++---
 .../assets/src/views/reports/ReportsControls.vue    | 13 +++++++------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
index 23d88a3786a..bf72f58af44 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
@@ -229,14 +229,14 @@
           class="status-label"
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="layout12Label"
         >
           {{ coreString('dateCreated') }}
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="layout12Value"
         >
           <ElapsedTime
             :date="examDateCreated"
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 36e0ea02ad0..f523d75f4c8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -24,7 +24,7 @@
           </template>
         </QuizLessonDetailsHeader>
       </KGridItem>
-      <KGridItem :layout12="{ span: 4 }">
+      <KGridItem :layout12="{ span: $isPrint ? 12 : 4 }">
         <h2 class="visuallyhidden">
           {{ coachString('generalInformationLabel') }}
         </h2>
@@ -35,10 +35,10 @@
           :exam="exam"
         />
       </KGridItem>
-      <KGridItem :layout12="{ span: 8 }">
+      <KGridItem :layout12="{ span: $isPrint ? 12 : 8 }">
         <KPageContainer
           v-if="!loading"
-          :topMargin="16"
+          :topMargin="$isPrint ? 0 : 16"
         >
           <ReportsControls @export="exportCSV" />
           <HeaderTabs :enablePrint="true">
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
index 15a689ae307..9bfd039a0b5 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
@@ -74,12 +74,13 @@
         return this.isAppContext || this.disableExport;
       },
       isMainReport() {
-        return (
-          this.$route.name === 'ReportsQuizListPage' ||
-          this.$route.name === 'ReportsGroupListPage' ||
-          this.$route.name === 'ReportsLearnerListPage' ||
-          this.$route.name === 'ReportsLessonListPage'
-        );
+        return [
+          'ReportsQuizListPage',
+          'ReportsGroupListPage',
+          'ReportsLearnerListPage',
+          'ReportsLessonListPage',
+          'QuizSummaryPage',
+        ].includes(this.$route.name);
       },
       classLearnersListRoute() {
         const { query } = this.$route;