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,6 +20,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 	preview,
 	onNext,
 	onBack,
+	disableProgressButtons = false
 }) => {
 
 	const examState = useExamStore((state) => state);
@@ -163,8 +164,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [answers]);
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -184,8 +184,13 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 				Next Page
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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
+			{!disableProgressButtons && progressButtons()}
-					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>
 	);
 };

src/components/Exercises/MatchSentences.tsx

@@ -63,7 +63,17 @@ function DraggableOptionArea({option}: {option: MatchSentenceExerciseOption}) {
 	);
 }
 
-export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
+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);
@@ -94,13 +104,17 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 		return { total, correct, missing };
 	};
 
+	useEffect(() => {
+		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]);
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4 mt-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -117,8 +131,13 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4 mt-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 	);
 }

src/components/Exercises/MultipleChoice.tsx

@@ -72,8 +72,17 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({
-	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
+	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(
 		(state) => state,
@@ -130,6 +139,11 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 		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 });
@@ -150,8 +164,7 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 		scrollToTop();
 	};
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -172,10 +185,23 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 					: "Next"}
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 mb-20">
+	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>
+		))
+
+	const renderTwoQuestions = () => (
+		<>
 			<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]}
@@ -194,28 +220,18 @@ export default function MultipleChoice({id, prompt, type, questions, userSolutio
 					/>
 				</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>
 
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 	);
 }

src/components/Exercises/TrueFalse.tsx

@@ -1,10 +1,20 @@
 import { TrueFalseExercise } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
+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) {
+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);
@@ -44,8 +54,12 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 		setAnswers((prev) => [...prev.filter((x) => x.id !== questionId), { id: questionId, solution }]);
 	};
 
-	return (
+	useEffect(() => {
-		<div className="flex flex-col gap-4 mt-4">
+		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"
@@ -62,8 +76,13 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4 mt-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 	);
 }

src/components/Exercises/WriteBlanks.tsx

@@ -46,7 +46,18 @@ function Blank({
 	);
 }
 
-export default function WriteBlanks({id, prompt, type, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
+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);
@@ -75,6 +86,11 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 		// 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">
@@ -91,8 +107,7 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 		);
 	};
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -109,8 +124,13 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 	);
 }

src/components/Exercises/index.tsx

@@ -26,6 +26,7 @@ export interface CommonProps {
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
 	enableNavigation?: boolean;
+	disableProgressButtons?: boolean
 	preview?: boolean;
 }
 
@@ -35,19 +36,20 @@ 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} />;
 		case "speaking":

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

@@ -7,7 +7,7 @@ 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);
 
@@ -149,8 +149,7 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words,
 		);
 	};
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -168,8 +167,13 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, words,
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 		</div>
 	);
 }

src/components/Solutions/MatchSentences.tsx

@@ -61,6 +61,7 @@ export default function MatchSentencesSolutions({
 	userSolutions,
 	onNext,
 	onBack,
+	disableProgressButtons = false
 }: MatchSentencesExercise & CommonProps) {
 	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
@@ -74,8 +75,7 @@ export default function MatchSentencesSolutions({
 		return { total, correct, missing };
 	};
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4 mt-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -93,8 +93,13 @@ export default function MatchSentencesSolutions({
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4 mt-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 		</div>
 	);
 }

src/components/Solutions/MultipleChoice.tsx

@@ -89,7 +89,7 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+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);
@@ -126,8 +126,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 		}
 	};
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -142,12 +141,23 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 w-full h-full mb-20 mt-4">
+	const renderAllQuestions = () =>
-				<div className="flex flex-col gap-4 mt-2">
+		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">
-						{/*<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}
@@ -155,7 +165,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 				)}
 			</div>
 
-					{userSolutions && questionIndex + 1 < questions.length && (
+			{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]}
@@ -163,7 +173,15 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 					/>
 				</div>
 			)}
-				</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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 		</div>
 	);
 }

src/components/Solutions/TrueFalse.tsx

@@ -8,7 +8,7 @@ import useExamStore from "@/stores/examStore";
 
 type Solution = "true" | "false" | "not_given";
 
-export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
+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 = () => {
@@ -39,8 +39,7 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 		return "gray";
 	};
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4 mt-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -58,8 +57,13 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4 mt-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 		</div>
 	);
 }

src/components/Solutions/WriteBlanks.tsx

@@ -71,6 +71,7 @@ export default function WriteBlanksSolutions({
 	text,
 	onNext,
 	onBack,
+	disableProgressButtons = false
 }: WriteBlanksExercise & CommonProps) {
 	const { questionIndex, setQuestionIndex, partIndex, exam } = useExamStore((state) => state);
 
@@ -104,8 +105,7 @@ export default function WriteBlanksSolutions({
 		);
 	};
 
-	return (
+	const progressButtons = () => (
-		<div className="flex flex-col gap-4">
 		<div className="flex justify-between w-full gap-8">
 			<Button
 				color="purple"
@@ -123,8 +123,13 @@ export default function WriteBlanksSolutions({
 				Next
 			</Button>
 		</div>
+	)
 
-			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+	return (
+		<div className="flex flex-col gap-4">
+			{!disableProgressButtons && progressButtons()}
+
+			<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">
+			{!disableProgressButtons && progressButtons()}
-				<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>
 		</div>
 	);
 }

src/components/Solutions/index.tsx

@@ -24,20 +24,22 @@ const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentenc
 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":

src/exams/Finish.tsx

@@ -326,11 +326,9 @@ export default function Finish({ user, scores, modules, information, solutions,
 						)}
 					</div>
 
-					<Link href={destination || "/"} className="w-full max-w-[200px] self-end">
+					<Button onClick={() => destination === "/exam" ? router.reload() : router.push(destination || "/")} color="purple" className="w-full max-w-[200px] self-end">
-						<Button color="purple" className="w-full max-w-[200px] self-end">
 						Dashboard
 					</Button>
-					</Link>
 				</div>
 			)}
 		</>

src/exams/Listening.tsx

@@ -1,5 +1,5 @@
-import { ListeningExam, MultipleChoiceExercise, UserSolution } from "@/interfaces/exam";
+import { ListeningExam, MultipleChoiceExercise, Script, UserSolution } from "@/interfaces/exam";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { renderExercise } from "@/components/Exercises";
 import { renderSolution } from "@/components/Solutions";
 import ModuleTitle from "@/components/Medium/ModuleTitle";
@@ -9,6 +9,9 @@ import BlankQuestionsModal from "@/components/QuestionsModal";
 import useExamStore, { usePersistentExamStore } from "@/stores/examStore";
 import { countExercises } from "@/utils/moduleUtils";
 import PartDivider from "./Navigation/SectionDivider";
+import { Dialog, Transition } from "@headlessui/react";
+import { capitalize } from "lodash";
+import { mapBy } from "@/utils";
 
 interface Props {
 	exam: ListeningExam;
@@ -17,17 +20,76 @@ interface Props {
 	onFinish: (userSolutions: UserSolution[]) => void;
 }
 
+function ScriptModal({ isOpen, script, onClose }: { isOpen: boolean; script: Script; onClose: () => void }) {
+	return (
+		<Transition appear show={isOpen} as={Fragment}>
+			<Dialog as="div" className="relative z-10" onClose={onClose}>
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0">
+					<div className="fixed inset-0 bg-black bg-opacity-25" />
+				</Transition.Child>
+
+				<div className="fixed inset-0 overflow-y-auto">
+					<div className="flex min-h-full items-center justify-center p-4 text-center">
+						<Transition.Child
+							as={Fragment}
+							enter="ease-out duration-300"
+							enterFrom="opacity-0 scale-95"
+							enterTo="opacity-100 scale-100"
+							leave="ease-in duration-200"
+							leaveFrom="opacity-100 scale-100"
+							leaveTo="opacity-0 scale-95">
+							<Dialog.Panel className="w-full relative max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+								<div className="mt-2 overflow-auto mb-28">
+									<p className="text-sm">
+										{typeof script === "string" && script.split("\\n").map((line, index) => (
+											<Fragment key={index}>
+												{line}
+												<br />
+											</Fragment>
+										))}
+
+										{typeof script === "object" && script.map((line, index) => (
+											<span key={index}>
+												<b>{line.name} ({capitalize(line.gender)})</b>: {line.text}
+												<br />
+												<br />
+											</span>
+										))}
+									</p>
+								</div>
+
+								<div className="absolute bottom-8 right-8 max-w-[200px] self-end w-full">
+									<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full" onClick={onClose}>
+										Close
+									</Button>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition>
+	);
+}
+
 const INSTRUCTIONS_AUDIO_SRC =
 	"https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/generic_listening_intro_v2.mp3?alt=media&token=16769f5f-1e9b-4a72-86a9-45a6f0fa9f82";
 
 export default function Listening({ exam, showSolutions = false, preview = false, onFinish }: Props) {
 	const listeningBgColor = "bg-ielts-listening-light";
 
+	const [showTextModal, setShowTextModal] = useState(false);
 	const [timesListened, setTimesListened] = useState(0);
 	const [showBlankModal, setShowBlankModal] = useState(false);
 	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]);
 
-
 	const [seenParts, setSeenParts] = useState<Set<number>>(new Set(showSolutions ? exam.parts.map((_, index) => index) : []));
 	const [showPartDivider, setShowPartDivider] = useState<boolean>(typeof exam.parts[0].intro === "string" && exam.parts[0].intro !== "");
 
@@ -99,74 +161,35 @@ export default function Listening({ exam, showSolutions = false, preview = false
 	};
 
 	const nextExercise = (solution?: UserSolution) => {
-		scrollToTop();
+		if (solution)
-		if (solution) {
+			setUserSolutions([
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "listening", exam: exam.id }]);
+				...userSolutions.filter((x) => x.exercise !== solution.exercise),
-		}
+				{ ...solution, module: "listening", exam: exam.id }
-		if (storeQuestionIndex > 0) {
+			]);
-			const exercise = getExercise();
+	};
-			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== exercise.id), { id: exercise.id, amount: storeQuestionIndex }]);
-		}
-		setStoreQuestionIndex(0);
 
-		if (exerciseIndex + 1 < exam.parts[partIndex].exercises.length && !hasExamEnded) {
+	const previousExercise = (solution?: UserSolution) => { };
-			setExerciseIndex(exerciseIndex + 1);
-			return;
-		}
 
+	const nextPart = () => {
 		if (partIndex + 1 < exam.parts.length && !hasExamEnded) {
 			setPartIndex(partIndex + 1);
-			setTimesListened(0);
+			setExerciseIndex(0);
-			setExerciseIndex(showSolutions ? 0 : -1);
 			return;
 		}
 
-		if (
+		if (!showSolutions && !hasExamEnded) {
-			solution &&
+			const exercises = partIndex < exam.parts.length ? exam.parts[partIndex].exercises : []
-			![...userSolutions.filter((x) => x.exercise !== solution?.exercise).map((x) => x.score.missing), solution?.score.missing].every(
+			const exerciseIDs = mapBy(exercises, 'id')
-				(x) => x === 0,
+
-			) &&
+			const hasMissing = userSolutions.filter(x => exerciseIDs.includes(x.exercise)).map(x => x.score.missing).some(x => x > 0)
-			!showSolutions &&
+
-			!hasExamEnded
+			if (hasMissing) return setShowBlankModal(true);
-		) {
+
-			setShowBlankModal(true);
-			return;
 		}
 
 		setHasExamEnded(false);
-
-		if (solution) {
-			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "listening", exam: exam.id }]);
-		} else {
 		onFinish(userSolutions);
 	}
-	};
-
-	const previousExercise = (solution?: UserSolution) => {
-		scrollToTop();
-		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "listening", exam: exam.id }]);
-		}
-		setStoreQuestionIndex(0);
-
-		setExerciseIndex(exerciseIndex - 1);
-	};
-
-	const getExercise = () => {
-		const exercise = exam.parts[partIndex].exercises[exerciseIndex];
-		return {
-			...exercise,
-			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
-		};
-	};
-
-	useEffect(() => {
-		if (partIndex > -1 && exerciseIndex > -1) {
-			const exercise = getExercise();
-			setMultipleChoicesDone((prev) => prev.filter((x) => x.id !== exercise.id));
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [exerciseIndex, partIndex]);
 
 	const calculateExerciseIndex = () => {
 		if (partIndex === -1) return 0;
@@ -185,6 +208,22 @@ export default function Listening({ exam, showSolutions = false, preview = false
 		);
 	};
 
+	const renderPartExercises = () => {
+		const exercises = partIndex > -1 ? exam.parts[partIndex].exercises : []
+		const formattedExercises = exercises.map(exercise => ({
+			...exercise,
+			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
+		}))
+
+		return (
+			<div className="flex flex-col gap-4">
+				{formattedExercises.map(e => showSolutions
+					? renderSolution(e, nextExercise, previousExercise, undefined, true)
+					: renderExercise(e, exam.id, nextExercise, previousExercise, undefined, true))}
+			</div>
+		)
+	}
+
 	const renderAudioInstructionsPlayer = () => (
 		<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
 			<div className="flex flex-col w-full gap-2">
@@ -200,6 +239,7 @@ export default function Listening({ exam, showSolutions = false, preview = false
 		<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
 			{exam?.parts[partIndex]?.audio?.source ? (
 				<>
+					<div className="w-full items-start flex justify-between">
 						<div className="flex flex-col w-full gap-2">
 							<h4 className="text-xl font-semibold">Please listen to the following audio attentively.</h4>
 							<span className="text-base">
@@ -211,6 +251,17 @@ export default function Listening({ exam, showSolutions = false, preview = false
 								})()}
 							</span>
 						</div>
+						{partIndex > -1 && !examState.assignment && !!exam.parts[partIndex].script && (
+							<Button
+								onClick={() => setShowTextModal(true)}
+								variant="outline"
+								color="gray"
+								className="w-full max-w-[200px]"
+							>
+								View Transcript
+							</Button>
+						)}
+					</div>
 					<div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
 						<AudioPlayer
 							key={partIndex}
@@ -230,6 +281,25 @@ export default function Listening({ exam, showSolutions = false, preview = false
 		</div>
 	);
 
+	const progressButtons = () => (
+		<div className="flex justify-between w-full gap-8">
+			<Button
+				color="purple"
+				variant="outline"
+				onClick={previousExercise}
+				className="max-w-[200px] w-full">
+				Back
+			</Button>
+
+			<Button
+				color="purple"
+				onClick={nextPart}
+				className="max-w-[200px] self-end w-full">
+				Next
+			</Button>
+		</div>
+	)
+
 	return (
 		<>
 			{showPartDivider ?
@@ -243,14 +313,19 @@ export default function Listening({ exam, showSolutions = false, preview = false
 				/> : (
 					<>
 						<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
+						{partIndex > -1 && exam.parts[partIndex].script &&
+							<ScriptModal script={exam.parts[partIndex].script!} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
+						}
 						<div className="flex flex-col h-full w-full gap-8 justify-between">
 							<ModuleTitle
-								exerciseIndex={calculateExerciseIndex()}
+								exerciseIndex={partIndex + 1}
 								minTimer={exam.minTimer}
 								module="listening"
-								totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
+								totalExercises={exam.parts.length}
 								disableTimer={showSolutions}
+								indexLabel="Part"
 							/>
+
 							{/* Audio Player for the Instructions */}
 							{partIndex === -1 && renderAudioInstructionsPlayer()}
 
@@ -258,18 +333,14 @@ export default function Listening({ exam, showSolutions = false, preview = false
 							{partIndex > -1 && renderAudioPlayer()}
 
 							{/* Exercise renderer */}
-							{exerciseIndex > -1 &&
-								partIndex > -1 &&
-								exerciseIndex < exam.parts[partIndex].exercises.length &&
-								!showSolutions &&
-								renderExercise(getExercise(), exam.id, nextExercise, previousExercise)}
 
-							{/* Solution renderer */}
+							{exerciseIndex > -1 && partIndex > -1 && (
-							{exerciseIndex > -1 &&
+								<>
-								partIndex > -1 &&
+									{progressButtons()}
-								exerciseIndex < exam.parts[partIndex].exercises.length &&
+									{renderPartExercises()}
-								showSolutions &&
+									{progressButtons()}
-								renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
+								</>
+							)}
 						</div>
 
 						{exerciseIndex === -1 && partIndex > -1 && exam.variant !== "partial" && (
@@ -294,12 +365,12 @@ export default function Listening({ exam, showSolutions = false, preview = false
 						)}
 
 						{partIndex === -1 && exam.variant !== "partial" && (
-							<Button color="purple" onClick={() => setPartIndex(0)} className="max-w-[200px] self-end w-full justify-self-end">
+							<Button color="purple" onClick={() => nextPart()} className="max-w-[200px] self-end w-full justify-self-end">
 								Start now
 							</Button>
 						)}
 						{exerciseIndex === -1 && partIndex === 0 && exam.variant === "partial" && (
-							<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full justify-self-end">
+							<Button color="purple" onClick={() => nextPart()} className="max-w-[200px] self-end w-full justify-self-end">
 								Start now
 							</Button>
 						)}