Implemented a simple "match the sentence" exercise

2023-03-23 16:22:48 +00:00
parent 740346f696
commit 3d74bf9bf1
7 changed files with 327 additions and 27 deletions
--- a/src/components/Exercises/MatchSentences.tsx
+++ b/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>
+	);
+}