- Added a new type of exercise

- Updated all solutions to solve a huge bug where after reviewing, it would reset the score
2023-08-11 14:23:09 +01:00
parent 5099721b9b
commit db54d58bab
18 changed files with 407 additions and 48 deletions
--- a/src/components/Solutions/TrueFalse.tsx
+++ b/src/components/Solutions/TrueFalse.tsx
@@ -0,0 +1,131 @@
+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, onNext, onBack}: TrueFalseExercise & CommonProps) {
+	const calculateScore = () => {
+		const total = questions.length || 0;
+		const correct = userSolutions.filter((x) => questions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
+		const missing = total - userSolutions.filter((x) => questions.find((y) => x.id === y.id)).length;
+
+		return {total, correct, missing};
+	};
+
+	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 "red";
+	};
+
+	return (
+		<>
+			<div className="flex flex-col gap-4 mt-4 h-full 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">
+					{questions.map((question, index) => {
+						const userSolution = userSolutions.find((x) => x.id === question.id);
+
+						return (
+							<div key={question.id} 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 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-red" />
+						Unanswered
+					</div>
+					<div className="flex gap-2 items-center">
+						<div className="w-4 h-4 rounded-full bg-mti-rose" />
+						Wrong
+					</div>
+				</div>
+			</div>
+
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+		</>
+	);
+}