Implemented a simple "match the sentence" exercise

package.json

@@ -27,6 +27,7 @@
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "18.2.0",
+    "react-lineto": "^3.3.0",
     "react-string-replace": "^1.1.0",
     "typescript": "4.9.5",
     "zustand": "^4.3.6"

src/components/Exercises/FillBlanks.tsx

@@ -6,7 +6,7 @@ import {Fragment, useState} from "react";
 import reactStringReplace from "react-string-replace";
 
 interface WordsPopoutProps {
-	words: string[];
+	words: {word: string; isDisabled: boolean}[];
 	isOpen: boolean;
 	onCancel: () => void;
 	onAnswer: (answer: string) => void;
@@ -44,10 +44,11 @@ function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
 								<div className="mt-4 grid grid-cols-3 gap-4">
 									{words.map((word) => (
 										<button
-											key={word}
+											key={word.word}
-											onClick={() => onAnswer(word)}
+											onClick={() => onAnswer(word.word)}
+											disabled={word.isDisabled}
 											className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}>
-											{word}
+											{word.word}
 										</button>
 									))}
 								</div>
@@ -90,7 +91,7 @@ export default function FillBlanks({allowRepetition, prompt, solutions, text, wo
 	return (
 		<div className="flex flex-col">
 			<WordsPopout
-				words={words}
+				words={words.map((word) => ({word, isDisabled: allowRepetition ? false : userSolutions.map((x) => x.solution).includes(word)}))}
 				isOpen={!!currentBlankId}
 				onCancel={() => setCurrentBlankId(undefined)}
 				onAnswer={(solution: string) => {

src/components/Exercises/MatchSentences.tsx

@@ -0,0 +1,150 @@
+import {MatchSentencesExercise} from "@/interfaces/exam";
+import clsx from "clsx";
+import {useState} from "react";
+import LineTo from "react-lineto";
+
+const AVAILABLE_COLORS = ["#63526a", "#f7651d", "#278f04", "#ef4487", "#ca68c0", "#f5fe9b", "#b3ab01", "#af963a", "#9a85f1", "#1b1750"];
+
+export default function MatchSentences({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);
+	};
+
+	const getSentenceColor = (id: string) => {
+		return sentences.find((x) => x.id === id)?.color || "";
+	};
+
+	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
+								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>
+	);
+}
+
+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);
+	};
+
+	const getSentenceColor = (id: string) => {
+		return sentences.find((x) => x.id === id)?.color || "";
+	};
+
+	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
+								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>
+	);
+}

src/demo/reading.json

@@ -65,6 +65,89 @@
         "surprise"
       ],
       "text": "They tried to {{1}} burning logs or charcoal {{2}} that they could create fire themselves. It is suspected that the first man-made flame were produced by {{3}}.\n\nThe very first fire-lighting methods involved the creating of {{4}} by, for example, rapidly {{5}} a wooden stick in a round hole. The use of {{6}} or persistent chipping was also widespread in Europe and among other peoples such as the Chinese and {{7}}. European practice of this method continued until the 1850s {{8}} the discovery of phosphorus some years earlier."
+    },
+    {
+      "type": "matchSentences",
+      "prompt": "Look at the following notes that have been made about the matches described in Reading Passage 1. Decide which type of match (A-H) corresponds with each description and write your answers in boxes 9 15 on your answer sheet.",
+      "sentences": [
+        {
+          "id": "9",
+          "sentence": "made using a less poisonous type of phosphorus",
+          "solution": "F",
+          "color": "#76af37"
+        },
+        {
+          "id": "10",
+          "sentence": "identical to a previous type of match",
+          "solution": "D",
+          "color": "#9b3029"
+        },
+        {
+          "id": "11",
+          "sentence": "caused a deadly illness",
+          "solution": "E",
+          "color": "#453539"
+        },
+        {
+          "id": "12",
+          "sentence": "first to look like modern matches",
+          "solution": "C",
+          "color": "#1888e7"
+        },
+        {
+          "id": "13",
+          "sentence": "first matches used for advertising",
+          "solution": "G",
+          "color": "#ec049f"
+        },
+        {
+          "id": "14",
+          "sentence": "relied on an airtight glass container",
+          "solution": "A",
+          "color": "#a4578a"
+        },
+        {
+          "id": "15",
+          "sentence": "made with the help of an army design",
+          "solution": "C",
+          "color": "#dba996"
+        }
+      ],
+      "allowRepetition": true,
+      "options": [
+        {
+          "id": "A",
+          "sentence": "the Ethereal Match"
+        },
+        {
+          "id": "B",
+          "sentence": "the Instantaneous Lightbox"
+        },
+        {
+          "id": "C",
+          "sentence": "Congreves"
+        },
+        {
+          "id": "D",
+          "sentence": "Lucifers"
+        },
+        {
+          "id": "E",
+          "sentence": "the first strike-anywhere match"
+        },
+        {
+          "id": "F",
+          "sentence": "Lundstrom’s safety match"
+        },
+        {
+          "id": "G",
+          "sentence": "book matches"
+        },
+        {
+          "id": "H",
+          "sentence": "waterproof matches"
+        }
+      ]
     }
   ]
 }

src/interfaces/exam.ts

@@ -8,7 +8,7 @@ export interface ReadingExam {
 	exercises: Exercise[];
 }
 
-type Exercise = FillBlanksExercise;
+type Exercise = FillBlanksExercise | MatchSentencesExercise;
 
 export interface FillBlanksExercise {
 	prompt: string; // *EXAMPLE: "Complete the summary below. Click a blank to select the corresponding word for it."
@@ -21,3 +21,19 @@ export interface FillBlanksExercise {
 		solution: string; // *EXAMPLE: "preserve"
 	}[];
 }
+
+export interface MatchSentencesExercise {
+	type: string;
+	prompt: string;
+	sentences: {
+		id: string;
+		sentence: string;
+		solution: string;
+		color: string;
+	}[];
+	allowRepetition: boolean;
+	options: {
+		id: string;
+		sentence: string;
+	}[];
+}

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

@@ -1,5 +1,5 @@
 import Navbar from "@/components/Navbar";
-import {ReadingExam} from "@/interfaces/exam";
+import {FillBlanksExercise, MatchSentencesExercise, ReadingExam} from "@/interfaces/exam";
 import Head from "next/head";
 
 // TODO: Remove this import
@@ -7,11 +7,14 @@ import JSON_READING from "@/demo/reading.json";
 import JSON_USER from "@/demo/user.json";
 import {Fragment, useState} from "react";
 import Icon from "@mdi/react";
-import {mdiArrowRight, mdiNotebook} from "@mdi/js";
+import {mdiArrowLeft, mdiArrowRight, mdiNotebook} from "@mdi/js";
 import clsx from "clsx";
-import {infoButtonStyle} from "@/constants/buttonStyles";
+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});
 
 interface Props {
 	exam: ReadingExam;
@@ -25,7 +28,7 @@ export const getServerSideProps = () => {
 	};
 };
 
-function TextModal({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
+function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: string; content: string; onClose: () => void}) {
 	return (
 		<Transition appear show={isOpen} as={Fragment}>
 			<Dialog as="div" className="relative z-10" onClose={onClose}>
@@ -50,13 +53,18 @@ function TextModal({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
 							leave="ease-in duration-200"
 							leaveFrom="opacity-100 scale-100"
 							leaveTo="opacity-0 scale-95">
-							<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+							<Dialog.Panel className="w-full max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
 								<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
-									Payment successful
+									{title}
 								</Dialog.Title>
-								<div className="mt-2">
+								<div className="mt-2 overflow-auto">
 									<p className="text-sm text-gray-500">
-										Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
+										{content.split("\n").map((line, index) => (
+											<Fragment key={index}>
+												{line}
+												<br />
+											</Fragment>
+										))}
 									</p>
 								</div>
 
@@ -85,6 +93,10 @@ export default function Reading({exam}: Props) {
 		setExerciseIndex((prev) => prev + 1);
 	};
 
+	const previousExercise = () => {
+		setExerciseIndex((prev) => prev - 1);
+	};
+
 	const renderText = () => (
 		<>
 			<div className="flex flex-col">
@@ -96,11 +108,11 @@ export default function Reading({exam}: Props) {
 			<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.text.title}</span>
 				<span>
-					{exam.text.content.split("\n").map((line) => (
+					{exam.text.content.split("\n").map((line, index) => (
-						<>
+						<Fragment key={index}>
 							<span>{line}</span>
 							<br />
-						</>
+						</Fragment>
 					))}
 				</span>
 			</div>
@@ -111,7 +123,9 @@ export default function Reading({exam}: Props) {
 		const exercise = exam.exercises[exerciseIndex];
 		switch (exercise.type) {
 			case "fillBlanks":
-				return <FillBlanks {...exercise} />;
+				return <FillBlanks {...(exercise as FillBlanksExercise)} />;
+			case "matchSentences":
+				return <MatchSentences {...(exercise as MatchSentencesExercise)} />;
 		}
 	};
 
@@ -125,11 +139,11 @@ export default function Reading({exam}: Props) {
 			</Head>
 			<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
 				<Navbar profilePicture={JSON_USER.profilePicture} />
-				<TextModal isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
+				<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()}
-					<div className="flex gap-8 self-end">
+					<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
 						{exerciseIndex > -1 && (
 							<button
 								className={clsx(
@@ -143,6 +157,15 @@ 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}>
 								Next
 								<div className="absolute right-4">
@@ -151,6 +174,7 @@ export default function Reading({exam}: Props) {
 							</button>
 						</div>
 					</div>
+				</div>
 			</main>
 		</>
 	);

yarn.lock

@@ -2034,6 +2034,15 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prop-types@15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -2071,16 +2080,32 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-lineto@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-lineto/-/react-lineto-3.3.0.tgz#0ca2e59ecd6b8615aa1edfa515b6feac57449d02"
+  integrity sha512-mDs9aX2ryM7lQ9G+XYZKmDmogzpR/2j1YYVQNDrcDbdgKloWOWcKaMkRX/9Ya4PHang4N1qxBbH3GUAIByDa6w==
+  dependencies:
+    prop-types "15.7.2"
+    react "17.0.2"
+
 react-string-replace@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-1.1.0.tgz#a3f7b458e697e77d70b0ea663caf38ab38f7cc17"
   integrity sha512-N6RalSDFGbOHs0IJi1H611WbZsvk3ZT47Jl2JEXFbiS3kTwsdCYij70Keo/tWtLy7sfhDsYm7CwNM/WmjXIaMw==
 
+react@17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"