Added a solution version for the MultipleChoice Exercise

src/components/Exercises/MultipleChoice.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
-import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import {mdiArrowLeft, mdiArrowRight, mdiCheck, mdiClose} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
 import {useState} from "react";
@@ -9,13 +9,47 @@ import {CommonProps} from ".";
 
 function Question({
 	variant,
-	id,
 	prompt,
 	solution,
 	options,
 	userSolution,
 	onSelectOption,
-}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption: (option: string) => void}) {
+	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>
@@ -24,11 +58,12 @@ function Question({
 					options.map((option) => (
 						<div
 							key={option.id}
-							onClick={() => onSelectOption(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",
-								userSolution === option.id && "border-blue-400",
+								"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>
@@ -37,11 +72,8 @@ function Question({
 					options.map((option) => (
 						<div
 							key={option.id}
-							onClick={() => onSelectOption(option.id)}
-							className={clsx(
-								"flex border-2 p-4 rounded-xl gap-2 cursor-pointer bg-white",
-								userSolution === option.id && "border-blue-400",
-							)}>
+							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>
@@ -105,3 +137,52 @@ export default function MultipleChoice({prompt, questions, onNext, onBack}: Mult
 		</>
 	);
 }
+
+export function MultipleChoiceSolutions({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>
+		</>
+	);
+}