Merge dd49f0adfd into 62df610d62

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import Editor from '../../../components/Editor/newEditor';
+import Editor from '../../../components/Editor/Editor';
 
 describe('Editor Component', () => {
     const mockOnValuesChange = jest.fn();

client/src/components/Editor/Editor.tsx

@@ -1,33 +1,202 @@
-import React, { useRef } from 'react';
+import React, { useState } from 'react';
-import './editor.css';
+import { TextField, Typography, IconButton, Box, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
-import { TextareaAutosize } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 
 interface EditorProps {
     label: string;
     values: string[];
-    onEditorChange: (value: string) => void;
+    onValuesChange: (values: string[]) => void;
+    onFocusQuestion?: (index: number) => void;
 }
 
-const Editor: React.FC<EditorProps> = ({ label, values, onEditorChange }) => {
+const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange, onFocusQuestion }) => {
-    const editorRef = useRef<HTMLTextAreaElement | null>(null);
+    const [collapsed, setCollapsed] = useState<boolean[]>(Array(values.length).fill(false));
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
 
-    function handleEditorChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const text = event.target.value;
+        const newValues = [...values];
-        onEditorChange(text || '');
+        newValues[index] = event.target.value;
+        onValuesChange(newValues);
+    };
+
+    const handleDeleteQuestion = (index: number) => () => {
+        if (values[index].trim() === '') {
+            const newValues = values.filter((_, i) => i !== index);
+            onValuesChange(newValues);
+            setCollapsed((prev) => prev.filter((_, i) => i !== index));
+        } else {
+            setDeleteIndex(index);
+            setDialogOpen(true);
+        }
+    };
+
+    const handleConfirmDelete = () => {
+        if (deleteIndex !== null) {
+            const newValues = values.filter((_, i) => i !== deleteIndex);
+            onValuesChange(newValues);
+            setCollapsed((prev) => prev.filter((_, i) => i !== deleteIndex));
+        }
+        setDialogOpen(false);
+        setDeleteIndex(null);
+    };
+
+    const handleCancelDelete = () => {
+        setDialogOpen(false);
+        setDeleteIndex(null);
+    };
+
+    const handleFocusQuestion = (index: number) => () => {
+        if (onFocusQuestion) {
+            onFocusQuestion(index);
+        }
+    };
+
+    const handleToggleCollapse = (index: number) => () => {
+        setCollapsed((prev) => {
+            const newCollapsed = [...prev];
+            newCollapsed[index] = !newCollapsed[index];
+            return newCollapsed;
+        });
+    };
+
+    const onDragEnd = (result: any) => {
+        if (!result.destination) return;
+
+        const newValues = [...values];
+        const [reorderedItem] = newValues.splice(result.source.index, 1);
+        newValues.splice(result.destination.index, 0, reorderedItem);
+        onValuesChange(newValues);
+
+        const newCollapsed = [...collapsed];
+        const [reorderedCollapsed] = newCollapsed.splice(result.source.index, 1);
+        newCollapsed.splice(result.destination.index, 0, reorderedCollapsed);
+        setCollapsed(newCollapsed);
+    };
+
+    if (collapsed.length !== values.length) {
+        setCollapsed((prev) => {
+            const newCollapsed = [...prev];
+            while (newCollapsed.length < values.length) newCollapsed.push(false);
+            while (newCollapsed.length > values.length) newCollapsed.pop();
+            return newCollapsed;
+        });
     }
 
     return (
-        <label>
+        <div>
-            <h4>{label}</h4>
+            <Typography variant="h6" fontWeight="bold" style={{ marginBottom: '24px' }}>
-            <TextareaAutosize
+                {label}
-                id="editor-textarea"
+            </Typography>
-                ref={editorRef}
+
-                onChange={handleEditorChange}
+            <DragDropContext onDragEnd={onDragEnd}>
-                value={values}
+                <Droppable droppableId="questions">
-                className="editor"
+                    {(provided) => (
-                minRows={5}
+                        <div {...provided.droppableProps} ref={provided.innerRef}>
-            />
+                            {values.map((value, index) => (
-        </label>
+                                <Draggable key={index} draggableId={`question-${index}`} index={index}>
+                                    {(provided) => (
+                                        <Box
+                                            ref={provided.innerRef}
+                                            {...provided.draggableProps}
+                                            {...provided.dragHandleProps}
+                                            sx={{
+                                                marginBottom: '8px',
+                                                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+                                                border: '1px solid rgba(0, 0, 0, 0.1)',
+                                                padding: '16px',
+                                                borderRadius: '4px',
+                                                ...provided.draggableProps.style,
+                                            }}
+                                        >
+                                            <Box display="flex" alignItems="center" justifyContent="space-between">
+                                                <Typography variant="subtitle1" fontWeight="bold" style={{ marginBottom: '8px' }}>
+                                                    Question {index + 1}
+                                                </Typography>
+                                                <Box>
+                                                    <IconButton
+                                                        onClick={handleToggleCollapse(index)}
+                                                        aria-label="toggle collapse"
+                                                        sx={{
+                                                            color: 'gray',
+                                                            '&:hover': { color: 'blue' },
+                                                            mr: 1,
+                                                        }}
+                                                    >
+                                                        {collapsed[index] ? <ExpandMoreIcon /> : <ExpandLessIcon />}
+                                                    </IconButton>
+                                                    <IconButton
+                                                        onClick={handleFocusQuestion(index)}
+                                                        aria-label="focus question"
+                                                        sx={{
+                                                            color: 'gray',
+                                                            '&:hover': { color: 'blue' },
+                                                            mr: 1,
+                                                        }}
+                                                    >
+                                                        <VisibilityIcon />
+                                                    </IconButton>
+                                                    <IconButton
+                                                        onClick={handleDeleteQuestion(index)}
+                                                        aria-label="delete"
+                                                        sx={{
+                                                            color: 'light-gray',
+                                                            '&:hover': { color: 'red' },
+                                                        }}
+                                                    >
+                                                        <DeleteIcon />
+                                                    </IconButton>
+                                                </Box>
+                                            </Box>
+                                            <Collapse in={!collapsed[index]}>
+                                                <TextField
+                                                    value={value}
+                                                    onChange={handleChange(index)}
+                                                    fullWidth
+                                                    multiline
+                                                    minRows={4}
+                                                    maxRows={Infinity}
+                                                    variant="outlined"
+                                                    style={{ overflow: 'auto' }}
+                                                />
+                                            </Collapse>
+                                        </Box>
+                                    )}
+                                </Draggable>
+                            ))}
+                            {provided.placeholder}
+                        </div>
+                    )}
+                </Droppable>
+            </DragDropContext>
+
+            {/* Confirmation Dialog */}
+            <Dialog
+                open={dialogOpen}
+                onClose={handleCancelDelete}
+                aria-labelledby="delete-confirmation-title"
+                aria-describedby="delete-confirmation-description"
+            >
+                <DialogTitle id="delete-confirmation-title" sx={{ textAlign: 'center'}}>Suppression</DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="delete-confirmation-description">
+                        Confirmez vous la suppression de Question {deleteIndex !== null ? deleteIndex + 1 : ''} ?
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions sx={{ justifyContent: 'center', pb: 2 }}>
+                    <Button onClick={handleCancelDelete} color="primary" sx={{ mx: 1 }}>
+                        Annuler 
+                    </Button>
+                    <Button onClick={handleConfirmDelete} color="error" sx={{ mx: 1 }} autoFocus>
+                        Supprimer
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
     );
 };
 

client/src/components/Editor/editor.css

@@ -6,4 +6,4 @@
     padding-top: 10px;
     font-size: medium;
     resize: none;
-}
+}

client/src/components/Editor/newEditor.css

@@ -1,9 +0,0 @@
-.editor {
-    width:  100%;
-    height: 50vh;
-    background-color: #f8f9ff;
-    padding-left: 10px;
-    padding-top: 10px;
-    font-size: medium;
-    resize: none;
-}

client/src/components/Editor/newEditor.tsx

@@ -1,203 +0,0 @@
-import React, { useState } from 'react';
-import { TextField, Typography, IconButton, Box, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-
-interface EditorProps {
-    label: string;
-    values: string[];
-    onValuesChange: (values: string[]) => void;
-    onFocusQuestion?: (index: number) => void;
-}
-
-const Editor: React.FC<EditorProps> = ({ label, values, onValuesChange, onFocusQuestion }) => {
-    const [collapsed, setCollapsed] = useState<boolean[]>(Array(values.length).fill(false));
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
-
-    const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const newValues = [...values];
-        newValues[index] = event.target.value;
-        onValuesChange(newValues);
-    };
-
-    const handleDeleteQuestion = (index: number) => () => {
-        if (values[index].trim() === '') {
-            const newValues = values.filter((_, i) => i !== index);
-            onValuesChange(newValues);
-            setCollapsed((prev) => prev.filter((_, i) => i !== index));
-        } else {
-            setDeleteIndex(index);
-            setDialogOpen(true);
-        }
-    };
-
-    const handleConfirmDelete = () => {
-        if (deleteIndex !== null) {
-            const newValues = values.filter((_, i) => i !== deleteIndex);
-            onValuesChange(newValues);
-            setCollapsed((prev) => prev.filter((_, i) => i !== deleteIndex));
-        }
-        setDialogOpen(false);
-        setDeleteIndex(null);
-    };
-
-    const handleCancelDelete = () => {
-        setDialogOpen(false);
-        setDeleteIndex(null);
-    };
-
-    const handleFocusQuestion = (index: number) => () => {
-        if (onFocusQuestion) {
-            onFocusQuestion(index);
-        }
-    };
-
-    const handleToggleCollapse = (index: number) => () => {
-        setCollapsed((prev) => {
-            const newCollapsed = [...prev];
-            newCollapsed[index] = !newCollapsed[index];
-            return newCollapsed;
-        });
-    };
-
-    const onDragEnd = (result: any) => {
-        if (!result.destination) return;
-
-        const newValues = [...values];
-        const [reorderedItem] = newValues.splice(result.source.index, 1);
-        newValues.splice(result.destination.index, 0, reorderedItem);
-        onValuesChange(newValues);
-
-        const newCollapsed = [...collapsed];
-        const [reorderedCollapsed] = newCollapsed.splice(result.source.index, 1);
-        newCollapsed.splice(result.destination.index, 0, reorderedCollapsed);
-        setCollapsed(newCollapsed);
-    };
-
-    if (collapsed.length !== values.length) {
-        setCollapsed((prev) => {
-            const newCollapsed = [...prev];
-            while (newCollapsed.length < values.length) newCollapsed.push(false);
-            while (newCollapsed.length > values.length) newCollapsed.pop();
-            return newCollapsed;
-        });
-    }
-
-    return (
-        <div>
-            <Typography variant="h6" fontWeight="bold" style={{ marginBottom: '24px' }}>
-                {label}
-            </Typography>
-
-            <DragDropContext onDragEnd={onDragEnd}>
-                <Droppable droppableId="questions">
-                    {(provided) => (
-                        <div {...provided.droppableProps} ref={provided.innerRef}>
-                            {values.map((value, index) => (
-                                <Draggable key={index} draggableId={`question-${index}`} index={index}>
-                                    {(provided) => (
-                                        <Box
-                                            ref={provided.innerRef}
-                                            {...provided.draggableProps}
-                                            {...provided.dragHandleProps}
-                                            sx={{
-                                                marginBottom: '8px',
-                                                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
-                                                border: '1px solid rgba(0, 0, 0, 0.1)',
-                                                padding: '16px',
-                                                borderRadius: '4px',
-                                                ...provided.draggableProps.style,
-                                            }}
-                                        >
-                                            <Box display="flex" alignItems="center" justifyContent="space-between">
-                                                <Typography variant="subtitle1" fontWeight="bold" style={{ marginBottom: '8px' }}>
-                                                    Question {index + 1}
-                                                </Typography>
-                                                <Box>
-                                                    <IconButton
-                                                        onClick={handleToggleCollapse(index)}
-                                                        aria-label="toggle collapse"
-                                                        sx={{
-                                                            color: 'gray',
-                                                            '&:hover': { color: 'blue' },
-                                                            mr: 1,
-                                                        }}
-                                                    >
-                                                        {collapsed[index] ? <ExpandMoreIcon /> : <ExpandLessIcon />}
-                                                    </IconButton>
-                                                    <IconButton
-                                                        onClick={handleFocusQuestion(index)}
-                                                        aria-label="focus question"
-                                                        sx={{
-                                                            color: 'gray',
-                                                            '&:hover': { color: 'blue' },
-                                                            mr: 1,
-                                                        }}
-                                                    >
-                                                        <VisibilityIcon />
-                                                    </IconButton>
-                                                    <IconButton
-                                                        onClick={handleDeleteQuestion(index)}
-                                                        aria-label="delete"
-                                                        sx={{
-                                                            color: 'light-gray',
-                                                            '&:hover': { color: 'red' },
-                                                        }}
-                                                    >
-                                                        <DeleteIcon />
-                                                    </IconButton>
-                                                </Box>
-                                            </Box>
-                                            <Collapse in={!collapsed[index]}>
-                                                <TextField
-                                                    value={value}
-                                                    onChange={handleChange(index)}
-                                                    fullWidth
-                                                    multiline
-                                                    minRows={4}
-                                                    maxRows={Infinity}
-                                                    variant="outlined"
-                                                    style={{ overflow: 'auto' }}
-                                                />
-                                            </Collapse>
-                                        </Box>
-                                    )}
-                                </Draggable>
-                            ))}
-                            {provided.placeholder}
-                        </div>
-                    )}
-                </Droppable>
-            </DragDropContext>
-
-            {/* Confirmation Dialog */}
-            <Dialog
-                open={dialogOpen}
-                onClose={handleCancelDelete}
-                aria-labelledby="delete-confirmation-title"
-                aria-describedby="delete-confirmation-description"
-            >
-                <DialogTitle id="delete-confirmation-title" sx={{ textAlign: 'center'}}>Suppression</DialogTitle>
-                <DialogContent>
-                    <DialogContentText id="delete-confirmation-description">
-                        Confirmez vous la suppression de Question {deleteIndex !== null ? deleteIndex + 1 : ''} ?
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions sx={{ justifyContent: 'center', pb: 2 }}>
-                    <Button onClick={handleCancelDelete} color="primary" sx={{ mx: 1 }}>
-                        Annuler 
-                    </Button>
-                    <Button onClick={handleConfirmDelete} color="error" sx={{ mx: 1 }} autoFocus>
-                        Supprimer
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </div>
-    );
-};
-
-export default Editor;

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>
             )}
 

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 && (

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> 

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>

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
             />

client/src/pages/Teacher/Dashboard/Dashboard.tsx

@@ -38,7 +38,7 @@ import {
     Upload,
     FolderCopy,
     ContentCopy,
-    Edit
+    Edit,
 } from '@mui/icons-material';
 import ShareQuizModal from 'src/components/ShareQuizModal/ShareQuizModal';
 
@@ -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 = () => {
+  // Créer une salle
-        setIsSearchVisible(!isSearchVisible);
+  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
+  // Sélectionner une salle
-        const updatedRooms = await ApiService.getUserRooms();
+  const selectRoomByName = (roomId: string) => {
-        setRooms(updatedRooms as RoomType[]);
+    const room = rooms.find(r => r._id === roomId);
+    selectRoom(room);
+    localStorage.setItem('selectedRoomId', roomId);
+  };
 
-        // Sélectionner la nouvelle salle avec son ID
+  const handleCreateRoom = async () => {
-        selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
+    if (newRoomTitle.trim()) {
-    };
+      try {
-
-    // 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 {
                 await createRoom(newRoomTitle);
                 const userRooms = await ApiService.getUserRooms();
                 setRooms(userRooms as RoomType[]);
-                setOpenAddRoomDialog(false);
+        setOpenAddRoomDialog(false);
-                setNewRoomTitle('');
+        setNewRoomTitle('');
-            } catch (error) {
+      } catch (error) {
-                setErrorMessage(error instanceof Error ? error.message : 'Erreur inconnue');
+        setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue");
-                setShowErrorDialog(true);
+        setShowErrorDialog(true);
-            }
+      }
-        }
+    }
-    };
+  };
 
     const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
         setSelectedFolderId(event.target.value);
@@ -401,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 className="title">Tableau de bord</div>
-            <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>
 
-                {/* Sélecteur de salle */}
+            <div className="roomSelection">
-                <div
+                <label htmlFor="select-room">Sélectionner une salle: </label>
-                    className="roomSelection"
+                <select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
-                    style={{ display: 'flex', justifyContent: 'flex-end', gap: '15px' }}
+                    <option value="" disabled>
-                >
+                        -- Sélectionner une salle --
-                    <select
+                    </option>
-                        value={selectedRoom?._id || ''}
+                    {rooms.map((room) => (
-                        onChange={(e) => handleSelectRoom(e)}
+                        <option key={room._id} value={room._id}>
-                        id="room-select"
+                            {room.title}
-                        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
                         </option>
-                        {rooms.map((room) => (
+                    ))}
-                            <option key={room._id} value={room._id}>
+                    <option value="add-room">Ajouter salle</option>
-                                {room.title}
+                </select>
-                            </option>
+
-                        ))}
-                        <option
-                            value="add-room"
-                            style={{
-                                color: 'black',
-                                backgroundColor: '#f0f0f0',
-                                fontWeight: 'bold'
-                            }}
-                        >
-                            Ajouter une salle
-                        </option>
-                    </select>
-                </div>
             </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>
@@ -487,17 +450,24 @@ const Dashboard: React.FC = () => {
                 </DialogActions>
             </Dialog>
 
-            <div
+            <div className="search-bar">
-                style={{
+                <TextField
-                    display: 'flex',
+                    onChange={handleSearch}
-                    justifyContent: 'flex-end',
+                    value={searchTerm}
-                    alignItems: 'center',
+                    placeholder="Rechercher un quiz par son titre"
-                    width: '100%',
+                    fullWidth
-                    gap: '20px'
+                    InputProps={{
-                }}
+                        endAdornment: (
-            ></div>
+                            <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
@@ -505,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>
+                        <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>
@@ -532,130 +497,65 @@ const Dashboard: React.FC = () => {
 
                     <Tooltip title="Renommer dossier" placement="top">
                         <div>
-                            <IconButton
+                        <IconButton
-                                color="primary"
+                            color="primary"
-                                onClick={handleRenameFolder}
+                            onClick={handleRenameFolder}
-                                disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolderId == ''} // cannot action on all
-                            >
+                        >
-                                {' '}
+                            {' '}
-                                <Edit />{' '}
+                            <Edit />{' '}
-                            </IconButton>
+                        </IconButton>
                         </div>
                     </Tooltip>
 
                     <Tooltip title="Dupliquer dossier" placement="top">
                         <div>
-                            <IconButton
+                        <IconButton
-                                color="primary"
+                            color="primary"
-                                onClick={handleDuplicateFolder}
+                            onClick={handleDuplicateFolder}
-                                disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolderId == ''} // cannot action on all
-                            >
+                        >
-                                {' '}
+                            {' '}
-                                <FolderCopy />{' '}
+                            <FolderCopy />{' '}
-                            </IconButton>
+                        </IconButton>
                         </div>
                     </Tooltip>
 
                     <Tooltip title="Supprimer dossier" placement="top">
                         <div>
-                            <IconButton
+                        <IconButton
-                                aria-label="delete"
+                            aria-label="delete"
-                                color="primary"
+                            color="primary"
-                                onClick={handleDeleteFolder}
+                            onClick={handleDeleteFolder}
-                                disabled={selectedFolderId == ''} // cannot action on all
+                            disabled={selectedFolderId == ''} // cannot action on all
-                            >
+                        >
-                                {' '}
+                            {' '}
-                                <DeleteOutline />{' '}
+                            <DeleteOutline />{' '}
-                            </IconButton>
+                        </IconButton>
                         </div>
                     </Tooltip>
                 </div>
             </div>
 
-            <div
+            <div className="ajouter">
-                className="search-bar"
+                <Button
-                style={{
+                    variant="outlined"
-                    display: 'flex',
+                    color="primary"
-                    justifyContent: 'space-between',
+                    startIcon={<Add />}
-                    alignItems: 'center',
+                    onClick={handleCreateQuiz}
-                    gap: '20px',
+                >
-                    width: '100%'
+                    Ajouter un nouveau quiz
-                }}
+                </Button>
-            >
-                <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 */}
+                <Button
-                <div style={{ display: 'flex', gap: '12px' }}>
+                    variant="outlined"
-                    <Button
+                    color="primary"
-                        variant="outlined"
+                    startIcon={<Upload />}
-                        color="primary"
+                    onClick={handleOnImport}
-                        startIcon={<Add />}
+                >
-                        onClick={handleCreateQuiz}
+                    Import
-                        sx={{ borderRadius: '8px', minWidth: 'auto', padding: '4px 12px' }}
+                </Button>
-                    >
-                        Nouveau quiz
-                    </Button>
-
-                    <Button
-                        variant="outlined"
-                        color="primary"
-                        startIcon={<Upload />}
-                        onClick={handleOnImport}
-                    >
-                        Importer
-                    </Button>
-                </div>
             </div>
-
             <div className="list">
                 {Object.keys(quizzesByFolder).map((folderName) => (
                     <CustomCard key={folderName} className="folder-card">
@@ -671,9 +571,7 @@ const Dashboard: React.FC = () => {
                                                     onClick={() => handleLancerQuiz(quiz)}
                                                     disabled={!validateQuiz(quiz.content)}
                                                 >
-                                                    {`${quiz.title} (${
+                                                    {`${quiz.title} (${quiz.content.length} question${
-                                                        quiz.content.length
-                                                    } question${
                                                         quiz.content.length > 1 ? 's' : ''
                                                     })`}
                                                 </Button>
@@ -711,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>
                             ))}

client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx

@@ -1,18 +1,16 @@
-import React, { useState, useEffect, useRef, CSSProperties } from 'react';
+// EditorQuiz.tsx
+import React, { useState, useEffect, CSSProperties } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import { FolderType } from '../../../Types/FolderType';
 
-import NewEditor from 'src/components/Editor/newEditor';
 import Editor from 'src/components/Editor/Editor';
-
 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 './EditorQuiz.css';
 import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent, MenuItem, Select, Snackbar } from '@mui/material';
 import ReturnButton from 'src/components/ReturnButton/ReturnButton';
 import ImageGalleryModal from 'src/components/ImageGallery/ImageGalleryModal/ImageGalleryModal';
@@ -52,10 +50,6 @@ const QuizForm: React.FC = () => {
     const [snackbarOpen, setSnackbarOpen] = useState(false);
     const [snackbarMessage, setSnackbarMessage] = useState('');
     const [copySuccess, setCopySuccess] = useState<string | null>(null);
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const fileInputRef = useRef<HTMLInputElement | null>(null);
-
-    const [useNewEditor, setUserNewEditor] = useState(false);
 
     const QuestionVraiFaux = "::Exemple de question vrai/faux:: \n 2+2 \\= 4 ? {T}  //Utilisez les valeurs {T}, {F}, {TRUE} et {FALSE}.";
     const QuestionChoixMul = "::Ville capitale du Canada:: \nQuelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Rétroaction spécifique.\n}  // Commentaire non visible (au besoin)";
@@ -149,27 +143,11 @@ const QuizForm: React.FC = () => {
         console.log("Updated values:", [...values, '']); // Log new state
     };
 
-    const newHandleUpdatePreview = (newValues: string[]) => {
+    const handleUpdatePreview = (newValues: string[]) => {
         setValues(newValues);
         setFilteredValue(newValues.filter(value => value.trim() !== ''));
     };
 
-    const handleUpdatePreview = (value: string) => {
-        if (value !== '') {
-            setValues([value]);
-        }
-
-        // split value when there is at least one blank line
-        const linesArray = value.split(/\n{2,}/);
-
-        // if the first item in linesArray is blank, remove it
-        if (linesArray[0] === '') linesArray.shift();
-
-        if (linesArray[linesArray.length - 1] === '') linesArray.pop();
-
-        setFilteredValue(linesArray);
-    }
-
     const handleQuizTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setQuizTitle(event.target.value);
     };
@@ -228,7 +206,7 @@ const QuizForm: React.FC = () => {
             const imageUrl = await ApiService.uploadImage(inputElement.files[0]);
 
             // Check for errors
-            if (imageUrl.indexOf("ERROR") >= 0) {
+            if(imageUrl.indexOf("ERROR") >= 0) {
                 window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
                 return;
             }
@@ -271,9 +249,6 @@ const QuizForm: React.FC = () => {
         copyToClipboard(value, label);
     };
 
-    const toggleEditor = () => {
-        setUserNewEditor(!useNewEditor);
-    }	
     const handleCopyImage = (id: string) => {
         const escLink = `${ENV_VARIABLES.BACKEND_URL}/api/image/get/${id}`;
         setImageLinks(prevLinks => [...prevLinks, escLink]);
@@ -281,97 +256,155 @@ const QuizForm: React.FC = () => {
 
     return (
         <div className='quizEditor'>
-            <div className='editHeader' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '32px' }}>
-                <ReturnButton quizTitle={quizTitle} quizContent={filteredValue} quizFolder={selectedFolder} quizId={quiz?._id} isNewQuiz={isNewQuiz} />
-                <div className='title'>Éditeur de Quiz</div>
-                <Button
-                    variant="outlined"
-                    onClick={toggleEditor}
-                    size="small"
-                    style={{
-                        fontSize: '10px', // Smaller font
-                        padding: '2px 6px', // Reduced padding
-                        minWidth: 'auto', // Allow button to shrink
-                        height: 'fit-content', // Match height to content
-                    }}
-                >
-                    {useNewEditor ? 'Ancien éditeur' : 'Nouvel éditeur'}
-                </Button>
 
+            <div className='editHeader'
+            style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                marginBottom: '32px'
+            }}>
+                <ReturnButton
+                    quizTitle={quizTitle}
+                    quizContent={filteredValue}
+                    quizFolder={selectedFolder}
+                    quizId={quiz?._id}
+                    isNewQuiz={isNewQuiz}
+                />
+
+
+
+                <div className='title'>Éditeur de Quiz</div>
+
+                <div className='dumb'></div>
             </div>
 
-            <TextField onChange={handleQuizTitleChange} value={quizTitle} placeholder="Titre du quiz" label="Titre du quiz" fullWidth />
+            {/* <h2 className="subtitle">Éditeur</h2> */}
-            <label>Choisir un dossier:
-                <NativeSelect id="select-folder" color="primary" value={selectedFolder} onChange={handleSelectFolder} disabled={!isNewQuiz} style={{ marginBottom: '16px' }}>
-                    <option disabled value=""> Choisir un dossier... </option>
-                    {folders.map((folder: FolderType) => (
-                        <option value={folder._id} key={folder._id}> {folder.title} </option>
-                    ))}
-                </NativeSelect>
-            </label>
 
-            <div className='sticky-buttons'>
+            <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></label>
+
+
+                        <div className='sticky-buttons'>
                 <Select
                     value=""
                     displayEmpty
                     onChange={(e) => handleSelectChange(e.target.value, templates.find(t => t.value === e.target.value)?.label || '')}
                     style={{ width: '210px' }}
-                    inputProps={{ 'data-testid': 'template-select' }}
+                    inputProps={{
+                        'data-testid': 'template-select'
+                    }}
+
                 >
                     <MenuItem value="" disabled>Modèles de questions</MenuItem>
                     {templates.map((template, index) => (
                         <MenuItem key={index} value={template.value}>{template.label}</MenuItem>
                     ))}
                 </Select>
-
+                <Button
-                <Button variant="contained" onClick={handleQuizSave} sx={{ display: 'flex', alignItems: 'center' }}>
+                    variant="contained"
+                    onClick={handleQuizSave}
+                    sx={{ display: 'flex', alignItems: 'center' }}
+                >
                     <SaveIcon sx={{ fontSize: 20 }} />
                     Enregistrer
                 </Button>
             </div>
 
-            <Snackbar open={!!copySuccess} autoHideDuration={3000} onClose={() => setCopySuccess(null)} message={copySuccess} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} key={copySuccess ? 'open' : 'close'} />
+            <Snackbar
-
+                open={!!copySuccess}
+                autoHideDuration={3000}
+                onClose={() => setCopySuccess(null)}
+                message={copySuccess}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+                key={copySuccess ? 'open' : 'close'}
+            />
+            
             <Divider style={{ margin: '16px 0' }} />
 
             <div className='editSection'>
+
                 <div className='edit'>
-                    {useNewEditor ? (
+                    <Editor
-                        <NewEditor label="" values={values} onValuesChange={newHandleUpdatePreview} onFocusQuestion={handleFocusQuestion} />
+                        label=""
-                    ) : (
+                        values={values}
-                        <Editor label="" values={values} onEditorChange={handleUpdatePreview} />
+                        onValuesChange={handleUpdatePreview}
-                    )}
+                        onFocusQuestion={handleFocusQuestion} />
-                    {useNewEditor && (
+                    <Button variant="contained" onClick={handleAddQuestion}>
-                        <Button variant="contained" onClick={handleAddQuestion}>
+                        Ajouter une question 
-                            Ajouter une question
+                    </Button>
-                        </Button>
+ 
-                    )}
+                 <div className="images">
-                    <div className="images">
+                        {/* Collapsible Upload Section */}
                         <div style={{ marginTop: '8px' }}>
-                            <Button variant="outlined" onClick={() => setIsUploadCollapsed(!isUploadCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
+                            <Button
+                                variant="outlined"
+                                onClick={() => setIsUploadCollapsed(!isUploadCollapsed)}
+                                style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
+                            >
                                 {isUploadCollapsed ? 'Afficher Téléverser image' : 'Masquer Téléverser image'}
                             </Button>
                             {!isUploadCollapsed && (
                                 <div className="upload">
                                     <label className="dropArea">
-                                        <input type="file" id="file-input" className="file-input" accept="image/jpeg, image/png" multiple ref={fileInputRef} />
+                                        <input
-                                        <Button variant="outlined" aria-label="Téléverser" onClick={handleSaveImage}>
+                                            type="file"
+                                            id="file-input"
+                                            className="file-input"
+                                            accept="image/jpeg, image/png"
+                                            multiple
+                                            ref={fileInputRef}
+                                        />
+                                        <Button
+                                            variant="outlined"
+                                            aria-label="Téléverser"
+                                            onClick={handleSaveImage}
+                                        >
                                             Téléverser <Upload />
                                         </Button>
                                     </label>
                                     <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
                                         <DialogTitle>Erreur</DialogTitle>
-                                        <DialogContent>Veuillez d'abord choisir une image à téléverser.</DialogContent>
+                                        <DialogContent>
+                                            Veuillez d'abord choisir une image à téléverser.
+                                        </DialogContent>
                                         <DialogActions>
-                                            <Button onClick={() => setDialogOpen(false)} color="primary">OK</Button>
+                                            <Button onClick={() => setDialogOpen(false)} color="primary">
+                                                OK
+                                            </Button>
                                         </DialogActions>
                                     </Dialog>
                                 </div>
                             )}
                         </div>
 
+                        {/* Collapsible Images Section */}
                         <div style={{ marginTop: '2px' }}>
-                            <Button variant="outlined" onClick={() => setIsImagesCollapsed(!isImagesCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
+                            <Button
+                                variant="outlined"
+                                onClick={() => setIsImagesCollapsed(!isImagesCollapsed)}
+                                style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
+                            >
                                 {isImagesCollapsed ? 'Afficher Mes images' : 'Masquer Mes images'}
                             </Button>
                             {!isImagesCollapsed && (
@@ -380,8 +413,16 @@ const QuizForm: React.FC = () => {
                                     <div>
                                         <div>
                                             <div style={{ display: 'inline' }}>(Voir section </div>
-                                            <a href="#images-section" style={{ textDecoration: 'none' }} onClick={scrollToImagesSection}>
+                                            <a
-                                                <u><em><h4 style={{ display: 'inline' }}> 9. Images </h4></em></u>
+                                                href="#images-section"
+                                                style={{ textDecoration: 'none' }}
+                                                onClick={scrollToImagesSection}
+                                            >
+                                                <u>
+                                                    <em>
+                                                        <h4 style={{ display: 'inline' }}> 9. Images </h4>
+                                                    </em>
+                                                </u>
                                             </a>
                                             <div style={{ display: 'inline' }}> ci-dessous</div>
                                             <div style={{ display: 'inline' }}>)</div>
@@ -393,7 +434,9 @@ const QuizForm: React.FC = () => {
                                                 const imgTag = `![alt_text](${escapeForGIFT(link)} "texte de l'infobulle")`;
                                                 return (
                                                     <li key={index}>
-                                                        <code onClick={() => handleCopyToClipboard(imgTag)}>{imgTag}</code>
+                                                        <code onClick={() => handleCopyToClipboard(imgTag)}>
+                                                            {imgTag}
+                                                        </code>
                                                     </li>
                                                 );
                                             })}
@@ -403,8 +446,13 @@ const QuizForm: React.FC = () => {
                             )}
                         </div>
 
+                        {/* Collapsible CheatSheet Section */}
                         <div style={{ marginTop: '2px' }}>
-                            <Button variant="outlined" onClick={() => setIsCheatSheetCollapsed(!isCheatSheetCollapsed)} style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}>
+                            <Button
+                                variant="outlined"
+                                onClick={() => setIsCheatSheetCollapsed(!isCheatSheetCollapsed)}
+                                style={{ padding: '4px 8px', fontSize: '12px', marginBottom: '4px', width: '40%' }}
+                            >
                                 {isCheatSheetCollapsed ? 'Afficher CheatSheet' : 'Masquer CheatSheet'}
                             </Button>
                             {!isCheatSheetCollapsed && <GiftCheatSheet />}
@@ -423,15 +471,27 @@ const QuizForm: React.FC = () => {
             </div>
 
             {showScrollButton && (
-                <Button onClick={scrollToTop} variant="contained" color="primary" style={scrollToTopButtonStyle} title="Scroll to top">
+                <Button
+                    onClick={scrollToTop}
+                    variant="contained"
+                    color="primary"
+                    style={scrollToTopButtonStyle}
+                    title="Scroll to top"
+                >
                     ↑
                 </Button>
             )}
 
-            <Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={handleSnackbarClose} message={snackbarMessage} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} />
+            <Snackbar
+                open={snackbarOpen}
+                autoHideDuration={3000} // Hide after 3 seconds
+                onClose={handleSnackbarClose}
+                message={snackbarMessage}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} // Lower-right corner
+            />
         </div>
     );
-};
+}; 
 
 const scrollToTopButtonStyle: CSSProperties = {
     position: 'fixed',

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
+                <h1 style={{ margin: 0 }}>Salle : {formattedRoomName}</h1>
-                    onReturn={handleReturn}
-                    askConfirm
-                    message={`Êtes-vous sûr de vouloir quitter?`}
-                />
 
                 <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">
+                <DialogTitle id="qr-modal-title">Rejoindre la salle: {formattedRoomName}</DialogTitle>
-                    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"
+                        variant="contained"
-                            startIcon={<ContentCopyIcon />}
+                        startIcon={<ContentCopyIcon />}
-                            onClick={handleCopy}
+                        onClick={handleCopy}
-                            style={{ marginTop: '10px' }}
+                        style={{ marginTop: '10px' }}
-                        >
+                    >
-                            {copied ? 'Copié !' : 'Copier le lien'}
+                        {copied ? "Copié !" : "Copier le lien"}
-                        </Button>
+                    </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%',
+                        width: '100%'
-                        marginBottom: '10px'
                     }}
                 >
-                    <h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                    {
-                        Salle : {formattedRoomName}
                         <div
-                            className="userCount subtitle"
+                            className="userCount subtitle smallText"
-                            style={{
+                            style={{ display: 'flex', justifyContent: 'flex-end' }}
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                fontSize: '1.5rem',
-                                fontWeight: 'bold',
-                                marginLeft: '20px',
-                                marginBottom: '0px'
-                            }}
                         >
-                            <GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
+                            <GroupIcon style={{ marginRight: '5px' }} />
                             {students.length}/60
                         </div>
-                    </h1>
+                    }
                 </div>
 
                 <div className="dumb"></div>

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

@@ -2,31 +2,25 @@
 .room .roomHeader {
     width: 100%;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    align-items: flex-start;
+    justify-content: space-between;
-    position: relative;
+    align-content: stretch
 }
 .room .roomHeader .returnButton {
-    position: absolute;
+    flex-basis: 10%;
-    top: 10px;
+
-    left: 0;
+    display: flex;
-    z-index: 10;
+    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;
+    flex-direction: column;
-    align-items: center;
+    justify-content: flex-end;
-    margin-top: 60px;
+    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;
+    }
+} */

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>