Après réponse par étudiant dans mode rythme de l'enseignant, ça passe à la question suivante (sans afficher rétroaction)

Fixes #86
This commit is contained in:
C. Fuhrman 2024-09-24 19:56:47 -04:00
parent 457a5145c1
commit 9925b7f039
4 changed files with 42 additions and 15 deletions

View file

@ -39,7 +39,7 @@ describe('TeacherModeQuiz', () => {
expect(screen.getByText('Répondre')).toBeInTheDocument(); expect(screen.getByText('Répondre')).toBeInTheDocument();
}); });
test('handles answer submission and displays wait text', () => { test('handles answer submission and displays feedback', () => {
act(() => { act(() => {
fireEvent.click(screen.getByText('Option A')); fireEvent.click(screen.getByText('Option A'));
@ -48,7 +48,7 @@ describe('TeacherModeQuiz', () => {
fireEvent.click(screen.getByText('Répondre')); fireEvent.click(screen.getByText('Répondre'));
}); });
expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', '1'); expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', '1');
expect(screen.getByText('En attente pour la prochaine question...')).toBeInTheDocument(); expect(screen.getByText('Votre réponse est "Option A".')).toBeInTheDocument();
}); });
test('handles disconnect button click', () => { test('handles disconnect button click', () => {

View file

@ -66,7 +66,6 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
handleOnSubmitAnswer={handleOnSubmitAnswer} handleOnSubmitAnswer={handleOnSubmitAnswer}
question={questionInfos.question} question={questionInfos.question}
showAnswer={isAnswerSubmitted} showAnswer={isAnswerSubmitted}
// imageUrl={imageUrl}
/> />
<div className="center-h-align mt-1/2"> <div className="center-h-align mt-1/2">
<div className="w-12"> <div className="w-12">

View file

@ -7,6 +7,7 @@ import '../../pages/Student/JoinRoom/joinRoom.css';
import { QuestionType } from '../../Types/QuestionType'; import { QuestionType } from '../../Types/QuestionType';
// import { QuestionService } from '../../services/QuestionService'; // import { QuestionService } from '../../services/QuestionService';
import DisconnectButton from '../../components/DisconnectButton/DisconnectButton'; import DisconnectButton from '../../components/DisconnectButton/DisconnectButton';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
interface TeacherModeQuizProps { interface TeacherModeQuizProps {
questionInfos: QuestionType; questionInfos: QuestionType;
@ -20,7 +21,8 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
disconnectWebSocket disconnectWebSocket
}) => { }) => {
const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false); const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
// const [imageUrl, setImageUrl] = useState(''); const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] = useState(false);
const [feedbackMessage, setFeedbackMessage] = useState('');
useEffect(() => { useEffect(() => {
setIsAnswerSubmitted(false); setIsAnswerSubmitted(false);
@ -29,6 +31,12 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
const handleOnSubmitAnswer = (answer: string | number | boolean) => { const handleOnSubmitAnswer = (answer: string | number | boolean) => {
const idQuestion = questionInfos.question.id || '-1'; const idQuestion = questionInfos.question.id || '-1';
submitAnswer(answer, idQuestion); submitAnswer(answer, idQuestion);
setFeedbackMessage(`Votre réponse est "${answer.toString()}".`);
setIsFeedbackDialogOpen(true);
};
const handleFeedbackDialogClose = () => {
setIsFeedbackDialogOpen(false);
setIsAnswerSubmitted(true); setIsAnswerSubmitted(true);
}; };
@ -49,17 +57,36 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
</div> </div>
{isAnswerSubmitted ? ( {isAnswerSubmitted ? (
<div> <div>
En attente pour la prochaine question... En attente pour la prochaine question...
</div> </div>
) : ( ) : (
<QuestionComponent <QuestionComponent
// imageUrl={imageUrl} handleOnSubmitAnswer={handleOnSubmitAnswer}
handleOnSubmitAnswer={handleOnSubmitAnswer} question={questionInfos.question}
question={questionInfos.question} />
)}
<Dialog
open={isFeedbackDialogOpen}
onClose={handleFeedbackDialogClose}
>
<DialogTitle>Rétroaction</DialogTitle>
<DialogContent>
{feedbackMessage}
<QuestionComponent
handleOnSubmitAnswer={handleOnSubmitAnswer}
question={questionInfos.question}
showAnswer={true}
/> />
)} </DialogContent>
</div> <DialogActions>
<Button onClick={handleFeedbackDialogClose} color="primary">
OK
</Button>
</DialogActions>
</Dialog>
</div>
); );
}; };

View file

@ -189,7 +189,8 @@ const ManageRoom: React.FC = () => {
}; };
const launchQuiz = () => { const launchQuiz = () => {
if (!socket || !roomName || quiz?.content.length === 0) { if (!socket || !roomName || !quiz?.content || quiz?.content.length === 0) {
// TODO: This error happens when token expires! Need to handle it properly
console.log('Error launching quiz. No socket, room name or no questions.'); console.log('Error launching quiz. No socket, room name or no questions.');
return; return;
} }