enhance: automatically switch to correct view on evaluation based on …

…query parameters

apps/frontend-manage/src/components/evaluation/ActivityEvaluation.tsx

@@ -7,6 +7,7 @@ import { ChartType } from '@klicker-uzh/shared-components/src/constants'
 import Leaderboard, {
   LeaderboardCombinedEntry,
 } from '@klicker-uzh/shared-components/src/Leaderboard'
+import useEvaluationInitialization from '@lib/hooks/useEvaluationInitialization'
 import { UserNotification } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import Head from 'next/head'
@@ -53,10 +54,19 @@ function ActivityEvaluation({
   const [chartType, setChartType] = useState<ChartType>(ChartType.UNSET)
   const [textSize, setTextSize] = useReducer(sizeReducer, TextSizes['md'])
 
-  // TODO: add use Effect hook logic that directly jumps to a certain instance / leaderboard / ... for PPT integration
-
   const instanceResults = stacks.flatMap((stack) => stack.instances)
 
+  // automatically switch to correct instance and use correct settings depending on URL params
+  useEvaluationInitialization({
+    setActiveInstance,
+    setActiveStack,
+    setShowSolution,
+    questionIx: router.query.questionIx as string | null,
+    showLeaderboard: router.query.leaderboard === 'true',
+    showSolution: router.query.showSolution === 'true',
+    type,
+  })
+
   // compute a map between stack and instance indices {stackIx: [instanceIx1, instanceIx2], ...}
   const stackInstanceMap = useStackInstanceMap({ stacks })
 

apps/frontend-manage/src/lib/hooks/useEvaluationInitialization.ts

@@ -0,0 +1,39 @@
+import { Dispatch, SetStateAction, useEffect } from 'react'
+import { ActivityEvaluationType } from '../../components/evaluation/ActivityEvaluation'
+
+function useEvaluationInitialization({
+  setActiveInstance,
+  setActiveStack,
+  setShowSolution,
+  questionIx,
+  showLeaderboard,
+  showSolution,
+  type,
+}: {
+  setActiveInstance: Dispatch<SetStateAction<number>>
+  setActiveStack: Dispatch<
+    SetStateAction<number | 'feedbacks' | 'confusion' | 'leaderboard'>
+  >
+  setShowSolution: Dispatch<SetStateAction<boolean>>
+  questionIx?: string | null
+  showLeaderboard?: boolean
+  showSolution?: boolean
+  type: ActivityEvaluationType
+}) {
+  useEffect(() => {
+    if (type === 'LiveQuiz') {
+      if (typeof questionIx === 'string' && questionIx !== null) {
+        setActiveInstance(parseInt(questionIx))
+      } else if (showLeaderboard) {
+        setActiveStack('leaderboard')
+      }
+      if (showSolution) {
+        setShowSolution(true)
+      }
+    }
+  }, [type, questionIx, showLeaderboard, showSolution])
+
+  return null
+}
+
+export default useEvaluationInitialization