wip: add explanation for data table on participant activity performance

uzh-bf · Dec 23, 2024 · 4adb5ca · 4adb5ca
1 parent dbd0243
commit 4adb5ca
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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: {