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>
{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;

View file

@ -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<AnswerType>(() => {
const [actualAnswer, setActualAnswer] = useState<AnswerType | undefined>(() => {
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 = () => {
<div className="choices-wrapper mb-1">
{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 (
<div key={choice.formattedText.text + i} className="choice-container">
<Button
variant="text"
className="button-wrapper"
disabled={disableButton || isTeacherMode}
disabled={isTeacherMode}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
>
{showAnswer ? (
@ -120,7 +115,7 @@ const MultipleChoiceQuestionDisplay: React.FC = () => {
onClick={() =>
actualAnswer !== undefined && submitAnswer && submitAnswer(actualAnswer)
}
disabled={actualAnswer === undefined}
disabled={actualAnswer === undefined || actualAnswer.length === 0}
>
Répondre
</Button>

View file

@ -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 ? (
<div> {question.isTrue ? '✅' : '❌'}</div>
@ -86,7 +81,7 @@ const TrueFalseQuestionDisplay: React.FC = () => {
className="button-wrapper"
onClick={() => !showAnswer && handleOnClickAnswer(false)}
fullWidth
disabled={disableButton || isTeacherMode}
disabled={isTeacherMode}
>
{showAnswer ? (
<div> {!question.isTrue ? '✅' : '❌'}</div>

View file

@ -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 = () => {

View file

@ -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?`} />
<div className='centerTitle'>
<div className='title'>Question {index}</div>
<div className='title'>Question {Number((index ?? 0) + 1)}</div>
</div>
<div className='dumb'></div>
</div>
{isAnswerSubmitted ? (
{isQuestionSent ? (
<div>
En attente pour la prochaine question...
</div>
@ -78,7 +64,7 @@ const TeacherModeQuiz: React.FC = () => {
)}
<Dialog
open={isQuestionSent}
open={isDialogOpen}
onClose={handleFeedbackDialogClose}
>
<DialogTitle>Rétroaction</DialogTitle>

View file

@ -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 && (
<TeacherModeQuiz />
<TeacherModeQuiz/>
)
);
default:

View file

@ -10,8 +10,6 @@ export const QuizContext = React.createContext<{
setQuestions: Dispatch<SetStateAction<QuestionType[]>>;
answers: AnswerSubmissionToBackendType[];
setAnswers: Dispatch<SetStateAction<AnswerSubmissionToBackendType[]>>;
answer : AnswerType;
setAnswer: Dispatch<SetStateAction<AnswerType>>;
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

View file

@ -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<number | null>(null);
const [answer, setAnswer] = useState<AnswerType>([]); // 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

View file

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