Réponse à une question non enregistrée lorsque Étudiant reviens en arrière dans le quiz

Fixes #200

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
                     

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;

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>):``}                    

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>

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>