From 4adb5ca089c0c907f983519b9e3487007712e7fb Mon Sep 17 00:00:00 2001
From: sjschlapbach <julius.schlapbach@gmx.net>
Date: Mon, 23 Dec 2024 17:30:54 +0100
Subject: [PATCH] wip: add explanation for data table on participant activity
 performance

---
 .../StudentActivityPerformance.tsx            | 83 ++++++++++---------
 packages/i18n/messages/de.ts                  |  2 +
 packages/i18n/messages/en.ts                  |  2 +
 3 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/apps/frontend-manage/src/components/analytics/performance/StudentActivityPerformance.tsx b/apps/frontend-manage/src/components/analytics/performance/StudentActivityPerformance.tsx
index d04ce43358..3ad798556f 100644
--- a/apps/frontend-manage/src/components/analytics/performance/StudentActivityPerformance.tsx
+++ b/apps/frontend-manage/src/components/analytics/performance/StudentActivityPerformance.tsx
@@ -93,7 +93,6 @@ function StudentActivityPerformance({
     return <Loader />
   }
 
-  // TODO: add explanation what we can see in the plot (total score and completion percentage)
   // TODO: fix issue where column names in csv export correspond to access keys and, if possible, also include completion percentage therein
   return (
     <div className="border-uzh-grey-80 rounded-xl border border-solid p-3">
@@ -153,44 +152,52 @@ function StudentActivityPerformance({
         </div>
       </div>
       {performances.length > 0 && selectedActivities.length > 0 ? (
-        <DataTable
-          isPaginated
-          isResetSortingEnabled
-          columns={[
-            {
-              accessorKey: 'participantUsername',
-              header: t('manage.analytics.studentUsername'),
-            },
-            {
-              accessorKey: 'participantEmail',
-              header: t('manage.analytics.studentEmail'),
-            },
-            ...selectedActivities.map((activityId) => {
-              const activityName = activityNameMap[activityId]
+        <>
+          <UserNotification className={{ root: 'mb-2 mt-6' }}>
+            {t('manage.analytics.participantActivityPerformanceDescription')}
+          </UserNotification>
+          <DataTable
+            isPaginated
+            isResetSortingEnabled
+            columns={[
+              {
+                accessorKey: 'participantUsername',
+                header: t('manage.analytics.studentUsername'),
+              },
+              {
+                accessorKey: 'participantEmail',
+                header: t('manage.analytics.studentEmail'),
+              },
+              ...selectedActivities.map((activityId) => {
+                const activityName = activityNameMap[activityId]
 
-              return {
-                accessorKey: `${activityId}-totalScore`,
-                header: ({ column }: any) => {
-                  return (
-                    <TableSortingButton column={column} title={activityName} />
-                  )
-                },
-                cell: ({ row }: any) => {
-                  const rowData = row.original
-                  return `${rowData[`${activityId}-totalScore`]} ${t('shared.generic.points')} (${rowData[`${activityId}-completion`]} %)`
-                },
-                className: 'min-w-40',
-              }
-            }),
-          ]}
-          data={tableData ?? []}
-          csvFilename={`${course?.name.replace(' ', '-')}_participant_activity`}
-          className={{
-            table: 'overflow-x-auto',
-            tableHeader: 'h-7 p-2',
-            tableCell: 'h-7 p-2',
-          }}
-        />
+                return {
+                  accessorKey: `${activityId}-totalScore`,
+                  header: ({ column }: any) => {
+                    return (
+                      <TableSortingButton
+                        column={column}
+                        title={activityName}
+                      />
+                    )
+                  },
+                  cell: ({ row }: any) => {
+                    const rowData = row.original
+                    return `${rowData[`${activityId}-totalScore`]} ${t('shared.generic.points')} (${rowData[`${activityId}-completion`]} %)`
+                  },
+                  className: 'min-w-40',
+                }
+              }),
+            ]}
+            data={tableData ?? []}
+            csvFilename={`${course?.name.replace(' ', '-')}_participant_activity`}
+            className={{
+              table: 'overflow-x-auto',
+              tableHeader: 'h-7 p-2',
+              tableCell: 'h-7 p-2',
+            }}
+          />
+        </>
       ) : selectedActivities.length === 0 ? (
         <UserNotification
           type="info"
diff --git a/packages/i18n/messages/de.ts b/packages/i18n/messages/de.ts
index 0452988376..ba7140b835 100644
--- a/packages/i18n/messages/de.ts
+++ b/packages/i18n/messages/de.ts
@@ -1947,6 +1947,8 @@ Da die KlickerUZH-App noch nicht im iOS-App-Store verfügbar ist, folgen Sie die
       deselectAllActivities: 'Alle Aktivitäten abwählen',
       noActivitySelected:
         'Bitte wählen Sie mindestens eine Aktivität aus, um die gesammelten Punkte und den Fortschritt der Studierenden anzuzeigen.',
+      participantActivityPerformanceDescription:
+        'Diese Tabelle stellt den Fortschritt und die gesammelten Punkte der Studierenden in den ausgewählten Aktivitäten dar. Es werden alle berechneten Punkte (inkl. Repetitionen bei Übungs-Quizzes) dargestellt. Diese Zahl kann aufgrund der Bepunktungslogik bei Repetitionen von der Anzahl gesammelter Punkte auf dem Kurs-Leaderboard abweichen. Der prozentuale Fortschritt entspricht der Anzahl Elemente in der Aktivität, welche mindestens einmal beantwortet wurden.',
     },
   },
   control: {
diff --git a/packages/i18n/messages/en.ts b/packages/i18n/messages/en.ts
index 9edc57eaac..6d7e26fba6 100644
--- a/packages/i18n/messages/en.ts
+++ b/packages/i18n/messages/en.ts
@@ -1932,6 +1932,8 @@ Since the KlickerUZH app is not yet available on the iOS App Store, follow these
       deselectAllActivities: 'Deselect all activities',
       noActivitySelected:
         'Please select at least one activity to display the collected points and the progress of the students.',
+      participantActivityPerformanceDescription:
+        'This table illustrates the progress and collected points of the participants in the selected activities. It displays all calculated points (including repetitions of practice quizzes). This number may differ from the number of collected points on the course leaderboard due to the scoring logic for repetitions. The percentage progress corresponds to the number of elements in the activity that have been answered at least once.',
     },
   },
   control: {