Merge 886b8125d3 into ee7a7a0544

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

@@ -294,5 +294,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 questionVisibilitySwitch = screen.getByTestId('question-visibility-switch'); // Get the specific switch
+        expect(screen.getByText(/Question 1\//i)).toBeInTheDocument();
+
+        fireEvent.click(questionVisibilitySwitch);
+
+        expect(screen.queryByRole('button', { name: /✖/i })).not.toBeInTheDocument();
+        expect(screen.queryByText(/Question 1\//i)).not.toBeInTheDocument();
+
+    });
+
 });
 

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

@@ -18,7 +18,7 @@ import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
 import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay';
 import ApiService from '../../../services/ApiService';
 import { QuestionType } from 'src/Types/QuestionType';
-import { Button } from '@mui/material';
+import { Button, FormControlLabel, Switch } from '@mui/material';
 import { checkIfIsCorrect } from './useRooms';
 
 const ManageRoom: React.FC = () => {
@@ -34,6 +34,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
@@ -66,6 +67,10 @@ const ManageRoom: React.FC = () => {
         }
     }, [newlyConnectedUser]);
 
+    useEffect(() => {
+        setIsQuestionShown(quizMode === 'student' ? false : true);
+    }, [quizMode]);
+
     useEffect(() => {
         const verifyLogin = async () => {
             if (!ApiService.isLoggedIn()) {
@@ -253,10 +258,12 @@ const ManageRoom: React.FC = () => {
         if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
 
         setCurrentQuestion(quizQuestions[nextQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, 
+        webSocketService.nextQuestion({
+            roomName: formattedRoomName,
             questions: quizQuestions,
             questionIndex: nextQuestionIndex,
-                                       isLaunch: false});
+            isLaunch: false
+        });
     };
 
     const previousQuestion = () => {
@@ -306,6 +313,7 @@ const ManageRoom: React.FC = () => {
             return;
         }
         setQuizQuestions(quizQuestions);
+        setCurrentQuestion(quizQuestions[0]);
         webSocketService.launchStudentModeQuiz(formattedRoomName, quizQuestions);
     };
 
@@ -333,7 +341,9 @@ const ManageRoom: React.FC = () => {
             if (quizMode === 'teacher') {
                 webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false });
             }
+            setIsQuestionShown(true);
         }
+
     };
 
     const handleReturn = () => {
@@ -398,15 +408,35 @@ 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)) && (
+                        
+                    <div className='close-button-wrapper'>
+                    <FormControlLabel
+                        label={<div className="text-sm">Afficher les questions</div>}
+                        control={
+                            <Switch
+                                data-testid="question-visibility-switch" // Add a unique test ID
+                                checked={isQuestionShown}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                    setIsQuestionShown(e.target.checked)
+                                }
+                            />
+                        }
+                    />
+                    </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">
@@ -421,7 +451,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-start;
+    margin-right: 1rem;
+}
 
 /* .create-room-container {
     display: flex;