L'affichage de la bonne réponse dans les rétroactions ne fonctionne plus

Fixes #218
This commit is contained in:
JubaAzul 2025-01-30 23:01:04 -05:00
parent 763f606712
commit c65181f7bf
2 changed files with 8 additions and 13 deletions

View file

@ -12,10 +12,9 @@ interface Props {
} }
const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => { const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer } = props; const { question, showAnswer, handleOnSubmitAnswer } = props;
const [answer, setAnswer] = useState<string>(); const [answer, setAnswer] = useState<string>();
useEffect(() => { useEffect(() => {
setAnswer(undefined); setAnswer(undefined);
}, [question]); }, [question]);
@ -24,7 +23,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
setAnswer(choice); setAnswer(choice);
}; };
const alpha = Array.from(Array(26)).map((_e, i) => i + 65); const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
const alphabet = alpha.map((x) => String.fromCharCode(x)); const alphabet = alpha.map((x) => String.fromCharCode(x));
return ( return (
@ -37,25 +35,22 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
const selected = answer === choice.formattedText.text ? 'selected' : ''; const selected = answer === 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"
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)} onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
> { showAnswer && (choice.isCorrect ? '✅' : '❌')}
{choice.formattedFeedback === null &&
showAnswer &&
(choice.isCorrect ? '✅' : '❌')}
<div className={`circle ${selected}`}>{alphabet[i]}</div> <div className={`circle ${selected}`}>{alphabet[i]}</div>
<div className={`answer-text ${selected}`}> <div className={`answer-text ${selected}`}>
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} /> <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
</div> </div>
</Button> {choice.formattedFeedback && showAnswer && (
{choice.formattedFeedback && showAnswer && (
<div className="feedback-container mb-1 mt-1/2"> <div className="feedback-container mb-1 mt-1/2">
{choice.isCorrect ? '✅' : '❌'}
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} /> <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div> </div>
)} )}
</Button>
</div> </div>
); );
})} })}

View file

@ -31,7 +31,7 @@
"supertest": "^6.3.4" "supertest": "^6.3.4"
}, },
"engines": { "engines": {
"node": "18.x" "node": "20.x"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {