ENCOA-137: Top right side Next Button on the exams

src/components/Exercises/WriteBlanks.tsx

@@ -71,9 +71,9 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 	};
 
 	useEffect(() => {
-		setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type });
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [answers, setAnswers])
+	}, [answers, setAnswers]);
 
 	const renderLines = (line: string) => {
 		return (
@@ -92,7 +92,24 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -128,6 +145,6 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }