mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
Moved buttons around
This commit is contained in:
KenChanA
parent
490f4dab76
commit
7e597348a3
2 changed files with 85 additions and 83 deletions
|
|
@ -72,91 +72,93 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
|
|||
const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
|
||||
const alphabet = alpha.map((x) => String.fromCharCode(x));
|
||||
return (
|
||||
|
||||
<div className="question-container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<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' : '';
|
||||
const rateStyle = showCorrectAnswers ? {
|
||||
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">
|
||||
{/* <Button
|
||||
variant="text"
|
||||
className="button-wrapper"
|
||||
disabled={disableButton}
|
||||
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
|
||||
{showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
|
||||
:``}
|
||||
<div className={`circle ${selected}`}>{alphabet[i]}</div>
|
||||
<div className={`answer-text ${selected}`}>
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
|
||||
<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">
|
||||
|
||||
{question.choices.map((choice, i) => {
|
||||
const selected = answer === choice.formattedText.text ? 'selected' : '';
|
||||
const rateStyle = showCorrectAnswers ? {
|
||||
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">
|
||||
{/* <Button
|
||||
variant="text"
|
||||
className="button-wrapper"
|
||||
disabled={disableButton}
|
||||
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
|
||||
{showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
|
||||
:``}
|
||||
<div className={`circle ${selected}`}>{alphabet[i]}</div>
|
||||
<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>
|
||||
{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>
|
||||
{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
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{question.formattedGlobalFeedback && showAnswer && (
|
||||
<div className="global-feedback mb-2">
|
||||
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(question.formattedGlobalFeedback) }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isDisplayOnly && (
|
||||
<div>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={toggleShowCorrectAnswers}
|
||||
color="primary"
|
||||
>
|
||||
{showCorrectAnswers ? "Masquer les résultats" : "Afficher les résultats"}
|
||||
</Button>
|
||||
{!showAnswer && handleOnSubmitAnswer && (
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() =>
|
||||
answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)
|
||||
}
|
||||
disabled={answer === '' || answer === null}
|
||||
>
|
||||
Répondre
|
||||
|
||||
</Button>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
|
|||
</div>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue