Added a solution version for the MultipleChoice Exercise

src/components/Exercises/FillBlanks.tsx

@@ -166,7 +166,7 @@ export function FillBlanksSolutions({
 						return (
 							<>
 								<button className={clsx("border-2 rounded-xl px-4 text-red-500 border-red-500 mr-1")}>{userSolution.solution}</button>
-								<button className={clsx("border-2 rounded-xl px-4 text-gray-500 border-gray-500")}>{solution.solution}</button>
+								<button className={clsx("border-2 rounded-xl px-4 text-blue-400 border-blue-400")}>{solution.solution}</button>
 							</>
 						);
 					}

src/components/Exercises/MatchSentences.tsx

@@ -98,16 +98,7 @@ export default function MatchSentences({allowRepetition, options, prompt, senten
 	);
 }
 
-export function MatchSentencesSolutions({allowRepetition, options, prompt, sentences}: MatchSentencesExercise) {
-	const [selectedQuestion, setSelectedQuestion] = useState<string>();
-	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
-
-	const selectOption = (option: string) => {
-		if (!selectedQuestion) return;
-		setUserSolutions((prev) => [...prev.filter((x) => x.question !== selectedQuestion), {question: selectedQuestion, option}]);
-		setSelectedQuestion(undefined);
-	};
-
+export function MatchSentencesSolutions({allowRepetition, options, prompt, sentences, userSolutions}: MatchSentencesExercise) {
 	const getSentenceColor = (id: string) => {
 		return sentences.find((x) => x.id === id)?.color || "";
 	};
@@ -118,15 +109,12 @@ export function MatchSentencesSolutions({allowRepetition, options, prompt, sente
 			<div className="grid grid-cols-2 gap-16 place-items-center">
 				<div className="flex flex-col gap-1">
 					{sentences.map(({sentence, id, color}) => (
-						<div
-							key={`question_${id}`}
-							className="flex items-center justify-end gap-2 cursor-pointer"
-							onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}>
+						<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
 							<span>
 								<span className="font-semibold">{id}.</span> {sentence}{" "}
 							</span>
 							<div
-								style={{borderColor: color, backgroundColor: selectedQuestion === id ? color : "transparent"}}
+								style={{borderColor: color, backgroundColor: "transparent"}}
 								className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
 							/>
 						</div>
@@ -134,10 +122,7 @@ export function MatchSentencesSolutions({allowRepetition, options, prompt, sente
 				</div>
 				<div className="flex flex-col gap-1">
 					{options.map(({sentence, id}) => (
-						<div
-							key={`answer_${id}`}
-							className={clsx("flex items-center justify-start gap-2 cursor-pointer")}
-							onClick={() => selectOption(id)}>
+						<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
 							<div
 								style={
 									userSolutions.find((x) => x.option === id)
@@ -166,6 +151,52 @@ export function MatchSentencesSolutions({allowRepetition, options, prompt, sente
 					</div>
 				))}
 			</div>
+
+			<div className="grid grid-cols-2 gap-16 place-items-center">
+				<div className="flex flex-col gap-1">
+					{sentences.map(({sentence, id, color}) => (
+						<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
+							<span>
+								<span className="font-semibold">{id}.</span> {sentence}{" "}
+							</span>
+							<div
+								style={{borderColor: color, backgroundColor: "transparent"}}
+								className={clsx("border-2 border-blue-500 w-4 h-4 rounded-full", id)}
+							/>
+						</div>
+					))}
+				</div>
+				<div className="flex flex-col gap-1">
+					{options.map(({sentence, id}) => (
+						<div key={`answer_${id}`} className={clsx("flex items-center justify-start gap-2 cursor-pointer")}>
+							<div
+								style={
+									userSolutions.find((x) => x.option === id)
+										? {
+												border: `2px solid ${getSentenceColor(userSolutions.find((x) => x.option === id)!.question)}`,
+										  }
+										: {}
+								}
+								className={clsx("border-2 border-green-500 bg-transparent w-4 h-4 rounded-full", id)}
+							/>
+							<span>
+								<span className="font-semibold">{id}.</span> {sentence}{" "}
+							</span>
+						</div>
+					))}
+				</div>
+				{sentences.map(({id, solution}, index) => (
+					<div key={`solution_${index}`} className="absolute">
+						<LineTo
+							className="rounded-full"
+							from={id}
+							to={solution}
+							borderColor={sentences.find((x) => x.id === id)!.color}
+							borderWidth={5}
+						/>
+					</div>
+				))}
+			</div>
 		</div>
 	);
 }

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>
+		</>
+	);
+}

src/exams/Listening.tsx

@@ -57,7 +57,11 @@ export default function Listening({exam, onFinish}: Props) {
 				{exam.audio.repeatableTimes > 0 && (
 					<>{exam.audio.repeatableTimes <= timesListened && <span>You are no longer allowed to listen to the audio again.</span>}</>
 				)}
-				<span>AUDIO WILL GO HERE</span>
+				<audio preload="auto" controls autoPlay onPlay={() => setTimesListened((prev) => prev + 1)} onPause={() => alert("PAUSE")}>
+					<source src="https://www.sndup.net/hqvf/d" type="audio/mpeg" />
+					<source src="https://www.sndup.net/hqvf/m" type="audio/mpeg" />
+					Your browser does not support the audio element
+				</audio>
 			</div>
 		</>
 	);

src/interfaces/exam.ts

@@ -65,6 +65,7 @@ export interface WriteBlanksExercise {
 export interface MatchSentencesExercise {
 	type: "matchSentences";
 	prompt: string;
+	userSolutions: {question: string; option: string}[];
 	sentences: {
 		id: string;
 		sentence: string;
@@ -82,6 +83,7 @@ export interface MultipleChoiceExercise {
 	type: "multipleChoice";
 	prompt: string; // *EXAMPLE: "Select the appropriate option."
 	questions: MultipleChoiceQuestion[];
+	userSolutions: {question: string; option: string}[];
 }
 
 export interface MultipleChoiceQuestion {