Merge 85988697d4 into 069b62957f

Update README.md

README.md

@@ -6,7 +6,7 @@
 
 # EvalueTonSavoir
 
-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.
+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.
 
 ## Key Features
 

client/.env.development

@@ -1,2 +1,3 @@
 VITE_BACKEND_URL=http://localhost:4400
 VITE_BACKEND_SOCKET_URL=http://localhost:4400
+VITE_AZURE_BACKEND_URL=http://localhost:4400

client/package.json

@@ -18,17 +18,18 @@
         "@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.1",
+        "@mui/icons-material": "^7.0.2",
         "@mui/lab": "^5.0.0-alpha.153",
-        "@mui/material": "^7.0.1",
+        "@mui/material": "^7.0.2",
         "@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.11",
+        "katex": "^0.16.22",
         "marked": "^15.0.8",
         "nanoid": "^5.1.5",
         "qrcode.react": "^4.2.0",
@@ -73,7 +74,7 @@
         "ts-jest": "^29.3.1",
         "typescript": "^5.8.3",
         "typescript-eslint": "^8.29.1",
-        "vite": "^6.2.0",
+        "vite": "^6.2.6",
         "vite-plugin-environment": "^1.1.3"
     }
 }

client/src/__tests__/components/DownloadQuizModal/DownloadQuizModal.test.tsx

@@ -0,0 +1,72 @@
+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") })
+		      );
+        });
+    });
+
+});

client/src/components/DownloadQuizModal/DownloadQuizModal.tsx

@@ -0,0 +1,173 @@
+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;

client/src/components/GiftTemplate/templates/TextTypeTemplate.ts

@@ -1,4 +1,4 @@
-import marked from 'src/markedConfig';
+import marked, {attachImageModalListeners} from 'src/markedConfig';
 
 import katex from 'katex';
 import { TextFormat } from 'gift-pegjs';
@@ -53,6 +53,7 @@ export function FormattedTextTemplate(formattedText: TextFormat): string {
             break;
         case 'markdown':
             parsedText = marked.parse(formatText, { breaks: true, gfm: true }) as string; // <br> for newlines
+            attachImageModalListeners();
             result = parsedText.replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2');
             break;
         default:

client/src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ 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;
@@ -28,8 +29,9 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
                         handleLogout();
                         navigate('/');
                     }}
+                    startIcon={<ExitToAppIcon />}
                 >
-                    Logout
+                    Déconnexion
                 </Button>
             )}
 

client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx

@@ -59,7 +59,6 @@ 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 && (
@@ -76,7 +75,6 @@ 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 && (

client/src/components/StudentWaitPage/StudentWaitPage.tsx

@@ -26,8 +26,7 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
                     variant="contained"
                     onClick={handleLaunchClick}
                     startIcon={<PlayArrow />}
-                    fullWidth
+                    sx={{ fontWeight: 600, fontSize: 20, width: 'auto' }}
-                    sx={{ fontWeight: 600, fontSize: 20 }}
                 >
                     Lancer 
                 </Button> 

client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx

@@ -116,7 +116,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={handleFeedbackDialogClose} color="primary">
-                        OK
+                        Fermer
                     </Button>
                 </DialogActions>
             </Dialog>

client/src/markedConfig.ts

@@ -2,15 +2,108 @@ import { marked, Renderer } from 'marked';
 
 // Customized renderer to support image width and height
 //   see https://github.com/markedjs/marked/issues/339#issuecomment-1146363560
+declare global {
+  interface Window {
+    showImageInModal: (src: string, alt: string) => void;
+  }
+}
+
 const renderer = new Renderer();
 
 renderer.image = ({ href, title, text }) => {
   const [width, height] = title?.startsWith('=') ? title.slice(1).split('x').map(v => v.trim()).filter(Boolean) : [];
-    return `<img src="${href}" alt="${text}"${width ? ` width="${width}"` : ''}${height ? ` height="${height}"` : ''}>`;
+  const maxHeight = '15rem'; // Limite maximale de hauteur
-}
 
+  return `
+ <div style="max-height: ${maxHeight}; width: ${width || 'auto'}; height: ${height || 'auto'}; text-align: center; display: flex; justify-content: center; align-items: center">
+      <img 
+          src="${href}" 
+          alt="${text}" 
+          class="modal-image" 
+          style="max-height: ${maxHeight}; width: ${width || 'auto'}; height: ${height || 'auto'}; cursor: zoom-in;" 
+      />
+  </div>
+  `;
+};
 marked.use({
   renderer: renderer
 });
 
+
+if (typeof window !== 'undefined') {
+  window.showImageInModal = (src, alt) => {
+    console.log('showImageInModal called with:', src, alt);
+
+    // Check if a modal already exists
+    const existingModal = document.querySelector('.image-modal');
+    if (existingModal) {
+      // If the modal exists, remove it (close the modal)
+      document.body.removeChild(existingModal);
+      return;
+    }
+
+    // Create the modal container
+    const modal = document.createElement('div');
+    modal.className = 'image-modal'; // Add a class to identify the modal
+    modal.style.position = 'fixed';
+    modal.style.top = '0';
+    modal.style.left = '0';
+    modal.style.width = '100vw';
+    modal.style.height = '100vh';
+    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+    modal.style.display = 'flex';
+    modal.style.justifyContent = 'center';
+    modal.style.alignItems = 'center';
+    modal.style.zIndex = '1000';
+    
+    // Close the modal when the modal itself is clicked
+    modal.onclick = () => {
+      document.body.removeChild(modal);
+    };
+    
+    // Create the image element
+    const img = document.createElement('img');
+    img.src = src;
+    img.alt = alt;
+    
+    img.style.minWidth = '40%';
+    img.style.minHeight = '40%';
+    
+    img.style.cursor = 'zoom-out';
+    
+    // Allow the modal to close when clicking on the image
+    img.onclick = () => {
+      document.body.removeChild(modal);
+    };
+    
+    // Append the image to the modal and the modal to the body
+    modal.appendChild(img);
+    document.body.appendChild(modal);
+  };
+}
+
+export const attachImageModalListeners = () => {
+  const images = document.querySelectorAll('.modal-image');
+
+  images.forEach((image) => {
+    // Remove any existing event listeners by cloning the element
+    const newImage = image.cloneNode(true) as HTMLElement;
+    image.parentNode?.replaceChild(newImage, image);
+
+    // Attach a new event listener
+    newImage.addEventListener('click', (event) => {
+      const target = event.target as HTMLImageElement;
+      const src = target.getAttribute('src');
+      const alt = target.getAttribute('alt');
+      if (src) {
+        window.showImageInModal(src, alt || '');
+      }
+    });
+  });
+};
+
+marked.use({
+  renderer: renderer,
+});
+
 export default marked;

client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx

@@ -44,7 +44,6 @@ const SimpleLogin: React.FC = () => {
                 variant="outlined"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                placeholder="Nom d'utilisateur"
                 sx={{ marginBottom: '1rem' }}
                 fullWidth
             />
@@ -55,7 +54,6 @@ const SimpleLogin: React.FC = () => {
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                placeholder="Nom de la salle"
                 sx={{ marginBottom: '1rem' }}
                 fullWidth
             />

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,6 +65,7 @@ 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 =>
@@ -120,6 +121,10 @@ 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
@@ -133,10 +138,9 @@ const Dashboard: React.FC = () => {
         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);
+        const room = rooms.find((r) => r._id === roomId);
         selectRoom(room);
         localStorage.setItem('selectedRoomId', roomId);
     };
@@ -150,7 +154,7 @@ const Dashboard: React.FC = () => {
                 setOpenAddRoomDialog(false);
                 setNewRoomTitle('');
             } catch (error) {
-        setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue");
+                setErrorMessage(error instanceof Error ? error.message : 'Erreur inconnue');
                 setShowErrorDialog(true);
             }
         }
@@ -259,46 +263,6 @@ 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');
@@ -402,30 +366,63 @@ const Dashboard: React.FC = () => {
 
     return (
         <div className="dashboard">
-            <div className="title">Tableau de bord</div>
+            {/* 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="roomSelection">
+                {/* Sélecteur de salle */}
-                <label htmlFor="select-room">Sélectionner une salle: </label>
+                <div
-                <select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
+                    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 --
+                            Sélectionner une salle
                         </option>
                         {rooms.map((room) => (
                             <option key={room._id} value={room._id}>
                                 {room.title}
                             </option>
                         ))}
-                    <option value="add-room">Ajouter salle</option>
+                        <option
+                            value="add-room"
+                            style={{
+                                color: 'black',
+                                backgroundColor: '#f0f0f0',
+                                fontWeight: 'bold'
+                            }}
+                        >
+                            Ajouter une salle
+                        </option>
                     </select>
-
+                </div>
             </div>
 
-            {selectedRoom && (
+            {/* Dialog pour créer une salle */}
-                <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>
@@ -450,24 +447,17 @@ const Dashboard: React.FC = () => {
                 </DialogActions>
             </Dialog>
 
-            <div className="search-bar">
+            <div
-                <TextField
+                style={{
-                    onChange={handleSearch}
+                    display: 'flex',
-                    value={searchTerm}
+                    justifyContent: 'flex-end',
-                    placeholder="Rechercher un quiz par son titre"
+                    alignItems: 'center',
-                    fullWidth
+                    width: '100%',
-                    InputProps={{
+                    gap: '20px'
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <IconButton>
-                                    <Search />
-                                </IconButton>
-                            </InputAdornment>
-                        )
                 }}
-                />
+            ></div>
-            </div>
 
+            {/* Conteneur principal avec les actions et la liste des quiz */}
             <div className="folder">
                 <div className="select">
                     <NativeSelect
@@ -475,13 +465,18 @@ 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) => (
-                        {folders.map((folder: FolderType) => (
                             <option value={folder._id} key={folder._id}>
-                                {' '}
+                                {folder.title}
-                                {folder.title}{' '}
                             </option>
                         ))}
                     </NativeSelect>
@@ -537,14 +532,77 @@ const Dashboard: React.FC = () => {
                 </div>
             </div>
 
-            <div className="ajouter">
+            <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>
+
+                {/* À 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' }}
                     >
-                    Ajouter un nouveau quiz
+                        Nouveau quiz
                     </Button>
 
                     <Button
@@ -553,9 +611,11 @@ const Dashboard: React.FC = () => {
                         startIcon={<Upload />}
                         onClick={handleOnImport}
                     >
-                    Import
+                        Importer
                     </Button>
                 </div>
+            </div>
+
             <div className="list">
                 {Object.keys(quizzesByFolder).map((folderName) => (
                     <CustomCard key={folderName} className="folder-card">
@@ -571,7 +631,9 @@ 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>
@@ -579,16 +641,10 @@ const Dashboard: React.FC = () => {
                                         </Tooltip>
                                     </div>
 
-                                    <div className="actions">
+                                    <div className='actions'>
-                                        <Tooltip title="Télécharger" placement="top">
+                                        <div className="dashboard">
-                                            <IconButton
+                                                    <DownloadQuizModal quiz={quiz} />
-                                                color="primary"
+                                        </div>
-                                                onClick={() => downloadTxtFile(quiz)}
-                                            >
-                                                {' '}
-                                                <FileDownload />{' '}
-                                            </IconButton>
-                                        </Tooltip>
 
                                         <Tooltip title="Modifier" placement="top">
                                             <IconButton
@@ -609,21 +665,20 @@ 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="primary"
+                                                color="error"
                                                 onClick={() => handleRemoveQuiz(quiz)}
                                             >
                                                 {' '}
                                                 <DeleteOutline />{' '}
                                             </IconButton>
                                         </Tooltip>
-
-                                        <div className="quiz-share">
-                                                    <ShareQuizModal quiz={quiz} />
-                                        </div>
                                     </div>
                                 </div>
                             ))}

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,47 +175,65 @@ const QuizForm: React.FC = () => {
     }
 
     return (
-        <div className='quizEditor'>
+        <div className="quizEditor">
-
+            <div
-            <div className='editHeader'>
+                className="editHeader"
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '32px'
+                }}
+            >
                 <ReturnButton
                     askConfirm
                     message={`Êtes-vous sûr de vouloir quitter l'éditeur sans sauvegarder le questionnaire?`}
                 />
 
-                <div className='title'>Éditeur de quiz</div>
+<Button
+                    variant="contained"
+                    onClick={handleQuizSave}
+                    sx={{ display: 'flex', alignItems: 'center' }}
+                >
+                    <SaveIcon sx={{ fontSize: 20 }} />
+                    Enregistrer
+                </Button>
+            </div>
 
-                <div className='dumb'></div>
+            <div style={{ textAlign: 'center', marginTop: '30px' }}>
+                <div className="title">Éditeur de quiz</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"
-                fullWidth
+                    sx={{ width: '200px', marginTop: '50px' }}
                 />
-            <label>Choisir un dossier:
              <NativeSelect
                     id="select-folder"
                     color="primary"
                     value={selectedFolder}
                     onChange={handleSelectFolder}
                     disabled={!isNewQuiz}
-                style={{ marginBottom: '16px' }} // Ajout de marge en bas
+                    style={{ marginBottom: '16px', width: '200px', marginTop: '10px' }}
                 >
-                <option disabled value=""> Choisir un dossier... </option>
+                    <option disabled value="">
-
+                        Choisir un dossier...
+                    </option>
                     {folders.map((folder: FolderType) => (
-                    <option value={folder._id} key={folder._id}> {folder.title} </option>
+                        <option value={folder._id} key={folder._id}>
+                            {folder.title}
+                        </option>
                     ))}
-            </NativeSelect></label>
+                </NativeSelect>
+            </div>
 
-            <Button variant="contained" onClick={handleQuizSave}>
-                Enregistrer
-            </Button>
 
             <Divider style={{ margin: '16px 0' }} />
 

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

@@ -29,8 +29,7 @@ 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();
@@ -416,7 +415,7 @@ const ManageRoom: React.FC = () => {
 
     return (
         <div className="room">
-            {/* En-tête avec titre et bouton QR code*/}
+            {/* En-tête avec bouton Disconnect à gauche et QR code à droite */}
             <div
                 style={{
                     display: 'flex',
@@ -425,7 +424,11 @@ const ManageRoom: React.FC = () => {
                     marginBottom: '20px'
                 }}
             >
-                <h1 style={{ margin: 0 }}>Salle : {formattedRoomName}</h1>
+                <DisconnectButton
+                    onReturn={handleReturn}
+                    askConfirm
+                    message={`Êtes-vous sûr de vouloir quitter?`}
+                />
 
                 <Button
                     variant="contained"
@@ -437,13 +440,14 @@ 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 :
@@ -462,7 +466,7 @@ const ManageRoom: React.FC = () => {
                             onClick={handleCopy}
                             style={{ marginTop: '10px' }}
                         >
-                        {copied ? "Copié !" : "Copier le lien"}
+                            {copied ? 'Copié !' : 'Copier le lien'}
                         </Button>
                     </div>
                 </DialogContent>
@@ -472,31 +476,34 @@ const ManageRoom: React.FC = () => {
                     </Button>
                 </DialogActions>
             </Dialog>
-            <div className="roomHeader">
-                <DisconnectButton
-                    onReturn={handleReturn}
-                    askConfirm
-                    message={`Êtes-vous sûr de vouloir quitter?`}
-                />
 
+            <div className="roomHeader">
                 <div
-                    className="headerContent"
                     style={{
                         display: 'flex',
-                        justifyContent: 'space-between',
+                        justifyContent: 'center',
                         alignItems: 'center',
-                        width: '100%'
+                        width: '100%',
+                        marginBottom: '10px'
                     }}
                 >
-                    {
+                    <h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                        Salle : {formattedRoomName}
                         <div
-                            className="userCount subtitle smallText"
+                            className="userCount subtitle"
-                            style={{ display: 'flex', justifyContent: 'flex-end' }}
+                            style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                fontWeight: 'bold',
+                                marginLeft: '20px',
+                                marginBottom: '0px'
+                            }}
                         >
-                            <GroupIcon style={{ marginRight: '5px' }} />
+                            <GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
                             {students.length}/60
                         </div>
-                    }
+                    </h1>
                 </div>
 
                 <div className="dumb"></div>

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

@@ -2,25 +2,31 @@
 .room .roomHeader {
     width: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    justify-content: space-between;
+    align-items: flex-start;
-    align-content: stretch
+    position: relative;
 }
 .room .roomHeader .returnButton {
-    flex-basis: 10%;
+    position: absolute;
-
+    top: 10px;
-    display: flex;
+    left: 0;
-    justify-content: center;
+    z-index: 10;
 }
 
 .room .roomHeader .centerTitle {
     flex-basis: auto;
-
     display: flex;
-    flex-direction: column;
+    justify-content: flex-start;
-    justify-content: flex-end;
+    align-items: flex-start;
-    align-items: flex-end;
+    margin-top: 40px;
+}
 
+.room .roomHeader .headerContent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 60px;
 }
 
 .room .roomHeader .dumb {
@@ -34,7 +40,6 @@
 
     overflow: auto;
     justify-content: center;
-    /* align-items: center; */
 }
 
 .room .finishQuizButton {
@@ -44,146 +49,7 @@
     width: 100%;
 }
 
-
+.room h1 {
-
+    text-align: center;
-/* .create-room-container {
+    margin-top: 50px;
-    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;
-    }
-} */

client/src/pages/Teacher/Share/Share.tsx

@@ -5,6 +5,7 @@ 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();
@@ -167,6 +168,7 @@ const Share: React.FC = () => {
                     </NativeSelect>
 
                     <Button variant="contained" onClick={handleQuizSave} className="saveButton">
+                    {<SaveIcon sx={{ fontSize: 20, marginRight: '8px' }} />}
                         Enregistrer
                     </Button>
                 </div>