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

Merge 97a0d62b5f into 112062c0b2

Browse source
This commit is contained in:
Juba.M 2025-03-12 17:31:02 +00:00 committed by GitHub
commit 264ecd4100
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 50 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
const { question, showAnswer, handleOnSubmitAnswer, passedAnswer } = props;
const [answer, setAnswer] = useState<AnswerType>(passedAnswer || '');
let disableButton = false;
if(handleOnSubmitAnswer === undefined){
disableButton = true;
@ -29,6 +28,14 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
}
}, [passedAnswer]);
useEffect(() => {
const buttonWrapper = document.querySelector('.button-wrapper') as HTMLElement;
if (buttonWrapper) {
const buttonWrapperWidth = buttonWrapper.offsetWidth;
document.documentElement.style.setProperty('--button-wrapper-width', `${buttonWrapperWidth}px`);
}
}, [question.choices, answer, showAnswer]);
const handleOnClickAnswer = (choice: string) => {
setAnswer(choice);
};
@ -41,7 +48,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
<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' : '';
return (
@ -50,23 +56,30 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
variant="text"
className="button-wrapper"
disabled={disableButton}
onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
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 && (
<div className="feedback-container mb-1 mt-1/2">
{choice.formattedFeedback && showAnswer && (
<div className="feedback-container">
<div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
</div>
)}
</div>
</Button>
</div>
);
})}
</div>
{question.formattedGlobalFeedback && showAnswer && (
<div className="global-feedback mb-2">

63
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 {
@ -31,7 +22,8 @@
}
.katex * {
font-family: 'KaTeX_Main' /* to display characters like \neq properly */
font-family: 'KaTeX_Main'
/* to display characters like \neq properly */
}
.circle {
@ -54,15 +46,6 @@
color: white;
}
.button-wrapper {
border: 0;
display: flex;
column-gap: 0.5rem;
align-items: center;
background-color: transparent;
margin-bottom: 0.25rem;
}
.answer-text {
border-width: 1px;
border-style: solid;
@ -74,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;
@ -97,15 +85,11 @@
}
.answer-positive-weight {
background-color: hsl(
120, 100%, 90%
);
background-color: hsl(120, 100%, 90%);
}
.answer-zero-or-less-weight {
background-color: hsl(
0, 100%, 90%
);
background-color: hsl(0, 100%, 90%);
}
.answer-text.selected {
@ -113,22 +97,38 @@
color: white;
}
.button-wrapper {
border: 0;
display: flex;
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;
}
.feedback-container {
display: inline-block !important; /* override the parent */
align-items: center;
margin-left: 1.1rem;
position: relative;
right: calc(-1 * var(--button-wrapper-width));
margin-left: 1.1rem;
padding: 0 0.5rem;
background-color: hsl(43, 100%, 94%);
color: hsl(43, 95%, 9%);
border: hsl(36, 84%, 93%) 1px solid;
border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
width: var(--button-wrapper-width);
}
.feedback-container img {
@ -156,6 +156,7 @@
border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
}
.false-feedback {
position: relative;
padding: 0 1rem;
@ -165,7 +166,3 @@
border-radius: 6px;
box-shadow: 0px 2px 5px hsl(0, 0%, 74%);
}
.choices-wrapper {
width: 90%;
}