gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Réponse à une question non enregistrée lorsque Étudiant reviens en arrière dans le quiz

Browse source 
Fixes #200
This commit is contained in:
JubaAzul 2025-03-07 11:36:43 -05:00
parent 60ad2df67d
commit f8dd95f651
11 changed files with 126 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
View file

@ -21,7 +21,7 @@ describe('MultipleChoiceQuestionDisplay', () => {
const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
const [showAnswerState, setShowAnswerState] = useState(showAnswer);
const handleOnSubmitAnswer = (answer: string) => {
const handleOnSubmitAnswer = (answer: string | number | boolean) => {
mockHandleOnSubmitAnswer(answer);
setShowAnswerState(true);
};

2
client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx
View file

@ -16,7 +16,7 @@ describe('TrueFalseQuestion Component', () => {
const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
const [showAnswerState, setShowAnswerState] = useState(showAnswer);
const handleOnSubmitAnswer = (answer: boolean) => {
const handleOnSubmitAnswer = (answer: string | number | boolean) => {
mockHandleSubmitAnswer(answer);
setShowAnswerState(true);
};

21
client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
View file

@ -1,5 +1,5 @@
// MultipleChoiceQuestionDisplay.tsx
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import '../questionStyle.css';
import { Button } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
@ -14,29 +14,42 @@ interface Props {
const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || '');
const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || ' ');
let disableButton = false;
if(handleOnSubmitAnswer === undefined){
disableButton = true;
}
useEffect(() => {
if (passedAnswer !== undefined) {
setAnswer(passedAnswer);
}
}, [passedAnswer]);
const handleOnClickAnswer = (choice: string) => {
setAnswer(choice);
};
const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
const alphabet = alpha.map((x) => String.fromCharCode(x));
return (
<div className="question-container">
<div className="question content">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
</div>
<div className="choices-wrapper mb-1">
{question.choices.map((choice, i) => {
const selected = answer === choice.formattedText.text ? 'selected' : '';
console.log("dsa", selected)
return (
<div key={choice.formattedText.text + i} className="choice-container">
<Button
variant="text"
className="button-wrapper"
disabled={disableButton}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
{showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
:``}

27
client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx
View file

@ -1,5 +1,5 @@
// NumericalQuestion.tsx
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
@ -8,19 +8,24 @@ import { isSimpleNumericalAnswer, isRangeNumericalAnswer, isHighLowNumericalAnsw
interface Props {
question: NumericalQuestion;
handleOnSubmitAnswer?: (answer: number) => void;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
showAnswer?: boolean;
passedAnswer?: string | number | boolean;
}
const NumericalQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer } =
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } =
props;
const [answer, setAnswer] = useState<number>();
const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || '');
const correctAnswers = question.choices;
let correctAnswer = '';
useEffect(() => {
if (passedAnswer !== null && passedAnswer !== undefined) {
setAnswer(passedAnswer);
}
}, [passedAnswer]);
//const isSingleAnswer = correctAnswers.length === 1;
if (isSimpleNumericalAnswer(correctAnswers[0])) {
@ -44,10 +49,16 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
</div>
{showAnswer ? (
<>
<div className="correct-answer-text mb-2">{correctAnswer}</div>
<div className="correct-answer-text mb-2">
<strong>La bonne réponse est: </strong>
{correctAnswer}</div>
<span>
<strong>Votre réponse est: </strong>{answer.toString()}
</span>
{question.formattedGlobalFeedback && <div className="global-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
</div>}
</>
) : (
<>
@ -75,7 +86,7 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
handleOnSubmitAnswer &&
handleOnSubmitAnswer(answer)
}
disabled={answer === undefined || isNaN(answer)}
disabled={answer === "" || isNaN(answer as number)}
>
Répondre
</Button>

15
client/src/components/QuestionsDisplay/QuestionDisplay.tsx
View file

@ -12,6 +12,7 @@ interface QuestionProps {
handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
showAnswer?: boolean;
answer?: string | number | boolean;
}
const QuestionDisplay: React.FC<QuestionProps> = ({
question,
@ -37,6 +38,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
);
break;
case 'MC':
questionTypeComponent = (
<MultipleChoiceQuestionDisplay
question={question}
@ -48,23 +50,15 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
break;
case 'Numerical':
if (question.choices) {
if (!Array.isArray(question.choices)) {
questionTypeComponent = (
<NumericalQuestionDisplay
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
passedAnswer={answer}
/>
);
} else {
questionTypeComponent = ( // TODO fix NumericalQuestion (correctAnswers is borked)
<NumericalQuestionDisplay
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
/>
);
}
}
break;
case 'Short':
@ -73,6 +67,7 @@ const QuestionDisplay: React.FC<QuestionProps> = ({
question={question}
handleOnSubmitAnswer={handleOnSubmitAnswer}
showAnswer={showAnswer}
passedAnswer={answer}
/>
);
break;

25
client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import '../questionStyle.css';
import { Button, TextField } from '@mui/material';
import { FormattedTextTemplate } from '../../GiftTemplate/templates/TextTypeTemplate';
@ -6,13 +6,21 @@ import { ShortAnswerQuestion } from 'gift-pegjs';
interface Props {
question: ShortAnswerQuestion;
handleOnSubmitAnswer?: (answer: string) => void;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
showAnswer?: boolean;
passedAnswer?: string | number | boolean;
}
const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer } = props;
const [answer, setAnswer] = useState<string>();
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
const [answer, setAnswer] = useState<string | number | boolean>(passedAnswer || ' ');
useEffect(() => {
if (passedAnswer !== undefined) {
setAnswer(passedAnswer);
}
}, [passedAnswer]);
return (
<div className="question-wrapper">
@ -22,11 +30,18 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
{showAnswer ? (
<>
<div className="correct-answer-text mb-1">
<span>
<strong>La bonne réponse est: </strong>
{question.choices.map((choice) => (
<div key={choice.text} className="mb-1">
{choice.text}
</div>
))}
</span>
<span>
<strong>Votre réponse est: </strong>{answer}
</span>
</div>
{question.formattedGlobalFeedback && <div className="global-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
@ -54,7 +69,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
handleOnSubmitAnswer &&
handleOnSubmitAnswer(answer)
}
disabled={answer === undefined || answer === ''}
disabled={answer === null || answer === ''}
>
Répondre
</Button>

51
client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
View file

@ -1,14 +1,13 @@
// TrueFalseQuestion.tsx
import React, { useState } from 'react';
import React, { useState,useEffect } from 'react';
import '../questionStyle.css';
import { Button } from '@mui/material';
import { TrueFalseQuestion } from 'gift-pegjs';
import { FormattedTextTemplate } from 'src/components/GiftTemplate/templates/TextTypeTemplate';
import { Answer } from 'src/Types/StudentType';
interface Props {
question: TrueFalseQuestion;
handleOnSubmitAnswer?: (answer: Answer) => void;
handleOnSubmitAnswer?: (answer: string | number | boolean) => void;
showAnswer?: boolean;
passedAnswer?: string | number | boolean;
}
@ -16,12 +15,26 @@ interface Props {
const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer} =
props;
console.log("Passedanswer", passedAnswer);
let disableButton = false;
if(handleOnSubmitAnswer === undefined){
disableButton = true;
}
useEffect(() => {
if (passedAnswer === true || passedAnswer === false) {
setAnswer(passedAnswer);
} else {
setAnswer(undefined);
}
}, [passedAnswer]);
const [answer, setAnswer] = useState<boolean | undefined>(() => {
if (typeof passedAnswer === 'boolean') {
if (passedAnswer === true || passedAnswer === false) {
return passedAnswer;
}
return undefined;
});
@ -29,7 +42,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
setAnswer(choice);
};
console.log("Answer", answer);
const selectedTrue = answer ? 'selected' : '';
const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
return (
@ -42,33 +54,36 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
className="button-wrapper"
onClick={() => !showAnswer && handleOnClickAnswer(true)}
fullWidth
disabled={disableButton}
>
{showAnswer? (<div> {(question.isTrue ? '✅' : '❌')}</div>):``}
<div className={`circle ${selectedTrue}`}>V</div>
<div className={`answer-text ${selectedTrue}`}>Vrai</div>
{showAnswer && answer && question.trueFormattedFeedback && (
<div className="true-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.trueFormattedFeedback) }} />
</div>
)}
</Button>
<Button
className="button-wrapper"
onClick={() => !showAnswer && handleOnClickAnswer(false)}
fullWidth
disabled={disableButton}
>
{showAnswer? (<div> {(!question.isTrue ? '✅' : '❌')}</div>):``}
<div className={`circle ${selectedFalse}`}>F</div>
<div className={`answer-text ${selectedFalse}`}>Faux</div>
{showAnswer && !answer && question.falseFormattedFeedback && (
<div className="false-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.falseFormattedFeedback) }} />
</div>
)}
</Button>
</div>
{/* selected TRUE, show True feedback if it exists */}
{showAnswer && answer && question.trueFormattedFeedback && (
<div className="true-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.trueFormattedFeedback) }} />
</div>
)}
{/* selected FALSE, show False feedback if it exists */}
{showAnswer && !answer && question.falseFormattedFeedback && (
<div className="false-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.falseFormattedFeedback) }} />
</div>
)}
{question.formattedGlobalFeedback && showAnswer && (
<div className="global-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />

19
client/src/components/QuestionsDisplay/questionStyle.css
View file

@ -147,6 +147,25 @@
box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
}
.true-feedback {
position: relative;
padding: 0 1rem;
background-color: hsl(43, 100%, 94%);
color: hsl(43, 95%, 9%);
border: hsl(36, 84%, 93%) 1px solid;
border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
}
.false-feedback {
position: relative;
padding: 0 1rem;
background-color: hsl(43, 100%, 94%);
color: hsl(43, 95%, 9%);
border: hsl(36, 84%, 93%) 1px solid;
border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
}
.choices-wrapper {
width: 90%;
}

16
client/src/components/StudentModeQuiz/StudentModeQuiz.tsx
View file

@ -3,10 +3,8 @@ import React, { useEffect, useState } from 'react';
import QuestionComponent from '../QuestionsDisplay/QuestionDisplay';
import '../../pages/Student/JoinRoom/joinRoom.css';
import { QuestionType } from '../../Types/QuestionType';
// import { QuestionService } from '../../services/QuestionService';
import { Button } from '@mui/material';
//import QuestionNavigation from '../QuestionNavigation/QuestionNavigation';
//import { ChevronLeft, ChevronRight } from '@mui/icons-material';
import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton';
import { Question } from 'gift-pegjs';
@ -24,28 +22,24 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
//Ajouter type AnswerQuestionType en remplacement de QuestionType
const [questionInfos, setQuestion] = useState<QuestionType>(questions[0]);
const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
// const [imageUrl, setImageUrl] = useState('');
const [answer, setAnswer] = useState<string | number | boolean>('');
const previousQuestion = () => {
setQuestion(questions[Number(questionInfos.question?.id) - 2]);
setIsAnswerSubmitted(false);
};
useEffect(() => {
const answer = localStorage.getItem(`Answer${questionInfos.question.id}`);
setAnswer(JSON.parse(localStorage.getItem(`Answer${questionInfos.question.id}`)||'null'));
if (answer !== null) {
setIsAnswerSubmitted(true);
} else {
setIsAnswerSubmitted(false);
}
}, [questionInfos.question]);
}, [questionInfos.question , answer]);
const nextQuestion = () => {
setQuestion(questions[Number(questionInfos.question?.id)]);
setIsAnswerSubmitted(false);
};
const handleOnSubmitAnswer = (answer: string | number | boolean) => {
@ -79,7 +73,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
handleOnSubmitAnswer={handleOnSubmitAnswer}
question={questionInfos.question as Question}
showAnswer={isAnswerSubmitted}
answer={localStorage.getItem(`Answer${questionInfos.question.id}`) || undefined}
answer={answer}
/>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '1rem' }}>
<div>

20
client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx
View file

@ -20,30 +20,16 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
}) => {
const [isAnswerSubmitted, setIsAnswerSubmitted] = useState(false);
const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] = useState(false);
const [feedbackMessage, setFeedbackMessage] = useState<React.ReactNode>('');
const [answer, setAnswer] = useState<string | number | boolean>('');
const renderFeedbackMessage = (answer: string) => {
if(answer === 'true' || answer === 'false'){
return (<span>
<strong>Votre réponse est: </strong>{answer==="true" ? 'Vrai' : 'Faux'}
</span>)
}
else{
return (
<span>
<strong>Votre réponse est: </strong>{answer.toString()}
</span>
);}
};
useEffect(() => {
// Close the feedback dialog when the question changes
handleFeedbackDialogClose();
setIsAnswerSubmitted(false);
setAnswer(JSON.parse(localStorage.getItem(`Answer${questionInfos.question.id}`)||'null'));
if (answer) {
if (typeof answer !== "object") {
setIsAnswerSubmitted(true);
setIsFeedbackDialogOpen(true);
}
@ -53,8 +39,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
const handleOnSubmitAnswer = (answer: string | number | boolean) => {
const idQuestion = Number(questionInfos.question.id) || -1;
submitAnswer(answer, idQuestion);
setFeedbackMessage(renderFeedbackMessage(answer.toString()));
setAnswer(answer);
setIsFeedbackDialogOpen(true);
};
@ -103,7 +88,6 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
maxHeight: '400px',
overflowY: 'auto',
}}>
{feedbackMessage}
<div style={{ textAlign: 'left', fontWeight: 'bold', marginTop: '10px'}}
>Question : </div>
</div>

3
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -435,8 +435,6 @@ const ManageRoom: React.FC = () => {
message={`Êtes-vous sûr de vouloir quitter?`} />
<div className='headerContent' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
<div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
<div className='title'>Salle: {roomName}</div>
@ -485,6 +483,7 @@ const ManageRoom: React.FC = () => {
<QuestionDisplay
showAnswer={false}
question={currentQuestion?.question as Question}
/>
)}