Created the first exercise of the listening demo

src/components/Exercises/FillBlanks.tsx

@@ -1,9 +1,12 @@
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import {FillBlanksExercise} from "@/interfaces/exam";
 import {Dialog, Transition} from "@headlessui/react";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
+import Icon from "@mdi/react";
 import clsx from "clsx";
 import {Fragment, useState} from "react";
 import reactStringReplace from "react-string-replace";
+import { CommonProps } from ".";
 
 interface WordsPopoutProps {
 	words: {word: string; isDisabled: boolean}[];
@@ -12,6 +15,8 @@ interface WordsPopoutProps {
 	onAnswer: (answer: string) => void;
 }
 
+type UserSolution = {id: string; solution: string};
+
 function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
 	return (
 		<Transition appear show={isOpen} as={Fragment}>
@@ -67,7 +72,7 @@ function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
 	);
 }
 
-export default function FillBlanks({allowRepetition, prompt, solutions, text, words}: FillBlanksExercise) {
+export default function FillBlanks({allowRepetition, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
 	const [currentBlankId, setCurrentBlankId] = useState<string>();
 
@@ -89,6 +94,7 @@ export default function FillBlanks({allowRepetition, prompt, solutions, text, wo
 	};
 
 	return (
+		<>
 		<div className="flex flex-col">
 			<WordsPopout
 				words={words.map((word) => ({word, isDisabled: allowRepetition ? false : userSolutions.map((x) => x.solution).includes(word)}))}
@@ -109,5 +115,77 @@ export default function FillBlanks({allowRepetition, prompt, solutions, text, wo
 				))}
 			</span>
 		</div>
+
+		<div className="self-end flex gap-8">
+				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
+					<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={onNext}>
+					Next
+					<div className="absolute right-4">
+						<Icon path={mdiArrowRight} color="white" size={1} />
+					</div>
+				</button>
+			</div>
+		</>
+	);
+}
+
+export function FillBlanksSolutions({
+	allowRepetition,
+	prompt,
+	solutions,
+	text,
+	words,
+	userSolutions,
+}: FillBlanksExercise & {userSolutions: UserSolution[]}) {
+	const renderLines = (line: string) => {
+		return (
+			<span>
+				{reactStringReplace(line, /({{\d}})/g, (match) => {
+					const id = match.replaceAll(/[\{\}]/g, "");
+					const userSolution = userSolutions.find((x) => x.id === id);
+					const solution = solutions.find((x) => x.id === id)!;
+
+					if (!userSolution) {
+						return (
+							<>
+								<button className={clsx("border-2 rounded-xl px-4 text-gray-500 border-gray-500")}>{solution.solution}</button>
+							</>
+						);
+					}
+
+					if (userSolution.solution === solution.solution) {
+						return <button className={clsx("border-2 rounded-xl px-4 text-green-500 border-green-500")}>{solution.solution}</button>;
+					}
+
+					if (userSolution.solution !== solution.solution) {
+						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>
+							</>
+						);
+					}
+				})}
+			</span>
+		);
+	};
+
+	return (
+		<div className="flex flex-col">
+			<span className="text-lg font-medium text-center px-48">{prompt}</span>
+			<span>
+				{text.split("\n").map((line) => (
+					<>
+						{renderLines(line)}
+						<br />
+					</>
+				))}
+			</span>
+		</div>
 	);
 }

src/components/Exercises/MatchSentences.tsx

@@ -1,11 +1,15 @@
+import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import {MatchSentencesExercise} from "@/interfaces/exam";
+import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import Icon from "@mdi/react";
 import clsx from "clsx";
 import {useState} from "react";
 import LineTo from "react-lineto";
+import {CommonProps} from ".";
 
 const AVAILABLE_COLORS = ["#63526a", "#f7651d", "#278f04", "#ef4487", "#ca68c0", "#f5fe9b", "#b3ab01", "#af963a", "#9a85f1", "#1b1750"];
 
-export default function MatchSentences({allowRepetition, options, prompt, sentences}: MatchSentencesExercise) {
+export default function MatchSentences({allowRepetition, options, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
 	const [selectedQuestion, setSelectedQuestion] = useState<string>();
 	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
 
@@ -20,60 +24,77 @@ export default function MatchSentences({allowRepetition, options, prompt, senten
 	};
 
 	return (
-		<div className="flex flex-col items-center gap-8">
-			<span className="text-lg font-medium text-center px-48">{prompt}</span>
-			<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))}>
-							<span>
-								<span className="font-semibold">{id}.</span> {sentence}{" "}
-							</span>
+		<>
+			<div className="flex flex-col items-center gap-8">
+				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<div className="grid grid-cols-2 gap-16 place-items-center">
+					<div className="flex flex-col gap-1">
+						{sentences.map(({sentence, id, color}) => (
 							<div
-								style={{borderColor: color, backgroundColor: selectedQuestion === id ? color : "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")}
-							onClick={() => selectOption(id)}>
-							<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>
-				{userSolutions.map((solution, index) => (
-					<div key={`solution_${index}`} className="absolute">
-						<LineTo
-							className="rounded-full"
-							from={solution.question}
-							to={solution.option}
-							borderColor={sentences.find((x) => x.id === solution.question)!.color}
-							borderWidth={5}
-						/>
+								key={`question_${id}`}
+								className="flex items-center justify-end gap-2 cursor-pointer"
+								onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}>
+								<span>
+									<span className="font-semibold">{id}.</span> {sentence}{" "}
+								</span>
+								<div
+									style={{borderColor: color, backgroundColor: selectedQuestion === id ? color : "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")}
+								onClick={() => selectOption(id)}>
+								<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>
+					{userSolutions.map((solution, index) => (
+						<div key={`solution_${index}`} className="absolute">
+							<LineTo
+								className="rounded-full"
+								from={solution.question}
+								to={solution.option}
+								borderColor={sentences.find((x) => x.id === solution.question)!.color}
+								borderWidth={5}
+							/>
+						</div>
+					))}
+				</div>
 			</div>
-		</div>
+
+			<div className="self-end flex gap-8">
+				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
+					<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={onNext}>
+					Next
+					<div className="absolute right-4">
+						<Icon path={mdiArrowRight} color="white" size={1} />
+					</div>
+				</button>
+			</div>
+		</>
 	);
 }
 

src/components/Exercises/MultipleChoice.tsx

@@ -0,0 +1,107 @@
+/* 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 Icon from "@mdi/react";
+import clsx from "clsx";
+import {useState} from "react";
+import {CommonProps} from ".";
+
+function Question({
+	variant,
+	id,
+	prompt,
+	solution,
+	options,
+	userSolution,
+	onSelectOption,
+}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption: (option: string) => void}) {
+	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(option.id)}
+							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",
+							)}>
+							<img src={option.src!} alt={`Option ${option.id}`} />
+							<span>{option.id}</span>
+						</div>
+					))}
+				{variant === "text" &&
+					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",
+							)}>
+							<span className="font-bold">{option.id}.</span>
+							<span>{option.text}</span>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+}
+
+export default function MultipleChoice({prompt, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
+	const [questionIndex, setQuestionIndex] = useState(0);
+
+	const onSelectOption = (option: string) => {
+		const question = questions[questionIndex];
+		setUserSolutions((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
+	};
+
+	const next = () => {
+		if (questionIndex === questions.length) {
+			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}
+						onSelectOption={onSelectOption}
+					/>
+				)}
+			</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/components/Exercises/index.tsx

@@ -0,0 +1,22 @@
+import {Exercise, FillBlanksExercise, MatchSentencesExercise, MultipleChoiceExercise} from "@/interfaces/exam";
+import dynamic from "next/dynamic";
+import FillBlanks from "./FillBlanks";
+import MultipleChoice from "./MultipleChoice";
+
+const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
+
+export interface CommonProps {
+	onNext: () => void;
+	onBack: () => void;
+}
+
+export const renderExercise = (exercise: Exercise, onNext: () => void, onBack: () => void) => {
+	switch (exercise.type) {
+		case "fillBlanks":
+			return <FillBlanks {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
+		case "matchSentences":
+			return <MatchSentences {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
+		case "multipleChoice":
+			return <MultipleChoice {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
+	}
+};