114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
import { FillBlanksExercise, TrueFalseExercise } from "@/interfaces/exam";
|
|
import clsx from "clsx";
|
|
import reactStringReplace from "react-string-replace";
|
|
import { CommonProps } from ".";
|
|
import { Fragment } from "react";
|
|
import Button from "../Low/Button";
|
|
|
|
type Solution = "true" | "false" | "not_given";
|
|
|
|
export default function TrueFalseSolution({ prompt, type, id, questions, userSolutions, headerButtons, footerButtons }: TrueFalseExercise & CommonProps) {
|
|
const getButtonColor = (buttonSolution: Solution, solution: Solution, userSolution: Solution | undefined) => {
|
|
if (buttonSolution !== userSolution && buttonSolution !== solution) return "purple";
|
|
|
|
if (userSolution) {
|
|
if (userSolution === buttonSolution && solution === buttonSolution) {
|
|
return "purple";
|
|
}
|
|
|
|
if (solution === buttonSolution) {
|
|
return "purple";
|
|
}
|
|
|
|
return "rose";
|
|
}
|
|
|
|
return "gray";
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 mt-4">
|
|
{headerButtons}
|
|
|
|
<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons || !footerButtons) && "mb-20")}>
|
|
<span className="text-sm w-full leading-6">
|
|
{prompt.split("\\n").map((line, index) => (
|
|
<Fragment key={index}>
|
|
{line}
|
|
<br />
|
|
</Fragment>
|
|
))}
|
|
</span>
|
|
<div className="flex flex-col gap-6 mb-4">
|
|
<p>For each of the questions below, select</p>
|
|
<div className="pl-8 flex gap-8">
|
|
<span className="flex flex-col gap-4">
|
|
<span className="font-bold italic">TRUE</span>
|
|
<span className="font-bold italic">FALSE</span>
|
|
<span className="font-bold italic">NOT GIVEN</span>
|
|
</span>
|
|
<span className="flex flex-col gap-4">
|
|
<span>if the statement agrees with the information</span>
|
|
<span>if the statement contradicts with the information</span>
|
|
<span>if there is no information on this</span>
|
|
</span>
|
|
</div>
|
|
</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">
|
|
{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">
|
|
<span>
|
|
{index + 1}. {question.prompt}
|
|
</span>
|
|
<div className="flex gap-4">
|
|
<Button
|
|
variant={solution === "true" || userSolution?.solution.toLowerCase() === "true" ? "solid" : "outline"}
|
|
className="!py-2"
|
|
color={getButtonColor("true", solution, userSolution?.solution.toLowerCase() as Solution)}>
|
|
True
|
|
</Button>
|
|
<Button
|
|
variant={solution === "false" || userSolution?.solution.toLowerCase() === "false" ? "solid" : "outline"}
|
|
className="!py-2"
|
|
color={getButtonColor("false", solution, userSolution?.solution.toLowerCase() as Solution)}>
|
|
False
|
|
</Button>
|
|
<Button
|
|
variant={
|
|
solution === "not_given" || userSolution?.solution.toLowerCase() === "not_given" ? "solid" : "outline"
|
|
}
|
|
className="!py-2"
|
|
color={getButtonColor("not_given", solution, userSolution?.solution.toLowerCase() as Solution)}>
|
|
Not Given
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="flex gap-2 items-center">
|
|
<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-gray-davy" />
|
|
Unanswered
|
|
</div>
|
|
<div className="flex gap-2 items-center">
|
|
<div className="w-4 h-4 rounded-full bg-mti-rose" />
|
|
Wrong
|
|
</div>
|
|
</div>
|
|
{footerButtons}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|