From 61a5cf13301efcf6d3e4d17927e7201a0e00de01 Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Thu, 13 Mar 2025 18:50:29 -0400 Subject: [PATCH] =?UTF-8?q?[FEATURE]=20Ajout=20des=20r=C3=A9troactions=20p?= =?UTF-8?q?our=20les=20questions=20=C3=A0=20choix=20multiples=20et=20r?= =?UTF-8?q?=C3=A9ponses=20courtes=20Fixes=20#291?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MultipleChoiceQuestionDisplay.tsx | 56 ++++++++++++------ .../NumericalQuestionDisplay.tsx | 44 +++++++++++--- .../ShortAnswerQuestionDisplay.tsx | 59 +++++++++++++------ .../TrueFalseQuestionDisplay.tsx | 14 ++++- .../QuestionsDisplay/questionStyle.css | 40 ++++++++++++- .../TeacherModeQuiz/TeacherModeQuiz.tsx | 5 +- 6 files changed, 168 insertions(+), 50 deletions(-) diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index df46193..dd809ad 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -16,19 +16,29 @@ interface Props { const MultipleChoiceQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; const [answer, setAnswer] = useState(passedAnswer || ''); + const [isGoodAnswer, setisGoodAnswer] = useState(false); let disableButton = false; - if(handleOnSubmitAnswer === undefined){ + if (handleOnSubmitAnswer === undefined) { disableButton = true; } useEffect(() => { - if (passedAnswer !== undefined) { - setAnswer(passedAnswer); - } + if (passedAnswer !== undefined) { + setAnswer(passedAnswer); + } }, [passedAnswer]); + useEffect(() => { + checkAnswer(); + }, [answer]); + + const checkAnswer = () => { + const isCorrect = question.choices.some((choice) => choice.formattedText.text === answer as string); + setisGoodAnswer(isCorrect); + }; + const handleOnClickAnswer = (choice: string) => { setAnswer(choice); }; @@ -36,12 +46,24 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => { const alphabet = alpha.map((x) => String.fromCharCode(x)); return ( -
+ +
+ {showAnswer && ( +
+
+ {isGoodAnswer ? '✅ Correct! ' : '❌ Incorrect!'} +
+
+ Question : +
+ +
+ )}
- + {question.choices.map((choice, i) => { const selected = answer === choice.formattedText.text ? 'selected' : ''; return ( @@ -51,17 +73,17 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => { className="button-wrapper" disabled={disableButton} onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}> - {showAnswer? (
{(choice.isCorrect ? '✅' : '❌')}
) - :``} + {showAnswer ? (
{(choice.isCorrect ? '✅' : '❌')}
) + : ``}
{alphabet[i]}
{choice.formattedFeedback && showAnswer && ( -
-
-
- )} +
+
+
+ )}
@@ -70,12 +92,12 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => {
{question.formattedGlobalFeedback && showAnswer && (
-
-
+
+
)} - + {!showAnswer && handleOnSubmitAnswer && ( - + )}
diff --git a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx index 525501d..0fb6186 100644 --- a/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.tsx @@ -18,6 +18,7 @@ const NumericalQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; const [answer, setAnswer] = useState(passedAnswer || ''); + const [isGoodAnswer, setisGoodAnswer] = useState(false); const correctAnswers = question.choices; let correctAnswer = ''; @@ -27,6 +28,14 @@ const NumericalQuestionDisplay: React.FC = (props) => { } }, [passedAnswer]); + useEffect(() => { + checkAnswer(); + }, [answer]); + + const checkAnswer = () => { + const isCorrect = correctAnswer === answer; + setisGoodAnswer(isCorrect); + }; //const isSingleAnswer = correctAnswers.length === 1; if (isSimpleNumericalAnswer(correctAnswers[0])) { @@ -45,21 +54,40 @@ const NumericalQuestionDisplay: React.FC = (props) => { return (
+ {showAnswer && ( +
+
+ {isGoodAnswer ? '✅ Correct! ' : '❌ Incorrect!'} +
+
+ Question : +
+ +
+ )}
{showAnswer ? ( - <> -
- La bonne réponse est: - {correctAnswer}
- - Votre réponse est: {answer.toString()} - + <> +
+
+
+ Réponse(s) accepté(es): +
+
+ {correctAnswer} +
+
+
+
+ Votre réponse est:
+
{answer}
+
+
{question.formattedGlobalFeedback &&
} - ) : ( <> diff --git a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx index 28876f9..03be9ff 100644 --- a/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.tsx @@ -17,34 +17,59 @@ const ShortAnswerQuestionDisplay: React.FC = (props) => { const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props; const [answer, setAnswer] = useState(passedAnswer || ''); - + const [isGoodAnswer, setisGoodAnswer] = useState(false); + + useEffect(() => { - if (passedAnswer !== undefined) { - setAnswer(passedAnswer); - } + if (passedAnswer !== undefined) { + setAnswer(passedAnswer); + } }, [passedAnswer]); - console.log("Answer" , answer); + + useEffect(() => { + checkAnswer(); + }, [answer]); + + const checkAnswer = () => { + const isCorrect = question.choices.some((choice) => choice.text.toLowerCase() === (answer as String).toLowerCase()); + setisGoodAnswer(isCorrect); + }; return ( +
-
+ {showAnswer && ( +
+
+ {isGoodAnswer ? '✅ Correct! ' : '❌ Incorrect!'} +
+
+ Question : +
+ +
+ )} +
{showAnswer ? ( <>
- - La bonne réponse est: - - {question.choices.map((choice) => ( -
- {choice.text} +
+
+ Réponse(s) accepté(es):
- ))} - - - Votre réponse est: {answer} - + {question.choices.map((choice) => ( +
+ {choice.text} +
+ ))} +
+
+
+ Votre réponse est:
+
{answer}
+
{question.formattedGlobalFeedback &&
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx index 8908338..96f8834 100644 --- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx @@ -47,7 +47,19 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { const selectedTrue = answer ? 'selected' : ''; const selectedFalse = answer !== undefined && !answer ? 'selected' : ''; return ( -
+
+ {showAnswer && ( +
+
+ {question.isTrue? '✅ Correct! ' : '❌ Incorrect!'} +
+
+ Question : +
+ +
+ )} +
diff --git a/client/src/components/QuestionsDisplay/questionStyle.css b/client/src/components/QuestionsDisplay/questionStyle.css index f300ba2..8528cf5 100644 --- a/client/src/components/QuestionsDisplay/questionStyle.css +++ b/client/src/components/QuestionsDisplay/questionStyle.css @@ -2,7 +2,6 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; width: 100%; } @@ -22,7 +21,6 @@ .question-wrapper { display: flex; flex-direction: column; - align-items: center; justify-content: center; } @@ -136,12 +134,12 @@ /* height: 1em; */ } - .global-feedback { position: relative; padding: 0 1rem; background-color: hsl(43, 100%, 94%); color: hsl(43, 95%, 9%); + margin-top: 2rem; border: hsl(36, 84%, 93%) 1px solid; border-radius: 6px; box-shadow: 0px 2px 5px hsl(0, 0%, 74%); @@ -169,3 +167,39 @@ .choices-wrapper { width: 90%; } + +.correct-answer-text { + text-align: left; /* Align text to the left */ + width: 100%; /* Ensure it takes the full width of its container */ +} + +.accepted-answers { + display: inline-block; /* Display elements side by side */ + border-radius: 6px; /* Add rounded corners */ + padding: 0.5rem; /* Add padding for spacing */ + margin: 0.5rem; /* Add margin for spacing between elements */ + background-color: hsl(0, 0%, 87%); /* Optional: Add a background color for emphasis */ +} +.question-feedback-validation{ + font-size: 1.8rem; /* Increase the font size */ + font-weight: bold; /* Make the text bold */ + width: 100%; + height: 100%; + margin: 0 auto; + +} +.question-title{ + margin-bottom: 0.5rem; + margin-top: 1.5rem; + width: 100%; + + font-weight: bold; +} + +.question-content{ + margin-bottom: 1rem; + +} + + + diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx index 8925c09..3597155 100644 --- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx +++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx @@ -4,7 +4,7 @@ import QuestionComponent from '../QuestionsDisplay/QuestionDisplay'; import '../../pages/Student/JoinRoom/joinRoom.css'; import { QuestionType } from '../../Types/QuestionType'; import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; -import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material'; +import { Dialog, DialogContent, DialogActions, Button } from '@mui/material'; import { Question } from 'gift-pegjs'; import { AnswerSubmissionToBackendType } from 'src/services/WebsocketService'; import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; @@ -94,7 +94,6 @@ const TeacherModeQuiz: React.FC = ({ open={isFeedbackDialogOpen} onClose={handleFeedbackDialogClose} > - Rétroaction
= ({ maxHeight: '400px', overflowY: 'auto', }}> -
Question :