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"
className="button-wrapper"
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 dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
</div>
{choice.formattedFeedback && showAnswer && (
{choice.formattedFeedback && showAnswer && (
<div className="feedback-container">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div>
)}
</div>
</Button>
</div>

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

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