ENCOA-222 & ENCOA-223

ENCOA-222: Added an option for non-assignment exams to view the
transcript of a Listening audio;

ENCOA-223: Updated the Listening exam to show all of the
exercises/questions of each part on a single page;

src/components/Exercises/FillBlanks/index.tsx

@@ -20,8 +20,9 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 	preview,
 	onNext,
 	onBack,
+	disableProgressButtons = false
 }) => {
-	
+
 	const examState = useExamStore((state) => state);
 	const persistentExamState = usePersistentExamStore((state) => state);
 
@@ -38,7 +39,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 	const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
 	const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles;
 	const dropdownRef = useRef<HTMLDivElement>(null);
-	
+
 	const excludeWordMCType = (x: any) => {
 		return typeof x === "string" ? x : (x as { letter: string; word: string });
 	};
@@ -55,16 +56,16 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
-		  if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-			setOpenDropdownId(null);
-		  }
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+				setOpenDropdownId(null);
+			}
 		};
-	  
+
 		document.addEventListener('mousedown', handleClickOutside);
 		return () => {
-		  document.removeEventListener('mousedown', handleClickOutside);
+			document.removeEventListener('mousedown', handleClickOutside);
 		};
-	  }, []);
+	}, []);
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
@@ -105,18 +106,18 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 						const id = match.replaceAll(/[\{\}]/g, "");
 						const userSolution = answers.find((x) => x.id === id);
 						const styles = clsx(
-							"rounded-full hover:text-white transition duration-300 ease-in-out my-1 px-5 py-2 text-center w-fit inline-block", 
+							"rounded-full hover:text-white transition duration-300 ease-in-out my-1 px-5 py-2 text-center w-fit inline-block",
 							!userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
 							userSolution && "text-center text-mti-purple-dark bg-mti-purple-ultralight",
 						);
-	
+
 						const currentSelection = words.find((x) => {
 							if (typeof x !== "string" && "id" in x) {
 								return (x as FillBlanksMCOption).id.toString() == id.toString();
 							}
 							return false;
 						}) as FillBlanksMCOption;
-	
+
 						return variant === "mc" ? (
 							<MCDropdown
 								id={id}
@@ -126,7 +127,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 								className="inline-block py-2 px-1 align-middle"
 								width={220}
 								isOpen={openDropdownId === id}
-								onToggle={()=> setOpenDropdownId(prevId => prevId === id ? null : id)}
+								onToggle={() => setOpenDropdownId(prevId => prevId === id ? null : id)}
 							/>
 						) : (
 							<input
@@ -141,7 +142,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 		},
 		[variant, words, answers, openDropdownId],
 	);
-	
+
 	const memoizedLines = useMemo(() => {
 		return text.split("\\n").map((line, index) => (
 			<p key={index} className={clsx(variant === "mc" && "whitespace-pre-wrap")}>
@@ -163,29 +164,33 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [answers]);
 
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps })}
+				className="max-w-[200px] w-full"
+				disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+				Previous Page
+			</Button>
+
+			<Button
+				color="purple"
+				onClick={() => {
+					onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+				}}
+				className="max-w-[200px] self-end w-full">
+				Next Page
+			</Button>
+		</div>
+	)
+
 	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, shuffleMaps: shuffleMaps })}
-					className="max-w-[200px] w-full"
-					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
-					Previous Page
-				</Button>
+			{!disableProgressButtons && progressButtons()}
 
-				<Button
-					color="purple"
-					onClick={() => {
-						onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
-					}}
-					className="max-w-[200px] self-end w-full">
-					Next Page
-				</Button>
-			</div>
-
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
 				{variant !== "mc" && (
 					<span className="text-sm w-full leading-6">
 						{prompt.split("\\n").map((line, index) => (
@@ -224,25 +229,8 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 					</div>
 				)}
 			</div>
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps })}
-					className="max-w-[200px] w-full"
-					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
-					Previous Page
-				</Button>
 
-				<Button
-					color="purple"
-					onClick={() => {
-						onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
-					}}
-					className="max-w-[200px] self-end w-full">
-					Next Page
-				</Button>
-			</div>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 };

src/components/Exercises/MatchSentences.tsx

@@ -1,18 +1,18 @@
-import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
-import {MatchSentenceExerciseOption, MatchSentenceExerciseSentence, MatchSentencesExercise} from "@/interfaces/exam";
-import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles";
+import { MatchSentenceExerciseOption, MatchSentenceExerciseSentence, MatchSentencesExercise } from "@/interfaces/exam";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {Fragment, useEffect, useState} from "react";
+import { Fragment, useEffect, useState } from "react";
 import LineTo from "react-lineto";
-import {CommonProps} from ".";
+import { CommonProps } from ".";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
 import useExamStore from "@/stores/examStore";
-import {DndContext, DragEndEvent, useDraggable, useDroppable} from "@dnd-kit/core";
+import { DndContext, DragEndEvent, useDraggable, useDroppable } from "@dnd-kit/core";
 
-function DroppableQuestionArea({question, answer}: {question: MatchSentenceExerciseSentence; answer?: string}) {
-	const {isOver, setNodeRef} = useDroppable({id: `droppable_sentence_${question.id}`});
+function DroppableQuestionArea({ question, answer }: { question: MatchSentenceExerciseSentence; answer?: string }) {
+	const { isOver, setNodeRef } = useDroppable({ id: `droppable_sentence_${question.id}` });
 
 	return (
 		<div className="grid grid-cols-3 gap-4" ref={setNodeRef}>
@@ -35,16 +35,16 @@ function DroppableQuestionArea({question, answer}: {question: MatchSentenceExerc
 	);
 }
 
-function DraggableOptionArea({option}: {option: MatchSentenceExerciseOption}) {
-	const {attributes, listeners, setNodeRef, transform} = useDraggable({
+function DraggableOptionArea({ option }: { option: MatchSentenceExerciseOption }) {
+	const { attributes, listeners, setNodeRef, transform } = useDraggable({
 		id: `draggable_option_${option.id}`,
 	});
 
 	const style = transform
 		? {
-				transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-				zIndex: 99,
-		  }
+			transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+			zIndex: 99,
+		}
 		: undefined;
 
 	return (
@@ -63,15 +63,25 @@ function DraggableOptionArea({option}: {option: MatchSentenceExerciseOption}) {
 	);
 }
 
-export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
-	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
+export default function MatchSentences({
+	id,
+	options,
+	type,
+	prompt,
+	sentences,
+	userSolutions,
+	onNext,
+	onBack,
+	disableProgressButtons = false
+}: MatchSentencesExercise & CommonProps) {
+	const [answers, setAnswers] = useState<{ question: string; option: string }[]>(userSolutions);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
 	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
 
 	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]);
 
@@ -80,7 +90,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 			const optionID = event.active.id.toString().replace("draggable_option_", "");
 			const sentenceID = event.over.id.toString().replace("droppable_sentence_", "");
 
-			setAnswers((prev) => [...prev.filter((x) => x.question.toString() !== sentenceID), {question: sentenceID, option: optionID}]);
+			setAnswers((prev) => [...prev.filter((x) => x.question.toString() !== sentenceID), { question: sentenceID, option: optionID }]);
 		}
 	};
 
@@ -91,34 +101,43 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 		).length;
 		const missing = total - answers.filter((x) => sentences.find((y) => y.id.toString() === x.question.toString())).length;
 
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	useEffect(() => {
-		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, disableProgressButtons])
+
+	useEffect(() => {
+		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
+	const progressButtons = () => (
+		<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>
+	)
+
 	return (
 		<div className="flex flex-col gap-4 mt-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>
+			{!disableProgressButtons && progressButtons()}
 
-				<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">
+			<div className={clsx("flex flex-col gap-4 mt-4", !disableProgressButtons && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -151,22 +170,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 				</DndContext>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-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>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Exercises/MultipleChoice.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
-import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam";
+import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
+import { CommonProps } from ".";
 import Button from "../Low/Button";
-import {v4} from "uuid";
+import { v4 } from "uuid";
 
 function Question({
 	id,
@@ -72,10 +72,19 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
-	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
+export default function MultipleChoice({
+	id,
+	prompt,
+	type,
+	questions,
+	userSolutions,
+	onNext,
+	onBack,
+	disableProgressButtons = false
+}: MultipleChoiceExercise & CommonProps) {
+	const [answers, setAnswers] = useState<{ question: string; option: string }[]>(userSolutions || []);
 
-	const {questionIndex, exerciseIndex, exam, shuffles, hasExamEnded, partIndex, setQuestionIndex, setCurrentSolution} = useExamStore(
+	const { questionIndex, exerciseIndex, exam, shuffles, hasExamEnded, partIndex, setQuestionIndex, setCurrentSolution } = useExamStore(
 		(state) => state,
 	);
 
@@ -84,16 +93,16 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
 	useEffect(() => {
-		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
 	const onSelectOption = (option: string, question: MultipleChoiceQuestion) => {
-		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
+		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), { option, question: question.id }]);
 	};
 
 	useEffect(() => {
-		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
+		setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [answers, setAnswers]);
 
@@ -127,12 +136,17 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 			return isSolutionCorrect || false;
 		}).length;
 		const missing = total - answers!.filter((x) => questions.find((y) => x.question.toString() === y.id.toString())).length;
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
+	useEffect(() => {
+		if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, disableProgressButtons])
+
 	const next = () => {
 		if (questionIndex + 1 >= questions.length - 1) {
-			onNext({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
+			onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
 		} else {
 			setQuestionIndex(questionIndex + 2);
 		}
@@ -141,7 +155,7 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
+			onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
 		} else {
 			if (exam?.module === "level" && typeof exam.parts[0].intro !== "undefined" && questionIndex === 0) return;
 			setQuestionIndex(questionIndex - 2);
@@ -150,72 +164,74 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 		scrollToTop();
 	};
 
-	return (
-		<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>
+	const progressButtons = () => (
+		<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 &&
+			<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>
+					? "Submit"
+					: "Next"}
+			</Button>
+		</div>
+	)
+
+	const renderAllQuestions = () =>
+		questions.map(question => (
+			<div
+				key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+				<Question
+					{...question}
+					userSolution={answers.find((x) => question.id === x.question)?.option}
+					onSelectOption={(option) => onSelectOption(option, question)}
+				/>
 			</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 && (
-						<Question
-							{...questions[questionIndex]}
-							userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
-							onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
-						/>
-					)}
-				</div>
-
-				{questionIndex + 1 < questions.length && (
-					<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
-						<Question
-							{...questions[questionIndex + 1]}
-							userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
-							onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
-						/>
-					</div>
+	const renderTwoQuestions = () => (
+		<>
+			<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+				{questionIndex < questions.length && (
+					<Question
+						{...questions[questionIndex]}
+						userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
+						onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
+					/>
 				)}
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-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>
+			{questionIndex + 1 < questions.length && (
+				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+					<Question
+						{...questions[questionIndex + 1]}
+						userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
+						onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
+					/>
+				</div>
+			)}
+		</>
+	)
 
-				<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>
+	return (
+		<div className="flex flex-col gap-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<div className={clsx("flex flex-col gap-4 mt-4", !disableProgressButtons && "mb-20")}>
+				{disableProgressButtons ? renderAllQuestions() : renderTwoQuestions()}
 			</div>
+
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Exercises/TrueFalse.tsx

@@ -1,17 +1,27 @@
-import {TrueFalseExercise} from "@/interfaces/exam";
+import { TrueFalseExercise } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
-import {Fragment, useEffect, useState} from "react";
-import {CommonProps} from ".";
+import clsx from "clsx";
+import { Fragment, useEffect, useState } from "react";
+import { CommonProps } from ".";
 import Button from "../Low/Button";
 
-export default function TrueFalse({id, type, prompt, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
-	const [answers, setAnswers] = useState<{id: string; solution: "true" | "false" | "not_given"}[]>(userSolutions);
+export default function TrueFalse({
+	id,
+	type,
+	prompt,
+	questions,
+	userSolutions,
+	onNext,
+	onBack,
+	disableProgressButtons = false
+}: TrueFalseExercise & CommonProps) {
+	const [answers, setAnswers] = useState<{ id: string; solution: "true" | "false" | "not_given" }[]>(userSolutions);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
 
 	useEffect(() => {
-		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
@@ -26,11 +36,11 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 		).length;
 		const missing = total - answers.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;
 
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	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]);
 
@@ -41,29 +51,38 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 			return;
 		}
 
-		setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), {id: questionId, solution}]);
+		setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), { id: questionId, solution }]);
 	};
 
+	useEffect(() => {
+		if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, disableProgressButtons])
+
+	const progressButtons = () => (
+		<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>
+	)
+
 	return (
 		<div className="flex flex-col gap-4 mt-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>
+			{!disableProgressButtons && progressButtons()}
 
-				<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">
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -123,22 +142,7 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 				</div>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-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>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Exercises/WriteBlanks.tsx

@@ -1,12 +1,12 @@
-import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
-import {WriteBlanksExercise} from "@/interfaces/exam";
-import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles";
+import { WriteBlanksExercise } from "@/interfaces/exam";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {Fragment, useEffect, useState} from "react";
+import { Fragment, useEffect, useState } from "react";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
-import {toast} from "react-toastify";
+import { CommonProps } from ".";
+import { toast } from "react-toastify";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
 
@@ -29,7 +29,7 @@ function Blank({
 	useEffect(() => {
 		const words = userInput.split(" ");
 		if (words.length > maxWords) {
-			toast.warning(`You have reached your word limit of ${maxWords} words!`, {toastId: "word-limit"});
+			toast.warning(`You have reached your word limit of ${maxWords} words!`, { toastId: "word-limit" });
 			setUserInput(words.join(" ").trim());
 		}
 	}, [maxWords, userInput]);
@@ -46,13 +46,24 @@ function Blank({
 	);
 }
 
-export default function WriteBlanks({id, prompt, type, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
-	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
+export default function WriteBlanks({
+	id,
+	prompt,
+	type,
+	maxWords,
+	solutions,
+	userSolutions,
+	text,
+	onNext,
+	onBack,
+	disableProgressButtons = false
+}: WriteBlanksExercise & CommonProps) {
+	const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
 
-	const {hasExamEnded, setCurrentSolution} = useExamStore((state) => state);
+	const { hasExamEnded, setCurrentSolution } = useExamStore((state) => state);
 
 	useEffect(() => {
-		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
@@ -67,14 +78,19 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 		).length;
 		const missing = total - answers.filter((x) => solutions.find((y) => x.id === y.id)).length;
 
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	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]);
 
+	useEffect(() => {
+		if (disableProgressButtons) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, disableProgressButtons])
+
 	const renderLines = (line: string) => {
 		return (
 			<span className="text-base leading-5">
@@ -82,7 +98,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 					const id = match.replaceAll(/[\{\}]/g, "");
 					const userSolution = answers.find((x) => x.id === id);
 					const setUserSolution = (solution: string) => {
-						setAnswers((prev) => [...prev.filter((x) => x.id !== id), {id, solution}]);
+						setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution }]);
 					};
 
 					return <Blank userSolution={userSolution?.solution} maxWords={maxWords} id={id} setUserSolution={setUserSolution} />;
@@ -91,26 +107,30 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 		);
 	};
 
+	const progressButtons = () => (
+		<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>
+	)
+
 	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>
+			{!disableProgressButtons && progressButtons()}
 
-				<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">
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<span key={index}>
@@ -129,22 +149,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 				</span>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-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>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Exercises/index.tsx

@@ -19,13 +19,14 @@ import Speaking from "./Speaking";
 import TrueFalse from "./TrueFalse";
 import InteractiveSpeaking from "./InteractiveSpeaking";
 
-const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
+const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), { ssr: false });
 
 export interface CommonProps {
 	examID?: string;
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
 	enableNavigation?: boolean;
+	disableProgressButtons?: boolean
 	preview?: boolean;
 }
 
@@ -35,21 +36,22 @@ export const renderExercise = (
 	onNext: (userSolutions: UserSolution) => void,
 	onBack: (userSolutions: UserSolution) => void,
 	enableNavigation?: boolean,
+	disableProgressButtons?: boolean,
 	preview?: boolean,
 ) => {
 	switch (exercise.type) {
 		case "fillBlanks":
-			return <FillBlanks key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
+			return <FillBlanks disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
 		case "trueFalse":
-			return <TrueFalse key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
+			return <TrueFalse disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
 		case "matchSentences":
-			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview}/>;
+			return <MatchSentences disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
 		case "multipleChoice":
-			return <MultipleChoice key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
+			return <MultipleChoice disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
 		case "writeBlanks":
-			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
+			return <WriteBlanks disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
 		case "writing":
-			return <Writing key={exercise.id} {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} examID={examID} enableNavigation={enableNavigation} preview={preview}/>;
+			return <Writing key={exercise.id} {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} examID={examID} enableNavigation={enableNavigation} preview={preview} />;
 		case "speaking":
 			return <Speaking key={exercise.id} {...(exercise as SpeakingExercise)} onNext={onNext} onBack={onBack} examID={examID} preview={preview} />;
 		case "interactiveSpeaking":

src/components/High/AssignmentCard.tsx

@@ -6,6 +6,7 @@ import { sortByModuleName } from "@/utils/moduleUtils";
 import clsx from "clsx";
 import moment from "moment";
 import { useRouter } from "next/router";
+import { useMemo } from "react";
 import Button from "../Low/Button";
 import ModuleBadge from "../ModuleBadge";
 
@@ -20,6 +21,8 @@ interface Props {
 export default function AssignmentCard({ user, assignment, session, startAssignment, resumeAssignment }: Props) {
 	const router = useRouter()
 
+	const hasBeenSubmitted = useMemo(() => assignment.results.map((r) => r.user).includes(user.id), [assignment.results, user.id])
+
 	return (
 		<div
 			className={clsx(
@@ -45,7 +48,7 @@ export default function AssignmentCard({ user, assignment, session, startAssignm
 							<ModuleBadge className="scale-110 w-full" key={module} module={module} />
 						))}
 				</div>
-				{futureAssignmentFilter(assignment) && (
+				{futureAssignmentFilter(assignment) && !hasBeenSubmitted && (
 					<Button
 						color="rose"
 						className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
@@ -54,7 +57,7 @@ export default function AssignmentCard({ user, assignment, session, startAssignm
 						Not yet started
 					</Button>
 				)}
-				{activeAssignmentFilter(assignment) && !assignment.results.map((r) => r.user).includes(user.id) && (
+				{activeAssignmentFilter(assignment) && !hasBeenSubmitted && (
 					<>
 						<div
 							className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
@@ -94,7 +97,7 @@ export default function AssignmentCard({ user, assignment, session, startAssignm
 						)}
 					</>
 				)}
-				{assignment.results.map((r) => r.user).includes(user.id) && (
+				{hasBeenSubmitted && (
 					<Button
 						color="green"
 						className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"

src/components/Medium/ModuleTitle/index.tsx

@@ -23,6 +23,7 @@ interface Props {
 	showSolutions?: boolean;
 	currentExercise?: Exercise;
 	runOnClick?: ((questionIndex: number) => void) | undefined;
+	indexLabel?: string
 }
 
 export default function ModuleTitle({
@@ -36,7 +37,8 @@ export default function ModuleTitle({
 	partLabel,
 	showTimer = true,
 	showSolutions = false,
-	runOnClick = undefined
+	runOnClick = undefined,
+	indexLabel = "Question"
 }: Props) {
 	const { exam, partIndex, exerciseIndex: examExerciseIndex, userSolutions } = useExamStore((state) => state);
 
@@ -88,7 +90,7 @@ export default function ModuleTitle({
 								{examLabel ? examLabel : (module === "level" ? "Placement Test" : `${moduleLabels[module]} exam${label ? ` - ${label}` : ''}`)}
 							</span>
 							<span className="text-sm font-semibold self-end">
-								Question {exerciseIndex}/{totalExercises}
+								{indexLabel} {exerciseIndex}/{totalExercises}
 							</span>
 						</div>
 						<ProgressBar color={module} label="" percentage={(exerciseIndex * 100) / totalExercises} className="h-2 w-full" />

src/components/Solutions/FillBlanks.tsx

@@ -1,15 +1,15 @@
-import {FillBlanksExercise, FillBlanksMCOption, ShuffleMap} from "@/interfaces/exam";
+import { FillBlanksExercise, FillBlanksMCOption, ShuffleMap } from "@/interfaces/exam";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
-import {Fragment} from "react";
+import { CommonProps } from ".";
+import { Fragment } from "react";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
 import { typeCheckWordsMC } from "@/utils/type.check";
 
-export default function FillBlanksSolutions({id, type, prompt, solutions, words, text, onNext, onBack}: FillBlanksExercise & CommonProps) {
+export default function FillBlanksSolutions({ id, type, prompt, solutions, words, text, onNext, onBack, disableProgressButtons = false }: FillBlanksExercise & CommonProps) {
 	const storeUserSolutions = useExamStore((state) => state.userSolutions);
-	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
 	const correctUserSolutions = storeUserSolutions.find((solution) => solution.exercise === id)?.solutions;
 
@@ -42,7 +42,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words,
 			return false;
 		}).length;
 		const missing = total - correctUserSolutions!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	const renderLines = (line: string) => {
@@ -81,20 +81,20 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words,
 						typeof w === "string"
 							? w.toLowerCase() === userSolution.solution.toLowerCase()
 							: "letter" in w
-							? w.letter.toLowerCase() === userSolution.solution.toLowerCase()
-							: "options" in w
-							? w.id === userSolution.questionId
-							: false,
+								? w.letter.toLowerCase() === userSolution.solution.toLowerCase()
+								: "options" in w
+									? w.id === userSolution.questionId
+									: false,
 					);
 
 					const userSolutionText =
 						typeof userSolutionWord === "string"
 							? userSolutionWord
 							: userSolutionWord && "letter" in userSolutionWord
-							? userSolutionWord.word
-							: userSolutionWord && "options" in userSolutionWord
-							? userSolution.solution
-							: userSolution.solution;
+								? userSolutionWord.word
+								: userSolutionWord && "options" in userSolutionWord
+									? userSolution.solution
+									: userSolution.solution;
 
 					let correct;
 					let solutionText;
@@ -149,27 +149,31 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words,
 		);
 	};
 
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={() => onBack({ exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type })}
+				className="max-w-[200px] w-full"
+				disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+				Back
+			</Button>
+
+			<Button
+				color="purple"
+				onClick={() => onNext({ exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type })}
+				className="max-w-[200px] self-end w-full">
+				Next
+			</Button>
+		</div>
+	)
+
 	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: correctUserSolutions!, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
+			{!disableProgressButtons && progressButtons()}
 
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: correctUserSolutions!, 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">
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
 					{correctUserSolutions &&
 						text.split("\\n").map((line, index) => (
@@ -195,23 +199,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words,
 				</div>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
-
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
-					className="max-w-[200px] self-end w-full">
-					Next
-				</Button>
-			</div>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Solutions/MatchSentences.tsx

@@ -1,11 +1,11 @@
-import {MatchSentenceExerciseSentence, MatchSentencesExercise} from "@/interfaces/exam";
+import { MatchSentenceExerciseSentence, MatchSentencesExercise } from "@/interfaces/exam";
 import clsx from "clsx";
 import LineTo from "react-lineto";
-import {CommonProps} from ".";
-import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
-import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import { CommonProps } from ".";
+import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import Icon from "@mdi/react";
-import {Fragment} from "react";
+import { Fragment } from "react";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
 import useExamStore from "@/stores/examStore";
@@ -15,7 +15,7 @@ function QuestionSolutionArea({
 	userSolution,
 }: {
 	question: MatchSentenceExerciseSentence;
-	userSolution?: {question: string; option: string};
+	userSolution?: { question: string; option: string };
 }) {
 	return (
 		<div className="grid grid-cols-3 gap-4">
@@ -26,8 +26,8 @@ function QuestionSolutionArea({
 						!userSolution
 							? "bg-mti-gray-davy"
 							: userSolution.option.toString() === question.solution.toString()
-							? "bg-mti-purple"
-							: "bg-mti-rose",
+								? "bg-mti-purple"
+								: "bg-mti-rose",
 						"transition duration-300 ease-in-out",
 					)}>
 					{question.id}
@@ -40,8 +40,8 @@ function QuestionSolutionArea({
 					!userSolution
 						? "border-mti-gray-davy"
 						: userSolution.option.toString() === question.solution.toString()
-						? "border-mti-purple"
-						: "border-mti-rose",
+							? "border-mti-purple"
+							: "border-mti-rose",
 				)}>
 				<span className="line-through">
 					{userSolution && userSolution?.option.toString() !== question.solution.toString() && `Paragraph ${userSolution.option}`}
@@ -61,8 +61,9 @@ export default function MatchSentencesSolutions({
 	userSolutions,
 	onNext,
 	onBack,
+	disableProgressButtons = false
 }: MatchSentencesExercise & CommonProps) {
-	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
 	const calculateScore = () => {
 		const total = sentences.length;
@@ -71,30 +72,34 @@ export default function MatchSentencesSolutions({
 		).length;
 		const missing = total - userSolutions.filter((x) => sentences.find((y) => y.id.toString() === x.question.toString())).length;
 
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={() => onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+				className="max-w-[200px] w-full"
+				disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+				Back
+			</Button>
+
+			<Button
+				color="purple"
+				onClick={() => onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+				className="max-w-[200px] self-end w-full">
+				Next
+			</Button>
+		</div>
+	)
+
 	return (
 		<div className="flex flex-col gap-4 mt-4">
-			<div className="flex justify-between w-full gap-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
+			{!disableProgressButtons && progressButtons()}
 
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, 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">
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -128,23 +133,7 @@ export default function MatchSentencesSolutions({
 				</div>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
-
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] self-end w-full">
-					Next
-				</Button>
-			</div>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Solutions/MultipleChoice.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
-import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam";
+import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
+import { CommonProps } from ".";
 import Button from "../Low/Button";
-import {v4} from "uuid";
+import { v4 } from "uuid";
 
 function Question({
 	id,
@@ -14,8 +14,8 @@ function Question({
 	solution,
 	options,
 	userSolution,
-}: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
-	const {userSolutions} = useExamStore((state) => state);
+}: MultipleChoiceQuestion & { userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean }) {
+	const { userSolutions } = useExamStore((state) => state);
 
 	const questionShuffleMap = userSolutions.reduce((foundMap, userSolution) => {
 		if (foundMap) return foundMap;
@@ -89,8 +89,8 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
-	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+export default function MultipleChoice({ id, type, prompt, questions, userSolutions, onNext, onBack, disableProgressButtons = false }: MultipleChoiceExercise & CommonProps) {
+	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
 	const stats = useExamStore((state) => state.userSolutions);
 
@@ -107,12 +107,12 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 			}
 		}).length;
 		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	const next = () => {
 		if (questionIndex + 1 >= questions.length - 1) {
-			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
+			onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type });
 		} else {
 			setQuestionIndex(questionIndex + 2);
 		}
@@ -120,50 +120,68 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
+			onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type });
 		} else {
 			setQuestionIndex(questionIndex - 2);
 		}
 	};
 
-	return (
-		<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 && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={back}
+				className="max-w-[200px] w-full"
+				disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+				Back
+			</Button>
 
-				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
-					Next
-				</Button>
+			<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
+				Next
+			</Button>
+		</div>
+	)
+
+	const renderAllQuestions = () =>
+		questions.map(question => (
+			<div
+				key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+				<Question
+					{...question}
+					userSolution={userSolutions.find((x) => question.id === x.question)?.option}
+				/>
+			</div>
+		))
+
+	const renderTwoQuestions = () => (
+		<>
+			<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+				{questionIndex < questions.length && (
+					<Question
+						{...questions[questionIndex]}
+						userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
+					/>
+				)}
 			</div>
 
-			<div className="flex flex-col gap-4 w-full h-full mb-20 mt-4">
-				<div className="flex flex-col gap-4 mt-2">
-					<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">{prompt}</span>*/}
-						{userSolutions && questionIndex < questions.length && (
-							<Question
-								{...questions[questionIndex]}
-								userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
-							/>
-						)}
-					</div>
-
-					{userSolutions && questionIndex + 1 < questions.length && (
-						<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
-							<Question
-								{...questions[questionIndex + 1]}
-								userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
-							/>
-						</div>
-					)}
+			{questionIndex + 1 < questions.length && (
+				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+					<Question
+						{...questions[questionIndex + 1]}
+						userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
+					/>
 				</div>
+			)}
+		</>
+	)
+
+	return (
+		<div className="flex flex-col gap-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<div className={clsx("flex flex-col gap-4 mt-4", !disableProgressButtons && "mb-20")}>
+				{disableProgressButtons ? renderAllQuestions() : renderTwoQuestions()}
 
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
@@ -181,20 +199,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 				</div>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={back}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
-
-				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
-					Next
-				</Button>
-			</div>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Solutions/TrueFalse.tsx

@@ -1,15 +1,15 @@
-import {FillBlanksExercise, TrueFalseExercise} from "@/interfaces/exam";
+import { FillBlanksExercise, TrueFalseExercise } from "@/interfaces/exam";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
-import {Fragment} from "react";
+import { CommonProps } from ".";
+import { Fragment } from "react";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
 
 type Solution = "true" | "false" | "not_given";
 
-export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
-	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+export default function TrueFalseSolution({ prompt, type, id, questions, userSolutions, onNext, onBack, disableProgressButtons = false }: TrueFalseExercise & CommonProps) {
+	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
 	const calculateScore = () => {
 		const total = questions.length || 0;
@@ -18,7 +18,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 		).length;
 		const missing = total - userSolutions.filter((x) => questions.find((y) => x.id.toString() === y.id.toString())).length;
 
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	const getButtonColor = (buttonSolution: Solution, solution: Solution, userSolution: Solution | undefined) => {
@@ -39,27 +39,31 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 		return "gray";
 	};
 
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={() => onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+				className="max-w-[200px] w-full"
+				disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+				Back
+			</Button>
+
+			<Button
+				color="purple"
+				onClick={() => onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+				className="max-w-[200px] self-end w-full">
+				Next
+			</Button>
+		</div>
+	)
+
 	return (
 		<div className="flex flex-col gap-4 mt-4">
-			<div className="flex justify-between w-full gap-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
+			{!disableProgressButtons && progressButtons()}
 
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, 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">
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -137,23 +141,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 				</div>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
-
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] self-end w-full">
-					Next
-				</Button>
-			</div>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Solutions/WriteBlanks.tsx

@@ -1,12 +1,12 @@
-import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
-import {WriteBlanksExercise} from "@/interfaces/exam";
-import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
+import { errorButtonStyle, infoButtonStyle } from "@/constants/buttonStyles";
+import { WriteBlanksExercise } from "@/interfaces/exam";
+import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {Fragment, useEffect, useState} from "react";
+import { Fragment, useEffect, useState } from "react";
 import reactStringReplace from "react-string-replace";
-import {CommonProps} from ".";
-import {toast} from "react-toastify";
+import { CommonProps } from ".";
+import { toast } from "react-toastify";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
 
@@ -71,8 +71,9 @@ export default function WriteBlanksSolutions({
 	text,
 	onNext,
 	onBack,
+	disableProgressButtons = false
 }: WriteBlanksExercise & CommonProps) {
-	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
@@ -85,7 +86,7 @@ export default function WriteBlanksSolutions({
 		).length;
 		const missing = total - userSolutions.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
 
-		return {total, correct, missing};
+		return { total, correct, missing };
 	};
 
 	const renderLines = (line: string) => {
@@ -104,27 +105,31 @@ export default function WriteBlanksSolutions({
 		);
 	};
 
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={() => onBack({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+				className="max-w-[200px] w-full"
+				disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+				Back
+			</Button>
+
+			<Button
+				color="purple"
+				onClick={() => onNext({ exercise: id, solutions: userSolutions, score: calculateScore(), type })}
+				className="max-w-[200px] self-end w-full">
+				Next
+			</Button>
+		</div>
+	)
+
 	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: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
+			{!disableProgressButtons && progressButtons()}
 
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, 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">
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", !disableProgressButtons && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
@@ -158,23 +163,7 @@ export default function WriteBlanksSolutions({
 				</div>
 			</div>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full"
-					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
-					Back
-				</Button>
-
-				<Button
-					color="purple"
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] self-end w-full">
-					Next
-				</Button>
-			</div>
+			{!disableProgressButtons && progressButtons()}
 		</div>
 	);
 }

src/components/Solutions/index.tsx

@@ -19,25 +19,27 @@ import TrueFalseSolution from "./TrueFalse";
 import WriteBlanks from "./WriteBlanks";
 import Writing from "./Writing";
 
-const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), {ssr: false});
+const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), { ssr: false });
 
 export interface CommonProps {
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
+	disableProgressButtons?: boolean,
 }
 
-export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void, updateIndex?: (internalIndex: number) => void) => {
+export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: () => void, updateIndex?: (internalIndex: number) => void,
+	disableProgressButtons?: boolean) => {
 	switch (exercise.type) {
 		case "fillBlanks":
-			return <FillBlanks key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <FillBlanks disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as FillBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "trueFalse":
-			return <TrueFalseSolution key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
+			return <TrueFalseSolution disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as TrueFalseExercise)} onNext={onNext} onBack={onBack} />;
 		case "matchSentences":
-			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
+			return <MatchSentences disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
 		case "multipleChoice":
-			return <MultipleChoice key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
+			return <MultipleChoice disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
 		case "writeBlanks":
-			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
+			return <WriteBlanks disableProgressButtons={disableProgressButtons} key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "writing":
 			return <Writing key={exercise.id} {...(exercise as WritingExercise)} onNext={onNext} onBack={onBack} />;
 		case "speaking":