Navigation rework, added prompt edit to components that were missing

2024-11-25 16:50:46 +00:00
parent e9b7bd14cc
commit 114da173be
105 changed files with 3761 additions and 3728 deletions
--- a/src/components/Exercises/MultipleChoice/Question.tsx
+++ b/src/components/Exercises/MultipleChoice/Question.tsx
@@ -0,0 +1,73 @@
+/* eslint-disable @next/next/no-img-element */
+import { MultipleChoiceQuestion } from "@/interfaces/exam";
+import clsx from "clsx";
+import reactStringReplace from "react-string-replace";
+import { v4 } from "uuid";
+
+interface Props {
+    userSolution: string | undefined;
+	onSelectOption?: (option: string) => void;
+	showSolution?: boolean;
+}
+
+const Question: React.FC<MultipleChoiceQuestion & Props> = ({
+	id,
+	variant,
+	prompt,
+	options,
+	userSolution,
+	onSelectOption,
+}) => {
+	const renderPrompt = (prompt: string) => {
+		return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
+			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
+			return word.length > 0 ? <u key={v4()}>{word}</u> : null;
+		});
+	};
+
+	return (
+		<div className="flex flex-col gap-8">
+			{isNaN(Number(id)) ? (
+				<span className="text-lg">{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
+			) : (
+				<span className="text-lg">
+					<>
+						{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
+					</>
+				</span>
+			)}
+			<div className="flex flex-wrap gap-4 justify-between">
+				{variant === "image" &&
+					options.map((option) => (
+						<div
+							key={v4()}
+							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
+							className={clsx(
+								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative select-none",
+								userSolution === option.id.toString() && "border-mti-purple-light",
+							)}>
+							<span key={v4()} className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>
+								{option.id.toString()}
+							</span>
+							<img src={option.src!} alt={`Option ${option.id.toString()}`} />
+						</div>
+					))}
+				{variant === "text" &&
+					options.map((option) => (
+						<div
+							key={v4()}
+							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
+							className={clsx(
+								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none",
+								userSolution === option.id.toString() && "!bg-mti-purple-light !text-white",
+							)}>
+							<span className="font-semibold">{option.id.toString()}.</span>
+							<span>{option.text}</span>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+}
+
+export default Question;