From 36b5c58b9433d31ce498395fa56baa6b9c2fbfb6 Mon Sep 17 00:00:00 2001 From: NouhailaAater Date: Mon, 7 Apr 2025 19:44:03 -0400 Subject: [PATCH 1/5] Small UX update --- client/src/components/Header/Header.tsx | 4 +++- .../TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx | 2 -- client/src/components/StudentWaitPage/StudentWaitPage.tsx | 3 +-- client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx | 2 +- client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx | 2 -- client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx | 3 ++- client/src/pages/Teacher/Share/Share.tsx | 2 ++ 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx index 016d23e..0f04765 100644 --- a/client/src/components/Header/Header.tsx +++ b/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 = ({ isLoggedIn, handleLogout }) => { handleLogout(); navigate('/'); }} + startIcon={} > - Logout + Déconnexion )} diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx index 717cdbe..7decbab 100644 --- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx @@ -59,7 +59,6 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { disabled={disableButton} > {showAnswer ? (
{(question.isTrue ? '✅' : '❌')}
) : ``} -
V
Vrai
{showAnswer && answer && question.trueFormattedFeedback && ( @@ -76,7 +75,6 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { > {showAnswer ? (
{(!question.isTrue ? '✅' : '❌')}
) : ``} -
F
Faux
{showAnswer && !answer && question.falseFormattedFeedback && ( diff --git a/client/src/components/StudentWaitPage/StudentWaitPage.tsx b/client/src/components/StudentWaitPage/StudentWaitPage.tsx index c5de4f2..df4e7b8 100644 --- a/client/src/components/StudentWaitPage/StudentWaitPage.tsx +++ b/client/src/components/StudentWaitPage/StudentWaitPage.tsx @@ -26,8 +26,7 @@ const StudentWaitPage: React.FC = ({ students, launchQuiz, setQuizMode }) variant="contained" onClick={handleLaunchClick} startIcon={} - fullWidth - sx={{ fontWeight: 600, fontSize: 20 }} + sx={{ fontWeight: 600, fontSize: 20, width: 'auto' }} > Lancer diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx index 8925c09..ca67aba 100644 --- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx +++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx @@ -116,7 +116,7 @@ const TeacherModeQuiz: React.FC = ({ diff --git a/client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx b/client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx index ecc9a1c..e0d4988 100644 --- a/client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx +++ b/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 /> diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx index ab7ea13..1e80fef 100644 --- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx +++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx @@ -9,7 +9,7 @@ import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet'; import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview'; import { QuizType } from '../../../Types/QuizType'; - +import SaveIcon from '@mui/icons-material/Save'; import './editorQuiz.css'; import { Button, TextField, NativeSelect, Divider } from '@mui/material'; import ReturnButton from 'src/components/ReturnButton/ReturnButton'; @@ -214,6 +214,7 @@ const QuizForm: React.FC = () => { diff --git a/client/src/pages/Teacher/Share/Share.tsx b/client/src/pages/Teacher/Share/Share.tsx index a1267fb..2004b4d 100644 --- a/client/src/pages/Teacher/Share/Share.tsx +++ b/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 = () => { From 57c5321c09f5a457aeab954cf80b40312d3a23a3 Mon Sep 17 00:00:00 2001 From: NouhailaAater Date: Tue, 8 Apr 2025 19:34:27 -0400 Subject: [PATCH 2/5] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20page=20dashbo?= =?UTF-8?q?ard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Teacher/Dashboard/Dashboard.tsx | 338 ++++++++++++------ 1 file changed, 220 insertions(+), 118 deletions(-) diff --git a/client/src/pages/Teacher/Dashboard/Dashboard.tsx b/client/src/pages/Teacher/Dashboard/Dashboard.tsx index 3d4cc65..a5b4f33 100644 --- a/client/src/pages/Teacher/Dashboard/Dashboard.tsx +++ b/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,6 +65,7 @@ const Dashboard: React.FC = () => { const [selectedRoom, selectRoom] = useState(); // 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 => @@ -104,7 +105,7 @@ const Dashboard: React.FC = () => { fetchData(); }, []); - + useEffect(() => { if (rooms.length > 0 && !selectedRoom) { selectRoom(rooms[rooms.length - 1]); @@ -120,41 +121,44 @@ const Dashboard: React.FC = () => { } }; - // Créer une salle - const createRoom = async (title: string) => { - // Créer la salle et récupérer l'objet complet - const newRoom = await ApiService.createRoom(title); - - // Mettre à jour la liste des salles - const updatedRooms = await ApiService.getUserRooms(); - setRooms(updatedRooms as RoomType[]); - - // Sélectionner la nouvelle salle avec son ID - selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné - }; + const toggleSearchVisibility = () => { + setIsSearchVisible(!isSearchVisible); + }; + // Créer une salle + const createRoom = async (title: string) => { + // Créer la salle et récupérer l'objet complet + const newRoom = await ApiService.createRoom(title); - // Sélectionner une salle - const selectRoomByName = (roomId: string) => { - const room = rooms.find(r => r._id === roomId); - selectRoom(room); - localStorage.setItem('selectedRoomId', roomId); - }; + // Mettre à jour la liste des salles + const updatedRooms = await ApiService.getUserRooms(); + setRooms(updatedRooms as RoomType[]); - const handleCreateRoom = async () => { - if (newRoomTitle.trim()) { - try { + // Sélectionner la nouvelle salle avec son ID + selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné + }; + + // Sélectionner une salle + const selectRoomByName = (roomId: string) => { + const room = rooms.find((r) => r._id === roomId); + selectRoom(room); + localStorage.setItem('selectedRoomId', roomId); + }; + + const handleCreateRoom = async () => { + if (newRoomTitle.trim()) { + try { await createRoom(newRoomTitle); const userRooms = await ApiService.getUserRooms(); setRooms(userRooms as RoomType[]); - setOpenAddRoomDialog(false); - setNewRoomTitle(''); - } catch (error) { - setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue"); - setShowErrorDialog(true); - } - } - }; + setOpenAddRoomDialog(false); + setNewRoomTitle(''); + } catch (error) { + setErrorMessage(error instanceof Error ? error.message : 'Erreur inconnue'); + setShowErrorDialog(true); + } + } + }; const handleSelectFolder = (event: React.ChangeEvent) => { setSelectedFolderId(event.target.value); @@ -397,35 +401,68 @@ const Dashboard: React.FC = () => { } else { const randomSixDigit = Math.floor(100000 + Math.random() * 900000); navigate(`/teacher/manage-room/${quiz._id}/${randomSixDigit}`); - } + } }; return (
-
Tableau de bord
+ {/* Conteneur pour le titre et le sélecteur de salle */} +
+ {/* Titre tableau de bord */} +
+ Tableau de bord +
-
- - 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' + }} + > + - ))} - - - + {rooms.map((room) => ( + + ))} + + +
- {selectedRoom && ( -
-

Salle sélectionnée: {selectedRoom.title}

-
- )} - + {/* Dialog pour créer une salle */} setOpenAddRoomDialog(false)}> Créer une nouvelle salle @@ -450,24 +487,17 @@ const Dashboard: React.FC = () => { -
- - - - - - ) - }} - /> -
+
+ {/* Conteneur principal avec les actions et la liste des quiz */}
{ color="primary" value={selectedFolderId} onChange={handleSelectFolder} + sx={{ + padding: '6px 12px', + maxWidth: '180px', + borderRadius: '8px', + borderColor: '#e0e0e0', + '&:hover': { borderColor: '#5271FF' } + }} > - - - {folders.map((folder: FolderType) => ( + + {folders.map((folder) => ( ))} @@ -497,65 +532,130 @@ const Dashboard: React.FC = () => {
- - {' '} - {' '} - + + {' '} + {' '} +
- - {' '} - {' '} - + + {' '} + {' '} +
- - {' '} - {' '} - + + {' '} + {' '} +
-
- +
+
+ {!isSearchVisible ? ( + + + + ) : ( + + + + + + ) + }} + /> + )} +
- + {/* À droite : les boutons */} +
+ + + +
+
{Object.keys(quizzesByFolder).map((folderName) => ( @@ -571,7 +671,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' : '' })`} @@ -622,7 +724,7 @@ const Dashboard: React.FC = () => {
- +
From 51cebdaba1a55722d825b749f2905b6acb7e1f75 Mon Sep 17 00:00:00 2001 From: NouhailaAater Date: Tue, 8 Apr 2025 19:35:55 -0400 Subject: [PATCH 3/5] deplacemnt delete --- client/src/pages/Teacher/Dashboard/Dashboard.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/client/src/pages/Teacher/Dashboard/Dashboard.tsx b/client/src/pages/Teacher/Dashboard/Dashboard.tsx index a5b4f33..d9c91e2 100644 --- a/client/src/pages/Teacher/Dashboard/Dashboard.tsx +++ b/client/src/pages/Teacher/Dashboard/Dashboard.tsx @@ -711,21 +711,20 @@ const Dashboard: React.FC = () => { {' '} +
+ +
handleRemoveQuiz(quiz)} > {' '} {' '} - -
- -
))} From ddf955a7a2250ffd06bfb3acd614d0534bff0536 Mon Sep 17 00:00:00 2001 From: NouhailaAater Date: Tue, 8 Apr 2025 21:32:35 -0400 Subject: [PATCH 4/5] =?UTF-8?q?Am=C3=A9lioration=20page=20editor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Teacher/EditorQuiz/EditorQuiz.tsx | 77 +++++--- .../pages/Teacher/ManageRoom/ManageRoom.tsx | 29 ++- .../pages/Teacher/ManageRoom/manageRoom.css | 176 +++--------------- 3 files changed, 87 insertions(+), 195 deletions(-) diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx index 1e80fef..aba3c23 100644 --- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx +++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx @@ -175,48 +175,65 @@ const QuizForm: React.FC = () => { } return ( -
- -
+
+
-
Éditeur de quiz
+ +
-
+
+
Éditeur de quiz
{/*

Éditeur

*/} - -
- {folders.map((folder: FolderType) => ( - - ))} - - - diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index c938f7e..88fd5b7 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -386,32 +386,41 @@ const ManageRoom: React.FC = () => { return (
-

Salle : {formattedRoomName}

-
+
+
+
- { +

+ Salle : {formattedRoomName}
- + {' '} {students.length}/60
- } +

diff --git a/client/src/pages/Teacher/ManageRoom/manageRoom.css b/client/src/pages/Teacher/ManageRoom/manageRoom.css index 67eac11..9cecc43 100644 --- a/client/src/pages/Teacher/ManageRoom/manageRoom.css +++ b/client/src/pages/Teacher/ManageRoom/manageRoom.css @@ -2,25 +2,31 @@ .room .roomHeader { width: 100%; display: flex; - flex-direction: row; - justify-content: space-between; - align-content: stretch + flex-direction: column; + align-items: flex-start; + position: relative; } .room .roomHeader .returnButton { - flex-basis: 10%; - - display: flex; - justify-content: center; + position: absolute; + top: 10px; + left: 0; + z-index: 10; } .room .roomHeader .centerTitle { flex-basis: auto; - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: flex-end; + justify-content: flex-start; + align-items: flex-start; + margin-top: 40px; +} +.room .roomHeader .headerContent { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 60px; } .room .roomHeader .dumb { @@ -34,7 +40,6 @@ overflow: auto; justify-content: center; - /* align-items: center; */ } .room .finishQuizButton { @@ -44,146 +49,7 @@ width: 100%; } - - -/* .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; - } -} */ +.room h1 { + text-align: center; + margin-top: 50px; +} \ No newline at end of file From 09ec127a763f9248afda7882df8b5262996ba779 Mon Sep 17 00:00:00 2001 From: NouhailaAater Date: Tue, 8 Apr 2025 21:57:43 -0400 Subject: [PATCH 5/5] Positionnement a gauche bouton quitter --- .../pages/Teacher/ManageRoom/ManageRoom.tsx | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 6198989..b5116a7 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/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 (
- {/* En-tête avec titre et bouton QR code*/} + {/* En-tête avec bouton Disconnect à gauche et QR code à droite */}
{ marginBottom: '20px' }} > -

Salle : {formattedRoomName}

+
- {/* Modale QR Code */} setShowQrModal(false)} aria-labelledby="qr-modal-title" > - Rejoindre la salle: {formattedRoomName} + + Rejoindre la salle: {formattedRoomName} + Scannez ce QR code ou partagez le lien ci-dessous pour rejoindre la salle : @@ -457,13 +461,13 @@ const ManageRoom: React.FC = () => {

URL de participation :

{roomUrl}

+ variant="contained" + startIcon={} + onClick={handleCopy} + style={{ marginTop: '10px' }} + > + {copied ? 'Copié !' : 'Copier le lien'} +
@@ -472,13 +476,6 @@ const ManageRoom: React.FC = () => { -
- -