From 0941a44e5035ee9e4215595edf6013d6a3b7407e Mon Sep 17 00:00:00 2001 From: NouhailaAater Date: Mon, 31 Mar 2025 22:19:24 -0400 Subject: [PATCH] =?UTF-8?q?Am=C3=A9liore=20page=20=20editor=20quiz?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Teacher/EditorQuiz/EditorQuiz.tsx | 202 ++++++++++-------- .../pages/Teacher/ManageRoom/ManageRoom.tsx | 78 ++++--- 2 files changed, 170 insertions(+), 110 deletions(-) diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx index 12eafcd..74b9a21 100644 --- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx +++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx @@ -11,7 +11,16 @@ import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview import { QuizType } from '../../../Types/QuizType'; import './editorQuiz.css'; -import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material'; +import { + Button, + TextField, + NativeSelect, + Divider, + Dialog, + DialogTitle, + DialogActions, + DialogContent +} from '@mui/material'; import ReturnButton from 'src/components/ReturnButton/ReturnButton'; import ApiService from '../../../services/ApiService'; @@ -62,7 +71,7 @@ const QuizForm: React.FC = () => { }; }, []); - const scrollToImagesSection = (event: { preventDefault: () => void; }) => { + const scrollToImagesSection = (event: { preventDefault: () => void }) => { event.preventDefault(); const section = document.getElementById('images-section'); if (section) { @@ -87,10 +96,12 @@ const QuizForm: React.FC = () => { return; } - const quiz = await ApiService.getQuiz(id) as QuizType; + const quiz = (await ApiService.getQuiz(id)) as QuizType; if (!quiz) { - window.alert(`Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard`) + window.alert( + `Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard` + ); console.error('Quiz not found for id:', id); navigate('/teacher/dashboard'); return; @@ -103,9 +114,8 @@ const QuizForm: React.FC = () => { setSelectedFolder(folderId); setFilteredValue(content); setValue(quiz.content.join('\n\n')); - } catch (error) { - window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`) + window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`); console.error('Error fetching quiz:', error); navigate('/teacher/dashboard'); } @@ -120,7 +130,7 @@ const QuizForm: React.FC = () => { } // split value when there is at least one blank line - const linesArray = value.split(/\n{2,}/); + const linesArray = value.split(/\n{2,}/); // if the first item in linesArray is blank, remove it if (linesArray[0] === '') linesArray.shift(); @@ -138,12 +148,12 @@ const QuizForm: React.FC = () => { try { // check if everything is there if (quizTitle == '') { - alert("Veuillez choisir un titre"); + alert('Veuillez choisir un titre'); return; } if (selectedFolder == '') { - alert("Veuillez choisir un dossier"); + alert('Veuillez choisir un dossier'); return; } @@ -157,8 +167,8 @@ const QuizForm: React.FC = () => { navigate('/teacher/dashboard'); } catch (error) { - window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`) - console.log(error) + window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`); + console.log(error); } }; @@ -177,107 +187,122 @@ const QuizForm: React.FC = () => { } if (!inputElement.files || inputElement.files.length === 0) { - window.alert("Veuillez d'abord choisir une image à téléverser.") + window.alert("Veuillez d'abord choisir une image à téléverser."); return; } const imageUrl = await ApiService.uploadImage(inputElement.files[0]); // Check for errors - if(imageUrl.indexOf("ERROR") >= 0) { - window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`) + if (imageUrl.indexOf('ERROR') >= 0) { + window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`); return; } - setImageLinks(prevLinks => [...prevLinks, imageUrl]); + setImageLinks((prevLinks) => [...prevLinks, imageUrl]); // Reset the file input element if (fileInputRef.current) { fileInputRef.current.value = ''; } } catch (error) { - window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`) - + window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`); } }; const handleCopyToClipboard = async (link: string) => { navigator.clipboard.writeText(link); - } + }; return ( -
- -
+
+
-
Éditeur de quiz
- -
+
- {/*

Éditeur

*/} +
+
Éditeur de quiz
+
- - - - + + {folders.map((folder: FolderType) => ( + + ))} + +
-
- -
+
+
+ onEditorChange={handleUpdatePreview} + /> -
-
+
+
- setDialogOpen(false)} > + setDialogOpen(false)}> Erreur Veuillez d'abord choisir une image à téléverser. @@ -292,23 +317,32 @@ const QuizForm: React.FC = () => {

Mes images :

-
-
(Voir section
- -

9. Images

- -
ci-dessous
-
)
+
+
(Voir section
+ + + +

9. Images

+ + + +
ci-dessous
+
)

- Cliquez sur un lien pour le copier -
-
    +
+
    {imageLinks.map((link, index) => { - const imgTag = `![alt_text](${escapeForGIFT(link)} "texte de l'infobulle")`; + const imgTag = `![alt_text](${escapeForGIFT( + link + )} "texte de l'infobulle")`; return (
  • - handleCopyToClipboard(imgTag)}> + handleCopyToClipboard(imgTag)}> {imgTag}
    • @@ -319,10 +353,9 @@ const QuizForm: React.FC = () => {
-
-
+

Prévisualisation

@@ -330,7 +363,6 @@ const QuizForm: React.FC = () => {
-
{showScrollButton && ( @@ -358,7 +390,7 @@ const scrollToTopButtonStyle: CSSProperties = { backgroundColor: '#5271ff', border: 'none', cursor: 'pointer', - zIndex: 1000, + zIndex: 1000 }; export default QuizForm; diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 67d403b..c840f44 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -25,14 +25,14 @@ const ManageRoom: React.FC = () => { const navigate = useNavigate(); const [socket, setSocket] = useState(null); const [students, setStudents] = useState([]); - const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>(); + const { quizId = '', roomName = '' } = useParams<{ quizId: string; roomName: string }>(); const [quizQuestions, setQuizQuestions] = useState(); const [quiz, setQuiz] = useState(null); const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher'); const [connectingError, setConnectingError] = useState(''); const [currentQuestion, setCurrentQuestion] = useState(undefined); const [quizStarted, setQuizStarted] = useState(false); - const [formattedRoomName, setFormattedRoomName] = useState(""); + const [formattedRoomName, setFormattedRoomName] = useState(''); const [newlyConnectedUser, setNewlyConnectedUser] = useState(null); // Handle the newly connected user in useEffect, because it needs state info @@ -179,7 +179,6 @@ const ManageRoom: React.FC = () => { }; useEffect(() => { - if (socket) { console.log(`Listening for submit-answer-room in room ${formattedRoomName}`); socket.on('submit-answer-room', (answerData: AnswerReceptionFromBackendType) => { @@ -253,10 +252,12 @@ const ManageRoom: React.FC = () => { if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return; setCurrentQuestion(quizQuestions[nextQuestionIndex]); - webSocketService.nextQuestion({roomName: formattedRoomName, + webSocketService.nextQuestion({ + roomName: formattedRoomName, questions: quizQuestions, questionIndex: nextQuestionIndex, - isLaunch: false}); + isLaunch: false + }); }; const previousQuestion = () => { @@ -266,7 +267,12 @@ const ManageRoom: React.FC = () => { if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return; setCurrentQuestion(quizQuestions[prevQuestionIndex]); - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex: prevQuestionIndex, + isLaunch: false + }); }; const initializeQuizQuestion = () => { @@ -294,7 +300,12 @@ const ManageRoom: React.FC = () => { } setCurrentQuestion(quizQuestions[0]); - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex: 0, + isLaunch: true + }); }; const launchStudentMode = () => { @@ -331,7 +342,12 @@ const ManageRoom: React.FC = () => { if (quiz?.content && quizQuestions) { setCurrentQuestion(quizQuestions[questionIndex]); if (quizMode === 'teacher') { - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex, + isLaunch: false + }); } } }; @@ -365,7 +381,34 @@ const ManageRoom: React.FC = () => { return (
-

Salle : {formattedRoomName}

+
+

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

+
+
{ alignItems: 'center', width: '100%' }} - > - { -
- - {students.length}/60 -
- } -
+ >
@@ -429,7 +458,6 @@ const ManageRoom: React.FC = () => { )}