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

Fixes #200

client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx

@@ -21,7 +21,7 @@ describe('MultipleChoiceQuestionDisplay', () => {
     const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
         const [showAnswerState, setShowAnswerState] = useState(showAnswer);
 
-        const handleOnSubmitAnswer = (answer: string) => {
+        const handleOnSubmitAnswer = (answer: string | number | boolean) => {
             mockHandleOnSubmitAnswer(answer);
             setShowAnswerState(true);
         };

client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx

@@ -16,7 +16,7 @@ describe('TrueFalseQuestion Component', () => {
     const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
         const [showAnswerState, setShowAnswerState] = useState(showAnswer);
 
-        const handleOnSubmitAnswer = (answer: boolean) => {
+        const handleOnSubmitAnswer = (answer: string | number | boolean) => {
             mockHandleSubmitAnswer(answer);
             setShowAnswerState(true);
         };

client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx

@@ -7,37 +7,49 @@ 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 { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
-    const [answer, setAnswer] = useState<string>();
+    const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || ' ');
-    
+
+
+    let disableButton = false;
+    if(handleOnSubmitAnswer === undefined){
+        disableButton = true;
+    }
+
     useEffect(() => {
-        setAnswer(undefined);
+    if (passedAnswer !== undefined) {
-    }, [question]);
+        setAnswer(passedAnswer);
+    }
+    }, [passedAnswer]);
 
     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 (
         <div className="question-container">
             <div className="question content">
                 <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
             </div>
             <div className="choices-wrapper mb-1">
+                
                 {question.choices.map((choice, i) => {
                     const selected = answer === choice.formattedText.text ? 'selected' : '';
+                    console.log("dsa", selected)
                     return (
                         <div key={choice.formattedText.text + i} className="choice-container">
                             <Button
                                 variant="text"
                                 className="button-wrapper"
+                                disabled={disableButton}
                                 onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
                                 {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
                                 :``}
@@ -67,9 +79,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/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx

@@ -1,5 +1,5 @@
 // NumericalQuestion.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
@@ -8,19 +8,24 @@ import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnsw
 
 interface Props {
     question: NumericalQuestion;
-    handleOnSubmitAnswer?: (answer: number) => void;
+    handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
     showAnswer?: boolean;
+    passedAnswer?: string | number | boolean;
 }
 
 const NumericalQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } =
+    const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } =
         props;
-
+    const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || '');
-    const [answer, setAnswer] = useState<number>();
-
     const correctAnswers = question.choices;
     let correctAnswer = '';
 
+    useEffect(() => {
+    if (passedAnswer !== null && passedAnswer !== undefined) {
+        setAnswer(passedAnswer);
+    }
+    }, [passedAnswer]);
+    
     //const isSingleAnswer = correctAnswers.length === 1;
 
     if (isSimpleNumericalAnswer(correctAnswers[0])) {
@@ -44,10 +49,16 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
             </div>
             {showAnswer ? (
                 <>
-                    <div className="correct-answer-text mb-2">{correctAnswer}</div>
+                    <div className="correct-answer-text mb-2">
+                    <strong>La bonne réponse est: </strong>
+                    {correctAnswer}</div>
+                    <span>
+                        <strong>Votre réponse est: </strong>{answer.toString()}
+                    </span>
                     {question.formattedGlobalFeedback && <div className="global-feedback mb-2">
                         <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
                     </div>}
+
                 </>
             ) : (
                 <>
@@ -75,7 +86,7 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
                                 handleOnSubmitAnswer &&
                                 handleOnSubmitAnswer(answer)
                             }
-                            disabled={answer === undefined || isNaN(answer)}
+                            disabled={answer === "" || isNaN(answer as number)}
                         >
                             Répondre
                         </Button>

client/src/components/QuestionsDisplay/QuestionDisplay.tsx

@@ -11,11 +11,14 @@ 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,37 +33,32 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    passedAnswer={answer}
                 />
             );
             break;
         case 'MC':
+            
             questionTypeComponent = (
                 <MultipleChoiceQuestionDisplay
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    passedAnswer={answer}
                 />
             );
             break;
         case 'Numerical':
             if (question.choices) {
-                if (!Array.isArray(question.choices)) {
                     questionTypeComponent = (
                         <NumericalQuestionDisplay
                             question={question}
                             handleOnSubmitAnswer={handleOnSubmitAnswer}
                             showAnswer={showAnswer}
+                            passedAnswer={answer}
+                            
                         />
                     );
-                } else {
-                    questionTypeComponent = (  // TODO fix NumericalQuestion (correctAnswers is borked)
-                        <NumericalQuestionDisplay
-                            question={question}
-                            handleOnSubmitAnswer={handleOnSubmitAnswer}
-                            showAnswer={showAnswer}
-                        />
-                    );
-                }
             }
             break;
         case 'Short':
@@ -69,6 +67,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
                     question={question}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}
+                    passedAnswer={answer}
                 />
             );
             break;

client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import '../questionStyle.css';
 import { Button, TextField } from '@mui/material';
 import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
@@ -6,14 +6,22 @@ import { ShortAnswerQuestion } from 'gift-pegjs';
 
 interface Props {
     question: ShortAnswerQuestion;
-    handleOnSubmitAnswer?: (answer: string) => void;
+    handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
     showAnswer?: boolean;
+    passedAnswer?: string | number | boolean;
+
 }
 
 const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
-    const { question, showAnswer, handleOnSubmitAnswer } = props;
+    const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
-    const [answer, setAnswer] = useState<string>();
+    const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || ' ');
-
+    
+    useEffect(() => {
+    if (passedAnswer !== undefined) {
+        setAnswer(passedAnswer);
+    }
+    }, [passedAnswer]);
+    
     return (
         <div className="question-wrapper">
             <div className="question content">
@@ -22,11 +30,18 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
             {showAnswer ? (
                 <>
                     <div className="correct-answer-text mb-1">
+                    <span>
+                        <strong>La bonne réponse est: </strong>
+                    
                         {question.choices.map((choice) => (
                             <div key={choice.text} className="mb-1">
                                 {choice.text}
                             </div>
                         ))}
+                    </span>
+                    <span>
+                        <strong>Votre réponse est: </strong>{answer}
+                    </span>
                     </div>
                     {question.formattedGlobalFeedback && <div className="global-feedback mb-2">
                         <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
@@ -54,7 +69,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
                                 handleOnSubmitAnswer &&
                                 handleOnSubmitAnswer(answer)
                             }
-                            disabled={answer === undefined || answer === ''}
+                            disabled={answer === null || answer === ''}
                         >
                             Répondre
                         </Button>

client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx

@@ -1,5 +1,5 @@
 // TrueFalseQuestion.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState,useEffect } from 'react';
 import '../questionStyle.css';
 import { Button } from '@mui/material';
 import { TrueFalseQuestion } from 'gift-pegjs';
@@ -7,18 +7,40 @@ import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/Tex
 
 interface Props {
     question: TrueFalseQuestion;
-    handleOnSubmitAnswer?: (answer: boolean) => void;
+    handleOnSubmitAnswer?: (answer:  string | number | boolean) => 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);
+
+    let disableButton = false;
+    if(handleOnSubmitAnswer === undefined){
+        disableButton = true;
+    }
 
     useEffect(() => {
-        setAnswer(undefined);
+                if (passedAnswer === true || passedAnswer === false) {
-    }, [question]);
+                    setAnswer(passedAnswer);
+                } else {
+                    setAnswer(undefined);
+                }
+            }, [passedAnswer]);
+
+    const [answer, setAnswer] = useState<boolean | undefined>(() => {
+
+        if (passedAnswer === true || passedAnswer === false) {
+            return passedAnswer;
+        }
+
+        return undefined;
+    }); 
+
+    const handleOnClickAnswer = (choice: boolean) => {
+        setAnswer(choice);
+    };
 
     const selectedTrue = answer ? 'selected' : '';
     const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
@@ -30,35 +52,38 @@ 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
+                    disabled={disableButton}
                 >
                     {showAnswer? (<div> {(question.isTrue ? '✅' : '❌')}</div>):``}                    
                     <div className={`circle ${selectedTrue}`}>V</div>
                     <div className={`answer-text ${selectedTrue}`}>Vrai</div>
+
+                    {showAnswer && answer && question.trueFormattedFeedback && (
+                    <div className="true-feedback mb-2">
+                        <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.trueFormattedFeedback) }} />
+                    </div>
+            )}
                 </Button>
                 <Button
                     className="button-wrapper"
-                    onClick={() => !showAnswer && setAnswer(false)}
+                    onClick={() => !showAnswer && handleOnClickAnswer(false)}
                     fullWidth
+                    disabled={disableButton}
+
                 >
                     {showAnswer? (<div> {(!question.isTrue ? '✅' : '❌')}</div>):``}                    
                     <div className={`circle ${selectedFalse}`}>F</div>
                     <div className={`answer-text ${selectedFalse}`}>Faux</div>
+
+                    {showAnswer && !answer && question.falseFormattedFeedback && (
+                    <div className="false-feedback mb-2">
+                        <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.falseFormattedFeedback) }} />
+                    </div>
+            )}
                 </Button>
             </div>
-            {/* selected TRUE, show True feedback if it exists */}
-            {showAnswer && answer && question.trueFormattedFeedback && (
-                <div className="true-feedback mb-2">
-                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.trueFormattedFeedback) }} />
-                </div>
-            )}
-            {/* selected FALSE, show False feedback if it exists */}
-            {showAnswer && !answer && question.falseFormattedFeedback && (
-                <div className="false-feedback mb-2">
-                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.falseFormattedFeedback) }} />
-                </div>
-            )}
             {question.formattedGlobalFeedback && showAnswer && (
                 <div className="global-feedback mb-2">
                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />

client/src/components/QuestionsDisplay/questionStyle.css

@@ -147,6 +147,25 @@
     box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
 }
 
+.true-feedback {
+    position: relative;
+    padding: 0 1rem;
+    background-color: hsl(43, 100%, 94%);
+    color: hsl(43, 95%, 9%);
+    border: hsl(36, 84%, 93%) 1px solid;
+    border-radius: 6px;
+    box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
+}
+.false-feedback {
+    position: relative;
+    padding: 0 1rem;
+    background-color: hsl(43, 100%, 94%);
+    color: hsl(43, 95%, 9%);
+    border: hsl(36, 84%, 93%) 1px solid;
+    border-radius: 6px;
+    box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
+}
+
 .choices-wrapper {
     width: 90%;
 }

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -3,10 +3,8 @@ import React, { useEffect, useState } from 'react';
 import QuestionComponent from '../QuestionsDisplay/QuestionDisplay';
 import '../../pages/Student/JoinRoom/joinRoom.css';
 import { QuestionType } from '../../Types/QuestionType';
-// import { QuestionService } from '../../services/QuestionService';
 import { Button } from '@mui/material';
 //import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
-//import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
 import { Question } from 'gift-pegjs';
 
@@ -24,30 +22,24 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
     //Ajouter type AnswerQuestionType en remplacement de QuestionType
     const [questionInfos, setQuestion] = useState<QuestionType>(questions[0]);
     const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
-    // const [imageUrl, setImageUrl] = useState('');
+    const [answer, setAnswer] = useState<string | number | boolean>('');
+    
 
     const previousQuestion = () => {
-        setQuestion(questions[Number(questionInfos.question?.id) - 2]);
+        setQuestion(questions[Number(questionInfos.question?.id) - 2]);        
-        setIsAnswerSubmitted(false);
-        
     };
 
-
-
     useEffect(() => {        
-        const answer = localStorage.getItem(`Answer${questionInfos.question.id}`);
+        setAnswer(JSON.parse(localStorage.getItem(`Answer${questionInfos.question.id}`)||'null'));
         if (answer !== null) {
             setIsAnswerSubmitted(true);
         } else {
             setIsAnswerSubmitted(false);
-
         }
-    }, [questionInfos.question]);
+    }, [questionInfos.question , answer]);
 
     const nextQuestion = () => {
         setQuestion(questions[Number(questionInfos.question?.id)]);
-        setIsAnswerSubmitted(false);
-        
     };
 
     const handleOnSubmitAnswer = (answer: string | number | boolean) => {
@@ -81,6 +73,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
                     showAnswer={isAnswerSubmitted}
+                    answer={answer}
                     />
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '1rem' }}>
                 <div>

client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx

@@ -20,39 +20,26 @@ 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) => {
 
-        if(answer === 'true' || answer === 'false'){
-        return (<span>
-            <strong>Votre réponse est: </strong>{answer==="true" ? 'Vrai' : 'Faux'}
-            </span>)
-        }
-        else{
-        return (
-            <span>
-                <strong>Votre réponse est: </strong>{answer.toString()}
-            </span>
-        );}
-    };
     useEffect(() => {
         // Close the feedback dialog when the question changes
         handleFeedbackDialogClose();
         setIsAnswerSubmitted(false);
-        const answer = localStorage.getItem(`Answer${questionInfos.question.id}`);
+        setAnswer(JSON.parse(localStorage.getItem(`Answer${questionInfos.question.id}`)||'null'));
-        if (answer !== null) {
+        if (typeof answer !== "object") {
             setIsAnswerSubmitted(true);
             setIsFeedbackDialogOpen(true);
         }
 
-    }, [questionInfos.question]);
+    }, [questionInfos.question , answer]);
 
     const handleOnSubmitAnswer = (answer: string | number | boolean) => {
         const idQuestion = Number(questionInfos.question.id) || -1;
         submitAnswer(answer, idQuestion);
-
+        setAnswer(answer);
-        setFeedbackMessage(renderFeedbackMessage(answer.toString()));
         setIsFeedbackDialogOpen(true);
     };
 
@@ -85,6 +72,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                 <QuestionComponent
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
+                    answer={answer} 
                 />
             )}
 
@@ -100,7 +88,6 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                             maxHeight: '400px',
                             overflowY: 'auto',
                         }}>
-                    {feedbackMessage}
                     <div style={{ textAlign: 'left', fontWeight: 'bold', marginTop: '10px'}}
                     >Question : </div>                    
                     </div>
@@ -109,6 +96,8 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     question={questionInfos.question as Question}
                     showAnswer={true}
+                    answer={answer} 
+
                     />
                 </DialogContent>
                 <DialogActions>

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -435,8 +435,6 @@ const ManageRoom: React.FC = () => {
                     message={`Êtes-vous sûr de vouloir quitter?`} />
 
 
-
-
                 <div className='headerContent' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
                     <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
                         <div className='title'>Salle: {roomName}</div>
@@ -485,6 +483,7 @@ const ManageRoom: React.FC = () => {
                                     <QuestionDisplay
                                         showAnswer={false}
                                         question={currentQuestion?.question as Question}
+                                        
                                     />
                                 )}