Updated the FillBlanks to the new format

src/components/Exercises/FillBlanks.tsx

@@ -77,15 +77,8 @@ export default function FillBlanks({
 	onBack,
 }: FillBlanksExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
-	const [currentBlankId, setCurrentBlankId] = useState<string>();
-	const [isDrawerShowing, setIsDrawerShowing] = useState(false);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
-	const allBlanks = Array.from(text.match(/({{\d+}})/g) || []).map((x) => x.replaceAll("{", "").replaceAll("}", ""));
-
-	useEffect(() => {
-		setTimeout(() => setIsDrawerShowing(!!currentBlankId), 100);
-	}, [currentBlankId]);
 
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
@@ -94,9 +87,17 @@ export default function FillBlanks({
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = answers.filter(
-			(x) => solutions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
-		).length;
+		const correct = answers.filter((x) => {
+			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution.toLowerCase();
+			if (!solution) return false;
+
+			const option = words.find((w) =>
+				typeof w === "string" ? w.toLowerCase() === x.solution.toLowerCase() : w.letter.toLowerCase() === x.solution.toLowerCase(),
+			);
+			if (!option) return false;
+
+			return solution === (typeof option === "string" ? option.toLowerCase() : option.word.toLowerCase());
+		}).length;
 		const missing = total - answers.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
 
 		return {total, correct, missing};
@@ -104,49 +105,29 @@ export default function FillBlanks({
 
 	const renderLines = (line: string) => {
 		return (
-			<span className="text-base leading-5">
+			<div className="text-base leading-5">
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
 					const userSolution = answers.find((x) => x.id === id);
 
 					return (
-						<button
+						<input
 							className={clsx(
-								"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
-								!userSolution && "w-6 h-6 text-center text-mti-purple-light bg-mti-purple-ultralight",
-								currentBlankId === id && "text-white !bg-mti-purple-light ",
-								userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
+								"rounded-full hover:text-white focus:ring-0 focus:outline-none focus:!text-white focus:bg-mti-purple transition duration-300 ease-in-out my-1 px-5 py-2 text-center",
+								!userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
+								userSolution && "px-5 py-2 text-center text-mti-purple-dark bg-mti-purple-ultralight",
 							)}
-							onClick={() => setCurrentBlankId(id)}>
-							{userSolution ? userSolution.solution : id}
-						</button>
+							onChange={(e) => setAnswers((prev) => [...prev.filter((x) => x.id !== id), {id, solution: e.target.value}])}
+							value={userSolution?.solution}></input>
 					);
 				})}
-			</span>
+			</div>
 		);
 	};
 
 	return (
 		<>
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
-				{(!!currentBlankId || isDrawerShowing) && (
-					<WordsDrawer
-						key={currentBlankId}
-						blankId={currentBlankId}
-						words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
-						previouslySelectedWord={currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined}
-						isOpen={isDrawerShowing}
-						onCancel={() => setCurrentBlankId(undefined)}
-						onAnswer={(solution: string) => {
-							setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
-							if (allBlanks.findIndex((x) => x === currentBlankId) + 1 < allBlanks.length) {
-								setCurrentBlankId(allBlanks[allBlanks.findIndex((x) => x === currentBlankId) + 1]);
-								return;
-							}
-							setCurrentBlankId(undefined);
-						}}
-					/>
-				)}
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -163,6 +144,26 @@ export default function FillBlanks({
 						</p>
 					))}
 				</span>
+				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">
+					<span className="font-medium text-mti-purple-dark">Options</span>
+					<div className="flex gap-4 flex-wrap">
+						{words.map((v) => {
+							const text = typeof v === "string" ? v : `${v.letter} - ${v.word}`;
+
+							return (
+								<span
+									className={clsx(
+										"border border-mti-purple-light rounded-full px-3 py-0.5 transition ease-in-out duration-300",
+										!!answers.find((x) => x.solution.toLowerCase() === (typeof v === "string" ? v : v.letter).toLowerCase()) &&
+											"bg-mti-purple-dark text-white",
+									)}
+									key={text}>
+									{text}
+								</span>
+							);
+						})}
+					</div>
+				</div>
 			</div>
 
 			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">