diff --git a/src/components/Exercises/FillBlanks.tsx b/src/components/Exercises/FillBlanks.tsx
index 8cea0a9f..5644b959 100644
--- a/src/components/Exercises/FillBlanks.tsx
+++ b/src/components/Exercises/FillBlanks.tsx
@@ -93,8 +93,8 @@ export default function FillBlanks({
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = answers.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
-		const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length;
+		const correct = answers.filter((x) => solutions.find((y) => x.id === y.id.toString())?.solution === x.solution.toLowerCase() || false).length;
+		const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id.toString())).length;
 
 		return {total, correct, missing};
 	};
diff --git a/src/components/Exercises/MatchSentences.tsx b/src/components/Exercises/MatchSentences.tsx
index a74ca9b8..ac70002e 100644
--- a/src/components/Exercises/MatchSentences.tsx
+++ b/src/components/Exercises/MatchSentences.tsx
@@ -18,8 +18,8 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 
 	const calculateScore = () => {
 		const total = sentences.length;
-		const correct = answers.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
-		const missing = total - answers.filter((x) => sentences.find((y) => y.id === x.question)).length;
+		const correct = answers.filter((x) => sentences.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
+		const missing = total - answers.filter((x) => sentences.find((y) => y.id.toString() === x.question)).length;
 
 		return {total, correct, missing};
 	};
diff --git a/src/components/Exercises/MultipleChoice.tsx b/src/components/Exercises/MultipleChoice.tsx
index 39416b17..8b541d9b 100644
--- a/src/components/Exercises/MultipleChoice.tsx
+++ b/src/components/Exercises/MultipleChoice.tsx
@@ -20,26 +20,26 @@ function Question({
 				{variant === "image" &&
 					options.map((option) => (
 						<div
-							key={option.id}
-							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
+							key={option.id.toString()}
+							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",
-								userSolution === option.id && "border-mti-purple-light",
+								userSolution === option.id.toString() && "border-mti-purple-light",
 							)}>
-							<span className={clsx("text-sm", userSolution !== option.id && "opacity-50")}>{option.id}</span>
-							<img src={option.src!} alt={`Option ${option.id}`} />
+							<span 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={option.id}
-							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
+							key={option.id.toString()}
+							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
 							className={clsx(
 								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
-								userSolution === option.id && "border-mti-purple-light",
+								userSolution === option.id.toString() && "border-mti-purple-light",
 							)}>
-							<span className="font-semibold">{option.id}.</span>
+							<span className="font-semibold">{option.id.toString()}.</span>
 							<span>{option.text}</span>
 						</div>
 					))}
@@ -66,8 +66,8 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 
 	const calculateScore = () => {
 		const total = questions.length;
-		const correct = answers.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length;
-		const missing = total - answers.filter((x) => questions.find((y) => y.id === x.question)).length;
+		const correct = answers.filter((x) => questions.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
+		const missing = total - answers.filter((x) => questions.find((y) => y.id.toString() === x.question)).length;
 
 		return {total, correct, missing};
 	};
diff --git a/src/components/Exercises/TrueFalse.tsx b/src/components/Exercises/TrueFalse.tsx
index 1da90a60..66ed6cf6 100644
--- a/src/components/Exercises/TrueFalse.tsx
+++ b/src/components/Exercises/TrueFalse.tsx
@@ -16,8 +16,8 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 
 	const calculateScore = () => {
 		const total = questions.length || 0;
-		const correct = answers.filter((x) => questions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
-		const missing = total - answers.filter((x) => questions.find((y) => x.id === y.id)).length;
+		const correct = answers.filter((x) => questions.find((y) => x.id === y.id.toString())?.solution === x.solution.toLowerCase() || false).length;
+		const missing = total - answers.filter((x) => questions.find((y) => x.id === y.id.toString())).length;
 
 		return {total, correct, missing};
 	};
@@ -61,26 +61,26 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 				<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
 				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
 					{questions.map((question, index) => (
-						<div key={question.id} className="flex flex-col gap-4">
+						<div key={question.id.toString()} className="flex flex-col gap-4">
 							<span>
 								{index + 1}. {question.prompt}
 							</span>
 							<div className="flex gap-4">
 								<Button
-									variant={answers.find((x) => x.id === question.id)?.solution === "true" ? "solid" : "outline"}
-									onClick={() => toggleAnswer("true", question.id)}
+									variant={answers.find((x) => x.id === question.id.toString())?.solution === "true" ? "solid" : "outline"}
+									onClick={() => toggleAnswer("true", question.id.toString())}
 									className="!py-2">
 									True
 								</Button>
 								<Button
-									variant={answers.find((x) => x.id === question.id)?.solution === "false" ? "solid" : "outline"}
-									onClick={() => toggleAnswer("false", question.id)}
+									variant={answers.find((x) => x.id === question.id.toString())?.solution === "false" ? "solid" : "outline"}
+									onClick={() => toggleAnswer("false", question.id.toString())}
 									className="!py-2">
 									False
 								</Button>
 								<Button
-									variant={answers.find((x) => x.id === question.id)?.solution === "not_given" ? "solid" : "outline"}
-									onClick={() => toggleAnswer("not_given", question.id)}
+									variant={answers.find((x) => x.id === question.id.toString())?.solution === "not_given" ? "solid" : "outline"}
+									onClick={() => toggleAnswer("not_given", question.id.toString())}
 									className="!py-2">
 									Not Given
 								</Button>
diff --git a/src/components/Exercises/WriteBlanks.tsx b/src/components/Exercises/WriteBlanks.tsx
index 189c08ea..18f933f8 100644
--- a/src/components/Exercises/WriteBlanks.tsx
+++ b/src/components/Exercises/WriteBlanks.tsx
@@ -61,7 +61,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 		const correct = answers.filter(
 			(x) =>
 				solutions
-					.find((y) => x.id === y.id)
+					.find((y) => x.id === y.id.toString())
 					?.solution.map((y) => y.toLowerCase())
 					.includes(x.solution.toLowerCase()) || false,
 		).length;
diff --git a/src/components/Solutions/FillBlanks.tsx b/src/components/Solutions/FillBlanks.tsx
index 49494f82..ec7e9815 100644
--- a/src/components/Solutions/FillBlanks.tsx
+++ b/src/components/Solutions/FillBlanks.tsx
@@ -8,8 +8,10 @@ import Button from "../Low/Button";
 export default function FillBlanksSolutions({id, type, prompt, solutions, text, userSolutions, onNext, onBack}: FillBlanksExercise & CommonProps) {
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
-		const correct = userSolutions.filter((x) => solutions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
-		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id)).length;
+		const correct = userSolutions.filter(
+			(x) => solutions.find((y) => x.id === y.id.toString())?.solution === x.solution.toLowerCase() || false,
+		).length;
+		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id.toString())).length;
 
 		return {total, correct, missing};
 	};
diff --git a/src/components/Solutions/MatchSentences.tsx b/src/components/Solutions/MatchSentences.tsx
index f38a858b..20528879 100644
--- a/src/components/Solutions/MatchSentences.tsx
+++ b/src/components/Solutions/MatchSentences.tsx
@@ -21,8 +21,8 @@ export default function MatchSentencesSolutions({
 }: MatchSentencesExercise & CommonProps) {
 	const calculateScore = () => {
 		const total = sentences.length;
-		const correct = userSolutions.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
-		const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id === x.question)).length;
+		const correct = userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
+		const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question)).length;
 
 		return {total, correct, missing};
 	};
diff --git a/src/components/Solutions/MultipleChoice.tsx b/src/components/Solutions/MultipleChoice.tsx
index d301ea93..d642af60 100644
--- a/src/components/Solutions/MultipleChoice.tsx
+++ b/src/components/Solutions/MultipleChoice.tsx
@@ -59,8 +59,8 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 
 	const calculateScore = () => {
 		const total = questions.length;
-		const correct = userSolutions.filter((x) => questions.find((y) => y.id === x.question)?.solution === x.option || false).length;
-		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id === x.question)).length;
+		const correct = userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question)?.solution === x.option || false).length;
+		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question)).length;
 
 		return {total, correct, missing};
 	};
diff --git a/src/components/Solutions/TrueFalse.tsx b/src/components/Solutions/TrueFalse.tsx
index f16b5aac..4e65991d 100644
--- a/src/components/Solutions/TrueFalse.tsx
+++ b/src/components/Solutions/TrueFalse.tsx
@@ -10,8 +10,10 @@ type Solution = "true" | "false" | "not_given";
 export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
 	const calculateScore = () => {
 		const total = questions.length || 0;
-		const correct = userSolutions.filter((x) => questions.find((y) => x.id === y.id)?.solution === x.solution.toLowerCase() || false).length;
-		const missing = total - userSolutions.filter((x) => questions.find((y) => x.id === y.id)).length;
+		const correct = userSolutions.filter(
+			(x) => questions.find((y) => x.id.toString() === y.id.toString())?.solution === x.solution.toLowerCase() || false,
+		).length;
+		const missing = total - userSolutions.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;
 
 		return {total, correct, missing};
 	};
@@ -63,10 +65,10 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 				<span className="text-sm w-full leading-6">You can click a selected option again to deselect it.</span>
 				<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-8">
 					{questions.map((question, index) => {
-						const userSolution = userSolutions.find((x) => x.id === question.id);
+						const userSolution = userSolutions.find((x) => x.id === question.id.toString());
 
 						return (
-							<div key={question.id} className="flex flex-col gap-4">
+							<div key={question.id.toString()} className="flex flex-col gap-4">
 								<span>
 									{index + 1}. {question.prompt}
 								</span>
diff --git a/src/components/Solutions/WriteBlanks.tsx b/src/components/Solutions/WriteBlanks.tsx
index 6fa860b4..84ac2317 100644
--- a/src/components/Solutions/WriteBlanks.tsx
+++ b/src/components/Solutions/WriteBlanks.tsx
@@ -29,7 +29,6 @@ function Blank({
 	useEffect(() => {
 		const words = userInput.split(" ").filter((x) => x !== "");
 		if (words.length >= maxWords) {
-			toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
 			setUserInput(words.join(" ").trim());
 			if (setUserSolution) setUserSolution(words.join(" ").trim());
 		}
@@ -46,23 +45,21 @@ function Blank({
 	};
 
 	return (
-		<span className="inline-flex gap-2">
+		<span className="inline-flex gap-2 ml-2">
 			{userSolution && !isUserSolutionCorrect() && (
-				<input
-					className="py-2 px-3 rounded-2xl w-48 focus:outline-none my-2 bg-mti-rose-ultralight text-mti-rose-light"
+				<div
+					className="py-2 px-3 rounded-2xl w-fit focus:outline-none my-2 bg-mti-rose-ultralight text-mti-rose-light"
 					placeholder={id}
-					onChange={(e) => setUserInput(e.target.value)}
-					value={userSolution}
-					contentEditable={disabled}
-				/>
+					contentEditable={disabled}>
+					{userSolution}
+				</div>
 			)}
-			<input
-				className={clsx("py-2 px-3 rounded-2xl w-48 focus:outline-none my-2", getSolutionStyling())}
+			<div
+				className={clsx("py-2 px-3 rounded-2xl w-fit focus:outline-none my-2", getSolutionStyling())}
 				placeholder={id}
-				onChange={(e) => setUserInput(e.target.value)}
-				value={!solutions ? userInput : solutions.join(" / ")}
-				contentEditable={disabled}
-			/>
+				contentEditable={disabled}>
+				{!solutions ? userInput : solutions.join(" / ")}
+			</div>
 		</span>
 	);
 }
@@ -83,11 +80,11 @@ export default function WriteBlanksSolutions({
 		const correct = userSolutions.filter(
 			(x) =>
 				solutions
-					.find((y) => x.id === y.id)
+					.find((y) => x.id === y.id.toString())
 					?.solution.map((y) => y.toLowerCase())
 					.includes(x.solution.toLowerCase()) || false,
 		).length;
-		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id)).length;
+		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id === y.id.toString())).length;
 
 		return {total, correct, missing};
 	};
@@ -96,9 +93,11 @@ export default function WriteBlanksSolutions({
 		return (
 			<span className="text-base leading-5">
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
-					const id = match.replaceAll(/[\{\}]/g, "");
+					const id = match.replaceAll(/[\{\}]/g, "").toString();
 					const userSolution = userSolutions.find((x) => x.id === id);
-					const solution = solutions.find((x) => x.id === id)!;
+					const solution = solutions.find((x) => x.id.toString() === id)!;
+
+					console.log(solution, id, userSolution);
 
 					return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} solutions={solution.solution} disabled />;
 				})}