fonctionne parfaitement

This commit is contained in:
JubaAzul 2025-04-28 15:19:19 -04:00
parent 241d0d1cf7
commit 930180d556
9 changed files with 35 additions and 69 deletions

View file

@ -40,7 +40,7 @@ const LiveResultsTableFooter: React.FC<LiveResultsFooterProps> = ({
</TableCell> </TableCell>
{Array.from({ length: maxQuestions }, (_, index) => { {Array.from({ length: maxQuestions }, (_, index) => {
const answer = student.answers.find( 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 answerText = answer ? answer.answer.toString() : '';
const isCorrect = answer ? answer.isCorrect : false; const isCorrect = answer ? answer.isCorrect : false;

View file

@ -15,23 +15,18 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
const answer = answers[Number(index)]?.answer; const answer = answers[Number(index)]?.answer;
const question = questions[Number(index)].question as MultipleChoiceQuestion; const question = questions[Number(index)].question as MultipleChoiceQuestion;
const [actualAnswer, setActualAnswer] = useState<AnswerType>(() => { const [actualAnswer, setActualAnswer] = useState<AnswerType | undefined>(() => {
if (answer !== undefined) { if (answer !== undefined) {
return answers[Number(index)].answer; return answers[Number(index)].answer;
} }
return []; return undefined;
}); });
let disableButton = false;
if (submitAnswer === undefined) {
disableButton = true;
}
useEffect(() => { useEffect(() => {
if (answer !== undefined) { if (answer !== undefined) {
setActualAnswer(answer); setActualAnswer(answer);
} else { } else {
setActualAnswer([]); setActualAnswer(undefined);
} }
}, [index]); }, [index]);
@ -42,15 +37,15 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
if (correctAnswersCount === 1) { if (correctAnswersCount === 1) {
// If only one correct answer, replace the current selection // If only one correct answer, replace the current selection
return answer.includes(choice) ? [] : [choice]; return answer?.includes(choice) ? [] : [choice];
} else { } else {
// Allow multiple selections if there are multiple correct answers // 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 // Remove the choice if it's already selected
return answer.filter((selected) => selected !== choice); return answer.filter((selected) => selected !== choice);
} else { } else {
// Add the choice if it's not already selected // Add the choice if it's not already selected
return [...answer, choice]; return [...(answer || []), choice];
} }
} }
}); });
@ -69,13 +64,13 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
<div className="choices-wrapper mb-1"> <div className="choices-wrapper mb-1">
{question.choices.map((choice, i) => { {question.choices.map((choice, i) => {
console.log(`answer: ${actualAnswer}, choice: ${choice.formattedText.text}`); 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 ( return (
<div key={choice.formattedText.text + i} className="choice-container"> <div key={choice.formattedText.text + i} className="choice-container">
<Button <Button
variant="text" variant="text"
className="button-wrapper" className="button-wrapper"
disabled={disableButton || isTeacherMode} disabled={isTeacherMode}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)} onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
> >
{showAnswer ? ( {showAnswer ? (
@ -120,7 +115,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
onClick={() => onClick={() =>
actualAnswer !== undefined && submitAnswer && submitAnswer(actualAnswer) actualAnswer !== undefined && submitAnswer && submitAnswer(actualAnswer)
} }
disabled={actualAnswer === undefined} disabled={actualAnswer === undefined || actualAnswer.length === 0}
> >
Répondre Répondre
</Button> </Button>

View file

@ -23,11 +23,6 @@ const TrueFalseQuestionDisplay: React.FC = () => {
return undefined; return undefined;
}); });
let disableButton = false;
if (submitAnswer === undefined) {
disableButton = true;
}
useEffect(() => { useEffect(() => {
console.log("passedAnswer", answer); console.log("passedAnswer", answer);
if (answer && (answer[0] === true || answer[0] === false)) { if (answer && (answer[0] === true || answer[0] === false)) {
@ -60,7 +55,7 @@ const TrueFalseQuestionDisplay: React.FC = () => {
className="button-wrapper" className="button-wrapper"
onClick={() => !showAnswer && handleOnClickAnswer(true)} onClick={() => !showAnswer && handleOnClickAnswer(true)}
fullWidth fullWidth
disabled={disableButton || isTeacherMode} disabled={isTeacherMode}
> >
{showAnswer ? ( {showAnswer ? (
<div> {question.isTrue ? '✅' : '❌'}</div> <div> {question.isTrue ? '✅' : '❌'}</div>
@ -86,7 +81,7 @@ const TrueFalseQuestionDisplay: React.FC = () => {
className="button-wrapper" className="button-wrapper"
onClick={() => !showAnswer && handleOnClickAnswer(false)} onClick={() => !showAnswer && handleOnClickAnswer(false)}
fullWidth fullWidth
disabled={disableButton || isTeacherMode} disabled={isTeacherMode}
> >
{showAnswer ? ( {showAnswer ? (
<div> {!question.isTrue ? '✅' : '❌'}</div> <div> {!question.isTrue ? '✅' : '❌'}</div>

View file

@ -17,9 +17,8 @@ const StudentModeQuiz: React.FC = () => {
let savedAnswer = undefined; let savedAnswer = undefined;
if (answers.length !== 0) { if (answers.length !== 0) {
savedAnswer = answers[Number(index)]?.answer;} savedAnswer = answers[Number(index)]?.answer;}
setIsQuestionSent(savedAnswer !== undefined); setIsQuestionSent(savedAnswer !== undefined);
setShowAnswer(savedAnswer !== undefined); // Update showAnswer in context setShowAnswer(savedAnswer !== undefined);
}, [index, answers, setShowAnswer]); }, [index, answers, setShowAnswer]);
const nextQuestion = () => { const nextQuestion = () => {

View file

@ -16,41 +16,27 @@ const TeacherModeQuiz: React.FC = () => {
index, index,
isQuestionSent, isQuestionSent,
setIsQuestionSent, setIsQuestionSent,
answer,
setAnswer,
} = useQuizContext(); } = 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(() => { useEffect(() => {
console.log(`QuestionDisplay: questions: ${JSON.stringify(questions)}`); if (answers[Number(index)].answer !== undefined) {
setIsQuestionSent(true);
console.log(`TeacherModeQuiz: useEffect: answers: ${JSON.stringify(answers)}`); setIsDialogOpen(true);
console.log(`TeacherModeQuiz: useEffect: questionInfos.question.id: ${index} answer: ${answer}`); setShowAnswer(true);
const oldAnswer = answers[Number(index) -1 ]?.answer; } else {
console.log(`TeacherModeQuiz: useEffect: oldAnswer: ${oldAnswer}`);
setAnswer(oldAnswer);
setShowAnswer(false); setShowAnswer(false);
setIsQuestionSent(false); setIsQuestionSent(false);
setIsDialogOpen(false);
}
}, [questions[Number(index)].question, answers]); }, [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 = () => { const handleFeedbackDialogClose = () => {
setIsQuestionSent(false); setIsDialogOpen(false);
setIsAnswerSubmitted(true);
}; };
return ( return (
@ -62,14 +48,14 @@ const TeacherModeQuiz: React.FC = () => {
message={`Êtes-vous sûr de vouloir quitter?`} /> message={`Êtes-vous sûr de vouloir quitter?`} />
<div className='centerTitle'> <div className='centerTitle'>
<div className='title'>Question {index}</div> <div className='title'>Question {Number((index ?? 0) + 1)}</div>
</div> </div>
<div className='dumb'></div> <div className='dumb'></div>
</div> </div>
{isAnswerSubmitted ? ( {isQuestionSent ? (
<div> <div>
En attente pour la prochaine question... En attente pour la prochaine question...
</div> </div>
@ -78,7 +64,7 @@ const TeacherModeQuiz: React.FC = () => {
)} )}
<Dialog <Dialog
open={isQuestionSent} open={isDialogOpen}
onClose={handleFeedbackDialogClose} onClose={handleFeedbackDialogClose}
> >
<DialogTitle>Rétroaction</DialogTitle> <DialogTitle>Rétroaction</DialogTitle>

View file

@ -72,13 +72,15 @@ const JoinRoom: React.FC = () => {
console.log('JoinRoom: on(next-question): Received next-question:', question); console.log('JoinRoom: on(next-question): Received next-question:', question);
setQuizMode('teacher'); setQuizMode('teacher');
setIsWaitingForTeacher(false); setIsWaitingForTeacher(false);
updateIndex(Number(question.question.id)); updateIndex(Number(question.question.id) -1);
}); });
socket.on('launch-teacher-mode', (questions: QuestionType[]) => { socket.on('launch-teacher-mode', (questions: QuestionType[]) => {
console.log('on(launch-teacher-mode): Received launch-teacher-mode:', questions); console.log('on(launch-teacher-mode): Received launch-teacher-mode:', questions);
setQuizMode('teacher'); setQuizMode('teacher');
setIsWaitingForTeacher(true); setIsWaitingForTeacher(true);
updateIndex(0); updateIndex(0);
console.log('on(launch-teacher-mode): setQuestions:', index);
setQuestions(questions); setQuestions(questions);
// wait for next-question // wait for next-question
}); });

View file

@ -10,8 +10,6 @@ export const QuizContext = React.createContext<{
setQuestions: Dispatch<SetStateAction<QuestionType[]>>; setQuestions: Dispatch<SetStateAction<QuestionType[]>>;
answers: AnswerSubmissionToBackendType[]; answers: AnswerSubmissionToBackendType[];
setAnswers: Dispatch<SetStateAction<AnswerSubmissionToBackendType[]>>; setAnswers: Dispatch<SetStateAction<AnswerSubmissionToBackendType[]>>;
answer : AnswerType;
setAnswer: Dispatch<SetStateAction<AnswerType>>;
index: number | null; // Add index to the context index: number | null; // Add index to the context
updateIndex: (questionId: number | null) => void; // Add a function to update the index updateIndex: (questionId: number | null) => void; // Add a function to update the index
submitAnswer: (answer: AnswerType, idQuestion?: number) => void; // Updated submitAnswer signature submitAnswer: (answer: AnswerType, idQuestion?: number) => void; // Updated submitAnswer signature
@ -33,8 +31,6 @@ export const QuizContext = React.createContext<{
setQuestions: () => {}, setQuestions: () => {},
answers: [], answers: [],
setAnswers: () => {}, setAnswers: () => {},
answer: [], // Default value for answer
setAnswer: () => {}, // Default no-op function
index: null, // Default value for index index: null, // Default value for index
updateIndex: () => {}, // Default no-op function updateIndex: () => {}, // Default no-op function
submitAnswer: () => {}, // Default no-op function submitAnswer: () => {}, // Default no-op function

View file

@ -21,8 +21,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children
// Calculate the index based on the current question's ID // Calculate the index based on the current question's ID
const [index, setIndex] = useState<number | null>(null); const [index, setIndex] = useState<number | null>(null);
const [answer, setAnswer] = useState<AnswerType>([]); // Initialize answer as an empty array
const [isQuestionSent, setIsQuestionSent] = useState(false); const [isQuestionSent, setIsQuestionSent] = useState(false);
const [isTeacherMode, setisTeacherMode] = useState(false); const [isTeacherMode, setisTeacherMode] = useState(false);
@ -36,7 +34,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children
const updateIndex = (questionId?: number | null) => { const updateIndex = (questionId?: number | null) => {
setIndex(questionId ?? null); setIndex(questionId ?? null);
}; };
@ -50,7 +47,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children
username: username, username: username,
idQuestion: Number(index), idQuestion: Number(index),
}; };
setAnswer(answer);
setIsQuestionSent(true); setIsQuestionSent(true);
// Update the answers state // Update the answers state
setAnswers((prevAnswers) => { setAnswers((prevAnswers) => {
@ -58,7 +54,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children
newAnswers[Number(index)] = answerData; // Update the specific answer newAnswers[Number(index)] = answerData; // Update the specific answer
return newAnswers; // Return the new array return newAnswers; // Return the new array
}); });
console.log(`submitAnswer: answerData: ${JSON.stringify(answers)}`);
// Submit the answer to the WebSocket service // Submit the answer to the WebSocket service
webSocketService.submitAnswer(answerData); webSocketService.submitAnswer(answerData);
@ -74,8 +69,6 @@ export const QuizProvider: React.FC<{ children: React.ReactNode }> = ({ children
setQuestions, setQuestions,
answers, answers,
setAnswers, setAnswers,
answer,
setAnswer,
index, // Expose the index in the context index, // Expose the index in the context
updateIndex, // Expose a function to update the index updateIndex, // Expose a function to update the index
submitAnswer, // Expose submitAnswer in the context submitAnswer, // Expose submitAnswer in the context

View file

@ -99,7 +99,7 @@ class WebSocketService {
submitAnswer(answerData: AnswerSubmissionToBackendType) { submitAnswer(answerData: AnswerSubmissionToBackendType) {
if (this.socket) { if (this.socket) {
this.socket?.emit('submit-answer', answerData this.socket?.emit('', answerData
); );
} }
} }