Added a button to review the exam from the selected module forward

src/exams/Finish.tsx

@@ -9,9 +9,19 @@ import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment, useEffect, useState } from "react";
-import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
+import {
+  BsArrowCounterclockwise,
+  BsBook,
+  BsClipboard,
+  BsEyeFill,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsShareFill,
+} from "react-icons/bs";
 import { LevelScore } from "@/constants/ielts";
 import { getLevelScore } from "@/utils/score";
+import { capitalize } from "lodash";
 
 interface Score {
   module: Module;
@@ -25,18 +35,30 @@ interface Props {
   modules: Module[];
   scores: Score[];
   isLoading: boolean;
-	onViewResults: () => void;
+  onViewResults: (moduleIndex?: number) => void;
 }
 
-export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
+export default function Finish({
+  user,
+  scores,
+  modules,
+  isLoading,
+  onViewResults,
+}: Props) {
   const [selectedModule, setSelectedModule] = useState(modules[0]);
-	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
+  const [selectedScore, setSelectedScore] = useState<Score>(
+    scores.find((x) => x.module === modules[0])!,
+  );
 
   const exams = useExamStore((state) => state.exams);
 
-	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
+  useEffect(
+    () => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
+    [scores, selectedModule],
+  );
 
-	const moduleColors: {[key in Module]: {progress: string; inner: string}} = {
+  const moduleColors: { [key in Module]: { progress: string; inner: string } } =
+    {
       reading: {
         progress: "text-ielts-reading",
         inner: "bg-ielts-reading-light",
@@ -68,7 +90,12 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
     return exam.exercises.length;
   };
 
-	const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
+  const bandScore: number = calculateBandScore(
+    selectedScore.correct,
+    selectedScore.total,
+    selectedModule,
+    user.focus,
+  );
 
   const showLevel = (level: number) => {
     if (selectedModule === "level") {
@@ -99,8 +126,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
               onClick={() => setSelectedModule("reading")}
               className={clsx(
                 "hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "reading" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-reading",
+                selectedModule === "reading"
-							)}>
+                  ? "bg-ielts-reading text-white"
+                  : "bg-mti-gray-smoke text-ielts-reading",
+              )}
+            >
               <BsBook className="h-6 w-6" />
               <span className="font-semibold">Reading</span>
             </div>
@@ -110,8 +140,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
               onClick={() => setSelectedModule("listening")}
               className={clsx(
                 "hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
+                selectedModule === "listening"
-							)}>
+                  ? "bg-ielts-listening text-white"
+                  : "bg-mti-gray-smoke text-ielts-listening",
+              )}
+            >
               <BsHeadphones className="h-6 w-6" />
               <span className="font-semibold">Listening</span>
             </div>
@@ -121,8 +154,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
               onClick={() => setSelectedModule("writing")}
               className={clsx(
                 "hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-writing",
+                selectedModule === "writing"
-							)}>
+                  ? "bg-ielts-writing text-white"
+                  : "bg-mti-gray-smoke text-ielts-writing",
+              )}
+            >
               <BsPen className="h-6 w-6" />
               <span className="font-semibold">Writing</span>
             </div>
@@ -132,8 +168,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
               onClick={() => setSelectedModule("speaking")}
               className={clsx(
                 "hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
+                selectedModule === "speaking"
-							)}>
+                  ? "bg-ielts-speaking text-white"
+                  : "bg-mti-gray-smoke text-ielts-speaking",
+              )}
+            >
               <BsMegaphone className="h-6 w-6" />
               <span className="font-semibold">Speaking</span>
             </div>
@@ -143,8 +182,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
               onClick={() => setSelectedModule("level")}
               className={clsx(
                 "hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
-								selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
+                selectedModule === "level"
-							)}>
+                  ? "bg-ielts-level text-white"
+                  : "bg-mti-gray-smoke text-ielts-level",
+              )}
+            >
               <BsClipboard className="h-6 w-6" />
               <span className="font-semibold">Level</span>
             </div>
@@ -152,8 +194,18 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
         </div>
         {isLoading && (
           <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
-						<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
+            <span
-						<span className={clsx("text-center text-2xl font-bold", moduleColors[selectedModule].progress)}>
+              className={clsx(
+                "loading loading-infinity w-32",
+                moduleColors[selectedModule].progress,
+              )}
+            />
+            <span
+              className={clsx(
+                "text-center text-2xl font-bold",
+                moduleColors[selectedModule].progress,
+              )}
+            >
               Evaluating your answers, please be patient...
               <br />
               You can also check it later on your records page!
@@ -162,22 +214,30 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
         )}
         {!isLoading && (
           <div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
-						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
+            <span className="max-w-3xl">
+              {moduleResultText(selectedModule, bandScore)}
+            </span>
             <div className="flex gap-9 px-16">
               <div
-								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
+                className={clsx(
+                  "radial-progress overflow-hidden",
+                  moduleColors[selectedModule].progress,
+                )}
                 style={
                   {
-										"--value": (selectedScore.correct / selectedScore.total) * 100,
+                    "--value":
+                      (selectedScore.correct / selectedScore.total) * 100,
                     "--thickness": "12px",
                     "--size": "13rem",
                   } as any
-								}>
+                }
+              >
                 <div
                   className={clsx(
                     "flex h-48 w-48 flex-col items-center justify-center rounded-full",
                     moduleColors[selectedModule].inner,
-									)}>
+                  )}
+                >
                   <span className="text-xl">Level</span>
                   {showLevel(bandScore)}
                 </div>
@@ -188,7 +248,12 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
                     <div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
                     <div className="flex flex-col">
                       <span className="text-mti-red-light">
-												{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
+                        {(
+                          ((selectedScore.total - selectedScore.missing) /
+                            selectedScore.total) *
+                          100
+                        ).toFixed(0)}
+                        %
                       </span>
                       <span className="text-lg">Completion</span>
                     </div>
@@ -196,7 +261,9 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
                   <div className="flex gap-2">
                     <div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
                     <div className="flex flex-col">
-											<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
+                      <span className="text-mti-purple-light">
+                        {selectedScore.correct.toString().padStart(2, "0")}
+                      </span>
                       <span className="text-lg">Correct</span>
                     </div>
                   </div>
@@ -204,7 +271,9 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
                     <div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
                     <div className="flex flex-col">
                       <span className="text-mti-rose-light">
-												{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
+                        {(selectedScore.total - selectedScore.correct)
+                          .toString()
+                          .padStart(2, "0")}
                       </span>
                       <span className="text-lg">Wrong</span>
                     </div>
@@ -224,18 +293,31 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
             <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
               <button
                 onClick={() => window.location.reload()}
-								className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
+                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
+              >
                 <BsArrowCounterclockwise className="h-7 w-7 text-white" />
               </button>
               <span>Play Again</span>
             </div>
             <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
               <button
-								onClick={onViewResults}
+                onClick={() => onViewResults()}
-								className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
+                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
+              >
                 <BsEyeFill className="h-7 w-7 text-white" />
               </button>
-							<span>Review Answers</span>
+              <span>Review All</span>
+            </div>
+            <div className="flex w-fit cursor-pointer flex-col items-center gap-1">
+              <button
+                onClick={() =>
+                  onViewResults(modules.findIndex((x) => x === selectedModule))
+                }
+                className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
+              >
+                <BsEyeFill className="h-7 w-7 text-white" />
+              </button>
+              <span>Review {capitalize(selectedModule)}</span>
             </div>
           </div>
 

src/pages/(exam)/ExamPage.tsx

@@ -15,7 +15,10 @@ import useUser from "@/hooks/useUser";
 import { Exam, UserSolution, Variant } from "@/interfaces/exam";
 import { Stat } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
+import {
+  evaluateSpeakingAnswer,
+  evaluateWritingAnswer,
+} from "@/utils/evaluation";
 import { defaultExamUserSolutions, getExam } from "@/utils/exams";
 import axios from "axios";
 import { useRouter } from "next/router";
@@ -34,7 +37,9 @@ export default function ExamPage({page}: Props) {
   const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
   const [showAbandonPopup, setShowAbandonPopup] = useState(false);
   const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
-	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
+  const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<
+    string[]
+  >([]);
   const [timeSpent, setTimeSpent] = useState(0);
 
   const resetStore = useExamStore((state) => state.reset);
@@ -52,7 +57,9 @@ export default function ExamPage({page}: Props) {
   const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
   const { userSolutions, setUserSolutions } = useExamStore((state) => state);
   const { showSolutions, setShowSolutions } = useExamStore((state) => state);
-	const {selectedModules, setSelectedModules} = useExamStore((state) => state);
+  const { selectedModules, setSelectedModules } = useExamStore(
+    (state) => state,
+  );
 
   const { user } = useUser({ redirectTo: "/login" });
   const router = useRouter();
@@ -90,7 +97,10 @@ export default function ExamPage({page}: Props) {
     });
   };
 
-	useEffect(() => setTimeSpent((prev) => prev + initialTimeSpent), [initialTimeSpent]);
+  useEffect(
+    () => setTimeSpent((prev) => prev + initialTimeSpent),
+    [initialTimeSpent],
+  );
 
   useEffect(() => {
     if (userSolutions.length === 0 && exams.length > 0) {
@@ -112,10 +122,28 @@ export default function ExamPage({page}: Props) {
     )
       saveSession();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [assignment, exam, exams, moduleIndex, selectedModules, sessionId, userSolutions, user, exerciseIndex, partIndex, questionIndex]);
+  }, [
+    assignment,
+    exam,
+    exams,
+    moduleIndex,
+    selectedModules,
+    sessionId,
+    userSolutions,
+    user,
+    exerciseIndex,
+    partIndex,
+    questionIndex,
+  ]);
 
   useEffect(() => {
-		if (timeSpent % 20 === 0 && timeSpent > 0 && moduleIndex < selectedModules.length && !showSolutions) saveSession();
+    if (
+      timeSpent % 20 === 0 &&
+      timeSpent > 0 &&
+      moduleIndex < selectedModules.length &&
+      !showSolutions
+    )
+      saveSession();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timeSpent]);
 
@@ -149,11 +177,20 @@ export default function ExamPage({page}: Props) {
 
   useEffect(() => {
     (async () => {
-			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
+      if (
+        selectedModules.length > 0 &&
+        exams.length > 0 &&
+        moduleIndex < selectedModules.length
+      ) {
         const nextExam = exams[moduleIndex];
 
-				if (partIndex === -1 && nextExam.module !== "listening") setPartIndex(0);
+        if (partIndex === -1 && nextExam.module !== "listening")
-				if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam.module)) setExerciseIndex(0);
+          setPartIndex(0);
+        if (
+          exerciseIndex === -1 &&
+          !["reading", "listening"].includes(nextExam?.module)
+        )
+          setExerciseIndex(0);
         setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
       }
     })();
@@ -168,7 +205,9 @@ export default function ExamPage({page}: Props) {
             module,
             avoidRepeated,
             variant,
-						user?.type === "student" || user?.type === "developer" ? user.preferredGender : undefined,
+            user?.type === "student" || user?.type === "developer"
+              ? user.preferredGender
+              : undefined,
           ),
         );
         Promise.all(examPromises).then((values) => {
@@ -185,7 +224,13 @@ export default function ExamPage({page}: Props) {
   }, [selectedModules, setExams, exams]);
 
   useEffect(() => {
-		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
+    if (
+      selectedModules.length > 0 &&
+      exams.length !== 0 &&
+      moduleIndex >= selectedModules.length &&
+      !hasBeenUploaded &&
+      !showSolutions
+    ) {
       const newStats: Stat[] = userSolutions.map((solution) => ({
         ...solution,
         id: solution.id || uuidv4(),
@@ -221,10 +266,17 @@ export default function ExamPage({page}: Props) {
   const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
     setTimeout(async () => {
       try {
-				const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
+        const awaitedStats = await Promise.all(
-				const solutionsEvaluated = awaitedStats.every((stat) => stat.solutions.every((x) => x.evaluation !== null));
+          ids.map(
+            async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data,
+          ),
+        );
+        const solutionsEvaluated = awaitedStats.every((stat) =>
+          stat.solutions.every((x) => x.evaluation !== null),
+        );
         if (solutionsEvaluated) {
-					const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
+          const statsUserSolutions: UserSolution[] = awaitedStats.map(
+            (stat) => ({
               id: stat.id,
               exercise: stat.exercise,
               score: stat.score,
@@ -232,15 +284,20 @@ export default function ExamPage({page}: Props) {
               type: stat.type,
               exam: stat.exam,
               module: stat.module,
-					}));
+            }),
+          );
 
           const updatedUserSolutions = userSolutions.map((x) => {
-						const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
+            const respectiveSolution = statsUserSolutions.find(
+              (y) => y.exercise === x.exercise,
+            );
             return respectiveSolution ? respectiveSolution : x;
           });
 
           setUserSolutions(updatedUserSolutions);
-					return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
+          return setStatsAwaitingEvaluation((prev) =>
+            prev.filter((x) => !ids.includes(x)),
+          );
         }
 
         return checkIfStatsHaveBeenEvaluated(ids);
@@ -256,7 +313,8 @@ export default function ExamPage({page}: Props) {
         Object.assign(p, {
           exercises: p.exercises.map((x) =>
             Object.assign(x, {
-							userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
+              userSolutions: userSolutions.find((y) => x.id === y.exercise)
+                ?.solutions,
             }),
           ),
         }),
@@ -266,7 +324,8 @@ export default function ExamPage({page}: Props) {
 
     const exercises = exam.exercises.map((x) =>
       Object.assign(x, {
-				userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
+        userSolutions: userSolutions.find((y) => x.id === y.exercise)
+          ?.solutions,
       }),
     );
     return Object.assign(exam, { exercises });
@@ -280,7 +339,12 @@ export default function ExamPage({page}: Props) {
 
     if (exam && !solutionExams.includes(exam.id)) return;
 
-		if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
+    if (
+      exam &&
+      (exam.module === "writing" || exam.module === "speaking") &&
+      solutions.length > 0 &&
+      !showSolutions
+    ) {
       setHasBeenUploaded(true);
       setIsEvaluationLoading(true);
 
@@ -289,22 +353,45 @@ export default function ExamPage({page}: Props) {
           exam.exercises.map(async (exercise, index) => {
             const evaluationID = uuidv4();
             if (exercise.type === "writing")
-							return await evaluateWritingAnswer(exercise, index + 1, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
+              return await evaluateWritingAnswer(
+                exercise,
+                index + 1,
+                solutions.find((x) => x.exercise === exercise.id)!,
+                evaluationID,
+              );
 
-						if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
+            if (
-							return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
+              exercise.type === "interactiveSpeaking" ||
+              exercise.type === "speaking"
+            )
+              return await evaluateSpeakingAnswer(
+                exercise,
+                solutions.find((x) => x.exercise === exercise.id)!,
+                evaluationID,
+              );
           }),
         )
       ).filter((x) => !!x) as UserSolution[];
 
-			newSolutions = [...newSolutions.filter((x) => !responses.map((y) => y.exercise).includes(x.exercise)), ...responses];
+      newSolutions = [
-			setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
+        ...newSolutions.filter(
+          (x) => !responses.map((y) => y.exercise).includes(x.exercise),
+        ),
+        ...responses,
+      ];
+      setStatsAwaitingEvaluation((prev) => [
+        ...prev,
+        ...responses.filter((x) => !!x).map((r) => (r as any).id),
+      ]);
       setHasBeenUploaded(false);
     }
 
     axios.get("/api/stats/update");
 
-		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...newSolutions]);
+    setUserSolutions([
+      ...userSolutions.filter((x) => !solutionIds.includes(x.exercise)),
+      ...newSolutions,
+    ]);
     setModuleIndex(moduleIndex + 1);
 
     setPartIndex(-1);
@@ -312,7 +399,12 @@ export default function ExamPage({page}: Props) {
     setQuestionIndex(0);
   };
 
-	const aggregateScoresByModule = (): {module: Module; total: number; missing: number; correct: number}[] => {
+  const aggregateScoresByModule = (): {
+    module: Module;
+    total: number;
+    missing: number;
+    correct: number;
+  }[] => {
     const scores: {
       [key in Module]: { total: number; missing: number; correct: number };
     } = {
@@ -345,7 +437,12 @@ export default function ExamPage({page}: Props) {
 
     userSolutions.forEach((x) => {
       const examModule =
-				x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
+        x.module ||
+        (x.type === "writing"
+          ? "writing"
+          : x.type === "speaking" || x.type === "interactiveSpeaking"
+            ? "speaking"
+            : undefined);
 
       scores[examModule!] = {
         total: scores[examModule!].total + x.score.total,
@@ -382,10 +479,12 @@ export default function ExamPage({page}: Props) {
           isLoading={isEvaluationLoading}
           user={user!}
           modules={selectedModules}
-					onViewResults={() => {
+          onViewResults={(index?: number) => {
             setShowSolutions(true);
-						setModuleIndex(0);
+            setModuleIndex(index || 0);
-						setExerciseIndex(["reading", "listening"].includes(exams[0].module) ? -1 : 0);
+            setExerciseIndex(
+              ["reading", "listening"].includes(exams[0].module) ? -1 : 0,
+            );
             setPartIndex(exams[0].module === "listening" ? -1 : 0);
             setExam(exams[0]);
           }}
@@ -395,23 +494,49 @@ export default function ExamPage({page}: Props) {
     }
 
     if (exam && exam.module === "reading") {
-			return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Reading
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "listening") {
-			return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Listening
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "writing") {
-			return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Writing
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "speaking") {
-			return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Speaking
+          exam={exam}
+          onFinish={onFinish}
+          showSolutions={showSolutions}
+        />
+      );
     }
 
     if (exam && exam.module === "level") {
-			return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
+      return (
+        <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />
+      );
     }
 
     return <>Loading...</>;
@@ -424,8 +549,13 @@ export default function ExamPage({page}: Props) {
         <Layout
           user={user}
           className="justify-between"
-					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
+          focusMode={
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
+            selectedModules.length !== 0 &&
+            !showSolutions &&
+            moduleIndex < selectedModules.length
+          }
+          onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
+        >
           <>
             {renderScreen()}
             {!showSolutions && moduleIndex < selectedModules.length && (