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

Bonne solution, mais pas parfaite

Browse source
This commit is contained in:
JubaAzul 2025-03-12 13:30:58 -04:00
parent 83a39d8c27
commit 97a0d62b5f
2 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -56,17 +56,24 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
variant="text" variant="text"
className="button-wrapper" className="button-wrapper"
disabled={disableButton} disabled={disableButton}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}> {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={`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>
{choice.formattedFeedback && showAnswer && ( {choice.formattedFeedback && showAnswer && (
<div className="feedback-container"> <div className="feedback-container">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} /> <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div> </div>
)} )}
</div>
</Button> </Button>
</div> </div>

33
client/src/components/QuestionsDisplay/questionStyle.css
View file

@ -2,21 +2,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
width: 100%;
}
.choices-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
} }
.answer-wrapper { .answer-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.question-wrapper { .question-wrapper {
@ -66,6 +57,11 @@
color: black; color: black;
box-shadow: 0 0 1px #3a3a3a; box-shadow: 0 0 1px #3a3a3a;
} }
.answer-text-container {
display: flex;
flex-direction: row;
align-content: center;
}
.answer-weight-container { .answer-weight-container {
display: flow; display: flow;
@ -107,18 +103,22 @@
column-gap: 0.5rem; column-gap: 0.5rem;
background-color: transparent; background-color: transparent;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
display: flex;
position: relative;
height: min-content;
} }
.choice-container { .choice-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
align-content: center;
} }
.feedback-container { .feedback-container {
position: absolute; position: relative;
right: calc(-1 * var(--button-wrapper-width)); right: calc(-1 * var(--button-wrapper-width));
margin-left: 1.1rem; margin-left: 1.1rem;
padding: 0 0.5rem; padding: 0 0.5rem;
@ -128,6 +128,7 @@
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%); box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
width: var(--button-wrapper-width); width: var(--button-wrapper-width);
} }
.feedback-container img { .feedback-container img {
@ -165,7 +166,3 @@
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%); box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
} }
.choices-wrapper {
width: 90%;
}