Merge pull request #208 from ets-cfuhrman-pfe/JubaAzul/issue207

Indiquer le numéro de la question dans l'affichage enseignant

client/package-lock.json

@@ -14,7 +14,7 @@
                 "@fortawesome/fontawesome-svg-core": "^6.6.0",
                 "@fortawesome/free-solid-svg-icons": "^6.4.2",
                 "@fortawesome/react-fontawesome": "^0.2.0",
-                "@mui/icons-material": "^6.1.0",
+                "@mui/icons-material": "^6.4.1",
                 "@mui/lab": "^5.0.0-alpha.153",
                 "@mui/material": "^6.1.0",
                 "@types/uuid": "^9.0.7",
@@ -2093,15 +2093,15 @@
             }
         },
         "node_modules/@emotion/serialize": {
-            "version": "1.3.2",
+            "version": "1.3.3",
-            "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz",
+            "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
-            "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==",
+            "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
             "license": "MIT",
             "dependencies": {
                 "@emotion/hash": "^0.9.2",
                 "@emotion/memoize": "^0.9.0",
                 "@emotion/unitless": "^0.10.0",
-                "@emotion/utils": "^1.4.1",
+                "@emotion/utils": "^1.4.2",
                 "csstype": "^3.0.2"
             }
         },
@@ -3355,9 +3355,9 @@
             }
         },
         "node_modules/@mui/core-downloads-tracker": {
-            "version": "6.1.6",
+            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.1.tgz",
-            "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
+            "integrity": "sha512-SfDLWMV5b5oXgDf3NTa2hCTPC1d2defhDH2WgFKmAiejC4mSfXYbyi+AFCLzpizauXhgBm8OaZy9BHKnrSpahQ==",
             "license": "MIT",
             "funding": {
                 "type": "opencollective",
@@ -3365,9 +3365,9 @@
             }
         },
         "node_modules/@mui/icons-material": {
-            "version": "6.1.6",
+            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.1.tgz",
-            "integrity": "sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==",
+            "integrity": "sha512-wsxFcUTQxt4s+7Bg4GgobqRjyaHLmZGNOs+HJpbwrwmLbT6mhIJxhpqsKzzWq9aDY8xIe7HCjhpH7XI5UD6teA==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.26.0"
@@ -3380,7 +3380,7 @@
                 "url": "https://opencollective.com/mui-org"
             },
             "peerDependencies": {
-                "@mui/material": "^6.1.6",
+                "@mui/material": "^6.4.1",
                 "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
                 "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
             },
@@ -3464,22 +3464,22 @@
             }
         },
         "node_modules/@mui/material": {
-            "version": "6.1.6",
+            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.1.tgz",
-            "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+            "integrity": "sha512-MFBfia6UiKxyoLeGkAh8M15bkeDmfnsUTMRJd/vTQue6YQ8AQ6lw9HqDthyYghzDEWIvZO/lQQzLrZE8XwNJLA==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.26.0",
-                "@mui/core-downloads-tracker": "^6.1.6",
+                "@mui/core-downloads-tracker": "^6.4.1",
-                "@mui/system": "^6.1.6",
+                "@mui/system": "^6.4.1",
-                "@mui/types": "^7.2.19",
+                "@mui/types": "^7.2.21",
-                "@mui/utils": "^6.1.6",
+                "@mui/utils": "^6.4.1",
                 "@popperjs/core": "^2.11.8",
-                "@types/react-transition-group": "^4.4.11",
+                "@types/react-transition-group": "^4.4.12",
                 "clsx": "^2.1.1",
                 "csstype": "^3.1.3",
                 "prop-types": "^15.8.1",
-                "react-is": "^18.3.1",
+                "react-is": "^19.0.0",
                 "react-transition-group": "^4.4.5"
             },
             "engines": {
@@ -3492,7 +3492,7 @@
             "peerDependencies": {
                 "@emotion/react": "^11.5.0",
                 "@emotion/styled": "^11.3.0",
-                "@mui/material-pigment-css": "^6.1.6",
+                "@mui/material-pigment-css": "^6.4.1",
                 "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
                 "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
                 "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3513,13 +3513,13 @@
             }
         },
         "node_modules/@mui/material/node_modules/@mui/private-theming": {
-            "version": "6.1.6",
+            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.1.tgz",
-            "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
+            "integrity": "sha512-DcT7mwK89owwgcEuiE7w458te4CIjHbYWW6Kn6PiR6eLtxBsoBYphA968uqsQAOBQDpbYxvkuFLwhgk4bxoN/Q==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.26.0",
-                "@mui/utils": "^6.1.6",
+                "@mui/utils": "^6.4.1",
                 "prop-types": "^15.8.1"
             },
             "engines": {
@@ -3540,14 +3540,14 @@
             }
         },
         "node_modules/@mui/material/node_modules/@mui/styled-engine": {
-            "version": "6.1.6",
+            "version": "6.4.0",
-            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.0.tgz",
-            "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
+            "integrity": "sha512-ek/ZrDujrger12P6o4luQIfRd2IziH7jQod2WMbLqGE03Iy0zUwYmckRTVhRQTLPNccpD8KXGcALJF+uaUQlbg==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.26.0",
-                "@emotion/cache": "^11.13.1",
+                "@emotion/cache": "^11.13.5",
-                "@emotion/serialize": "^1.3.2",
+                "@emotion/serialize": "^1.3.3",
                 "@emotion/sheet": "^1.4.0",
                 "csstype": "^3.1.3",
                 "prop-types": "^15.8.1"
@@ -3574,16 +3574,16 @@
             }
         },
         "node_modules/@mui/material/node_modules/@mui/system": {
-            "version": "6.1.6",
+            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.1.tgz",
-            "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+            "integrity": "sha512-rgQzgcsHCTtzF9MZ+sL0tOhf2ZBLazpjrujClcb4Siju5lTrK0xX4PsiropActzCemNfM+mOu+0jezAVnfRK8g==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.26.0",
-                "@mui/private-theming": "^6.1.6",
+                "@mui/private-theming": "^6.4.1",
-                "@mui/styled-engine": "^6.1.6",
+                "@mui/styled-engine": "^6.4.0",
-                "@mui/types": "^7.2.19",
+                "@mui/types": "^7.2.21",
-                "@mui/utils": "^6.1.6",
+                "@mui/utils": "^6.4.1",
                 "clsx": "^2.1.1",
                 "csstype": "^3.1.3",
                 "prop-types": "^15.8.1"
@@ -3614,17 +3614,17 @@
             }
         },
         "node_modules/@mui/material/node_modules/@mui/utils": {
-            "version": "6.1.6",
+            "version": "6.4.1",
-            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.1.tgz",
-            "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
+            "integrity": "sha512-iQUDUeYh87SvR4lVojaRaYnQix8BbRV51MxaV6MBmqthecQoxwSbS5e2wnbDJUeFxY2ppV505CiqPLtd0OWkqw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/runtime": "^7.26.0",
-                "@mui/types": "^7.2.19",
+                "@mui/types": "^7.2.21",
-                "@types/prop-types": "^15.7.13",
+                "@types/prop-types": "^15.7.14",
                 "clsx": "^2.1.1",
                 "prop-types": "^15.8.1",
-                "react-is": "^18.3.1"
+                "react-is": "^19.0.0"
             },
             "engines": {
                 "node": ">=14.0.0"
@@ -3643,6 +3643,12 @@
                 }
             }
         },
+        "node_modules/@mui/material/node_modules/react-is": {
+            "version": "19.0.0",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
+            "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
+            "license": "MIT"
+        },
         "node_modules/@mui/private-theming": {
             "version": "5.16.14",
             "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.14.tgz",
@@ -3743,9 +3749,9 @@
             }
         },
         "node_modules/@mui/types": {
-            "version": "7.2.19",
+            "version": "7.2.21",
-            "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
+            "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz",
-            "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
+            "integrity": "sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==",
             "license": "MIT",
             "peerDependencies": {
                 "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -4682,9 +4688,9 @@
             "license": "MIT"
         },
         "node_modules/@types/prop-types": {
-            "version": "15.7.13",
+            "version": "15.7.14",
-            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-            "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
+            "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
             "license": "MIT"
         },
         "node_modules/@types/react": {
@@ -4718,11 +4724,11 @@
             }
         },
         "node_modules/@types/react-transition-group": {
-            "version": "4.4.11",
+            "version": "4.4.12",
-            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-            "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+            "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
             "license": "MIT",
-            "dependencies": {
+            "peerDependencies": {
                 "@types/react": "*"
             }
         },

client/package.json

@@ -18,7 +18,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@mui/icons-material": "^6.1.0",
+        "@mui/icons-material": "^6.4.1",
         "@mui/lab": "^5.0.0-alpha.153",
         "@mui/material": "^6.1.0",
         "@types/uuid": "^9.0.7",

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

@@ -0,0 +1,253 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MemoryRouter, useNavigate, useParams } from 'react-router-dom';
+import ManageRoom from 'src/pages/Teacher/ManageRoom/ManageRoom';
+import { StudentType } from 'src/Types/StudentType';
+import { QuizType } from 'src/Types/QuizType';
+import webSocketService, { AnswerReceptionFromBackendType } from 'src/services/WebsocketService';
+import ApiService from 'src/services/ApiService';
+import { Socket } from 'socket.io-client';
+
+jest.mock('src/services/WebsocketService');
+jest.mock('src/services/ApiService');
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useNavigate: jest.fn(),
+    useParams: jest.fn(),
+}));
+
+const mockSocket = {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+} as unknown as Socket;
+
+const mockQuiz: QuizType = {
+    _id: 'test-quiz-id',
+    title: 'Test Quiz',
+    content: ['::Q1:: Question 1 { =Answer1 ~Answer2 }', '::Q2:: Question 2 { =Answer1 ~Answer2 }'],
+    folderId: 'folder-id',
+    folderName: 'folder-name',
+    userId: 'user-id',
+    created_at: new Date(),
+    updated_at: new Date()
+};
+
+const mockStudents: StudentType[] = [
+    { id: '1', name: 'Student 1', answers: [] },
+    { id: '2', name: 'Student 2', answers: [] },
+];
+
+const mockAnswerData: AnswerReceptionFromBackendType = {
+    answer: 'Answer1',
+    idQuestion: 1,
+    idUser: '1',
+    username: 'Student 1',
+};
+
+describe('ManageRoom', () => {
+    const navigate = jest.fn();
+    const useParamsMock = useParams as jest.Mock;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        (useNavigate as jest.Mock).mockReturnValue(navigate);
+        useParamsMock.mockReturnValue({ id: 'test-quiz-id' });
+        (ApiService.getQuiz as jest.Mock).mockResolvedValue(mockQuiz);
+        (webSocketService.connect as jest.Mock).mockReturnValue(mockSocket);
+    });
+
+    test('prepares to launch quiz and fetches quiz data', async () => {
+        await act(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-name');
+        });
+
+        await waitFor(() => {
+            expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
+        });
+
+        const launchButton = screen.getByText('Lancer');
+        fireEvent.click(launchButton);
+
+        const rythmeButton = screen.getByText('Rythme du professeur');
+        fireEvent.click(rythmeButton);
+
+        const secondLaunchButton = screen.getAllByText('Lancer');
+        fireEvent.click(secondLaunchButton[1]);
+
+        await waitFor(() => {
+            expect(screen.getByText('Test Quiz')).toBeInTheDocument();
+            expect(screen.getByText('Salle: test-room-name')).toBeInTheDocument();
+            expect(screen.getByText('0/60')).toBeInTheDocument();
+            expect(screen.getByText('Question 1/2')).toBeInTheDocument();
+        });
+    });
+
+    test('handles create-success event', async () => {
+        await act(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-name');
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Salle: test-room-name')).toBeInTheDocument();
+        });
+    });
+
+    test('handles user-joined event', async () => {
+        await act(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-name');
+        });
+
+        await act(async () => {
+            const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
+            userJoinedCallback(mockStudents[0]);
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Student 1')).toBeInTheDocument();
+
+        });
+
+        const launchButton = screen.getByText('Lancer');
+        fireEvent.click(launchButton);
+
+        const rythmeButton = screen.getByText('Rythme du professeur');
+        fireEvent.click(rythmeButton);
+
+        const secondLaunchButton = screen.getAllByText('Lancer');
+        fireEvent.click(secondLaunchButton[1]);
+
+        await waitFor(() => {
+            expect(screen.getByText('1/60')).toBeInTheDocument();
+
+        });
+    });
+
+    test('handles submit-answer-room event', async () => {
+        const consoleSpy = jest.spyOn(console, 'log');
+        await act(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-name');
+        });
+
+        const launchButton = screen.getByText('Lancer');
+        fireEvent.click(launchButton);
+
+        const rythmeButton = screen.getByText('Rythme du professeur');
+        fireEvent.click(rythmeButton);
+
+        const secondLaunchButton = screen.getAllByText('Lancer');
+        fireEvent.click(secondLaunchButton[1]);
+
+        await act(async () => {
+            const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
+            userJoinedCallback(mockStudents[0]);
+        });
+
+        await act(async () => {
+            const submitAnswerCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'submit-answer-room')[1];
+            submitAnswerCallback(mockAnswerData);
+        });
+
+        await waitFor(() => {
+            expect(consoleSpy).toHaveBeenCalledWith('Received answer from Student 1 for question 1: Answer1');
+        });
+
+        consoleSpy.mockRestore();
+    });
+
+    test('handles next question', async () => {
+        await act(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-name');
+        });
+
+        const launchButton = screen.getByText('Lancer');
+        fireEvent.click(launchButton);
+
+        const rythmeButton = screen.getByText('Rythme du professeur');
+        fireEvent.click(rythmeButton);
+
+        const secondLaunchButton = screen.getAllByText('Lancer');
+        fireEvent.click(secondLaunchButton[1]);
+
+        const nextQuestionButton = screen.getByText('Prochaine question');
+        fireEvent.click(nextQuestionButton);
+        
+        await waitFor(() => {
+            expect(screen.getByText('Question 2/2')).toBeInTheDocument();
+        });
+    });
+
+    test('handles disconnect', async () => {
+        await act(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-name');
+        });
+
+        const disconnectButton = screen.getByText('Quitter');
+        fireEvent.click(disconnectButton);
+
+        const confirmButton = screen.getAllByText('Confirmer');
+        fireEvent.click(confirmButton[1]);
+
+        await waitFor(() => {
+            expect(webSocketService.disconnect).toHaveBeenCalled();
+            expect(navigate).toHaveBeenCalledWith('/teacher/dashboard');
+        });
+    });
+});

client/src/components/LaunchQuizDialog/LaunchQuizDialog.tsx

@@ -47,10 +47,10 @@ const LaunchQuizDialog: React.FC<Props> = ({ open, handleOnClose, launchQuiz, se
 
             <DialogActions>
                 <Button variant="outlined" onClick={handleOnClose}>
-                    Annuler
+                    <div>Annuler</div>
                 </Button>
                 <Button variant="contained" onClick={launchQuiz}>
-                    Lancer
+                    <div>Lancer</div>
                 </Button>
             </DialogActions>
         </Dialog>

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

@@ -8,6 +8,7 @@ import LiveResultsComponent from 'src/components/LiveResults/LiveResults';
 // import { QuestionService } from '../../../services/QuestionService';
 import webSocketService, { AnswerReceptionFromBackendType } from '../../../services/WebsocketService';
 import { QuizType } from '../../../Types/QuizType';
+import GroupIcon from '@mui/icons-material/Group';
 
 import './manageRoom.css';
 import { ENV_VARIABLES } from 'src/constants';
@@ -33,6 +34,7 @@ const ManageRoom: React.FC = () => {
     const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
     const [connectingError, setConnectingError] = useState<string>('');
     const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
+    const [quizStarted, setQuizStarted] = useState(false);
     
     useEffect(() => {
         if (quizId.id) {
@@ -316,13 +318,18 @@ const ManageRoom: React.FC = () => {
         if (!socket || !roomName || !quiz?.content || quiz?.content.length === 0) {
             // TODO: This error happens when token expires! Need to handle it properly
             console.log(`Error launching quiz. socket: ${socket}, roomName: ${roomName}, quiz: ${quiz}`);
+            setQuizStarted(true);
+
             return;
         }
         switch (quizMode) {
             case 'student':
+                setQuizStarted(true);
                 return launchStudentMode();
             case 'teacher':
+                setQuizStarted(true);
                 return launchTeacherMode();
+                
         }
     };
 
@@ -427,9 +434,19 @@ const ManageRoom: React.FC = () => {
                     askConfirm
                     message={`Êtes-vous sûr de vouloir quitter?`} />
 
-                <div className='centerTitle'>
+
+
+
+                <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>
-                    <div className='userCount subtitle'>Utilisateurs: {students.length}/60</div>
+                    </div>
+                    {quizStarted && (
+                        <div className='userCount subtitle smallText' style={{ display: 'flex', alignItems: 'center' }}>
+                            <GroupIcon style={{ marginRight: '5px' }} />
+                            {students.length}/60
+                        </div>
+                    )}
                 </div>
 
                 <div className='dumb'></div>
@@ -441,8 +458,12 @@ const ManageRoom: React.FC = () => {
                 {quizQuestions ? (
 
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
-
                         <div className="title center-h-align mb-2">{quiz?.title}</div>
+                        {!isNaN(Number(currentQuestion?.question.id)) && (
+                            <strong className='number of questions'>
+                                Question {Number(currentQuestion?.question.id)}/{quizQuestions?.length}
+                            </strong>
+                        )}
 
                         {quizMode === 'teacher' && (
 
@@ -490,12 +511,12 @@ const ManageRoom: React.FC = () => {
                                 <div className="nextQuestionButton">
                                     <Button onClick={nextQuestion}
                                         variant="contained"
-                                disabled={Number(currentQuestion?.question.id) >=quizQuestions.length}
+                                        disabled={Number(currentQuestion?.question.id) >= quizQuestions.length}
                                     >
                                         Prochaine question
                                     </Button>
                                 </div>
-                        </div> )}
+                            </div>)}
 
                     </div>
 

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

@@ -18,8 +18,8 @@
 
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-end;
-    align-items: center;
+    align-items: flex-end;
 
 }