Created the first exercise of the listening demo

2023-03-24 18:09:05 +00:00
parent 3d74bf9bf1
commit 2b38f9df9b
8 changed files with 473 additions and 84 deletions
--- a/src/components/Exercises/MultipleChoice.tsx
+++ b/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>
+		</>
+	);
+}