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

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

@@ -28,9 +28,9 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
return (
<button
className={clsx(
"rounded-full hover:text-white hover:bg-mti-red transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-red-light",
"rounded-full hover:text-white hover:bg-mti-gray-davy transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-gray-davy",
)}>
{solution.solution}
{solution?.solution}
</button>
);
}
@@ -99,7 +99,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
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">

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

@@ -50,7 +50,7 @@ export default function MatchSentencesSolutions({
className={clsx(
"w-8 h-8 rounded-full z-10 text-white",
"transition duration-300 ease-in-out",
!userSolutions.find((x) => x.question.toString() === id.toString()) && "!bg-mti-red",
!userSolutions.find((x) => x.question.toString() === id.toString()) && "!bg-mti-gray-davy",
userSolutions.find((x) => x.question.toString() === id.toString())?.option === solution && "bg-mti-purple",
userSolutions.find((x) => x.question.toString() === id.toString())?.option !== solution && "bg-mti-rose",
)}>
@@ -96,7 +96,7 @@ export default function MatchSentencesSolutions({
<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-red" /> Unanswered
<div className="w-4 h-4 rounded-full bg-mti-gray-davy" /> Unanswered
</div>
<div className="flex gap-2 items-center">
<div className="w-4 h-4 rounded-full bg-mti-rose" /> Wrong

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

@@ -14,7 +14,7 @@ function Question({
}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
const optionColor = (option: string) => {
if (option === solution && !userSolution) {
return "!border-mti-red-light !text-mti-red-light";
return "!border-mti-gray-davy !text-mti-gray-davy";
}
if (option === solution) {
@@ -114,7 +114,7 @@ export default function MultipleChoice({
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">

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">

4
src/components/Solutions/WriteBlanks.tsx
View File

@@ -38,7 +38,7 @@ function Blank({
const getSolutionStyling = () => {
if (!userSolution) {
return "bg-mti-red-ultralight text-mti-red-light";
return "bg-mti-gray-davy text-mti-gray-davy";
}
return "bg-mti-purple-ultralight text-mti-purple-light";
@@ -131,7 +131,7 @@ export default function WriteBlanksSolutions({
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">