Fixed some navigation issues and updated Listening

src/components/Exercises/FillBlanks/index.tsx

@@ -167,7 +167,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
 	return (
 		<div className="flex flex-col gap-4">
 			{headerButtons}
-			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full relative", (!headerButtons && !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full relative", (headerButtons && footerButtons) && "mb-20")}>
 				{variant !== "mc" && (
 					<span className="text-sm w-full leading-6">
 						{prompt.split("\\n").map((line, index) => (

src/components/Exercises/MatchSentences/index.tsx

@@ -53,7 +53,7 @@ const MatchSentences: React.FC<MatchSentencesExercise & CommonProps> = ({
 	return (
 		<div className="flex flex-col gap-4 mt-4">
 			{headerButtons}
-			<div className={clsx("flex flex-col gap-4 mt-4", (!headerButtons && !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4", (headerButtons && footerButtons) && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/Exercises/WriteBlanks/index.tsx

@@ -66,7 +66,7 @@ const WriteBlanks: React.FC<WriteBlanksExercise & CommonProps> = ({
 	return (
 		<div className="flex flex-col gap-4 relative">
 			{headerButtons}
-			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons && !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<span key={index}>

src/components/Solutions/FillBlanks.tsx

@@ -116,7 +116,7 @@ const FillBlanksSolutions: React.FC<FillBlanksExercise & CommonProps> = ({ id, s
 	return (
 		<div className="flex flex-col gap-4">
 			{headerButtons}
-			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons || !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
 					{correctUserSolutions &&
 						text.split("\\n").map((line, index) => (

src/components/Solutions/MatchSentences.tsx

@@ -57,7 +57,7 @@ export default function MatchSentencesSolutions({
 	return (
 		<div className="flex flex-col gap-4 mt-4">
 			{headerButtons}
-			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons || !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/Solutions/MultipleChoice.tsx

@@ -153,7 +153,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
 		<div className="flex flex-col gap-4">
 			{headerButtons}
 
-			<div className={clsx("flex flex-col gap-4 mt-4", (!headerButtons || !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4", (headerButtons && footerButtons) && "mb-20")}>
 				{(!headerButtons || !footerButtons) ? renderAllQuestions() : renderTwoQuestions()}
 
 				<div className="flex gap-4 items-center">

src/components/Solutions/TrueFalse.tsx

@@ -30,7 +30,7 @@ export default function TrueFalseSolution({ prompt, type, id, questions, userSol
 		<div className="flex flex-col gap-4 mt-4">
 			{headerButtons}
 
-			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons || !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/components/Solutions/WriteBlanks.tsx

@@ -87,7 +87,7 @@ export default function WriteBlanksSolutions({
 		<div className="flex flex-col gap-4">
 			{headerButtons}
 
-			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (!headerButtons || !footerButtons) && "mb-20")}>
+			<div className={clsx("flex flex-col gap-4 mt-4 h-full w-full", (headerButtons && footerButtons) && "mb-20")}>
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>

src/exams/Finish.tsx

@@ -61,8 +61,8 @@ export default function Finish({ user, practiceScores, scores, modules, informat
 
 	const aiUsage = Math.round(ai_usage(solutions) * 100);
 
-	const entity = useMemo(() => assignment?.entity || user.entities[0]?.id || "", [assignment?.entity, user.entities])
+	//const entity = useMemo(() => assignment?.entity || user.entities[0]?.id || "", [assignment?.entity, user.entities])
-	const { gradingSystem } = useGradingSystem(entity);
+	//const { gradingSystem } = useGradingSystem(entity);
 
 	const router = useRouter()
 
@@ -104,7 +104,7 @@ export default function Finish({ user, practiceScores, scores, modules, informat
 
 	const showLevel = (level: number) => {
 		if (selectedModule === "level") {
-			const label = getGradingLabel(level, gradingSystem?.steps || []);
+			const label = getGradingLabel(level, []);
 			return (
 				<div className="flex flex-col items-center justify-center gap-1">
 					<span className="text-xl font-bold">{label}</span>

src/exams/Listening.tsx

@@ -3,14 +3,9 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "rea
 import { renderExercise } from "@/components/Exercises";
 import { renderSolution } from "@/components/Solutions";
 import ModuleTitle from "@/components/Medium/ModuleTitle";
-import AudioPlayer from "@/components/Low/AudioPlayer";
-import Button from "@/components/Low/Button";
 import BlankQuestionsModal from "@/components/QuestionsModal";
 import useExamStore, { usePersistentExamStore } from "@/stores/exam";
 import PartDivider from "./Navigation/SectionDivider";
-import { Dialog, Transition } from "@headlessui/react";
-import { capitalize } from "lodash";
-import { mapBy } from "@/utils";
 import ScriptModal from "./components/ScriptModal";
 import { ExamProps } from "./types";
 import useExamTimer from "@/hooks/useExamTimer";
@@ -19,8 +14,6 @@ import RenderAudioInstructionsPlayer from "./components/RenderAudioInstructionsP
 import RenderAudioPlayer from "./components/RenderAudioPlayer";
 import SectionNavbar from "./Navigation/SectionNavbar";
 import ProgressButtons from "./components/ProgressButtons";
-import { countExercises } from "@/utils/moduleUtils";
-import { calculateExerciseIndex } from "./utils/calculateExerciseIndex";
 
 
 const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = false, preview = false }) => {
@@ -36,9 +29,8 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 	const persistentExamState = usePersistentExamStore((state) => state);
 
 	const {
-		exerciseIndex, partIndex, assignment,
+		partIndex, assignment,
 		userSolutions, flags, timeSpentCurrentModule,
-		questionIndex,
 		setBgColor, setUserSolutions, setTimeIsUp,
 		dispatch
 	} = !preview ? examState : persistentExamState;
@@ -47,13 +39,16 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 
 	const timer = useRef(exam.minTimer - timeSpentCurrentModule / 60);
 
-	const [isFirstTimeRender, setIsFirstTimeRender] = useState(partIndex === 0 && exerciseIndex == 0 && !showSolutions);
-
 	const {
 		nextExercise, previousExercise,
 		showPartDivider, setShowPartDivider,
-		seenParts, setSeenParts
+		seenParts, setSeenParts,
-	} = useExamNavigation({ exam, module: "listening", showBlankModal, setShowBlankModal, showSolutions, preview, disableBetweenParts: true });
+		isBetweenParts, startNow
+	} = useExamNavigation({
+		exam, module: "listening", showBlankModal,
+		setShowBlankModal, showSolutions, preview,
+		allPartExercisesRender: true, disableBetweenParts: true
+	});
 
 
 	useEffect(() => {
@@ -80,14 +75,23 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [solutionWasUpdated])
 
-	const currentExercise = useMemo<Exercise>(() => {
+
-		const exercise = exam.parts[partIndex].exercises[exerciseIndex];
+	const renderPartExercises = useMemo(() => {
-		return {
+		const exercises = exam.parts[partIndex].exercises;
+		const formattedExercises = exercises.map(exercise => ({
 			...exercise,
 			userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
-		};
+		}))
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+
-	}, [partIndex, exerciseIndex]);
+		return (
+			<div className="flex flex-col gap-4">
+				{formattedExercises.map(e => showSolutions
+					? renderSolution(e)
+					: (!startNow && !showPartDivider && !isBetweenParts && !showSolutions) && renderExercise(e, exam.id, registerSolution, preview))}
+			</div>
+		)
+	}, [partIndex, startNow, showPartDivider, isBetweenParts, showSolutions]);
+
 
 
 	const confirmFinishModule = (keepGoing?: boolean) => {
@@ -100,18 +104,10 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 		}
 	};
 
-	const memoizedExerciseIndex = useMemo(() =>
-		calculateExerciseIndex(exam, partIndex, exerciseIndex, questionIndex)
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		, [partIndex, exerciseIndex, questionIndex]
-	);
-
 	const handlePartDividerClick = () => {
 		setShowPartDivider(false);
 		setBgColor("bg-white");
 		setSeenParts((prev) => new Set(prev).add(partIndex));
-		if (isFirstTimeRender) setIsFirstTimeRender(false);
 	}
 
 	useEffect(() => {
@@ -123,6 +119,21 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 		<ProgressButtons handlePrevious={previousExercise} handleNext={() => nextExercise()} />
 		, [nextExercise, previousExercise]);
 
+	const memoizedRenderAudioPlayer = useMemo(() =>
+		<RenderAudioPlayer
+			audioSource={exam?.parts[partIndex]?.audio?.source}
+			repeatableTimes={exam?.parts[partIndex]?.audio?.repeatableTimes}
+			script={exam?.parts[partIndex]?.script}
+			assignment={assignment}
+			timesListened={timesListened}
+			setShowTextModal={setShowTextModal}
+			setTimesListened={setTimesListened}
+		/>, [partIndex, assignment, timesListened, setShowTextModal, setTimesListened])
+
+	const memoizedInstructions = useMemo(()=> 
+		<RenderAudioInstructionsPlayer />
+	, [])
+
 	return (
 		<>
 			{showPartDivider ?
@@ -136,13 +147,13 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 				/> : (
 					<>
 						<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
-						{!isFirstTimeRender && exam.parts[partIndex].script &&
+						{!startNow && 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">
 							{exam.parts.length > 1 && <SectionNavbar
 								module="listening"
-								sectionLabel="Section"
+								sectionLabel="Part"
 								seenParts={seenParts}
 								setShowPartDivider={setShowPartDivider}
 								setSeenParts={setSeenParts}
@@ -150,41 +161,35 @@ const Listening: React.FC<ExamProps<ListeningExam>> = ({ exam, showSolutions = f
 							/>
 							}
 							<ModuleTitle
+								exerciseIndex={partIndex + 1}
 								minTimer={timer.current}
 								module="listening"
-								exerciseIndex={memoizedExerciseIndex}
+								totalExercises={exam.parts.length}
-								totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
 								disableTimer={showSolutions || preview}
-								indexLabel="Exercise"
+								indexLabel="Part"
 								preview={preview}
 							/>
 
 							{/* Audio Player for the Instructions */}
-							{isFirstTimeRender && <RenderAudioInstructionsPlayer />}
+							{startNow && memoizedInstructions}
 
 							{/* Part's audio player */}
-							{!isFirstTimeRender &&
+							{(!startNow && isBetweenParts) && memoizedRenderAudioPlayer}
-								<RenderAudioPlayer
-									audioSource={exam?.parts[partIndex]?.audio?.source}
-									repeatableTimes={exam?.parts[partIndex]?.audio?.repeatableTimes}
-									script={exam?.parts[partIndex]?.script}
-									assignment={assignment}
-									timesListened={timesListened}
-									setShowTextModal={setShowTextModal}
-									setTimesListened={setTimesListened}
-								/>}
 
 							{/* Exercise renderer */}
-							{!isFirstTimeRender && !showPartDivider && !showSolutions && renderExercise(currentExercise, exam.id, registerSolution, preview, progressButtons, progressButtons)}
+							<>
-							{showSolutions && renderSolution(currentExercise, progressButtons, progressButtons)}
+							{(!startNow && !showPartDivider) && progressButtons}
+							{renderPartExercises}
+							{(!startNow && !showPartDivider && !isBetweenParts) && progressButtons}
+							</>
 						</div>
 
-						{((isFirstTimeRender) && !showPartDivider && !showSolutions) &&
+						{((startNow) && !showPartDivider && !showSolutions) &&
 							<ProgressButtons
-								hidePrevious={partIndex == 0 && isFirstTimeRender}
+								hidePrevious={partIndex == 0 && startNow}
-								nextLabel={isFirstTimeRender ? "Start now" : "Next Page"}
+								nextLabel={startNow ? "Start now" : "Next Page"}
 								handlePrevious={previousExercise}
-								handleNext={() => isFirstTimeRender ? setIsFirstTimeRender(false) : nextExercise()} />
+								handleNext={() => nextExercise()} />
 						}
 					</>)
 			}

src/exams/Listening.tsx.bak

@@ -1,372 +0,0 @@
-import { ListeningExam, MultipleChoiceExercise, Script, UserSolution } from "@/interfaces/exam";
-import { Fragment, useEffect, useState } from "react";
-import { renderExercise } from "@/components/Exercises";
-import { renderSolution } from "@/components/Solutions";
-import ModuleTitle from "@/components/Medium/ModuleTitle";
-import AudioPlayer from "@/components/Low/AudioPlayer";
-import Button from "@/components/Low/Button";
-import BlankQuestionsModal from "@/components/QuestionsModal";
-import useExamStore, { usePersistentExamStore } from "@/stores/examStore";
-import PartDivider from "./Navigation/SectionDivider";
-import { Dialog, Transition } from "@headlessui/react";
-import { capitalize } from "lodash";
-import { mapBy } from "@/utils";
-
-interface Props {
-	exam: ListeningExam;
-	showSolutions?: boolean;
-	preview?: boolean;
-	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 !== "");
-
-	const examState = useExamStore((state) => state);
-	const persistentExamState = usePersistentExamStore((state) => state);
-
-	const {
-		hasExamEnded,
-		userSolutions,
-		exerciseIndex,
-		partIndex,
-		questionIndex: storeQuestionIndex,
-		setBgColor,
-		setUserSolutions,
-		setHasExamEnded,
-		setExerciseIndex,
-		setPartIndex,
-		setQuestionIndex: setStoreQuestionIndex
-	} = !preview ? examState : persistentExamState;
-
-	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
-
-	useEffect(() => {
-		if (!showSolutions && exam.parts[partIndex]?.intro !== undefined && exam.parts[partIndex]?.intro !== "" && !seenParts.has(exerciseIndex)) {
-			setShowPartDivider(true);
-			setBgColor(listeningBgColor);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [partIndex]);
-
-	useEffect(() => {
-		if (showSolutions) return setExerciseIndex(0);
-	}, [setExerciseIndex, showSolutions]);
-
-	useEffect(() => {
-		if (partIndex === -1 && exam.variant === "partial") {
-			setPartIndex(0);
-		}
-	}, [partIndex, exam, setPartIndex]);
-
-	useEffect(() => {
-		const previousParts = exam.parts.filter((_, index) => index < partIndex);
-		let previousMultipleChoice = previousParts.flatMap((x) => x.exercises).filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
-
-		if (partIndex > -1 && exerciseIndex > -1) {
-			const previousPartExercises = exam.parts[partIndex].exercises.filter((_, index) => index < exerciseIndex);
-			const partMultipleChoice = previousPartExercises.filter((x) => x.type === "multipleChoice") as MultipleChoiceExercise[];
-
-			previousMultipleChoice = [...previousMultipleChoice, ...partMultipleChoice];
-		}
-
-		setMultipleChoicesDone(previousMultipleChoice.map((x) => ({ id: x.id, amount: x.questions.length - 1 })));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	useEffect(() => {
-		if (hasExamEnded) onFinish(userSolutions)
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [hasExamEnded]);
-
-	const confirmFinishModule = (keepGoing?: boolean) => {
-		if (!keepGoing) {
-			setShowBlankModal(false);
-			return;
-		}
-
-		onFinish(userSolutions);
-	};
-
-	const nextExercise = (solution?: UserSolution) => {
-		if (solution)
-			setUserSolutions([
-				...userSolutions.filter((x) => x.exercise !== solution.exercise),
-				{ ...solution, module: "listening", exam: exam.id }
-			]);
-	};
-
-	const previousExercise = (solution?: UserSolution) => {
-		scrollToTop();
-		if (solution)
-			setUserSolutions([
-				...userSolutions.filter((x) => x.exercise !== solution.exercise),
-				{ ...solution, module: "listening", exam: exam.id }
-			]);
-
-		setPartIndex(partIndex - 1)
-	};
-
-	const nextPart = () => {
-		scrollToTop()
-		if (partIndex + 1 < exam.parts.length && !hasExamEnded) {
-			setPartIndex(partIndex + 1);
-			setExerciseIndex(0);
-			return;
-		}
-
-		if (!showSolutions && !hasExamEnded) {
-			const exercises = partIndex < exam.parts.length ? exam.parts[partIndex].exercises : []
-			const exerciseIDs = mapBy(exercises, 'id')
-
-			const hasMissing = userSolutions.filter(x => exerciseIDs.includes(x.exercise)).map(x => x.score.missing).some(x => x > 0)
-
-			if (hasMissing) return setShowBlankModal(true);
-
-		}
-
-		setHasExamEnded(false);
-		onFinish(userSolutions);
-	}
-
-	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">
-				<h4 className="text-xl font-semibold">Please listen to the instructions audio attentively.</h4>
-			</div>
-			<div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
-				<AudioPlayer key={partIndex} src={INSTRUCTIONS_AUDIO_SRC} color="listening" />
-			</div>
-		</div>
-	);
-
-	const renderAudioPlayer = () => (
-		<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">
-								{(() => {
-									const audioRepeatTimes = exam?.parts[partIndex]?.audio?.repeatableTimes;
-									return audioRepeatTimes && audioRepeatTimes > 0
-										? `You will only be allowed to listen to the audio ${audioRepeatTimes - timesListened} time(s).`
-										: "You may listen to the audio as many times as you would like.";
-								})()}
-							</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}
-							src={exam?.parts[partIndex]?.audio?.source ?? ''}
-							color="listening"
-							onEnd={() => setTimesListened((prev) => prev + 1)}
-							disabled={exam?.parts[partIndex]?.audio?.repeatableTimes != null &&
-								timesListened === exam.parts[partIndex]?.audio?.repeatableTimes}
-							disablePause
-						/>
-					</div>
-				</>
-			) : (
-				<span>This section will be displayed the audio once it has been generated.</span>
-			)}
-
-		</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 ?
-				<PartDivider
-					module="listening"
-					sectionLabel="Section"
-					defaultTitle="Listening exam"
-					section={exam.parts[partIndex]}
-					sectionIndex={partIndex}
-					onNext={() => { setShowPartDivider(false); setBgColor("bg-white"); setSeenParts((prev) => new Set(prev).add(exerciseIndex)) }}
-				/> : (
-					<>
-						<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={partIndex + 1}
-								minTimer={exam.minTimer}
-								module="listening"
-								totalExercises={exam.parts.length}
-								disableTimer={showSolutions || preview}
-								indexLabel="Part"
-							/>
-
-							{/* Audio Player for the Instructions */}
-							{partIndex === -1 && renderAudioInstructionsPlayer()}
-
-							{/* Part's audio player */}
-							{partIndex > -1 && renderAudioPlayer()}
-
-							{/* Exercise renderer */}
-
-							{exerciseIndex > -1 && partIndex > -1 && (
-								<>
-									{progressButtons()}
-									{renderPartExercises()}
-									{progressButtons()}
-								</>
-							)}
-						</div>
-
-						{exerciseIndex === -1 && partIndex > -1 && exam.variant !== "partial" && (
-							<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-								<Button
-									color="purple"
-									variant="outline"
-									onClick={() => {
-										if (partIndex === 0) return setPartIndex(-1);
-
-										setExerciseIndex(exam.parts[partIndex - 1].exercises.length - 1);
-										setPartIndex(partIndex - 1);
-									}}
-									className="max-w-[200px] w-full">
-									Back
-								</Button>
-
-								<Button color="purple" onClick={() => setExerciseIndex(0)} className="max-w-[200px] self-end w-full">
-									Next
-								</Button>
-							</div>
-						)}
-
-						{partIndex === -1 && exam.variant !== "partial" && (
-							<Button color="purple" onClick={() => setPartIndex(0)} 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={() => setExerciseIndex(0)} className="max-w-[200px] self-end w-full justify-self-end">
-								Start now
-							</Button>
-						)}
-					</>)
-			}
-		</>
-	);
-}

src/exams/Navigation/useExamNavigation.tsx

@@ -17,10 +17,13 @@ type UseExamNavigation = (props: {
     showSolutions: boolean;
     preview: boolean;
     disableBetweenParts?: boolean;
+    allPartExercisesRender?: boolean;
+    modalBetweenParts?: boolean;
 }) => {
     showPartDivider: boolean;
     seenParts: Set<number>;
     isBetweenParts: boolean;
+    startNow: boolean;
     nextExercise: (isBetweenParts?: boolean) => void;
     previousExercise: (isBetweenParts?: boolean) => void;
     setShowPartDivider: React.Dispatch<React.SetStateAction<boolean>>;
@@ -36,6 +39,8 @@ const useExamNavigation: UseExamNavigation = ({
     showSolutions,
     preview,
     disableBetweenParts = false,
+    allPartExercisesRender = false,
+    modalBetweenParts = false,
 }) => {
 
     const examState = useExamStore((state) => state);
@@ -50,7 +55,10 @@ const useExamNavigation: UseExamNavigation = ({
         dispatch,
     } = !preview ? examState : persistentExamState;
 
-    const [isBetweenParts, setIsBetweenParts] = useState(partIndex !== 0 && exerciseIndex == 0 && !disableBetweenParts);
+    const [isBetweenParts, setIsBetweenParts] = useState(module === "reading"
+        ? (partIndex !== 0 && exerciseIndex === 0 && !disableBetweenParts)
+        : (exerciseIndex === 0 && !disableBetweenParts)
+    );
     const isPartExam = ["reading", "listening", "level"].includes(exam.module);
 
     const [seenParts, setSeenParts] = useState<Set<number>>(
@@ -63,6 +71,14 @@ const useExamNavigation: UseExamNavigation = ({
         )
     );
     const [showPartDivider, setShowPartDivider] = useState<boolean>(hasDivider(exam, 0));
+    const [startNow, setStartNow] = useState(!showPartDivider && !showSolutions);
+
+    // when navbar is used
+    useEffect(()=> {
+        if(startNow && partIndex !== 0) {
+            setStartNow(false);
+        }
+    } , [partIndex, startNow])
 
     useEffect(() => {
         if (!showSolutions && hasDivider(exam, isPartExam ? partIndex : exerciseIndex) && !seenParts.has(partIndex)) {
@@ -95,14 +111,42 @@ const useExamNavigation: UseExamNavigation = ({
     const nextPartExam = (keepGoing: boolean) => {
         const partExam = (exam as PartExam);
 
-        const reachedFinalExercise = exerciseIndex + 1 === partExam.parts[partIndex].exercises.length;
+        if (startNow) {
-        const currentExercise = partExam.parts[partIndex].exercises[exerciseIndex];
+            setStartNow(false);
+            return;
+        }
 
         if (isBetweenParts) {
             setIsBetweenParts(false);
             return;
         }
 
+        if (allPartExercisesRender) {
+            if (partIndex < partExam.parts.length - 1) {
+                if (!disableBetweenParts) setIsBetweenParts(true);
+                setPartIndex(partIndex + 1);
+                return;
+            }
+
+            if (!answeredEveryQuestion(exam as PartExam, userSolutions) && !keepGoing && setShowBlankModal && !showSolutions && !preview) {
+                if (modalKwargs) modalKwargs();
+                setShowBlankModal(true);
+                return;
+            }
+
+            if (preview) {
+                setPartIndex(0);
+            } else if (!showSolutions) {
+                dispatch({ type: "FINALIZE_MODULE", payload: { updateTimers: true } });
+            } else {
+                dispatch({ type: "FINALIZE_MODULE_SOLUTIONS" });
+            }
+            return;
+        }
+
+        const reachedFinalExercise = exerciseIndex + 1 === partExam.parts[partIndex].exercises.length;
+        const currentExercise = partExam.parts[partIndex].exercises[exerciseIndex];
+
         if (currentExercise.type === "multipleChoice") {
             const nextQuestionIndex = questionIndex + MC_PER_PAGE;
             if (nextQuestionIndex < currentExercise.questions!.length) {
@@ -110,12 +154,20 @@ const useExamNavigation: UseExamNavigation = ({
                 return;
             }
         }
+
         if (!reachedFinalExercise) {
             setExerciseIndex(exerciseIndex + 1);
             setQuestionIndex(0);
             return;
         }
         
+        console.log(modalBetweenParts);
+        if (modalBetweenParts && !answeredEveryQuestion(exam as PartExam, userSolutions) && !keepGoing && setShowBlankModal && !showSolutions && !preview) {
+            if (modalKwargs) modalKwargs();
+            setShowBlankModal(true);
+            return;
+        }
+
         if (partIndex < partExam.parts.length - 1) {
             if (!disableBetweenParts) setIsBetweenParts(true);
             setPartIndex(partIndex + 1);
@@ -124,34 +176,55 @@ const useExamNavigation: UseExamNavigation = ({
             return;
         }
 
-        if (!answeredEveryQuestion(exam as PartExam, userSolutions) && !keepGoing && setShowBlankModal && !showSolutions && !preview) {
+
-            if (modalKwargs) modalKwargs()
+        if (!modalBetweenParts && !answeredEveryQuestion(exam as PartExam, userSolutions) && !keepGoing && setShowBlankModal && !showSolutions && !preview) {
+            if (modalKwargs) modalKwargs();
             setShowBlankModal(true);
             return;
         }
 
+
         if (preview) {
             setPartIndex(0);
             setExerciseIndex(0);
             setQuestionIndex(0);
-        }
+        } else if (!showSolutions) {
-
-        if (!showSolutions) {
             dispatch({ type: "FINALIZE_MODULE", payload: { updateTimers: true } });
         } else {
             dispatch({ type: "FINALIZE_MODULE_SOLUTIONS" });
         }
-    }
+    };
 
     const previousPartExam = () => {
-        const currentExercise = (exam as PartExam).parts[partIndex].exercises[exerciseIndex];
+
-        if (currentExercise.type === "multipleChoice" && questionIndex > 0) {
+        if (partIndex === 0 && exerciseIndex === 0 && !startNow) {
-            setQuestionIndex(Math.max(0, questionIndex - MC_PER_PAGE));
+            setStartNow(true);
             return;
         }
 
-        if (exerciseIndex === 0 && !disableBetweenParts) {
+        if (!disableBetweenParts && isBetweenParts) {
-            setIsBetweenParts(true);
+            setIsBetweenParts(false);
+        }
+
+        if (allPartExercisesRender) {
+            if (isBetweenParts && partIndex !== 0) {
+                setPartIndex(partIndex - 1);
+                setIsBetweenParts(false);
+                return;
+            }
+            if (disableBetweenParts) {
+                if (partIndex !== 0) {
+                    setPartIndex(partIndex - 1);
+                }
+            } else {
+                setIsBetweenParts(true);
+            }
+            return;
+        }
+
+        const currentExercise = (exam as PartExam).parts[partIndex].exercises[exerciseIndex];
+        if (currentExercise.type === "multipleChoice" && questionIndex > 0 && !allPartExercisesRender) {
+            setQuestionIndex(Math.max(0, questionIndex - MC_PER_PAGE));
             return;
         }
         
@@ -222,6 +295,7 @@ const useExamNavigation: UseExamNavigation = ({
         setSeenParts,
         isBetweenParts,
         setIsBetweenParts,
+        startNow
     };
 }
 

src/exams/Reading.tsx

@@ -34,20 +34,20 @@ const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false
 		exerciseIndex, partIndex, questionIndex,
 		userSolutions, flags, timeSpentCurrentModule,
 		setBgColor, setUserSolutions, setTimeIsUp,
-		dispatch
+		dispatch,
 	} = !preview ? examState : persistentExamState;
 
 
 	const timer = useRef(exam.minTimer - timeSpentCurrentModule / 60);
 
 	const { finalizeModule, timeIsUp } = flags;
-	const [isFirstTimeRender, setIsFirstTimeRender] = useState(partIndex === 0 && exerciseIndex == 0 && !showSolutions);
 
 	const {
 		nextExercise, previousExercise,
 		showPartDivider, setShowPartDivider,
 		seenParts, setSeenParts,
-		isBetweenParts, setIsBetweenParts
+		isBetweenParts, setIsBetweenParts,
+		startNow
 	} = useExamNavigation({ exam, module: "reading", showBlankModal, setShowBlankModal, showSolutions, preview, disableBetweenParts: showSolutions });
 
 	useEffect(() => {
@@ -118,7 +118,6 @@ const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false
 		setShowPartDivider(false);
 		setBgColor("bg-white");
 		setSeenParts((prev) => new Set(prev).add(partIndex));
-		if (isFirstTimeRender) setIsFirstTimeRender(false);
 	}
 
 	useEffect(() => {
@@ -171,7 +170,7 @@ const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false
 							<div
 								className={clsx(
 									"mb-20 w-full",
-									((isFirstTimeRender || isBetweenParts) && !showSolutions) ? "flex flex-col gap-2" : "grid grid-cols-2 gap-4",
+									((startNow || isBetweenParts) && !showSolutions) ? "flex flex-col gap-2" : "grid grid-cols-2 gap-4",
 								)}>
 								<ReadingPassage
 									exam={exam}
@@ -180,7 +179,7 @@ const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false
 									isTextMinimized={isTextMinimized}
 									setIsTextMinimized={setIsTextMinimzed}
 								/>
-								{!isFirstTimeRender && !showPartDivider && !showSolutions && !isBetweenParts && renderExercise(currentExercise, exam.id, registerSolution, preview, progressButtons, progressButtons)}
+								{!startNow && !showPartDivider && !showSolutions && !isBetweenParts && renderExercise(currentExercise, exam.id, registerSolution, preview, progressButtons, progressButtons)}
 								{showSolutions && renderSolution(currentExercise, progressButtons, progressButtons)}
 							</div>
 							{/*exerciseIndex > -1 && partIndex > -1 && exerciseIndex < exam.parts[partIndex].exercises.length && (
@@ -193,12 +192,12 @@ const Reading: React.FC<ExamProps<ReadingExam>> = ({ exam, showSolutions = false
 								</Button>
 							)*/}
 						</div>
-						{((isFirstTimeRender || isBetweenParts) && !showPartDivider && !showSolutions) &&
+						{((startNow || isBetweenParts) && !showPartDivider && !showSolutions) &&
 							<ProgressButtons
-								hidePrevious={partIndex == 0 && isBetweenParts || isFirstTimeRender}
+								hidePrevious={partIndex == 0 && isBetweenParts || startNow}
-								nextLabel={isFirstTimeRender ? "Start now" : "Next Page"}
+								nextLabel={startNow ? "Start now" : "Next Page"}
 								handlePrevious={previousExercise}
-								handleNext={() => isFirstTimeRender ? setIsFirstTimeRender(false) : nextExercise()} />
+								handleNext={() => nextExercise()} />
 						}
 					</>
 				)}

src/pages/(exam)/ExamPage.tsx

@@ -193,9 +193,9 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 
 	useEffect(() => {
 		if (flags.finalizeExam && moduleIndex !== -1) {
-		  setModuleIndex(-1);
+			setModuleIndex(-1);
 		}
-	  }, [flags.finalizeExam, moduleIndex, setModuleIndex]);
+	}, [flags, moduleIndex, setModuleIndex]);
 
 	useEffect(() => {
 		if (flags.finalizeExam && !flags.pendingEvaluation && pendingExercises.length === 0) {
@@ -215,11 +215,11 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 				await axios.get("/api/stats/update");
 				setShowSolutions(true);
 				setFlags({ finalizeExam: false });
-				dispatch({type: "UPDATE_EXAMS"})
+				dispatch({ type: "UPDATE_EXAMS" })
 			})();
 		}
-	// eslint-disable-next-line react-hooks/exhaustive-deps
+		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions]);
+	}, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions, flags]);
 
 
 	const aggregateScoresByModule = (isPractice?: boolean): {

src/stores/exam/reducers/index.ts

@@ -111,7 +111,17 @@ export const rootReducer = (
             } else {
                 // then check whether there are more modules in the exam, if there are
                 // setup the next module
-                if (state.moduleIndex + 1 < state.selectedModules.length) {
+                if (state.moduleIndex === state.selectedModules.length - 1) {
+                    return {
+                        showSolutions: true,
+                        flags: {
+                            ...state.flags,
+                            finalizeModule: false,
+                            finalizeExam: true,
+                            pendingEvaluation: hasUnevaluatedSolutions,
+                        }
+                    }
+                } else if (state.moduleIndex < state.selectedModules.length - 1) {
                     return {
                         moduleIndex: state.moduleIndex + 1,
                         partIndex: 0,
@@ -123,27 +133,14 @@ export const rootReducer = (
                             finalizeModule: false,
                         }
                     }
-                } else {
-                    // if there are no modules left, flag finalizeExam 
-                    // so that the stats are uploaded in ExamPage
-                    // and the Finish view is set there, no need to 
-                    // dispatch another init
-                    return {
-                        showSolutions: true,
-                        flags: {
-                            ...state.flags,
-                            finalizeModule: false,
-                            finalizeExam: true,
-                            pendingEvaluation: hasUnevaluatedSolutions,
-                        }
-                    }
                 }
             }
         }
         case 'FINALIZE_MODULE_SOLUTIONS': {
             if (state.flags.reviewAll) {
-                const notLastModule = state.moduleIndex < state.selectedModules.length;
+                const notLastModule = state.moduleIndex < state.selectedModules.length - 1;
                 const moduleIndex = notLastModule ? state.moduleIndex + 1 : -1;
+                
                 if (notLastModule) {
                     return {
                         questionIndex: 0,
@@ -160,12 +157,12 @@ export const rootReducer = (
                         moduleIndex: -1
                     }
                 }
-
             } else {
                 return {
                     moduleIndex: -1
                 }
             }
+            
         }
         case 'UPDATE_EXAMS': {
             const exams = state.exams.map((e) => updateExamWithUserSolutions(e, state.userSolutions));