Finished implementing a Solutions version for each exercise

2023-04-11 21:35:44 +01:00
parent 45a5cb0f5c
commit 49c515b02a
20 changed files with 610 additions and 333 deletions
--- a/src/components/Solutions/MultipleChoice.tsx
+++ b/src/components/Solutions/MultipleChoice.tsx
@@ -0,0 +1,133 @@
+/* eslint-disable @next/next/no-img-element */
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
+import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
+import {mdiArrowLeft, mdiArrowRight, mdiCheck, mdiClose} from "@mdi/js";
+import Icon from "@mdi/react";
+import clsx from "clsx";
+import {useState} from "react";
+import {CommonProps} from ".";
+
+function Question({
+	variant,
+	prompt,
+	solution,
+	options,
+	userSolution,
+	onSelectOption,
+	showSolution = false,
+}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
+	const optionColor = (option: string) => {
+		if (!showSolution) {
+			return userSolution === option ? "border-blue-400" : "";
+		}
+
+		if (option === solution) {
+			return "border-green-500 text-green-500";
+		}
+
+		return userSolution === option ? "border-red-500 text-red-500" : "";
+	};
+
+	const optionBadge = (option: string) => {
+		if (option === userSolution) {
+			if (solution === option) {
+				return (
+					<div className="badge badge-lg bg-green-500 border-green-500 absolute -top-2 -right-4">
+						<div className="tooltip" data-tip="You have correctly answered!">
+							<Icon path={mdiCheck} color="white" size={0.8} />
+						</div>
+					</div>
+				);
+			}
+
+			return (
+				<div className="badge badge-lg bg-red-500 border-red-500 absolute -top-2 -right-4">
+					<div className="tooltip" data-tip="You have wrongly answered!">
+						<Icon path={mdiClose} color="white" size={0.8} />
+					</div>
+				</div>
+			);
+		}
+	};
+
+	return (
+		<div className="flex flex-col items-center gap-4">
+			<span>{prompt}</span>
+			<div className="grid grid-cols-4 gap-4 place-items-center">
+				{variant === "image" &&
+					options.map((option) => (
+						<div
+							key={option.id}
+							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
+							className={clsx(
+								"flex flex-col items-center border-2 p-4 rounded-xl gap-4 cursor-pointer bg-white relative",
+								optionColor(option.id),
+							)}>
+							{showSolution && optionBadge(option.id)}
+							<img src={option.src!} alt={`Option ${option.id}`} />
+							<span>{option.id}</span>
+						</div>
+					))}
+				{variant === "text" &&
+					options.map((option) => (
+						<div
+							key={option.id}
+							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
+							className={clsx("flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white", optionColor(option.id))}>
+							<span className="font-bold">{option.id}.</span>
+							<span>{option.text}</span>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+}
+
+export default function MultipleChoice({prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+	const [questionIndex, setQuestionIndex] = useState(0);
+
+	const next = () => {
+		if (questionIndex === questions.length - 1) {
+			onNext();
+		} else {
+			setQuestionIndex((prev) => prev + 1);
+		}
+	};
+
+	const back = () => {
+		if (questionIndex === 0) {
+			onBack();
+		} else {
+			setQuestionIndex((prev) => prev - 1);
+		}
+	};
+
+	return (
+		<>
+			<div className="flex flex-col items-center gap-8">
+				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				{questionIndex < questions.length && (
+					<Question
+						{...questions[questionIndex]}
+						userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
+						showSolution
+					/>
+				)}
+			</div>
+			<div className="self-end flex gap-8">
+				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={back}>
+					<div className="absolute left-4">
+						<Icon path={mdiArrowLeft} color="white" size={1} />
+					</div>
+					Back
+				</button>
+				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={next}>
+					Next
+					<div className="absolute right-4">
+						<Icon path={mdiArrowRight} color="white" size={1} />
+					</div>
+				</button>
+			</div>
+		</>
+	);
+}