diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index 6dd7e60..fcbbe51 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -15,7 +15,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => { const question = questions[Number(index)].question as MultipleChoiceQuestion; const [actualAnswer, setActualAnswer] = useState(() => { - if (answer && answer.length > 0) { + if (answer && answer === undefined) { return answer; } return []; @@ -28,7 +28,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => { useEffect(() => { console.log('MultipleChoiceQuestionDisplay: passedAnswer', JSON.stringify(answer)); - if (answer !== undefined) { + if (answer.length !== undefined) { setActualAnswer(answer); } else { setActualAnswer([]); @@ -120,7 +120,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => { onClick={() => actualAnswer.length > 0 && submitAnswer && submitAnswer(actualAnswer) } - disabled={answer.length === 0} + disabled={actualAnswer.length === 0} > Répondre diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/test.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/test.tsx new file mode 100644 index 0000000..d023a40 --- /dev/null +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/test.tsx @@ -0,0 +1,133 @@ +// MultipleChoiceQuestionDisplay.tsx +import React, { useEffect, useState } from 'react'; +import '../questionStyle.css'; +import { Button } from '@mui/material'; +import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate'; +import { MultipleChoiceQuestion } from 'gift-pegjs'; +import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; + +interface Props { + question: MultipleChoiceQuestion; + handleOnSubmitAnswer?: (answer: AnswerType) => void; + showAnswer?: boolean; + passedAnswer?: AnswerType; +} + +const MultipleChoiceQuestionDisplay: React.FC = (props) => { + const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; + console.log('MultipleChoiceQuestionDisplay: passedAnswer', JSON.stringify(passedAnswer)); + + const [answer, setAnswer] = useState(() => { + if (passedAnswer && passedAnswer.length > 0) { + return passedAnswer; + } + return []; + }); + + let disableButton = false; + if (handleOnSubmitAnswer === undefined) { + disableButton = true; + } + + useEffect(() => { + console.log('MultipleChoiceQuestionDisplay: passedAnswer', JSON.stringify(passedAnswer)); + if (passedAnswer !== undefined) { + setAnswer(passedAnswer); + } else { + setAnswer([]); + } + }, [passedAnswer, question.id]); + + const handleOnClickAnswer = (choice: string) => { + setAnswer((prevAnswer) => { + console.log(`handleOnClickAnswer -- setAnswer(): prevAnswer: ${prevAnswer}, choice: ${choice}`); + const correctAnswersCount = question.choices.filter((c) => c.isCorrect).length; + + if (correctAnswersCount === 1) { + // If only one correct answer, replace the current selection + return prevAnswer.includes(choice) ? [] : [choice]; + } else { + // Allow multiple selections if there are multiple correct answers + if (prevAnswer.includes(choice)) { + // Remove the choice if it's already selected + return prevAnswer.filter((selected) => selected !== choice); + } else { + // Add the choice if it's not already selected + return [...prevAnswer, choice]; + } + } + }); + }; + + const alpha = Array.from(Array(26)).map((_e, i) => i + 65); + const alphabet = alpha.map((x) => String.fromCharCode(x)); + + return ( +
+
+
+
+
+ {question.choices.map((choice, i) => { + console.log(`answer: ${answer}, choice: ${choice.formattedText.text}`); + const selected = answer.includes(choice.formattedText.text) ? 'selected' : ''; + return ( +
+ +
+ ); + })} +
+ {question.formattedGlobalFeedback && showAnswer && ( +
+
+
+ )} + {!showAnswer && handleOnSubmitAnswer && ( + + )} +
+ ); +}; + +export default MultipleChoiceQuestionDisplay; diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx index 076d9d8..1008cce 100644 --- a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx +++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx @@ -1,30 +1,31 @@ // StudentModeQuiz.tsx -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import QuestionDisplay from '../QuestionsDisplay/QuestionDisplay'; import '../../pages/Student/JoinRoom/joinRoom.css'; -import { QuestionType } from '../../Types/QuestionType'; import { Button } from '@mui/material'; import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; import { useQuizContext } from 'src/pages/Student/JoinRoom/QuizContext'; const StudentModeQuiz: React.FC = () => { - const { questions, answers, setIsQuestionSent, disconnectWebSocket, setShowAnswer } = useQuizContext(); // Access setShowAnswer from context - - const [questionInfos, setQuestion] = useState(questions[0]); + const { questions, answers, setIsQuestionSent, disconnectWebSocket, setShowAnswer, index, updateIndex } = useQuizContext(); // Access setShowAnswer from context const previousQuestion = () => { - setQuestion(questions[Number(questionInfos.question?.id) - 2]); + updateIndex(Number(index) - 1); }; useEffect(() => { - const savedAnswer = answers[Number(questionInfos.question.id) - 1]?.answer; + let savedAnswer = undefined; + console.log(`StudentModeQuiz: useEffect: index: ${index}`); + if (answers.length === 0) { + savedAnswer = answers[Number(index) - 1]?.answer;} + console.log(`StudentModeQuiz: useEffect: savedAnswer: ${savedAnswer}`); setIsQuestionSent(savedAnswer !== undefined); setShowAnswer(savedAnswer !== undefined); // Update showAnswer in context - }, [questionInfos.question, answers, setShowAnswer]); + }, [index, answers, setShowAnswer]); const nextQuestion = () => { - setQuestion(questions[Number(questionInfos.question?.id)]); + updateIndex(Number(index)+1); }; return ( @@ -36,7 +37,7 @@ const StudentModeQuiz: React.FC = () => { />
- Question {questionInfos.question.id}/{questions.length} + Question {Number(index) +1}/{questions.length}
@@ -47,7 +48,7 @@ const StudentModeQuiz: React.FC = () => { variant="outlined" onClick={previousQuestion} fullWidth - disabled={Number(questionInfos.question.id) <= 1} + disabled={Number(index) +1 <= 1} > Question précédente @@ -57,7 +58,7 @@ const StudentModeQuiz: React.FC = () => { variant="outlined" onClick={nextQuestion} fullWidth - disabled={Number(questionInfos.question.id) >= questions.length} + disabled={Number(index) >= questions.length -1} > Question suivante diff --git a/client/src/pages/Student/JoinRoom/JoinRoom.tsx b/client/src/pages/Student/JoinRoom/JoinRoom.tsx index 4fe7c5f..3191ab6 100644 --- a/client/src/pages/Student/JoinRoom/JoinRoom.tsx +++ b/client/src/pages/Student/JoinRoom/JoinRoom.tsx @@ -80,7 +80,7 @@ const JoinRoom: React.FC = () => { console.log('on(launch-teacher-mode): Received launch-teacher-mode:', questions); setQuizMode('teacher'); setIsWaitingForTeacher(true); - updateIndex(null); + updateIndex(0); setQuestions(questions); // wait for next-question }); @@ -92,6 +92,7 @@ const JoinRoom: React.FC = () => { setQuestions([]); // clear out from last time (in case quiz is repeated) setQuestions(questions); updateIndex(0); + console.log('on(launch-student-mode): setQuestions:', index); }); socket.on('end-quiz', () => { disconnect(); diff --git a/client/src/pages/Student/JoinRoom/QuizProvider.tsx b/client/src/pages/Student/JoinRoom/QuizProvider.tsx index 073c024..7ad155e 100644 --- a/client/src/pages/Student/JoinRoom/QuizProvider.tsx +++ b/client/src/pages/Student/JoinRoom/QuizProvider.tsx @@ -32,9 +32,10 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children const [disconnectWebSocket, setDisconnectWebSocket] = useState<() => void>(() => () => {}); - const updateIndex = (questionId: number | null) => { - const questionIndex = questions.findIndex((q) => q.question.id === String(questionId)); - setIndex(questionIndex >= 0 ? questionIndex : null); + const updateIndex = (questionId?: number | null) => { + + setIndex(questionId ?? null); + }; // Function to handle answer submission @@ -42,9 +43,7 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children if (!idQuestion) { setAnswer(answer); setIsQuestionSent(true); - console.log('index',index); } else { - console.info(`QuizProvider: submitAnswer: answer: ${answer}, idQuestion: ${idQuestion}`); const answerData: AnswerSubmissionToBackendType = { roomName: roomName, answer: answer, @@ -59,7 +58,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children return newAnswers; // Return the new array }); - console.log(`QuizProvider: submitAnswer: answers: ${JSON.stringify(answers)}`); // Submit the answer to the WebSocket service webSocketService.submitAnswer(answerData); diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 75bc570..6095334 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -255,10 +255,10 @@ const ManageRoom: React.FC = () => { const nextQuestion = () => { if (!questions || !index || !quiz?.content) return; - const nextQuestionIndex = index; + const nextQuestionIndex = index +1; if (nextQuestionIndex === undefined || nextQuestionIndex > questions.length - 1) return; - + console.log('nextQuestionIndex:', questions); updateIndex(nextQuestionIndex); webSocketService.nextQuestion({roomName: formattedRoomName, questions: questions, @@ -410,7 +410,7 @@ const ManageRoom: React.FC = () => {
{quiz?.title}
{index && ( - Question {index+1}/ + Question {index +1}/ {questions?.length} )} @@ -451,7 +451,7 @@ const ManageRoom: React.FC = () => { @@ -462,7 +462,7 @@ const ManageRoom: React.FC = () => { variant="contained" disabled={ index !== null && - index >= questions.length + index >= questions.length -1 } > Prochaine question