Updated a problem with the rendering of the Solutions

src/components/Solutions/FillBlanks.tsx

@@ -85,7 +85,8 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
 					))}
 				</span>
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
-					{text.split("\\n").map((line, index) => (
+					{userSolutions &&
+						text.split("\\n").map((line, index) => (
 							<p key={index}>
 								{renderLines(line)}
 								<br />

src/components/Solutions/MatchSentences.tsx

@@ -74,7 +74,8 @@ export default function MatchSentencesSolutions({
 							</div>
 						))}
 					</div>
-					{sentences.map((sentence, index) => (
+					{userSolutions &&
+						sentences.map((sentence, index) => (
 							<Xarrow
 								key={index}
 								start={sentence.id}

src/components/Solutions/MultipleChoice.tsx

@@ -88,7 +88,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 			<div className="flex flex-col gap-4 w-full h-full mb-20">
 				<div className="flex flex-col gap-2 mt-4 h-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 					<span className="text-xl font-semibold">{prompt}</span>
-					{questionIndex < questions.length && (
+					{userSolutions && questionIndex < questions.length && (
 						<Question
 							{...questions[questionIndex]}
 							userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}

src/components/Solutions/TrueFalse.tsx

@@ -64,7 +64,8 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 				</div>
 				<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) => {
+					{userSolutions &&
+						questions.map((question, index) => {
 							const userSolution = userSolutions.find((x) => x.id === question.id.toString());
 
 							return (
@@ -86,7 +87,9 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 											False
 										</Button>
 										<Button
-										variant={question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"}
+											variant={
+												question.solution === "not_given" || userSolution?.solution === "not_given" ? "solid" : "outline"
+											}
 											className="!py-2"
 											color={getButtonColor("not_given", question.solution, userSolution?.solution)}>
 											Not Given