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

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

@@ -64,37 +64,40 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
</div>
<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">
{questions.map((question, index) => {
const userSolution = userSolutions.find((x) => x.id === question.id.toString());
{userSolutions &&
questions.map((question, index) => {
const userSolution = userSolutions.find((x) => x.id === question.id.toString());
return (
<div key={question.id.toString()} className="flex flex-col gap-4">
<span>
{index + 1}. {question.prompt}
</span>
<div className="flex gap-4">
<Button
variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
className="!py-2"
color={getButtonColor("true", question.solution, userSolution?.solution)}>
True
</Button>
<Button
variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
className="!py-2"
color={getButtonColor("false", question.solution, userSolution?.solution)}>
False
</Button>
<Button
variant={question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"}
className="!py-2"
color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
Not Given
</Button>
return (
<div key={question.id.toString()} className="flex flex-col gap-4">
<span>
{index + 1}. {question.prompt}
</span>
<div className="flex gap-4">
<Button
variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
className="!py-2"
color={getButtonColor("true", question.solution, userSolution?.solution)}>
True
</Button>
<Button
variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
className="!py-2"
color={getButtonColor("false", question.solution, userSolution?.solution)}>
False
</Button>
<Button
variant={
question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"
}
className="!py-2"
color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
Not Given
</Button>
</div>
</div>
</div>
);
})}
);
})}
</div>
<div className="flex gap-4 items-center">
<div className="flex gap-2 items-center">