devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated a problem with the rendering of the Solutions

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-09-18 08:16:56 +01:00
parent efb341355d
commit 68fb5e5bc7
4 changed files with 56 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Solutions/FillBlanks.tsx
View File

@@ -85,12 +85,13 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
))} ))}
</span> </span>
<span className="bg-mti-gray-smoke rounded-xl px-5 py-6"> <span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
{text.split("\\n").map((line, index) => ( {userSolutions &&
<p key={index}> text.split("\\n").map((line, index) => (
{renderLines(line)} <p key={index}>
<br /> {renderLines(line)}
</p> <br />
))} </p>
))}
</span> </span>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">

31
src/components/Solutions/MatchSentences.tsx
View File

@@ -74,21 +74,22 @@ export default function MatchSentencesSolutions({
</div> </div>
))} ))}
</div> </div>
{sentences.map((sentence, index) => ( {userSolutions &&
<Xarrow sentences.map((sentence, index) => (
key={index} <Xarrow
start={sentence.id} key={index}
end={sentence.solution} start={sentence.id}
lineColor={ end={sentence.solution}
!userSolutions.find((x) => x.question === sentence.id) lineColor={
? "#CC5454" !userSolutions.find((x) => x.question === sentence.id)
: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution ? "#CC5454"
? "#7872BF" : userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
: "#CC5454" ? "#7872BF"
} : "#CC5454"
showHead={false} }
/> showHead={false}
))} />
))}
</div> </div>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">

2
src/components/Solutions/MultipleChoice.tsx
View File

@@ -88,7 +88,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
<div className="flex flex-col gap-4 w-full h-full mb-20"> <div className="flex flex-col gap-4 w-full h-full mb-20">
<div className="flex flex-col gap-2 mt-4 h-full bg-mti-gray-smoke rounded-xl px-16 py-8"> <div className="flex flex-col gap-2 mt-4 h-full bg-mti-gray-smoke rounded-xl px-16 py-8">
<span className="text-xl font-semibold">{prompt}</span> <span className="text-xl font-semibold">{prompt}</span>
{questionIndex < questions.length && ( {userSolutions && questionIndex < questions.length && (
<Question <Question
{...questions[questionIndex]} {...questions[questionIndex]}
userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option} userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}

61
src/components/Solutions/TrueFalse.tsx
View File

@@ -64,37 +64,40 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
</div> </div>
<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span> <span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8"> <div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
{questions.map((question, index) => { {userSolutions &&
const userSolution = userSolutions.find((x) => x.id === question.id.toString()); questions.map((question, index) => {
const userSolution = userSolutions.find((x) => x.id === question.id.toString());
return ( return (
<div key={question.id.toString()} className="flex flex-col gap-4"> <div key={question.id.toString()} className="flex flex-col gap-4">
<span> <span>
{index + 1}. {question.prompt} {index + 1}. {question.prompt}
</span> </span>
<div className="flex gap-4"> <div className="flex gap-4">
<Button <Button
variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"} variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
className="!py-2" className="!py-2"
color={getButtonColor("true", question.solution, userSolution?.solution)}> color={getButtonColor("true", question.solution, userSolution?.solution)}>
True True
</Button> </Button>
<Button <Button
variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"} variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
className="!py-2" className="!py-2"
color={getButtonColor("false", question.solution, userSolution?.solution)}> color={getButtonColor("false", question.solution, userSolution?.solution)}>
False False
</Button> </Button>
<Button <Button
variant={question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"} variant={
className="!py-2" question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"
color={getButtonColor("not_given", question.solution, userSolution?.solution)}> }
Not Given className="!py-2"
</Button> color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
Not Given
</Button>
</div>
</div> </div>
</div> );
); })}
})}
</div> </div>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">