Merge 77db2a9 into 8dd73f1

uzh-bf · Nov 5, 2024 · 6a03964 · 6a03964
2 parents 8dd73f1 + 77db2a9
commit 6a03964
Show file tree

Hide file tree

Showing 19 changed files with 193 additions and 107 deletions.
diff --git a/apps/frontend-manage/src/components/courses/groupActivity/GroupActivityGradingStack.tsx b/apps/frontend-manage/src/components/courses/groupActivity/GroupActivityGradingStack.tsx
@@ -10,7 +10,7 @@ import {
   GroupActivityInstance,
 } from '@klicker-uzh/graphql/dist/ops'
 import StudentElement, {
-  StudentResponseType,
+  StackStudentResponseType,
 } from '@klicker-uzh/shared-components/src/StudentElement'
 import {
   Button,
@@ -227,7 +227,7 @@ function GroupActivityGradingStack({
                     (findResponse(
                       element.id,
                       element.elementType
-                    ) as StudentResponseType) ?? []
+                    ) as StackStudentResponseType) ?? []
                   }
                   setStudentResponse={() => null}
                   hideReadButton

diff --git a/apps/frontend-manage/src/components/questions/manipulation/StudentElementPreview.tsx b/apps/frontend-manage/src/components/questions/manipulation/StudentElementPreview.tsx
@@ -6,7 +6,7 @@ import {
 } from '@klicker-uzh/graphql/dist/ops'
 import { Markdown } from '@klicker-uzh/markdown'
 import StudentElement, {
-  StudentResponseType,
+  StackStudentResponseType,
 } from '@klicker-uzh/shared-components/src/StudentElement'
 import { H3 } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
@@ -23,9 +23,8 @@ function StudentElementPreview({
   elementDataTypename,
 }: StudentElementPreviewProps): React.ReactElement {
   const t = useTranslations()
-  const [studentResponse, setStudentResponse] = useState<StudentResponseType>(
-    {}
-  )
+  const [studentResponse, setStudentResponse] =
+    useState<StackStudentResponseType>({})
 
   return (
     <div className="max-w-sm flex-1">

diff --git a/apps/frontend-manage/src/lib/hooks/useFakedInstance.ts b/apps/frontend-manage/src/lib/hooks/useFakedInstance.ts
diff --git a/apps/frontend-manage/src/pages/questions/[id].tsx b/apps/frontend-manage/src/pages/questions/[id].tsx
@@ -1,28 +1,50 @@
 import { useQuery } from '@apollo/client'
-import { GetSingleQuestionDocument } from '@klicker-uzh/graphql/dist/ops'
-import StudentQuestion from '@klicker-uzh/shared-components/src/StudentQuestion'
+import {
+  ElementType,
+  GetArtificialInstanceDocument,
+} from '@klicker-uzh/graphql/dist/ops'
+import useSingleStudentResponse from '@klicker-uzh/shared-components/src/hooks/useSingleStudentResponse'
+import Loader from '@klicker-uzh/shared-components/src/Loader'
+import StudentElement, {
+  InstanceStackStudentResponseType,
+} from '@klicker-uzh/shared-components/src/StudentElement'
 import { UserNotification } from '@uzh-bf/design-system'
 import { GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl'
 import { useRouter } from 'next/router'
-import useFakedInstance from '../../lib/hooks/useFakedInstance'
+import { useState } from 'react'
 
 function QuestionDetails() {
   const t = useTranslations()
   const router = useRouter()
 
-  const { data } = useQuery(GetSingleQuestionDocument, {
+  const { data, loading } = useQuery(GetArtificialInstanceDocument, {
     variables: {
-      id: Number(router.query.id),
+      elementId: Number(router.query.id),
     },
     skip: !router.query.id,
   })
+  const instance = data?.artificialInstance
 
-  const fakedInstance = useFakedInstance({
-    element: data?.question,
+  // initialize student response with default state (FT question) - is overwritten on instance change
+  const [studentResponse, setStudentResponse] =
+    useState<InstanceStackStudentResponseType>({
+      type: ElementType.FreeText,
+      response: undefined,
+      valid: false,
+    })
+
+  // hook running on every instance change to initialize the student response correctly
+  useSingleStudentResponse({
+    instance,
+    setStudentResponse,
   })
 
-  if (!fakedInstance) {
+  if (loading) {
+    return <Loader />
+  }
+
+  if (!instance) {
     return (
       <UserNotification className={{ root: 'm-auto w-max' }} type="error">
         {t('shared.generic.systemError')}
@@ -33,18 +55,13 @@ function QuestionDetails() {
   return (
     <div className="flex h-full w-full items-center justify-center p-8">
       <div className="w-[64rem] max-w-full">
-        <StudentQuestion
-          isSubmitHidden
-          activeIndex={0}
-          numItems={1}
-          isSubmitDisabled
-          onSubmit={() => null}
-          onExpire={() => null}
-          currentQuestion={fakedInstance}
-          setInputState={() => null}
-          inputValue={''}
-          inputValid={false}
-          inputEmpty={false}
+        <StudentElement
+          element={instance}
+          elementIx={0}
+          singleStudentResponse={studentResponse}
+          setSingleStudentResponse={setStudentResponse}
+          hideReadButton={false}
+          disabledInput={false}
         />
       </div>
     </div>

diff --git a/apps/frontend-pwa/src/components/groupActivity/GroupActivityStack.tsx b/apps/frontend-pwa/src/components/groupActivity/GroupActivityStack.tsx
@@ -9,7 +9,7 @@ import {
   SubmitGroupActivityDecisionsDocument,
 } from '@klicker-uzh/graphql/dist/ops'
 import StudentElement, {
-  StudentResponseType,
+  StackStudentResponseType,
 } from '@klicker-uzh/shared-components/src/StudentElement'
 import DynamicMarkdown from '@klicker-uzh/shared-components/src/evaluation/DynamicMarkdown'
 import useStudentResponse from '@klicker-uzh/shared-components/src/hooks/useStudentResponse'
@@ -58,9 +58,8 @@ function GroupActivityStack({
     withParticipant: true,
   })
 
-  const [studentResponse, setStudentResponse] = useState<StudentResponseType>(
-    {}
-  )
+  const [studentResponse, setStudentResponse] =
+    useState<StackStudentResponseType>({})
 
   useStudentResponse({
     stack,
@@ -70,7 +69,7 @@ function GroupActivityStack({
   })
 
   useEffect(() => {
-    const loadedResponses = decisions?.reduce<StudentResponseType>(
+    const loadedResponses = decisions?.reduce<StackStudentResponseType>(
       (acc, decision) => {
         if (!decision) return acc
 

diff --git a/apps/frontend-pwa/src/components/hooks/useStackEvaluationAggregation.ts b/apps/frontend-pwa/src/components/hooks/useStackEvaluationAggregation.ts
@@ -1,5 +1,5 @@
 import { ElementType, MicroLearning } from '@klicker-uzh/graphql/dist/ops'
-import { StudentResponseType } from '@klicker-uzh/shared-components/src/StudentElement'
+import { StackStudentResponseType } from '@klicker-uzh/shared-components/src/StudentElement'
 import { useMemo } from 'react'
 
 interface UseStackEvaluationAggregationProps {
@@ -28,7 +28,7 @@ function useStackEvaluationAggregation({
         const rawStackStorage = localStorage.getItem(
           `qi-${microlearning.id}-${stack.id}`
         )
-        const stackStorage: StudentResponseType = rawStackStorage
+        const stackStorage: StackStudentResponseType = rawStackStorage
           ? JSON.parse(rawStackStorage)
           : null
 

diff --git a/apps/frontend-pwa/src/components/liveSession/QuestionArea.tsx b/apps/frontend-pwa/src/components/liveSession/QuestionArea.tsx
@@ -1,6 +1,6 @@
 import { ElementInstance, ElementType } from '@klicker-uzh/graphql/dist/ops'
 import StudentElement, {
-  SingleStudentResponseType,
+  InstanceStackStudentResponseType,
 } from '@klicker-uzh/shared-components/src/StudentElement'
 import useSingleStudentResponse from '@klicker-uzh/shared-components/src/hooks/useSingleStudentResponse'
 import SessionProgress from '@klicker-uzh/shared-components/src/questions/SessionProgress'
@@ -43,7 +43,7 @@ function QuestionArea({
 
   // initialize student response with default state (FT question) - is overwritten on instance change
   const [studentResponse, setStudentResponse] =
-    useState<SingleStudentResponseType>({
+    useState<InstanceStackStudentResponseType>({
       type: ElementType.FreeText,
       response: undefined,
       valid: false,
@@ -112,7 +112,7 @@ function QuestionArea({
   }: {
     instanceId: number
     type: ElementType
-    input: SingleStudentResponseType
+    input: InstanceStackStudentResponseType
   }): void => {
     if (!input.valid) {
       return

diff --git a/apps/frontend-pwa/src/components/practiceQuiz/ElementStack.tsx b/apps/frontend-pwa/src/components/practiceQuiz/ElementStack.tsx
@@ -9,7 +9,7 @@ import {
   StackFeedbackStatus,
 } from '@klicker-uzh/graphql/dist/ops'
 import StudentElement, {
-  StudentResponseType,
+  StackStudentResponseType,
 } from '@klicker-uzh/shared-components/src/StudentElement'
 import DynamicMarkdown from '@klicker-uzh/shared-components/src/evaluation/DynamicMarkdown'
 import useStudentResponse from '@klicker-uzh/shared-components/src/hooks/useStudentResponse'
@@ -73,14 +73,14 @@ function ElementStack({
     withParticipant: withParticipant,
   })
 
-  const [stackStorage, setStackStorage] = useLocalStorage<StudentResponseType>(
-    `qi-${parentId}-${stack.id}`,
-    undefined
-  )
+  const [stackStorage, setStackStorage] =
+    useLocalStorage<StackStudentResponseType>(
+      `qi-${parentId}-${stack.id}`,
+      undefined
+    )
 
-  const [studentResponse, setStudentResponse] = useState<StudentResponseType>(
-    {}
-  )
+  const [studentResponse, setStudentResponse] =
+    useState<StackStudentResponseType>({})
 
   const showMarkAsRead = useMemo(() => {
     if (
@@ -128,7 +128,7 @@ function ElementStack({
       const evaluations = evaluationData.getPreviousStackEvaluation.evaluations
 
       setStackStorage(
-        evaluations.reduce<StudentResponseType>((acc, evaluation) => {
+        evaluations.reduce<StackStudentResponseType>((acc, evaluation) => {
           const foundElement = stack.elements?.find(
             (element) => element.id === evaluation.instanceId
           )
@@ -343,7 +343,7 @@ function ElementStack({
           onClick={() => {
             // update the read status of all content elements in studentResponse to true
             setStudentResponse((currentResponses) =>
-              Object.entries(currentResponses).reduce<StudentResponseType>(
+              Object.entries(currentResponses).reduce<StackStudentResponseType>(
                 (acc, [instanceId, value]) => {
                   if (value.type === ElementType.Content) {
                     return {
@@ -453,7 +453,7 @@ function ElementStack({
             }
 
             setStackStorage(
-              Object.entries(studentResponse).reduce<StudentResponseType>(
+              Object.entries(studentResponse).reduce<StackStudentResponseType>(
                 (acc, [key, value]) => {
                   return {
                     ...acc,

diff --git a/packages/graphql/src/graphql/ops/QGetArtificialInstance.graphql b/packages/graphql/src/graphql/ops/QGetArtificialInstance.graphql
@@ -0,0 +1,8 @@
+query GetArtificialInstance($elementId: Int!) {
+  artificialInstance(elementId: $elementId) {
+    id
+    type
+    elementType
+    ...ElementData
+  }
+}
diff --git a/packages/graphql/src/ops.schema.json b/packages/graphql/src/ops.schema.json
@@ -20317,6 +20317,35 @@
         "description": null,
         "isOneOf": null,
         "fields": [
+          {
+            "name": "artificialInstance",
+            "description": null,
+            "args": [
+              {
+                "name": "elementId",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "Int",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "OBJECT",
+              "name": "ElementInstance",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "basicCourseInformation",
             "description": null,