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

66
src/components/Exercises/TrueFalse.tsx
View File

@@ -17,7 +17,7 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
const calculateScore = () => {
const total = questions.length || 0;
const correct = answers.filter(
(x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
(x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution?.toLowerCase() === x.solution.toLowerCase() || false,
).length;
const missing = total - answers.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;
@@ -62,41 +62,37 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
</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) => (
<div key={question.id.toString()} className="flex flex-col gap-4">
<span>
{index + 1}. {question.prompt}
</span>
<div className="flex gap-4">
<Button
variant={
answers.find((x) => x.id.toString() === question.id.toString())?.solution === "true" ? "solid" : "outline"
}
onClick={() => toggleAnswer("true", question.id.toString())}
className="!py-2">
True
</Button>
<Button
variant={
answers.find((x) => x.id.toString() === question.id.toString())?.solution === "false" ? "solid" : "outline"
}
onClick={() => toggleAnswer("false", question.id.toString())}
className="!py-2">
False
</Button>
<Button
variant={
answers.find((x) => x.id.toString() === question.id.toString())?.solution === "not_given"
? "solid"
: "outline"
}
onClick={() => toggleAnswer("not_given", question.id.toString())}
className="!py-2">
Not Given
</Button>
{questions.map((question, index) => {
const 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={answers.find((x) => x.id.toString() === id)?.solution === "true" ? "solid" : "outline"}
onClick={() => toggleAnswer("true", id)}
className="!py-2">
True
</Button>
<Button
variant={answers.find((x) => x.id.toString() === id)?.solution === "false" ? "solid" : "outline"}
onClick={() => toggleAnswer("false", id)}
className="!py-2">
False
</Button>
<Button
variant={answers.find((x) => x.id.toString() === id)?.solution === "not_given" ? "solid" : "outline"}
onClick={() => toggleAnswer("not_given", id)}
className="!py-2">
Not Given
</Button>
</div>
</div>
</div>
))}
);
})}
</div>
</div>

7
src/components/Low/Button.tsx
View File

@@ -4,7 +4,7 @@ import {BsArrowRepeat} from "react-icons/bs";
interface Props {
children: ReactNode;
color?: "rose" | "purple" | "red" | "green";
color?: "rose" | "purple" | "red" | "green" | "gray";
variant?: "outline" | "solid";
className?: string;
disabled?: boolean;
@@ -39,6 +39,11 @@ export default function Button({
outline:
"bg-transparent text-mti-red-light border border-mti-red-light hover:bg-mti-red-light disabled:text-mti-red disabled:bg-mti-red-ultralight disabled:border-none selection:bg-mti-red-dark hover:text-white selection:text-white",
},
gray: {
solid: "bg-mti-gray-davy text-white border border-mti-gray-davy hover:bg-mti-gray-davy disabled:text-mti-gray-davy disabled:bg-mti-gray-davy selection:bg-mti-gray-davy",
outline:
"bg-transparent text-mti-gray-davy border border-mti-gray-davy hover:bg-mti-gray-davy disabled:text-mti-gray-davy disabled:bg-mti-gray-davy disabled:border-none selection:bg-mti-gray-davy hover:text-white selection:text-white",
},
rose: {
solid: "bg-mti-rose-light text-white border border-mti-rose-light hover:bg-mti-rose disabled:text-mti-rose disabled:bg-mti-rose-ultralight selection:bg-mti-rose-dark",
outline:

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