[BUG] Dans un quiz au rythme de l'étudiant, l'enseignant ne peut plus masquer les questions

Fixes #295

client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx

@@ -293,4 +293,66 @@ describe('ManageRoom', () => {
             expect(screen.queryByText('Student 1')).not.toBeInTheDocument();
         });
     });
+    test('initializes isQuestionShown based on quizMode', async() => {
+        render(<MemoryRouter>
+            <ManageRoom />
+        </MemoryRouter>);
+
+        await act(async () => {
+            const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
+            createSuccessCallback('Test Room');
+        });
+
+        await waitFor(() => {
+            expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
+        });
+        const launchButton = screen.getByText('Lancer');
+        fireEvent.click(launchButton);
+
+        const rythmeButton = screen.getByText(`Rythme de l'étudiant`);
+        fireEvent.click(rythmeButton);
+
+        const secondLaunchButton = screen.getAllByText('Lancer');
+        fireEvent.click(secondLaunchButton[1]);
+
+        expect(screen.queryByText('Question')).not.toBeInTheDocument();
+    });
+
+    test('renders the close button when quizMode is student and isQuestionShown is true', async() => {
+        render(<MemoryRouter>
+            <ManageRoom />
+        </MemoryRouter>);
+
+        await act(async () => {
+            const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
+            createSuccessCallback('Test Room');
+        });
+
+        await waitFor(() => {
+            expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
+        });
+
+        const launchButton = screen.getByText('Lancer');
+        fireEvent.click(launchButton);
+
+        const rythmeButton = screen.getByText(`Rythme de l'étudiant`);
+        fireEvent.click(rythmeButton);
+
+        const secondLaunchButton = screen.getAllByText('Lancer');
+        fireEvent.click(secondLaunchButton[1]);
+
+        const tableHeader = screen.getByText('Q1');
+        fireEvent.click(tableHeader);
+
+        const closeButton = screen.getByRole('button', { name: /✖/i });
+        expect(closeButton).toBeInTheDocument();
+        expect(screen.getByText(/Question 1\//i)).toBeInTheDocument();
+
+        fireEvent.click(closeButton);
+
+        expect(screen.queryByRole('button', { name: /✖/i })).not.toBeInTheDocument();
+        expect(screen.queryByText(/Question 1\//i)).not.toBeInTheDocument();
+
+    });
+
 });

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

@@ -30,7 +30,7 @@ const ManageRoom: React.FC = () => {
     const navigate = useNavigate();
     const [socket, setSocket] = useState<Socket | null>(null);
     const [students, setStudents] = useState<StudentType[]>([]);
-    const { quizId = '', roomName = '' }  = useParams<{ quizId: string, roomName: string }>();
+    const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>();
     const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>();
     const [quiz, setQuiz] = useState<QuizType | null>(null);
     const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
@@ -39,6 +39,7 @@ const ManageRoom: React.FC = () => {
     const [quizStarted, setQuizStarted] = useState<boolean>(false);
     const [formattedRoomName, setFormattedRoomName] = useState("");
     const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
+    const [isQuestionShown, setIsQuestionShown] = useState<boolean>(quizMode === 'student' ? false : true);
 
     // Handle the newly connected user in useEffect, because it needs state info 
     // not available in the socket.on() callback
@@ -71,6 +72,10 @@ const ManageRoom: React.FC = () => {
         }
     }, [newlyConnectedUser]);
 
+    useEffect(() => {
+        setIsQuestionShown(quizMode === 'student' ? false : true);
+    }, [quizMode]);
+
     useEffect(() => {
         const verifyLogin = async () => {
             if (!ApiService.isLoggedIn()) {
@@ -96,7 +101,7 @@ const ManageRoom: React.FC = () => {
         return () => {
             disconnectWebSocket();
         };
-      }, [roomName, navigate]);
+    }, [roomName, navigate]);
 
     useEffect(() => {
         if (quizId) {
@@ -218,14 +223,14 @@ const ManageRoom: React.FC = () => {
                                     console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`);
                                     return ans.idQuestion === idQuestion
                                         ? {
-                                              ...ans,
+                                            ...ans,
-                                              answer,
+                                            answer,
-                                              isCorrect: checkIfIsCorrect(
+                                            isCorrect: checkIfIsCorrect(
-                                                  answer,
+                                                answer,
-                                                  idQuestion,
+                                                idQuestion,
-                                                  quizQuestions!
+                                                quizQuestions!
-                                              )
+                                            )
-                                          }
+                                        }
                                         : ans;
                                 });
                             } else {
@@ -258,10 +263,12 @@ const ManageRoom: React.FC = () => {
         if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
 
         setCurrentQuestion(quizQuestions[nextQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, 
+        webSocketService.nextQuestion({
-                                       questions: quizQuestions, 
+            roomName: formattedRoomName,
-                                       questionIndex: nextQuestionIndex, 
+            questions: quizQuestions,
-                                       isLaunch: false});
+            questionIndex: nextQuestionIndex,
+            isLaunch: false
+        });
     };
 
     const previousQuestion = () => {
@@ -271,7 +278,7 @@ const ManageRoom: React.FC = () => {
 
         if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
         setCurrentQuestion(quizQuestions[prevQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false});
+        webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false });
     };
 
     const initializeQuizQuestion = () => {
@@ -299,7 +306,7 @@ const ManageRoom: React.FC = () => {
         }
 
         setCurrentQuestion(quizQuestions[0]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true});
+        webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true });
     };
 
     const launchStudentMode = () => {
@@ -336,9 +343,11 @@ const ManageRoom: React.FC = () => {
         if (quiz?.content && quizQuestions) {
             setCurrentQuestion(quizQuestions[questionIndex]);
             if (quizMode === 'teacher') {
-                webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false});
+                webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false });
             }
+            setIsQuestionShown(true);
         }
+
     };
 
     const handleReturn = () => {
@@ -460,15 +469,29 @@ const ManageRoom: React.FC = () => {
 
             {/* the following breaks the css (if 'room' classes are nested) */}
             <div className="">
+
                 {quizQuestions ? (
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <div className="title center-h-align mb-2">{quiz?.title}</div>
-                        {!isNaN(Number(currentQuestion?.question.id)) && (
+                        {(quizMode === 'student' && isQuestionShown) && (
-                            <strong className="number of questions">
+                            <div className='close-button-wrapper'>
-                                Question {Number(currentQuestion?.question.id)}/
+                                <Button
-                                {quizQuestions?.length}
+                                    className="close-button"
-                            </strong>
+                                    onClick={() => {
+                                        setIsQuestionShown(false);
+                                    }} >
+                                    ✖
+                                </Button>
+                            </div>
                         )}
+                        {!isNaN(Number(currentQuestion?.question.id))
+                            && isQuestionShown && (
+                                <strong className="number of questions">
+                                    Question {Number(currentQuestion?.question.id)}/
+                                    {quizQuestions?.length}
+                                </strong>
+                            )
+                        }
 
                         {quizMode === 'teacher' && (
                             <div className="mb-1">
@@ -483,7 +506,7 @@ const ManageRoom: React.FC = () => {
 
                         <div className="mb-2 flex-column-wrapper">
                             <div className="preview-and-result-container">
-                                {currentQuestion && (
+                                {currentQuestion && isQuestionShown && (
                                     <QuestionDisplay
                                         showAnswer={false}
                                         question={currentQuestion?.question as Question}

client/src/pages/Teacher/ManageRoom/manageRoom.css

@@ -37,10 +37,11 @@
     /* align-items: center; */
 }
 
-
+.close-button-wrapper{
-
+    display: flex;
-
+    justify-content: flex-end;
-
+    margin-right: 1rem;
+}
 
 /* .create-room-container {
     display: flex;