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

Updated the color of the unanswered questions to gray

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-09 13:08:02 +00:00
parent 7b0f8c1c20
commit e100c401e9
7 changed files with 55 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
return "rose";
}
return "red";
return "gray";
};
return (
@@ -67,6 +67,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
{userSolutions &&
questions.map((question, index) => {
const userSolution = userSolutions.find((x) => x.id === question.id.toString());
const solution = question.solution.toString().toLowerCase() as Solution;
return (
<div key={question.id.toString()} className="flex flex-col gap-4">
@@ -75,23 +76,23 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
</span>
<div className="flex gap-4">
<Button
variant={question.solution === "true" || userSolution?.solution === "true" ? "solid" : "outline"}
variant={solution === "true" || userSolution?.solution.toLowerCase() === "true" ? "solid" : "outline"}
className="!py-2"
color={getButtonColor("true", question.solution, userSolution?.solution)}>
color={getButtonColor("true", solution, userSolution?.solution.toLowerCase() as Solution)}>
True
</Button>
<Button
variant={question.solution === "false" || userSolution?.solution === "false" ? "solid" : "outline"}
variant={solution === "false" || userSolution?.solution.toLowerCase() === "false" ? "solid" : "outline"}
className="!py-2"
color={getButtonColor("false", question.solution, userSolution?.solution)}>
color={getButtonColor("false", solution, userSolution?.solution.toLowerCase() as Solution)}>
False
</Button>
<Button
variant={
question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"
solution === "not_given" || userSolution?.solution.toLowerCase() === "not_given" ? "solid" : "outline"
}
className="!py-2"
color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
color={getButtonColor("not_given", solution, userSolution?.solution.toLowerCase() as Solution)}>
Not Given
</Button>
</div>
@@ -105,7 +106,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
Correct
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-red" />
<div className="w-4 h-4 rounded-full bg-mti-gray-davy" />
Unanswered
</div>
<div className="flex gap-2 items-center">