From 60ad2df67d386ca322cc7fb647247db1c84545d6 Mon Sep 17 00:00:00 2001
From: JubaAzul <118773284+JubaAzul@users.noreply.github.com>
Date: Tue, 4 Mar 2025 16:49:12 -0500
Subject: [PATCH] =?UTF-8?q?R=C3=A9ponse=20=C3=A0=20une=20question=20non=20?=
 =?UTF-8?q?enregistr=C3=A9e=20lorsque=20=C3=89tudiant=20reviens=20en=20arr?=
 =?UTF-8?q?i=C3=A8re=20dans=20le=20quiz=20Fixes=20#200?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MultipleChoiceQuestionDisplay.tsx         | 17 ++++++-----
 .../QuestionsDisplay/QuestionDisplay.tsx      |  4 +++
 .../TrueFalseQuestionDisplay.tsx              | 28 +++++++++++++------
 .../StudentModeQuiz/StudentModeQuiz.tsx       |  3 +-
 .../TeacherModeQuiz/TeacherModeQuiz.tsx       | 11 ++++++--
 5 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
index e5e7b6b..790848f 100644
--- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
@@ -1,5 +1,5 @@
 // MultipleChoiceQuestionDisplay.tsx
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import '../questionStyle.css';
 import { Button } from '@mui/material';
 import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
@@ -7,22 +7,21 @@ import { MultipleChoiceQuestion } from 'gift-pegjs';
 
 interface Props {
     question: MultipleChoiceQuestion;
-    handleOnSubmitAnswer?: (answer: string) => void;
+    handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
     showAnswer?: boolean;
+    passedAnswer?: string | number | boolean;
 }
 
 const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } = props;
-    const [answer, setAnswer] = useState<string>();
+    const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
+    const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || '');
     
-    useEffect(() => {
-        setAnswer(undefined);
-    }, [question]);
 
     const handleOnClickAnswer = (choice: string) => {
         setAnswer(choice);
     };
 
+
     const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
     const alphabet = alpha.map((x) => String.fromCharCode(x));
     return (
@@ -67,9 +66,9 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                 <Button
                     variant="contained"
                     onClick={() =>
-                        answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
+                        answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
                     }
-                    disabled={answer === undefined}
+                    disabled={answer === ''}
                 >
                     Répondre
                     
diff --git a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
index 8dfa1b3..4ec3312 100644
--- a/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/QuestionDisplay.tsx
@@ -11,11 +11,13 @@ interface QuestionProps {
     question: Question;
     handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
     showAnswer?: boolean;
+    answer?: string | number | boolean;
 }
 const QuestionDisplay: React.FC<QuestionProps> = ({
     question,
     handleOnSubmitAnswer,
     showAnswer,
+    answer,
 }) => {
     // const isMobile = useCheckMobileScreen();
     // const imgWidth = useMemo(() => {
@@ -30,6 +32,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    passedAnswer={answer}
                 />
             );
             break;
@@ -39,6 +42,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    passedAnswer={answer}
                 />
             );
             break;
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
index 63b3891..3adc3b8 100644
--- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@@ -1,25 +1,35 @@
 // TrueFalseQuestion.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import '../questionStyle.css';
 import { Button } from '@mui/material';
 import { TrueFalseQuestion } from 'gift-pegjs';
 import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
+import { Answer } from 'src/Types/StudentType';
 
 interface Props {
     question: TrueFalseQuestion;
-    handleOnSubmitAnswer?: (answer: boolean) => void;
+    handleOnSubmitAnswer?: (answer: Answer) => void;
     showAnswer?: boolean;
+    passedAnswer?: string | number | boolean;
 }
 
 const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } =
+    const { question, showAnswer, handleOnSubmitAnswer, passedAnswer} =
         props;
-    const [answer, setAnswer] = useState<boolean | undefined>(undefined);
+    console.log("Passedanswer", passedAnswer);
 
-    useEffect(() => {
-        setAnswer(undefined);
-    }, [question]);
+    const [answer, setAnswer] = useState<boolean | undefined>(() => {
+        if (typeof passedAnswer === 'boolean') {
+            return passedAnswer;
+        }
+        return undefined;
+    }); 
 
+    const handleOnClickAnswer = (choice: boolean) => {
+        setAnswer(choice);
+    };
+
+    console.log("Answer", answer);
     const selectedTrue = answer ? 'selected' : '';
     const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
     return (
@@ -30,7 +40,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
             <div className="choices-wrapper mb-1">
                 <Button
                     className="button-wrapper"
-                    onClick={() => !showAnswer && setAnswer(true)}
+                    onClick={() => !showAnswer && handleOnClickAnswer(true)}
                     fullWidth
                 >
                     {showAnswer? (<div> {(question.isTrue ? '✅' : '❌')}</div>):``}                    
@@ -39,7 +49,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                 </Button>
                 <Button
                     className="button-wrapper"
-                    onClick={() => !showAnswer && setAnswer(false)}
+                    onClick={() => !showAnswer && handleOnClickAnswer(false)}
                     fullWidth
                 >
                     {showAnswer? (<div> {(!question.isTrue ? '✅' : '❌')}</div>):``}                    
diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
index 137c872..4af330e 100644
--- a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
+++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
@@ -32,8 +32,6 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
         
     };
 
-
-
     useEffect(() => {        
         const answer = localStorage.getItem(`Answer${questionInfos.question.id}`);
         if (answer !== null) {
@@ -81,6 +79,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
                     showAnswer={isAnswerSubmitted}
+                    answer={localStorage.getItem(`Answer${questionInfos.question.id}`) || undefined}
                     />
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '1rem' }}>
                 <div>
diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
index c28e708..9ee0537 100644
--- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
+++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
@@ -21,6 +21,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
     const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
     const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] = useState(false);
     const [feedbackMessage, setFeedbackMessage] = useState<React.ReactNode>('');
+    const [answer, setAnswer] = useState<string | number | boolean>('');
 
     const renderFeedbackMessage = (answer: string) => {
 
@@ -36,17 +37,18 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
             </span>
         );}
     };
+
     useEffect(() => {
         // Close the feedback dialog when the question changes
         handleFeedbackDialogClose();
         setIsAnswerSubmitted(false);
-        const answer = localStorage.getItem(`Answer${questionInfos.question.id}`);
-        if (answer !== null) {
+        setAnswer(JSON.parse(localStorage.getItem(`Answer${questionInfos.question.id}`)||'null'));
+        if (answer) {
             setIsAnswerSubmitted(true);
             setIsFeedbackDialogOpen(true);
         }
 
-    }, [questionInfos.question]);
+    }, [questionInfos.question , answer]);
 
     const handleOnSubmitAnswer = (answer: string | number | boolean) => {
         const idQuestion = Number(questionInfos.question.id) || -1;
@@ -85,6 +87,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                 <QuestionComponent
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
+                    answer={answer} 
                 />
             )}
 
@@ -109,6 +112,8 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
                     showAnswer={true}
+                    answer={answer} 
+
                     />
                 </DialogContent>
                 <DialogActions>