Added a better way to distinguish the options

src/pages/(generation)/LevelGeneration.tsx

@@ -77,10 +77,20 @@ const TaskTab = ({exam, setExam}: {exam?: LevelExam; setExam: (exam: LevelExam)
 												<span className="font-semibold">
 													{question.id}. {question.prompt}
 												</span>
-												<span>
+												<div className="flex flex-col gap-1">
-													<span className="font-semibold text-ielts-level">({question.solution})</span>{" "}
+													{question.options.map((option) => (
-													{question.options.find((o) => o.id === question.solution)?.text}
+														<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
+															<span
+																className={clsx(
+																	"font-semibold",
+																	question.solution === option.id ? "text-mti-green-light" : "text-ielts-level",
+																)}>
+																({option.id})
+															</span>{" "}
+															{option.text}
 														</span>
+													))}
+												</div>
 											</div>
 										))}
 									</div>