- Added a new type of exercise

- Updated all solutions to solve a huge bug where after reviewing, it would reset the score

src/components/Exercises/MatchSentences.tsx

@@ -83,7 +83,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 						))}
 					</div>
 					{answers.map((solution, index) => (
-						<Xarrow key={index} start={solution.question} end={solution.option} lineColor="#307912" showHead={false} />
+						<Xarrow key={index} start={solution.question} end={solution.option} lineColor="#7872BF" showHead={false} />
 					))}
 				</div>
 			</div>

src/components/Exercises/TrueFalse.tsx

@@ -0,0 +1,111 @@
+import {TrueFalseExercise} from "@/interfaces/exam";
+import useExamStore from "@/stores/examStore";
+import {Fragment, useEffect, useState} from "react";
+import {CommonProps} from ".";
+import Button from "../Low/Button";
+
+export default function TrueFalse({id, type, prompt, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
+	const [answers, setAnswers] = useState<{id: string; solution: "true" | "false" | "not_given"}[]>(userSolutions);
+
+	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+
+	useEffect(() => {
+		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [hasExamEnded]);
+
+	const calculateScore = () => {
+		const total = questions.length || 0;
+		const correct = answers.filter((x) => questions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
+		const missing = total - answers.filter((x) => questions.find((y) => x.id === y.id)).length;
+
+		return {total, correct, missing};
+	};
+
+	const toggleAnswer = (solution: "true" | "false" | "not_given", questionId: string) => {
+		const answer = answers.find((x) => x.id === questionId);
+		if (answer && answer.solution === solution) {
+			setAnswers((prev) => prev.filter((x) => x.id !== questionId));
+			return;
+		}
+
+		setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), {id: questionId, solution}]);
+	};
+
+	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) => (
+						<div key={question.id} className="flex flex-col gap-4">
+							<span>
+								{index + 1}. {question.prompt}
+							</span>
+							<div className="flex gap-4">
+								<Button
+									variant={answers.find((x) => x.id === question.id)?.solution === "true" ? "solid" : "outline"}
+									onClick={() => toggleAnswer("true", question.id)}
+									className="!py-2">
+									True
+								</Button>
+								<Button
+									variant={answers.find((x) => x.id === question.id)?.solution === "false" ? "solid" : "outline"}
+									onClick={() => toggleAnswer("false", question.id)}
+									className="!py-2">
+									False
+								</Button>
+								<Button
+									variant={answers.find((x) => x.id === question.id)?.solution === "not_given" ? "solid" : "outline"}
+									onClick={() => toggleAnswer("not_given", question.id)}
+									className="!py-2">
+									Not Given
+								</Button>
+							</div>
+						</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: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+		</>
+	);
+}

src/components/Exercises/index.tsx

@@ -4,6 +4,7 @@ import {
 	MatchSentencesExercise,
 	MultipleChoiceExercise,
 	SpeakingExercise,
+	TrueFalseExercise,
 	UserSolution,
 	WriteBlanksExercise,
 	WritingExercise,
@@ -14,6 +15,7 @@ import MultipleChoice from "./MultipleChoice";
 import WriteBlanks from "./WriteBlanks";
 import Writing from "./Writing";
 import Speaking from "./Speaking";
+import TrueFalse from "./TrueFalse";
 
 const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
 
@@ -26,6 +28,8 @@ export const renderExercise = (exercise: Exercise, onNext: (userSolutions: UserS
 	switch (exercise.type) {
 		case "fillBlanks":
 			return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
+		case "trueFalse":
+			return <TrueFalse {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
 		case "matchSentences":
 			return <MatchSentences {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
 		case "multipleChoice":