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,6 +24,7 @@ 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">
@@ -74,6 +79,22 @@ export default function MatchSentences({allowRepetition, options, prompt, senten
 					))}
 				</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} />;
+	}
+};

src/demo/listening.json

@@ -0,0 +1,64 @@
+{
+  "audio": {
+    "title": "",
+    "source": "",
+    "transcript": "",
+    "repeatableTimes": 3
+  },
+  "exercises": [
+    {
+      "type": "multipleChoice",
+      "prompt": "Select the appropriate option",
+      "questions": [
+        {
+          "id": "1",
+          "prompt": "What does her briefcase look like?",
+          "solution": "A",
+          "variant": "image",
+          "options": [
+            {
+              "id": "A",
+              "src": "https://i.imgur.com/sU7SLvF.png"
+            },
+            {
+              "id": "B",
+              "src": "https://i.imgur.com/i5RacYK.png"
+            },
+            {
+              "id": "C",
+              "src": "https://i.imgur.com/rEbrSqA.png"
+            },
+            {
+              "id": "D",
+              "src": "https://i.imgur.com/2lZZ9kM.png"
+            }
+          ]
+        },
+        {
+          "id": "2",
+          "prompt": "What did she have inside her briefcase?",
+          "solution": "D",
+          "variant": "text",
+          "options": [
+            {
+              "id": "A",
+              "text": "wallet, pens and novel"
+            },
+            {
+              "id": "B",
+              "text": "papers and wallet"
+            },
+            {
+              "id": "C",
+              "text": "pens and novel"
+            },
+            {
+              "id": "D",
+              "text": "papers, pens and novel"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

src/interfaces/exam.ts

@@ -1,5 +1,3 @@
-export type Type = "fillBlanks" | "matchingSentences";
-
 export interface ReadingExam {
 	text: {
 		title: string;
@@ -8,7 +6,17 @@ export interface ReadingExam {
 	exercises: Exercise[];
 }
 
-type Exercise = FillBlanksExercise | MatchSentencesExercise;
+export interface ListeningExam {
+	audio: {
+		title: string;
+		source: string;
+		transcript: string;
+		repeatableTimes: number; // *The amount of times the user is allowed to repeat the audio, 0 for unlimited
+	};
+	exercises: Exercise[];
+}
+
+export type Exercise = FillBlanksExercise | MatchSentencesExercise | MultipleChoiceExercise;
 
 export interface FillBlanksExercise {
 	prompt: string; // *EXAMPLE: "Complete the summary below. Click a blank to select the corresponding word for it."
@@ -23,7 +31,7 @@ export interface FillBlanksExercise {
 }
 
 export interface MatchSentencesExercise {
-	type: string;
+	type: "matchSentences";
 	prompt: string;
 	sentences: {
 		id: string;
@@ -37,3 +45,21 @@ export interface MatchSentencesExercise {
 		sentence: string;
 	}[];
 }
+
+export interface MultipleChoiceExercise {
+	type: "multipleChoice";
+	prompt: string; // *EXAMPLE: "Select the appropriate option."
+	questions: MultipleChoiceQuestion[];
+}
+
+export interface MultipleChoiceQuestion {
+	variant: "image" | "text";
+	id: string; // *EXAMPLE: "1"
+	prompt: string; // *EXAMPLE: "What does her briefcase look like?"
+	solution: string; // *EXAMPLE: "A"
+	options: {
+		id: string; // *EXAMPLE: "A"
+		src?: string; // *EXAMPLE: "https://i.imgur.com/rEbrSqA.png" (only used if the variant is "image")
+		text?: string; // *EXAMPLE: "wallet, pens and novel" (only used if the variant is "text")
+	}[];
+}

src/pages/exam/listening/[id].tsx

@@ -0,0 +1,90 @@
+import Navbar from "@/components/Navbar";
+import {ListeningExam} from "@/interfaces/exam";
+import Head from "next/head";
+
+// TODO: Remove this import
+import JSON_LISTENING from "@/demo/listening.json";
+import JSON_USER from "@/demo/user.json";
+import {useState} from "react";
+import Icon from "@mdi/react";
+import {mdiArrowRight} from "@mdi/js";
+import clsx from "clsx";
+import {infoButtonStyle} from "@/constants/buttonStyles";
+import {renderExercise} from "@/components/Exercises";
+
+interface Props {
+	exam: ListeningExam;
+}
+
+export const getServerSideProps = () => {
+	return {
+		props: {
+			exam: JSON_LISTENING,
+		},
+	};
+};
+
+export default function Listening({exam}: Props) {
+	const [exerciseIndex, setExerciseIndex] = useState(-1);
+	const [timesListened, setTimesListened] = useState(0);
+
+	const nextExercise = () => {
+		setExerciseIndex((prev) => prev + 1);
+	};
+
+	const previousExercise = () => {
+		setExerciseIndex((prev) => prev - 1);
+	};
+
+	const renderAudioPlayer = () => (
+		<>
+			{exerciseIndex === -1 && (
+				<div className="flex flex-col">
+					<span className="text-lg font-semibold">Please listen to the following audio attentively.</span>
+					{exam.audio.repeatableTimes > 0 ? (
+						<span className="self-center text-sm">
+							You will only be allowed to listen to the audio {exam.audio.repeatableTimes} time(s).
+						</span>
+					) : (
+						<span className="self-center text-sm">You may listen to the audio as many times as you would like.</span>
+					)}
+				</div>
+			)}
+			<div className="bg-gray-300 rounded-xl p-4 flex flex-col gap-4 items-center w-full overflow-auto">
+				<span className="text-xl font-semibold">{exam.audio.title}</span>
+				{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>
+			</div>
+		</>
+	);
+
+	return (
+		<>
+			<Head>
+				<title>Create Next App</title>
+				<meta name="description" content="Generated by create next app" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
+				<Navbar profilePicture={JSON_USER.profilePicture} />
+				<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
+					{renderAudioPlayer()}
+					{exerciseIndex > -1 &&
+						exerciseIndex < exam.exercises.length &&
+						renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
+					{exerciseIndex === -1 && (
+						<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={nextExercise}>
+							Next
+							<div className="absolute right-4">
+								<Icon path={mdiArrowRight} color="white" size={1} />
+							</div>
+						</button>
+					)}
+				</div>
+			</main>
+		</>
+	);
+}

src/pages/exam/reading/[id].tsx

@@ -1,5 +1,5 @@
 import Navbar from "@/components/Navbar";
-import {FillBlanksExercise, MatchSentencesExercise, ReadingExam} from "@/interfaces/exam";
+import {ReadingExam} from "@/interfaces/exam";
 import Head from "next/head";
 
 // TODO: Remove this import
@@ -10,11 +10,8 @@ import Icon from "@mdi/react";
 import {mdiArrowLeft, mdiArrowRight, mdiNotebook} from "@mdi/js";
 import clsx from "clsx";
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
-import FillBlanks from "@/components/Exercises/FillBlanks";
 import {Dialog, Transition} from "@headlessui/react";
-import dynamic from "next/dynamic";
-
-const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
+import {renderExercise} from "@/components/Exercises";
 
 interface Props {
 	exam: ReadingExam;
@@ -119,16 +116,6 @@ export default function Reading({exam}: Props) {
 		</>
 	);
 
-	const renderQuestion = () => {
-		const exercise = exam.exercises[exerciseIndex];
-		switch (exercise.type) {
-			case "fillBlanks":
-				return <FillBlanks {...(exercise as FillBlanksExercise)} />;
-			case "matchSentences":
-				return <MatchSentences {...(exercise as MatchSentencesExercise)} />;
-		}
-	};
-
 	return (
 		<>
 			<Head>
@@ -142,7 +129,9 @@ export default function Reading({exam}: Props) {
 				<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
 				<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
 					{exerciseIndex === -1 && renderText()}
-					{exerciseIndex > -1 && exerciseIndex < exam.exercises.length && renderQuestion()}
+					{exerciseIndex > -1 &&
+						exerciseIndex < exam.exercises.length &&
+						renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
 					<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
 						{exerciseIndex > -1 && (
 							<button
@@ -157,22 +146,14 @@ export default function Reading({exam}: Props) {
 								</div>
 							</button>
 						)}
-						<div className="self-end flex gap-8">
-							{exerciseIndex > -1 && (
-								<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={previousExercise}>
-									<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={nextExercise}>
+						{exerciseIndex === -1 && (
+							<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={nextExercise}>
 								Next
 								<div className="absolute right-4">
 									<Icon path={mdiArrowRight} color="white" size={1} />
 								</div>
 							</button>
-						</div>
+						)}
 					</div>
 				</div>
 			</main>