From 930180d5568456e8ff5d0d771ecbd2abea8801a5 Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Mon, 28 Apr 2025 15:19:19 -0400 Subject: [PATCH] fonctionne parfaitement --- .../TableComponents/LiveResultsTableBody.tsx | 2 +- .../MultipleChoiceQuestionDisplay.tsx | 23 ++++------ .../TrueFalseQuestionDisplay.tsx | 9 +--- .../StudentModeQuiz/StudentModeQuiz.tsx | 3 +- .../TeacherModeQuiz/TeacherModeQuiz.tsx | 46 +++++++------------ .../src/pages/Student/JoinRoom/JoinRoom.tsx | 8 ++-- .../pages/Student/JoinRoom/QuizContext.tsx | 4 -- .../pages/Student/JoinRoom/QuizProvider.tsx | 7 --- client/src/services/WebsocketService.tsx | 2 +- 9 files changed, 35 insertions(+), 69 deletions(-) diff --git a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx index a0c67f7..ca87ca8 100644 --- a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx +++ b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx @@ -40,7 +40,7 @@ const LiveResultsTableFooter: React.FC = ({ {Array.from({ length: maxQuestions }, (_, index) => { const answer = student.answers.find( - (answer) => parseInt(answer.idQuestion.toString()) === index + 1 + (answer) => parseInt(answer.idQuestion.toString()) === index ); const answerText = answer ? answer.answer.toString() : ''; const isCorrect = answer ? answer.isCorrect : false; diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index 9b9b052..15231d7 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -15,23 +15,18 @@ const MultipleChoiceQuestionDisplay: React.FC = () => { const answer = answers[Number(index)]?.answer; const question = questions[Number(index)].question as MultipleChoiceQuestion; - const [actualAnswer, setActualAnswer] = useState(() => { + const [actualAnswer, setActualAnswer] = useState(() => { if (answer !== undefined) { return answers[Number(index)].answer; } - return []; + return undefined; }); - let disableButton = false; - if (submitAnswer === undefined) { - disableButton = true; - } - useEffect(() => { if (answer !== undefined) { setActualAnswer(answer); } else { - setActualAnswer([]); + setActualAnswer(undefined); } }, [index]); @@ -42,15 +37,15 @@ const MultipleChoiceQuestionDisplay: React.FC = () => { if (correctAnswersCount === 1) { // If only one correct answer, replace the current selection - return answer.includes(choice) ? [] : [choice]; + return answer?.includes(choice) ? [] : [choice]; } else { // Allow multiple selections if there are multiple correct answers - if (answer.includes(choice)) { + if (answer?.includes(choice)) { // Remove the choice if it's already selected return answer.filter((selected) => selected !== choice); } else { // Add the choice if it's not already selected - return [...answer, choice]; + return [...(answer || []), choice]; } } }); @@ -69,13 +64,13 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
{question.choices.map((choice, i) => { console.log(`answer: ${actualAnswer}, choice: ${choice.formattedText.text}`); - const selected = actualAnswer.includes(choice.formattedText.text) ? 'selected' : ''; + const selected = actualAnswer?.includes(choice.formattedText.text) ? 'selected' : ''; return (
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx index c30bb11..d500a86 100644 --- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx @@ -23,11 +23,6 @@ const TrueFalseQuestionDisplay: React.FC = () => { return undefined; }); - let disableButton = false; - if (submitAnswer === undefined) { - disableButton = true; - } - useEffect(() => { console.log("passedAnswer", answer); if (answer && (answer[0] === true || answer[0] === false)) { @@ -60,7 +55,7 @@ const TrueFalseQuestionDisplay: React.FC = () => { className="button-wrapper" onClick={() => !showAnswer && handleOnClickAnswer(true)} fullWidth - disabled={disableButton || isTeacherMode} + disabled={isTeacherMode} > {showAnswer ? (
{question.isTrue ? '✅' : '❌'}
@@ -86,7 +81,7 @@ const TrueFalseQuestionDisplay: React.FC = () => { className="button-wrapper" onClick={() => !showAnswer && handleOnClickAnswer(false)} fullWidth - disabled={disableButton || isTeacherMode} + disabled={isTeacherMode} > {showAnswer ? (
{!question.isTrue ? '✅' : '❌'}
diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx index 036fd98..3b0f6f1 100644 --- a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx +++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx @@ -17,9 +17,8 @@ const StudentModeQuiz: React.FC = () => { let savedAnswer = undefined; if (answers.length !== 0) { savedAnswer = answers[Number(index)]?.answer;} - setIsQuestionSent(savedAnswer !== undefined); - setShowAnswer(savedAnswer !== undefined); // Update showAnswer in context + setShowAnswer(savedAnswer !== undefined); }, [index, answers, setShowAnswer]); const nextQuestion = () => { diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx index a026c53..2015cb0 100644 --- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx +++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx @@ -16,41 +16,27 @@ const TeacherModeQuiz: React.FC = () => { index, isQuestionSent, setIsQuestionSent, - answer, - setAnswer, } = useQuizContext(); - const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false); + const [isDialogOpen, setIsDialogOpen] = useState(false); - // arrive here the first time after waiting for next question + console.log("TeacherModeQuiz",answers[Number(index)].answer); useEffect(() => { - console.log(`QuestionDisplay: questions: ${JSON.stringify(questions)}`); - - console.log(`TeacherModeQuiz: useEffect: answers: ${JSON.stringify(answers)}`); - console.log(`TeacherModeQuiz: useEffect: questionInfos.question.id: ${index} answer: ${answer}`); - const oldAnswer = answers[Number(index) -1 ]?.answer; - console.log(`TeacherModeQuiz: useEffect: oldAnswer: ${oldAnswer}`); - setAnswer(oldAnswer); - setShowAnswer(false); - setIsQuestionSent(false); + if (answers[Number(index)].answer !== undefined) { + setIsQuestionSent(true); + setIsDialogOpen(true); + setShowAnswer(true); + } else { + setShowAnswer(false); + setIsQuestionSent(false); + setIsDialogOpen(false); + } + }, [questions[Number(index)].question, answers]); - // handle showing the feedback dialog - useEffect(() => { - console.log(`TeacherModeQuiz: useEffect: answer: ${answer}`); - setIsAnswerSubmitted(answer !== undefined); - setIsQuestionSent(answer !== undefined); - }, [answer]); - - useEffect(() => { - console.log(`TeacherModeQuiz: useEffect: isAnswerSubmitted: ${isAnswerSubmitted}`); - setIsQuestionSent(isAnswerSubmitted); - setShowAnswer(isAnswerSubmitted); - }, [isAnswerSubmitted]); const handleFeedbackDialogClose = () => { - setIsQuestionSent(false); - setIsAnswerSubmitted(true); + setIsDialogOpen(false); }; return ( @@ -62,14 +48,14 @@ const TeacherModeQuiz: React.FC = () => { message={`Êtes-vous sûr de vouloir quitter?`} />
-
Question {index}
+
Question {Number((index ?? 0) + 1)}
- {isAnswerSubmitted ? ( + {isQuestionSent ? (
En attente pour la prochaine question...
@@ -78,7 +64,7 @@ const TeacherModeQuiz: React.FC = () => { )} Rétroaction diff --git a/client/src/pages/Student/JoinRoom/JoinRoom.tsx b/client/src/pages/Student/JoinRoom/JoinRoom.tsx index ee4e334..38c49ec 100644 --- a/client/src/pages/Student/JoinRoom/JoinRoom.tsx +++ b/client/src/pages/Student/JoinRoom/JoinRoom.tsx @@ -71,14 +71,16 @@ const JoinRoom: React.FC = () => { socket.on('next-question', (question: QuestionType) => { console.log('JoinRoom: on(next-question): Received next-question:', question); setQuizMode('teacher'); - setIsWaitingForTeacher(false); - updateIndex(Number(question.question.id)); + setIsWaitingForTeacher(false); + updateIndex(Number(question.question.id) -1); + }); socket.on('launch-teacher-mode', (questions: QuestionType[]) => { console.log('on(launch-teacher-mode): Received launch-teacher-mode:', questions); setQuizMode('teacher'); setIsWaitingForTeacher(true); updateIndex(0); + console.log('on(launch-teacher-mode): setQuestions:', index); setQuestions(questions); // wait for next-question }); @@ -182,7 +184,7 @@ const JoinRoom: React.FC = () => { case 'teacher': return ( index != null && ( - + ) ); default: diff --git a/client/src/pages/Student/JoinRoom/QuizContext.tsx b/client/src/pages/Student/JoinRoom/QuizContext.tsx index 7ec0e2d..56562de 100644 --- a/client/src/pages/Student/JoinRoom/QuizContext.tsx +++ b/client/src/pages/Student/JoinRoom/QuizContext.tsx @@ -10,8 +10,6 @@ export const QuizContext = React.createContext<{ setQuestions: Dispatch>; answers: AnswerSubmissionToBackendType[]; setAnswers: Dispatch>; - answer : AnswerType; - setAnswer: Dispatch>; index: number | null; // Add index to the context updateIndex: (questionId: number | null) => void; // Add a function to update the index submitAnswer: (answer: AnswerType, idQuestion?: number) => void; // Updated submitAnswer signature @@ -33,8 +31,6 @@ export const QuizContext = React.createContext<{ setQuestions: () => {}, answers: [], setAnswers: () => {}, - answer: [], // Default value for answer - setAnswer: () => {}, // Default no-op function index: null, // Default value for index updateIndex: () => {}, // Default no-op function submitAnswer: () => {}, // Default no-op function diff --git a/client/src/pages/Student/JoinRoom/QuizProvider.tsx b/client/src/pages/Student/JoinRoom/QuizProvider.tsx index ca3bdc1..d0f5393 100644 --- a/client/src/pages/Student/JoinRoom/QuizProvider.tsx +++ b/client/src/pages/Student/JoinRoom/QuizProvider.tsx @@ -20,8 +20,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children // Calculate the index based on the current question's ID const [index, setIndex] = useState(null); - - const [answer, setAnswer] = useState([]); // Initialize answer as an empty array const [isQuestionSent, setIsQuestionSent] = useState(false); @@ -36,7 +34,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children const updateIndex = (questionId?: number | null) => { - setIndex(questionId ?? null); }; @@ -50,7 +47,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children username: username, idQuestion: Number(index), }; - setAnswer(answer); setIsQuestionSent(true); // Update the answers state setAnswers((prevAnswers) => { @@ -58,7 +54,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children newAnswers[Number(index)] = answerData; // Update the specific answer return newAnswers; // Return the new array }); - console.log(`submitAnswer: answerData: ${JSON.stringify(answers)}`); // Submit the answer to the WebSocket service webSocketService.submitAnswer(answerData); @@ -74,8 +69,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children setQuestions, answers, setAnswers, - answer, - setAnswer, index, // Expose the index in the context updateIndex, // Expose a function to update the index submitAnswer, // Expose submitAnswer in the context diff --git a/client/src/services/WebsocketService.tsx b/client/src/services/WebsocketService.tsx index 9262a59..2967534 100644 --- a/client/src/services/WebsocketService.tsx +++ b/client/src/services/WebsocketService.tsx @@ -99,7 +99,7 @@ class WebSocketService { submitAnswer(answerData: AnswerSubmissionToBackendType) { if (this.socket) { - this.socket?.emit('submit-answer', answerData + this.socket?.emit('', answerData ); } }