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

Moved buttons around

Browse source
This commit is contained in:
KenChanA 2025-03-17 00:52:11 -04:00
parent 490f4dab76
commit 7e597348a3
2 changed files with 85 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -72,91 +72,93 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
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 (
<div className="container">
<div className="row justify-content-center">
<div className="col-auto question-container">
<div className="question content">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} />
</div>
<div className="choices-wrapper mb-1">
<div className="question-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> {question.choices.map((choice, i) => {
<div className="question content"> const selected = answer === choice.formattedText.text ? 'selected' : '';
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedStem) }} /> const rateStyle = showCorrectAnswers ? {
</div> backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'lightgreen' : 'lightcoral'} ${pickRates.percentages[i]}%, transparent ${pickRates.percentages[i]}%)`,
<div className="choices-wrapper mb-1"> color: 'black'
} : {};
{question.choices.map((choice, i) => { return (
const selected = answer === choice.formattedText.text ? 'selected' : ''; <div key={choice.formattedText.text + i} className="choice-container">
const rateStyle = showCorrectAnswers ? { {/* <Button
backgroundImage: `linear-gradient(to right, ${choice.isCorrect ? 'lightgreen' : 'lightcoral'} ${pickRates.percentages[i]}%, transparent ${pickRates.percentages[i]}%)`, variant="text"
color: 'black' className="button-wrapper"
} : {}; disabled={disableButton}
return ( onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
<div key={choice.formattedText.text + i} className="choice-container"> {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
{/* <Button :``}
variant="text" <div className={`circle ${selected}`}>{alphabet[i]}</div>
className="button-wrapper" <div className={`answer-text ${selected}`}>
disabled={disableButton} <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}> </div>
{showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>) {choice.formattedFeedback && showAnswer && (
:``} <div className="feedback-container mb-1 mt-1/2">
<div className={`circle ${selected}`}>{alphabet[i]}</div> <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
<div className={`answer-text ${selected}`}> </div>
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} /> )}
</Button> */}
<Button
variant="text"
className={`button-wrapper ${selected}`}
disabled={disableButton}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
>
<div className={`circle ${selected}`}>{alphabet[i]}</div>
<div className={`answer-text ${selected}`}
style={rateStyle}>
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
</div>
{choice.formattedFeedback && showAnswer && (
<div className="feedback-container mb-1 mt-1/2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div>
)}
{showCorrectAnswers && <div className="pick-rate">{choice.isCorrect ? '✅' : '❌'} {`${pickRates.counts[i]}/${pickRates.totalCount} (${pickRates.percentages[i].toFixed(1)}%)`}</div>}
</Button>
</div> </div>
{choice.formattedFeedback && showAnswer && ( );
<div className="feedback-container mb-1 mt-1/2"> })}
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} /> </div>
</div> {question.formattedGlobalFeedback && showAnswer && (
)} <div className="global-feedback mb-2">
</Button> */} <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
<Button </div>
variant="text" )}
className={`button-wrapper ${selected}`}
disabled={disableButton}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
>
<div className={`circle ${selected}`}>{alphabet[i]}</div>
<div className={`answer-text ${selected}`}
style={rateStyle}>
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
</div>
{choice.formattedFeedback && showAnswer && (
<div className="feedback-container mb-1 mt-1/2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div>
)}
{showCorrectAnswers && <div className="pick-rate">{choice.isCorrect ? '✅' : '❌'} {`${pickRates.counts[i]}/${pickRates.totalCount} (${pickRates.percentages[i].toFixed(1)}%)`}</div>}
</Button>
</div>
);
})}
</div>
{question.formattedGlobalFeedback && showAnswer && (
<div className="global-feedback mb-2">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
</div>
)}
{!showAnswer && handleOnSubmitAnswer && ( {!showAnswer && handleOnSubmitAnswer && (
<Button <Button
variant="contained" variant="contained"
onClick={() => onClick={() =>
answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer) answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
} }
disabled={answer === '' || answer === null} disabled={answer === '' || answer === null}
> >
Répondre Répondre
</Button> </Button>
)} )}
{isDisplayOnly && (
<div>
<Button
variant="outlined"
onClick={toggleShowCorrectAnswers}
color="primary"
>
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
</Button>
</div> </div>
)} {isDisplayOnly && (
<div className="col-auto d-flex align-items-center justify-content-end">
<Button
variant="outlined"
onClick={toggleShowCorrectAnswers}
color="primary"
>
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
</Button>
</div>
)}
</div>
</div> </div>
); );
}; };

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

@ -105,7 +105,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
</div> </div>
{showCorrectAnswers && ( {showCorrectAnswers && (
<> <>
<div className="pick-rate">{question.isTrue ? '✅' : '❌'} {pickRates.trueRate}/{pickRates.totalCount} ({pickRates.trueRate.toFixed(1)}%)</div> <div className="pick-rate">{question.isTrue ? '✅' : '❌'} {pickRates.trueCount}/{pickRates.totalCount} ({pickRates.trueRate.toFixed(1)}%)</div>
</> </>
)} )}