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

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