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

src/components/Exercises/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,13 +15,24 @@ function Question({
 	userSolution,
 	onSelectOption,
 }: 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;
+		});
+	};
+
 	return (
 		<div className="flex flex-col gap-10">
 			{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="flex flex-wrap gap-4 justify-between">