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

src/components/Exercises/MultipleChoice.tsx

@@ -151,8 +151,29 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 	};
 
 	return (
-		<>
-			<div className="flex flex-col gap-4 mt-2 mb-20">
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+					Back
+				</Button>
+
+				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
+					{exam &&
+					exam.module === "level" &&
+					partIndex === exam.parts.length - 1 &&
+					exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
+					questionIndex + 1 >= questions.length - 1
+						? "Submit"
+						: "Next"}
+				</Button>
+			</div>
+
+			<div className="flex flex-col gap-4 mt-4 mb-20">
 				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 					{/*<span className="text-xl font-semibold mb-2">{"Select the appropriate option."}</span>*/}
 					{questionIndex < questions.length && (
@@ -195,6 +216,6 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 						: "Next"}
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }