Merge 85988697d4 into 62df610d62

2025-08-11 21:23:54 -04:00 · 2025-04-08 16:40:34 -04:00
16 changed files with 532 additions and 952 deletions
--- a/README.md
+++ b/README.md
@ -6,7 +6,7 @@

 # EvalueTonSavoir

-EvalueTonSavoir ("Check What You Know") is an open-source and self-hosted platform that continues the development of the code from https://github.com/ETS-PFE004-Plateforme-sondage-minitest. This minimalist platform is designed as a learning and teaching tool, offering a simple and effective solution for creating quizzes using the GIFT format, similar to Moodle.
+EvalueTonSavoir is an open-source and self-hosted platform that continues the development of the code from https://github.com/ETS-PFE004-Plateforme-sondage-minitest. This minimalist platform is designed as a learning and teaching tool, offering a simple and effective solution for creating quizzes using the GIFT format, similar to Moodle.

 ## Key Features

--- a/client/.env.development
+++ b/client/.env.development
@ -1,3 +1,2 @@
 VITE_BACKEND_URL=http://localhost:4400
 VITE_BACKEND_SOCKET_URL=http://localhost:4400
-VITE_AZURE_BACKEND_URL=http://localhost:4400
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -18,18 +18,17 @@
        "@fortawesome/fontawesome-svg-core": "^6.7.2",
        "@fortawesome/free-solid-svg-icons": "^6.7.2",
        "@fortawesome/react-fontawesome": "^0.2.0",
-        "@mui/icons-material": "^7.0.2",
+        "@mui/icons-material": "^7.0.1",
        "@mui/lab": "^5.0.0-alpha.153",
-        "@mui/material": "^7.0.2",
+        "@mui/material": "^7.0.1",
        "@types/uuid": "^9.0.7",
        "axios": "^1.8.1",
        "dompurify": "^3.2.5",
        "esbuild": "^0.25.2",
        "gift-pegjs": "^2.0.0-beta.1",
        "jest-environment-jsdom": "^29.7.0",
-        "jspdf": "^3.0.1",
        "jwt-decode": "^4.0.0",
-        "katex": "^0.16.22",
+        "katex": "^0.16.11",
        "marked": "^15.0.8",
        "nanoid": "^5.1.5",
        "qrcode.react": "^4.2.0",
@ -74,7 +73,7 @@
        "ts-jest": "^29.3.1",
        "typescript": "^5.8.3",
        "typescript-eslint": "^8.29.1",
-        "vite": "^6.2.6",
+        "vite": "^6.2.0",
        "vite-plugin-environment": "^1.1.3"
    }
 }
--- a/client/src/tests/components/DownloadQuizModal/DownloadQuizModal.test.tsx
+++ b/client/src/tests/components/DownloadQuizModal/DownloadQuizModal.test.tsx
@ -1,72 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import DownloadQuizModal from '../../../components/DownloadQuizModal/DownloadQuizModal';
-import ApiService from '../../../services/ApiService';
-import { QuizType } from '../../../Types/QuizType';
-
-jest.mock('../../../services/ApiService');
-jest.mock('jspdf', () => {
-    return jest.fn().mockImplementation(() => ({
-        addImage: jest.fn(),
-        save: jest.fn(),
-        addPage: jest.fn(),
-    }));
-});
-jest.mock('html2canvas', () => jest.fn(() => Promise.resolve(document.createElement('canvas'))));
-jest.mock('dompurify', () => ({
-    sanitize: jest.fn((input) => input),
-}));
-
-const mockQuiz: QuizType = {
-    _id: '123',
-    title: 'Sample Quiz',
-    content: ['::Question 1:: What is 2+2? {=4 ~3 ~5}'],
-    folderId: 'folderId',
-    folderName: 'folderName',
-    userId: 'userId',
-    created_at: new Date(),
-    updated_at: new Date(),
-};
-
-describe('DownloadQuizModal', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-        (ApiService.getQuiz as jest.Mock).mockResolvedValue(mockQuiz);
-        jest.spyOn(console, 'error').mockImplementation(() => {});
-    });
-
-    it('renders without crashing', () => {
-        render(<DownloadQuizModal quiz={mockQuiz} />);
-        expect(screen.getByRole('button', { name: /télécharger quiz/i })).toBeInTheDocument();
-    });
-
-    it('opens modal when download button is clicked', () => {
-        render(<DownloadQuizModal quiz={mockQuiz} />);
-        fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
-        expect(screen.getByText(/choisissez un format de téléchargement/i)).toBeInTheDocument();
-    });
-
-    it('closes modal when a format button is clicked', async () => {
-        render(<DownloadQuizModal quiz={mockQuiz} />);
-        fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
-        fireEvent.click(screen.getByRole('button', { name: /gift/i }));
-        await waitFor(() =>
-            expect(screen.queryByText(/choisissez un format de téléchargement/i)).not.toBeInTheDocument()
-        );
-    });
-
-    it('handles error when quiz API fails', async () => {
-        (ApiService.getQuiz as jest.Mock).mockRejectedValue(new Error('Quiz not found'));
-        render(<DownloadQuizModal quiz={mockQuiz} />);
-        fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
-        fireEvent.click(screen.getByRole('button', { name: /gift/i }));
-        await waitFor(() => {
-		expect(console.error).toHaveBeenCalledWith(
-			expect.any(String),
-			expect.objectContaining({ message: expect.stringContaining("Quiz not found") })
-		      );
-        });
-    });
-
-});
--- a/client/src/components/DownloadQuizModal/DownloadQuizModal.tsx
+++ b/client/src/components/DownloadQuizModal/DownloadQuizModal.tsx
@ -1,173 +0,0 @@
-import React, { useState } from 'react';
-
-import { Dialog, DialogTitle, DialogActions, Button, Tooltip, IconButton } from '@mui/material';
-import { FileDownload } from '@mui/icons-material';
-
-import { QuizType } from '../../Types/QuizType';
-import ApiService from '../../services/ApiService';
-
-import jsPDF from 'jspdf';
-import html2canvas from 'html2canvas';
-import { parse } from 'gift-pegjs';
-import DOMPurify from 'dompurify';
-import Template, { ErrorTemplate } from '../GiftTemplate/templates';
-
-interface DownloadQuizModalProps {
-    quiz: QuizType;
-}
-
-const DownloadQuizModal: React.FC<DownloadQuizModalProps> = ({ quiz }) => {
-    const [open, setOpen] = useState(false);
-
-    const handleOpenModal = () => setOpen(true);
-
-    const handleCloseModal = () => setOpen(false);
-
-    const handleDownload = async (format: 'txt' | 'pdf-with-answers' | 'pdf-without-answers') => {
-        switch (format) {
-            case 'txt':
-                await downloadTxtFile(quiz);
-                break;
-            case 'pdf-with-answers':
-                await downloadPdfFile(quiz, true);
-                break;
-            case 'pdf-without-answers':
-                await downloadPdfFile(quiz, false);
-                break;
-        }
-        handleCloseModal();
-    };
-
-    const downloadTxtFile = async (quiz: QuizType) => {
-        try {
-            const selectedQuiz = await ApiService.getQuiz(quiz._id) as QuizType;
-            if (!selectedQuiz) throw new Error('Quiz not found');
-
-            let quizContent = "";
-            selectedQuiz.content.forEach((question) => {
-                const formattedQuestion = question.trim();
-                if (formattedQuestion !== '') quizContent += formattedQuestion + '\n\n';
-            });
-
-            const blob = new Blob([quizContent], { type: 'text/plain' });
-            const a = document.createElement('a');
-            a.download = `${selectedQuiz.title}.gift`;
-            a.href = window.URL.createObjectURL(blob);
-            a.click();
-        } catch (error) {
-            console.error('Error exporting quiz:', error);
-        }
-    };
-
-    const downloadPdfFile = async (quiz: QuizType, withAnswers: boolean) => {
-        try {
-            const selectedQuiz = await ApiService.getQuiz(quiz._id) as QuizType;
-            if (!selectedQuiz) throw new Error('Quiz not found');
-
-
-            let previewHTML = '<h2>' + selectedQuiz.title + '</h2>';
-            selectedQuiz.content.forEach((giftQuestion) => {
-                try {
-                    const question = parse(giftQuestion);
-
-                    previewHTML += Template(question[0], {
-                        preview: true,
-                        theme: 'light',
-                    });
-                } catch (error) {
-                    if (error instanceof Error) {
-                        previewHTML += ErrorTemplate(giftQuestion, error.message );
-                    } else {
-                        previewHTML += ErrorTemplate(giftQuestion, 'Erreur inconnue');
-                    }
-                }
-            });
-
-            if (!withAnswers) {
-                const svgRegex = /<svg[^>]*>([\s\S]*?)<\/svg>/gi;
-                previewHTML = previewHTML.replace(svgRegex, '');
-                const placeholderRegex = /(placeholder=")[^"]*(")/gi;
-                previewHTML = previewHTML.replace(placeholderRegex, '$1$2');
-                const feedbackContainerRegex = /<(div|span)[^>]*class="feedback-container"[^>]*>[\s\S]*?<\/div>/gi;
-                previewHTML = previewHTML.replace(feedbackContainerRegex, '');
-                const answerClassRegex = /<(div|span)[^>]*class="[^"]*answer[^"]*"[^>]*>[\s\S]*?<\/\1>/gi;
-                previewHTML = previewHTML.replace(answerClassRegex, '');
-                const bonneReponseRegex = /<p[^>]*>[^<]*bonne réponse[^<]*<\/p>/gi;
-                previewHTML = previewHTML.replace(bonneReponseRegex, '');
-                const AllAnswersFieldRegex = /<(p|span)[^>]*>\s*Réponse:\s*<\/\1>\s*<input[^>]*>/gi
-                previewHTML = previewHTML.replace(AllAnswersFieldRegex, '');
-
-            }
-
-            const sanitizedHTML = DOMPurify.sanitize(previewHTML);
-
-            console.log('previewHTML:', sanitizedHTML);
-
-            const tempDiv = document.createElement('div');
-            tempDiv.innerHTML = sanitizedHTML;
-            document.body.appendChild(tempDiv);
-
-            // allowTaint and useCORS are set to true to allow cross-origin images to be used in the canvas
-            const canvas = await html2canvas(tempDiv, { scale: 2, useCORS: true, allowTaint: true });
-
-            document.body.removeChild(tempDiv);
-
-            const pdf = new jsPDF('p', 'mm', 'letter');
-            const pageWidth = pdf.internal.pageSize.width;
-            const pageHeight = pdf.internal.pageSize.height;
-            const margin = 10;
-            const imgWidth = pageWidth - 2 * margin;
-            
-            let yOffset = 0;
-
-            while (yOffset < canvas.height) {
-                const pageCanvas = document.createElement('canvas');
-                pageCanvas.width = canvas.width;
-                pageCanvas.height = Math.min(canvas.height - yOffset, (pageHeight - 2 * margin) * (canvas.width / imgWidth));
-
-                const pageCtx = pageCanvas.getContext('2d');
-                if (pageCtx) {
-                    pageCtx.drawImage(canvas, 0, yOffset, canvas.width, pageCanvas.height, 0, 0, pageCanvas.width, pageCanvas.height);
-                }
-
-                const pageImgData = pageCanvas.toDataURL('image/png');
-
-               if (yOffset > 0) pdf.addPage();
-
-                pdf.addImage(pageImgData, 'PNG', margin, margin, imgWidth, (pageCanvas.height * imgWidth) / pageCanvas.width);
-
-                yOffset += pageCanvas.height;
-            }
-
-
-            const filename = withAnswers
-                ? `${selectedQuiz.title}_avec_reponses.pdf`
-                : `${selectedQuiz.title}_sans_reponses.pdf`;
-
-            pdf.save(filename);
-        } catch (error) {
-            console.error('Error exporting quiz as PDF:', error);
-        }
-    };
-
-    return (
-        <>
-            <Tooltip title="Télécharger quiz" placement="top">
-                <IconButton color="primary" onClick={handleOpenModal}>
-                    <FileDownload />
-                </IconButton>
-            </Tooltip>
-
-            <Dialog open={open} onClose={handleCloseModal} fullWidth maxWidth="xs">
-                <DialogTitle sx={{ textAlign: "center" }}>Choisissez un format de téléchargement</DialogTitle>
-                <DialogActions sx={{ display: "flex", justifyContent: "center", gap: 2 }}>
-                    <Button onClick={() => handleDownload('txt')}>GIFT</Button>
-                    <Button onClick={() => handleDownload('pdf-with-answers')}> PDF avec réponses</Button>
-                    <Button onClick={() => handleDownload('pdf-without-answers')}>PDF sans réponses</Button>
-                </DialogActions>
-            </Dialog>
-        </>
-    );
-};
-
-export default DownloadQuizModal;
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@ -2,7 +2,6 @@ import { Link, useNavigate } from 'react-router-dom';
 import * as React from 'react';
 import './header.css';
 import { Button } from '@mui/material';
-import ExitToAppIcon from '@mui/icons-material/ExitToApp';

 interface HeaderProps {
    isLoggedIn: boolean;
@ -29,9 +28,8 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
                        handleLogout();
                        navigate('/');
                    }}
-                    startIcon={<ExitToAppIcon />}
                >
-                    Déconnexion
+                    Logout
                </Button>
            )}

--- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@ -59,6 +59,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                    disabled={disableButton}
                >
                    {showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``}
+                    <div className={`circle ${selectedTrue}`}>V</div>
                    <div className={`answer-text ${selectedTrue}`}>Vrai</div>

                    {showAnswer && answer && question.trueFormattedFeedback && (
@ -75,6 +76,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {

                >
                    {showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``}
+                    <div className={`circle ${selectedFalse}`}>F</div>
                    <div className={`answer-text ${selectedFalse}`}>Faux</div>

                    {showAnswer && !answer && question.falseFormattedFeedback && (
--- a/client/src/components/StudentWaitPage/StudentWaitPage.tsx
+++ b/client/src/components/StudentWaitPage/StudentWaitPage.tsx
@ -26,7 +26,8 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
                    variant="contained"
                    onClick={handleLaunchClick}
                    startIcon={<PlayArrow />}
-                    sx={{ fontWeight: 600, fontSize: 20, width: 'auto' }}
+                    fullWidth
+                    sx={{ fontWeight: 600, fontSize: 20 }}
                >
                    Lancer 
                </Button> 
--- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
+++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
@ -116,7 +116,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleFeedbackDialogClose} color="primary">
-                        Fermer
+                        OK
                    </Button>
                </DialogActions>
            </Dialog>
--- a/client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx
+++ b/client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx
@ -44,6 +44,7 @@ const SimpleLogin: React.FC = () => {
                variant="outlined"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
+                placeholder="Nom d'utilisateur"
                sx={{ marginBottom: '1rem' }}
                fullWidth
            />
@ -54,6 +55,7 @@ const SimpleLogin: React.FC = () => {
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Nom de la salle"
                sx={{ marginBottom: '1rem' }}
                fullWidth
            />
--- a/client/src/pages/Teacher/Dashboard/Dashboard.tsx
+++ b/client/src/pages/Teacher/Dashboard/Dashboard.tsx
@ -33,13 +33,13 @@ import {
 import {
    Search,
    DeleteOutline,
+    FileDownload,
    Add,
    Upload,
    FolderCopy,
    ContentCopy,
-    Edit
+    Edit,
 } from '@mui/icons-material';
-import DownloadQuizModal from 'src/components/DownloadQuizModal/DownloadQuizModal';
 import ShareQuizModal from 'src/components/ShareQuizModal/ShareQuizModal';

 // Create a custom-styled Card component
@ -65,7 +65,6 @@ const Dashboard: React.FC = () => {
    const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
    const [errorMessage, setErrorMessage] = useState('');
    const [showErrorDialog, setShowErrorDialog] = useState(false);
-    const [isSearchVisible, setIsSearchVisible] = useState(false);

    // Filter quizzes based on search term
    // const filteredQuizzes = quizzes.filter(quiz =>
@ -105,7 +104,7 @@ const Dashboard: React.FC = () => {

        fetchData();
    }, []);
-
+    
    useEffect(() => {
        if (rooms.length > 0 && !selectedRoom) {
            selectRoom(rooms[rooms.length - 1]);
@ -121,44 +120,41 @@ const Dashboard: React.FC = () => {
        }
    };

-    const toggleSearchVisibility = () => {
-        setIsSearchVisible(!isSearchVisible);
-    };
+  // Créer une salle
+  const createRoom = async (title: string) => {
+    // Créer la salle et récupérer l'objet complet
+    const newRoom = await ApiService.createRoom(title);
+    
+    // Mettre à jour la liste des salles
+    const updatedRooms = await ApiService.getUserRooms();
+    setRooms(updatedRooms as RoomType[]);
+    
+    // Sélectionner la nouvelle salle avec son ID
+    selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
+  };

-    // Créer une salle
-    const createRoom = async (title: string) => {
-        // Créer la salle et récupérer l'objet complet
-        const newRoom = await ApiService.createRoom(title);

-        // Mettre à jour la liste des salles
-        const updatedRooms = await ApiService.getUserRooms();
-        setRooms(updatedRooms as RoomType[]);
+  // Sélectionner une salle
+  const selectRoomByName = (roomId: string) => {
+    const room = rooms.find(r => r._id === roomId);
+    selectRoom(room);
+    localStorage.setItem('selectedRoomId', roomId);
+  };

-        // Sélectionner la nouvelle salle avec son ID
-        selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
-    };
-
-    // Sélectionner une salle
-    const selectRoomByName = (roomId: string) => {
-        const room = rooms.find((r) => r._id === roomId);
-        selectRoom(room);
-        localStorage.setItem('selectedRoomId', roomId);
-    };
-
-    const handleCreateRoom = async () => {
-        if (newRoomTitle.trim()) {
-            try {
+  const handleCreateRoom = async () => {
+    if (newRoomTitle.trim()) {
+      try {
                await createRoom(newRoomTitle);
                const userRooms = await ApiService.getUserRooms();
                setRooms(userRooms as RoomType[]);
-                setOpenAddRoomDialog(false);
-                setNewRoomTitle('');
-            } catch (error) {
-                setErrorMessage(error instanceof Error ? error.message : 'Erreur inconnue');
-                setShowErrorDialog(true);
-            }
-        }
-    };
+        setOpenAddRoomDialog(false);
+        setNewRoomTitle('');
+      } catch (error) {
+        setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue");
+        setShowErrorDialog(true);
+      }
+    }
+  };

    const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
        setSelectedFolderId(event.target.value);
@ -263,6 +259,46 @@ const Dashboard: React.FC = () => {
        return true;
    };

+    const downloadTxtFile = async (quiz: QuizType) => {
+        try {
+            const selectedQuiz = (await ApiService.getQuiz(quiz._id)) as QuizType;
+            //quizzes.find((quiz) => quiz._id === quiz._id);
+
+            if (!selectedQuiz) {
+                throw new Error('Selected quiz not found');
+            }
+
+            //const { title, content } = selectedQuiz;
+            let quizContent = '';
+            const title = selectedQuiz.title;
+            console.log(selectedQuiz.content);
+            selectedQuiz.content.forEach((question, qIndex) => {
+                const formattedQuestion = question.trim();
+                // console.log(formattedQuestion);
+                if (formattedQuestion !== '') {
+                    quizContent += formattedQuestion + '\n';
+                    if (qIndex !== selectedQuiz.content.length - 1) {
+                        quizContent += '\n';
+                    }
+                }
+            });
+
+            if (!validateQuiz(selectedQuiz.content)) {
+                window.alert(
+                    'Attention! Ce quiz contient des questions invalides selon le format GIFT.'
+                );
+            }
+            const blob = new Blob([quizContent], { type: 'text/plain' });
+            const a = document.createElement('a');
+            const filename = title;
+            a.download = `${filename}.gift`;
+            a.href = window.URL.createObjectURL(blob);
+            a.click();
+        } catch (error) {
+            console.error('Error exporting selected quiz:', error);
+        }
+    };
+
    const handleCreateFolder = async () => {
        try {
            const folderTitle = prompt('Titre du dossier');
@ -361,68 +397,35 @@ const Dashboard: React.FC = () => {
        } else {
            const randomSixDigit = Math.floor(100000 + Math.random() * 900000);
            navigate(`/teacher/manage-room/${quiz._id}/${randomSixDigit}`);
-        }
+        }    
    };

    return (
        <div className="dashboard">
-            {/* Conteneur pour le titre et le sélecteur de salle */}
-            <div
-                style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: '20px'
-                }}
-            >
-                {/* Titre tableau de bord */}
-                <div className="title" style={{ fontSize: '30px', fontWeight: 'bold' }}>
-                    Tableau de bord
-                </div>
+            <div className="title">Tableau de bord</div>

-                {/* Sélecteur de salle */}
-                <div
-                    className="roomSelection"
-                    style={{ display: 'flex', justifyContent: 'flex-end', gap: '15px' }}
-                >
-                    <select
-                        value={selectedRoom?._id || ''}
-                        onChange={(e) => handleSelectRoom(e)}
-                        id="room-select"
-                        style={{
-                            padding: '8px 12px',
-                            fontSize: '14px',
-                            borderRadius: '8px',
-                            border: '1px solid #ccc',
-                            backgroundColor: '#fff',
-                            maxWidth: '200px',
-                            cursor: 'pointer',
-                            fontWeight: '500'
-                        }}
-                    >
-                        <option value="" disabled>
-                            Sélectionner une salle
+            <div className="roomSelection">
+                <label htmlFor="select-room">Sélectionner une salle: </label>
+                <select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
+                    <option value="" disabled>
+                        -- Sélectionner une salle --
+                    </option>
+                    {rooms.map((room) => (
+                        <option key={room._id} value={room._id}>
+                            {room.title}
                        </option>
-                        {rooms.map((room) => (
-                            <option key={room._id} value={room._id}>
-                                {room.title}
-                            </option>
-                        ))}
-                        <option
-                            value="add-room"
-                            style={{
-                                color: 'black',
-                                backgroundColor: '#f0f0f0',
-                                fontWeight: 'bold'
-                            }}
-                        >
-                            Ajouter une salle
-                        </option>
-                    </select>
-                </div>
+                    ))}
+                    <option value="add-room">Ajouter salle</option>
+                </select>
+
            </div>

-            {/* Dialog pour créer une salle */}
+            {selectedRoom && (
+                <div className="roomTitle">
+                    <h2>Salle sélectionnée: {selectedRoom.title}</h2>
+                </div>
+            )}
+
            <Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}>
                <DialogTitle>Créer une nouvelle salle</DialogTitle>
                <DialogContent>
@ -447,17 +450,24 @@ const Dashboard: React.FC = () => {
                </DialogActions>
            </Dialog>

-            <div
-                style={{
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignItems: 'center',
-                    width: '100%',
-                    gap: '20px'
-                }}
-            ></div>
+            <div className="search-bar">
+                <TextField
+                    onChange={handleSearch}
+                    value={searchTerm}
+                    placeholder="Rechercher un quiz par son titre"
+                    fullWidth
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton>
+                                    <Search />
+                                </IconButton>
+                            </InputAdornment>
+                        )
+                    }}
+                />
+            </div>

-            {/* Conteneur principal avec les actions et la liste des quiz */}
            <div className="folder">
                <div className="select">
                    <NativeSelect
@ -465,18 +475,13 @@ const Dashboard: React.FC = () => {
                        color="primary"
                        value={selectedFolderId}
                        onChange={handleSelectFolder}
-                        sx={{
-                            padding: '6px 12px',
-                            maxWidth: '180px',
-                            borderRadius: '8px',
-                            borderColor: '#e0e0e0',
-                            '&:hover': { borderColor: '#5271FF' }
-                        }}
                    >
-                        <option value="">Tous les dossiers...</option>
-                        {folders.map((folder) => (
+                        <option value=""> Tous les dossiers... </option>
+
+                        {folders.map((folder: FolderType) => (
                            <option value={folder._id} key={folder._id}>
-                                {folder.title}
+                                {' '}
+                                {folder.title}{' '}
                            </option>
                        ))}
                    </NativeSelect>
@ -492,130 +497,65 @@ const Dashboard: React.FC = () => {

                    <Tooltip title="Renommer dossier" placement="top">
                        <div>
-                            <IconButton
-                                color="primary"
-                                onClick={handleRenameFolder}
-                                disabled={selectedFolderId == ''} // cannot action on all
-                            >
-                                {' '}
-                                <Edit />{' '}
-                            </IconButton>
+                        <IconButton
+                            color="primary"
+                            onClick={handleRenameFolder}
+                            disabled={selectedFolderId == ''} // cannot action on all
+                        >
+                            {' '}
+                            <Edit />{' '}
+                        </IconButton>
                        </div>
                    </Tooltip>

                    <Tooltip title="Dupliquer dossier" placement="top">
                        <div>
-                            <IconButton
-                                color="primary"
-                                onClick={handleDuplicateFolder}
-                                disabled={selectedFolderId == ''} // cannot action on all
-                            >
-                                {' '}
-                                <FolderCopy />{' '}
-                            </IconButton>
+                        <IconButton
+                            color="primary"
+                            onClick={handleDuplicateFolder}
+                            disabled={selectedFolderId == ''} // cannot action on all
+                        >
+                            {' '}
+                            <FolderCopy />{' '}
+                        </IconButton>
                        </div>
                    </Tooltip>

                    <Tooltip title="Supprimer dossier" placement="top">
                        <div>
-                            <IconButton
-                                aria-label="delete"
-                                color="primary"
-                                onClick={handleDeleteFolder}
-                                disabled={selectedFolderId == ''} // cannot action on all
-                            >
-                                {' '}
-                                <DeleteOutline />{' '}
-                            </IconButton>
+                        <IconButton
+                            aria-label="delete"
+                            color="primary"
+                            onClick={handleDeleteFolder}
+                            disabled={selectedFolderId == ''} // cannot action on all
+                        >
+                            {' '}
+                            <DeleteOutline />{' '}
+                        </IconButton>
                        </div>
                    </Tooltip>
                </div>
            </div>

-            <div
-                className="search-bar"
-                style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    gap: '20px',
-                    width: '100%'
-                }}
-            >
-                <div style={{ flex: 1 }}>
-                    {!isSearchVisible ? (
-                        <IconButton
-                            onClick={toggleSearchVisibility}
-                            sx={{
-                                borderRadius: '8px',
-                                border: '1px solid #ccc',
-                                padding: '8px 12px',
-                                backgroundColor: '#fff',
-                                color: '#5271FF'
-                            }}
-                        >
-                            <Search />
-                        </IconButton>
-                    ) : (
-                        <TextField
-                            onChange={handleSearch}
-                            value={searchTerm}
-                            placeholder="Rechercher un quiz"
-                            fullWidth
-                            autoFocus
-                            sx={{
-                                borderRadius: '8px',
-                                border: '1px solid #ccc',
-                                padding: '8px 12px',
-                                backgroundColor: '#fff',
-                                fontWeight: 500,
-                                width: '100%',
-                                maxWidth: '1000px'
-                            }}
-                            InputProps={{
-                                endAdornment: (
-                                    <InputAdornment position="end">
-                                        <IconButton
-                                            onClick={toggleSearchVisibility}
-                                            sx={{
-                                                borderRadius: '8px',
-                                                border: '1px solid #ccc',
-                                                backgroundColor: '#fff',
-                                                color: '#5271FF'
-                                            }}
-                                        >
-                                            <Search />
-                                        </IconButton>
-                                    </InputAdornment>
-                                )
-                            }}
-                        />
-                    )}
-                </div>
+            <div className="ajouter">
+                <Button
+                    variant="outlined"
+                    color="primary"
+                    startIcon={<Add />}
+                    onClick={handleCreateQuiz}
+                >
+                    Ajouter un nouveau quiz
+                </Button>

-                {/* À droite : les boutons */}
-                <div style={{ display: 'flex', gap: '12px' }}>
-                    <Button
-                        variant="outlined"
-                        color="primary"
-                        startIcon={<Add />}
-                        onClick={handleCreateQuiz}
-                        sx={{ borderRadius: '8px', minWidth: 'auto', padding: '4px 12px' }}
-                    >
-                        Nouveau quiz
-                    </Button>
-
-                    <Button
-                        variant="outlined"
-                        color="primary"
-                        startIcon={<Upload />}
-                        onClick={handleOnImport}
-                    >
-                        Importer
-                    </Button>
-                </div>
+                <Button
+                    variant="outlined"
+                    color="primary"
+                    startIcon={<Upload />}
+                    onClick={handleOnImport}
+                >
+                    Import
+                </Button>
            </div>
-
            <div className="list">
                {Object.keys(quizzesByFolder).map((folderName) => (
                    <CustomCard key={folderName} className="folder-card">
@ -631,9 +571,7 @@ const Dashboard: React.FC = () => {
                                                    onClick={() => handleLancerQuiz(quiz)}
                                                    disabled={!validateQuiz(quiz.content)}
                                                >
-                                                    {`${quiz.title} (${
-                                                        quiz.content.length
-                                                    } question${
+                                                    {`${quiz.title} (${quiz.content.length} question${
                                                        quiz.content.length > 1 ? 's' : ''
                                                    })`}
                                                </Button>
@ -641,10 +579,16 @@ const Dashboard: React.FC = () => {
                                        </Tooltip>
                                    </div>

-                                    <div className='actions'>
-                                        <div className="dashboard">
-                                                    <DownloadQuizModal quiz={quiz} />
-                                        </div>
+                                    <div className="actions">
+                                        <Tooltip title="Télécharger" placement="top">
+                                            <IconButton
+                                                color="primary"
+                                                onClick={() => downloadTxtFile(quiz)}
+                                            >
+                                                {' '}
+                                                <FileDownload />{' '}
+                                            </IconButton>
+                                        </Tooltip>

                                        <Tooltip title="Modifier" placement="top">
                                            <IconButton
@ -665,20 +609,21 @@ const Dashboard: React.FC = () => {
                                                <ContentCopy />{' '}
                                            </IconButton>
                                        </Tooltip>
-                                        <div className="quiz-share">
-                                            <ShareQuizModal quiz={quiz} />
-                                        </div>

                                        <Tooltip title="Supprimer" placement="top">
                                            <IconButton
                                                aria-label="delete"
-                                                color="error"
+                                                color="primary"
                                                onClick={() => handleRemoveQuiz(quiz)}
                                            >
                                                {' '}
                                                <DeleteOutline />{' '}
                                            </IconButton>
                                        </Tooltip>
+
+                                        <div className="quiz-share">
+                                                    <ShareQuizModal quiz={quiz} />
+                                        </div>
                                    </div>
                                </div>
                            ))}
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@ -9,7 +9,7 @@ import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet';
 import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview';

 import { QuizType } from '../../../Types/QuizType';
-import SaveIcon from '@mui/icons-material/Save';
+
 import './editorQuiz.css';
 import { Button, TextField, NativeSelect, Divider } from '@mui/material';
 import ReturnButton from 'src/components/ReturnButton/ReturnButton';
@ -175,65 +175,47 @@ const QuizForm: React.FC = () => {
    }

    return (
-        <div className="quizEditor">
-            <div
-                className="editHeader"
-                style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: '32px'
-                }}
-            >
+        <div className='quizEditor'>
+
+            <div className='editHeader'>
                <ReturnButton
                    askConfirm
                    message={`Êtes-vous sûr de vouloir quitter l'éditeur sans sauvegarder le questionnaire?`}
                />

-<Button
-                    variant="contained"
-                    onClick={handleQuizSave}
-                    sx={{ display: 'flex', alignItems: 'center' }}
-                >
-                    <SaveIcon sx={{ fontSize: 20 }} />
-                    Enregistrer
-                </Button>
-            </div>
+                <div className='title'>Éditeur de quiz</div>

-            <div style={{ textAlign: 'center', marginTop: '30px' }}>
-                <div className="title">Éditeur de quiz</div>
+                <div className='dumb'></div>
            </div>

            {/* <h2 className="subtitle">Éditeur</h2> */}

-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <TextField
-                    onChange={handleQuizTitleChange}
-                    value={quizTitle}
-                    color="primary"
-                    placeholder="Titre du quiz"
-                    label="Titre du quiz"
-                    sx={{ width: '200px', marginTop: '50px' }}
-                />
-             <NativeSelect
-                    id="select-folder"
-                    color="primary"
-                    value={selectedFolder}
-                    onChange={handleSelectFolder}
-                    disabled={!isNewQuiz}
-                    style={{ marginBottom: '16px', width: '200px', marginTop: '10px' }}
+            <TextField
+                onChange={handleQuizTitleChange}
+                value={quizTitle}
+                placeholder="Titre du quiz"
+                label="Titre du quiz"
+                fullWidth
+            />
+            <label>Choisir un dossier:
+            <NativeSelect
+                id="select-folder"
+                color="primary"
+                value={selectedFolder}
+                onChange={handleSelectFolder}
+                disabled={!isNewQuiz}
+                style={{ marginBottom: '16px' }} // Ajout de marge en bas
                >
-                    <option disabled value="">
-                        Choisir un dossier...
-                    </option>
-                    {folders.map((folder: FolderType) => (
-                        <option value={folder._id} key={folder._id}>
-                            {folder.title}
-                        </option>
-                    ))}
-                </NativeSelect>
-            </div>
+                <option disabled value=""> Choisir un dossier... </option>

+                {folders.map((folder: FolderType) => (
+                    <option value={folder._id} key={folder._id}> {folder.title} </option>
+                ))}
+            </NativeSelect></label>
+
+            <Button variant="contained" onClick={handleQuizSave}>
+                Enregistrer
+            </Button>

            <Divider style={{ margin: '16px 0' }} />

--- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
+++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
@ -29,7 +29,8 @@ import {
 } from '@mui/material';
 import { checkIfIsCorrect } from './useRooms';
 import { QRCodeCanvas } from 'qrcode.react';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+

 const ManageRoom: React.FC = () => {
    const navigate = useNavigate();
@ -415,7 +416,7 @@ const ManageRoom: React.FC = () => {

    return (
        <div className="room">
-            {/* En-tête avec bouton Disconnect à gauche et QR code à droite */}
+            {/* En-tête avec titre et bouton QR code*/}
            <div
                style={{
                    display: 'flex',
@ -424,11 +425,7 @@ const ManageRoom: React.FC = () => {
                    marginBottom: '20px'
                }}
            >
-                <DisconnectButton
-                    onReturn={handleReturn}
-                    askConfirm
-                    message={`Êtes-vous sûr de vouloir quitter?`}
-                />
+                <h1 style={{ margin: 0 }}>Salle : {formattedRoomName}</h1>

                <Button
                    variant="contained"
@ -440,14 +437,13 @@ const ManageRoom: React.FC = () => {
                </Button>
            </div>

+            {/* Modale QR Code */}
            <Dialog
                open={showQrModal}
                onClose={() => setShowQrModal(false)}
                aria-labelledby="qr-modal-title"
            >
-                <DialogTitle id="qr-modal-title">
-                    Rejoindre la salle: {formattedRoomName}
-                </DialogTitle>
+                <DialogTitle id="qr-modal-title">Rejoindre la salle: {formattedRoomName}</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        Scannez ce QR code ou partagez le lien ci-dessous pour rejoindre la salle :
@ -461,13 +457,13 @@ const ManageRoom: React.FC = () => {
                        <h3>URL de participation :</h3>
                        <p>{roomUrl}</p>
                        <Button
-                            variant="contained"
-                            startIcon={<ContentCopyIcon />}
-                            onClick={handleCopy}
-                            style={{ marginTop: '10px' }}
-                        >
-                            {copied ? 'Copié !' : 'Copier le lien'}
-                        </Button>
+                        variant="contained"
+                        startIcon={<ContentCopyIcon />}
+                        onClick={handleCopy}
+                        style={{ marginTop: '10px' }}
+                    >
+                        {copied ? "Copié !" : "Copier le lien"}
+                    </Button>
                    </div>
                </DialogContent>
                <DialogActions>
@ -476,34 +472,31 @@ const ManageRoom: React.FC = () => {
                    </Button>
                </DialogActions>
            </Dialog>
-
            <div className="roomHeader">
+                <DisconnectButton
+                    onReturn={handleReturn}
+                    askConfirm
+                    message={`Êtes-vous sûr de vouloir quitter?`}
+                />
+
                <div
+                    className="headerContent"
                    style={{
                        display: 'flex',
-                        justifyContent: 'center',
+                        justifyContent: 'space-between',
                        alignItems: 'center',
-                        width: '100%',
-                        marginBottom: '10px'
+                        width: '100%'
                    }}
                >
-                    <h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
-                        Salle : {formattedRoomName}
+                    {
                        <div
-                            className="userCount subtitle"
-                            style={{
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                fontSize: '1.5rem',
-                                fontWeight: 'bold',
-                                marginLeft: '20px',
-                                marginBottom: '0px'
-                            }}
+                            className="userCount subtitle smallText"
+                            style={{ display: 'flex', justifyContent: 'flex-end' }}
                        >
-                            <GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
+                            <GroupIcon style={{ marginRight: '5px' }} />
                            {students.length}/60
                        </div>
-                    </h1>
+                    }
                </div>

                <div className="dumb"></div>
--- a/client/src/pages/Teacher/ManageRoom/manageRoom.css
+++ b/client/src/pages/Teacher/ManageRoom/manageRoom.css
@ -2,31 +2,25 @@
 .room .roomHeader {
    width: 100%;
    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    position: relative;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: stretch
 }
 .room .roomHeader .returnButton {
-    position: absolute;
-    top: 10px;
-    left: 0;
-    z-index: 10;
+    flex-basis: 10%;
+
+    display: flex;
+    justify-content: center;
 }

 .room .roomHeader .centerTitle {
    flex-basis: auto;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin-top: 40px;
-}

-.room .roomHeader .headerContent {
-    width: 100%;
    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 60px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+
 }

 .room .roomHeader .dumb {
@ -40,6 +34,7 @@

    overflow: auto;
    justify-content: center;
+    /* align-items: center; */
 }

 .room .finishQuizButton {
@ -49,7 +44,146 @@
    width: 100%;
 }

-.room h1 {
-    text-align: center;
-    margin-top: 50px;
-}
+
+
+/* .create-room-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.manage-room-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.quiz-setup-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 2rem;
+}
+
+.quiz-mode-selection {
+    display: flex;
+    flex-grow: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    height: 15vh;
+}
+
+.users-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+    gap: 2vh;
+}
+
+.launch-quiz-btn {
+    width: 20vw;
+    height: 11vh;
+    margin-top: 2vh;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.mode-choice {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 20vw;
+    margin-top: 2vh;
+}
+
+.user {
+    background-color: #e7dad1;
+    padding: 10px 20px;
+    border: 1px solid black;
+    border-radius: 10px;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.bottom-btn {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    margin-top: 2vh;
+}
+
+.room-container {
+    position: relative;
+    width: 100%;
+    max-width: 60vw;
+}
+
+@media only screen and (max-device-width: 768px) {
+    .room-container {
+        max-width: 100%;
+    }
+}
+
+.room-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+}
+
+.room-name-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+}
+.user-item {
+    width: 100%;
+}
+
+.flex-column-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 85vh;
+    overflow: auto;
+}
+
+.preview-and-result-container {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.nextQuestionButton {
+    align-self: flex-end;
+    margin-bottom: 5rem !important;
+}
+
+.top-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+@media only screen and (max-device-height: 4000px) {
+    .flex-column-wrapper {
+        height: 60vh;
+    }
+}
+
+@media only screen and (max-device-height: 1079px) {
+    .flex-column-wrapper {
+        height: 50vh;
+    }
+}
+
+@media only screen and (max-device-height: 741px) {
+    .flex-column-wrapper {
+        height: 40vh;
+    }
+} */
--- a/client/src/pages/Teacher/Share/Share.tsx
+++ b/client/src/pages/Teacher/Share/Share.tsx
@ -5,7 +5,6 @@ import './share.css';
 import { Button, NativeSelect, Typography, Box } from '@mui/material';
 import ReturnButton from 'src/components/ReturnButton/ReturnButton';
 import ApiService from '../../../services/ApiService';
-import SaveIcon from '@mui/icons-material/Save';

 const Share: React.FC = () => {
    const navigate = useNavigate();
@ -168,7 +167,6 @@ const Share: React.FC = () => {
                    </NativeSelect>

                    <Button variant="contained" onClick={handleQuizSave} className="saveButton">
-                    {<SaveIcon sx={{ fontSize: 20, marginRight: '8px' }} />}
                        Enregistrer
                    </Button>
                </div>