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

Fixes #200

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -21,20 +21,33 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
     submitAnswer,
     disconnectWebSocket
 }) => {
+    //Ajouter type AnswerQuestionType en remplacement de QuestionType
     const [questionInfos, setQuestion] = useState<QuestionType>(questions[0]);
     const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
     // const [imageUrl, setImageUrl] = useState('');
 
-    // const previousQuestion = () => {
-    //     setQuestion(questions[Number(questionInfos.question?.id) - 2]);
-    //     setIsAnswerSubmitted(false);
-    // };
+    const previousQuestion = () => {
+        setQuestion(questions[Number(questionInfos.question?.id) - 2]);
+        setIsAnswerSubmitted(false);
         
-    useEffect(() => {}, [questionInfos]);
+    };
+
+
+
+    useEffect(() => {        
+        const answer = localStorage.getItem(`Answer${questionInfos.question.id}`);
+        if (answer !== null) {
+            setIsAnswerSubmitted(true);
+        } else {
+            setIsAnswerSubmitted(false);
+
+        }
+    }, [questionInfos.question]);
 
     const nextQuestion = () => {
         setQuestion(questions[Number(questionInfos.question?.id)]);
         setIsAnswerSubmitted(false);
+        
     };
 
     const handleOnSubmitAnswer = (answer: string | number | boolean) => {
@@ -46,11 +59,13 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
     return (
     <div className='room'>
     <div className='roomHeader'>
-
         <DisconnectButton
             onReturn={disconnectWebSocket}
             message={`Êtes-vous sûr de vouloir quitter?`} />
 
+    </div>
+    <div >
+    <b>Question {questionInfos.question.id}/{questions.length}</b>
     </div>
         <div className="overflow-auto">
             <div className="question-component-container">
@@ -67,30 +82,28 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
                     question={questionInfos.question as Question}
                     showAnswer={isAnswerSubmitted}
                     />
-                <div className="center-h-align mt-1/2">
-                    <div className="w-12">
-                        {/* <Button
-                            variant="outlined"
-                            onClick={previousQuestion}
-                            fullWidth
-                            startIcon={<ChevronLeft />}
-                            disabled={Number(questionInfos.question.id) <= 1}
-                            >
-                            Question précédente
-                        </Button> */}
-                    </div>
-                    <div className="w-12">
-                        <Button style={{ display: isAnswerSubmitted ? 'block' : 'none' }}
-                            variant="outlined"
-                            onClick={nextQuestion}
-                            fullWidth
-                            //endIcon={<ChevronRight />}
-                            disabled={Number(questionInfos.question.id) >= questions.length}
-                            >
-                            Question suivante
-                        </Button>
-                    </div>
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '1rem' }}>
+                <div>
+                    <Button
+                        variant="outlined"
+                        onClick={previousQuestion}
+                        fullWidth
+                        disabled={Number(questionInfos.question.id) <= 1}
+                    >
+                        Question précédente
+                    </Button>
                 </div>
+                <div>
+                    <Button
+                        variant="outlined"
+                        onClick={nextQuestion}
+                        fullWidth
+                        disabled={Number(questionInfos.question.id) >= questions.length}
+                    >
+                        Question suivante
+                    </Button>
+                </div>
+            </div>
             </div>
         </div>
     </div>

client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx

@@ -1,11 +1,8 @@
 // TeacherModeQuiz.tsx
 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 DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import { Question } from 'gift-pegjs';
@@ -43,12 +40,18 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
         // Close the feedback dialog when the question changes
         handleFeedbackDialogClose();
         setIsAnswerSubmitted(false);
+        const answer = localStorage.getItem(`Answer${questionInfos.question.id}`);
+        if (answer !== null) {
+            setIsAnswerSubmitted(true);
+            setIsFeedbackDialogOpen(true);
+        }
 
     }, [questionInfos.question]);
 
     const handleOnSubmitAnswer = (answer: string | number | boolean) => {
         const idQuestion = Number(questionInfos.question.id) || -1;
         submitAnswer(answer, idQuestion);
+
         setFeedbackMessage(renderFeedbackMessage(answer.toString()));
         setIsFeedbackDialogOpen(true);
     };

client/src/pages/Student/JoinRoom/JoinRoom.tsx

@@ -45,6 +45,7 @@ const JoinRoom: React.FC = () => {
         socket.on('next-question', (question: QuestionType) => {
             setQuizMode('teacher');
             setIsWaitingForTeacher(false);
+
             setQuestion(question);
         });
         socket.on('launch-student-mode', (questions: QuestionType[]) => {
@@ -78,6 +79,7 @@ const JoinRoom: React.FC = () => {
     };
 
     const disconnect = () => {
+        localStorage.clear();
         webSocketService.disconnect();
         setSocket(null);
         setQuestion(undefined);
@@ -107,7 +109,7 @@ const JoinRoom: React.FC = () => {
             username: username,
             idQuestion: idQuestion
         };
-
+        localStorage.setItem(`Answer${idQuestion}`, JSON.stringify(answer));
         webSocketService.submitAnswer(answerData);
     };
 

server/socket/socket.js

@@ -68,7 +68,6 @@ const setupWebsocket = (io) => {
     });
 
     socket.on("next-question", ({ roomName, question }) => {
-      // console.log("next-question", roomName, question);
       socket.to(roomName).emit("next-question", question);
     });