Added the ability to generate custom level exams, still WIP in some parts

src/components/Solutions/MultipleChoice.tsx

@@ -3,6 +3,7 @@ import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam"
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
 import {useEffect, useState} from "react";
+import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import Button from "../Low/Button";
 
@@ -14,6 +15,15 @@ function Question({
 	options,
 	userSolution,
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
+	const renderPrompt = (prompt: string) => {
+		return reactStringReplace(prompt, /((<u>)\w+(<\/u>))/g, (match) => {
+			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
+			console.log(word);
+
+			return word.length > 0 ? <u>{word}</u> : null;
+		});
+	};
+
 	const optionColor = (option: string) => {
 		if (option === solution && !userSolution) {
 			return "!border-mti-gray-davy !text-mti-gray-davy";
@@ -29,10 +39,12 @@ function Question({
 	return (
 		<div className="flex flex-col items-center gap-4">
 			{isNaN(Number(id)) ? (
-				<span className="">{prompt}</span>
+				<span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
 			) : (
 				<span className="">
-					{id} - {prompt}
+					<>
+						{id} - <span>{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")} </span>
+					</>
 				</span>
 			)}
 			<div className="grid grid-cols-4 gap-4 place-items-center">