Added an "instructions" panel to the Listening before it actually starts

src/exams/Finish.tsx

@@ -1,26 +1,17 @@
 import Button from "@/components/Low/Button";
 import ModuleTitle from "@/components/Medium/ModuleTitle";
-import { moduleResultText } from "@/constants/ielts";
+import {moduleResultText} from "@/constants/ielts";
-import { Module } from "@/interfaces";
+import {Module} from "@/interfaces";
-import { User } from "@/interfaces/user";
+import {User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import { calculateBandScore } from "@/utils/score";
+import {calculateBandScore} from "@/utils/score";
 import clsx from "clsx";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import {useRouter} from "next/router";
-import { Fragment, useEffect, useState } from "react";
+import {Fragment, useEffect, useState} from "react";
-import {
+import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
-  BsArrowCounterclockwise,
+import {LevelScore} from "@/constants/ielts";
-  BsBook,
+import {getLevelScore} from "@/utils/score";
-  BsClipboard,
-  BsEyeFill,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-  BsShareFill,
-} from "react-icons/bs";
-import { LevelScore } from "@/constants/ielts";
-import { getLevelScore } from "@/utils/score";
 
 interface Score {
 	module: Module;
@@ -37,28 +28,15 @@ interface Props {
 	onViewResults: () => void;
 }
 
-export default function Finish({
+export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
-  user,
-  scores,
-  modules,
-  isLoading,
-  onViewResults,
-}: Props) {
 	const [selectedModule, setSelectedModule] = useState(modules[0]);
-  const [selectedScore, setSelectedScore] = useState<Score>(
+	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
-    scores.find((x) => x.module === modules[0])!,
-  );
 
 	const exams = useExamStore((state) => state.exams);
 
-  useEffect(
+	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
-    () => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
-    [scores, selectedModule],
-  );
-  useEffect(() => console.log(scores), [scores]);
 
-  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",
@@ -90,12 +68,7 @@ export default function Finish({
 		return exam.exercises.length;
 	};
 
-  const bandScore: number = calculateBandScore(
+	const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
-    selectedScore.correct,
-    selectedScore.total,
-    selectedModule,
-    user.focus,
-  );
 
 	const showLevel = (level: number) => {
 		if (selectedModule === "level") {
@@ -126,11 +99,8 @@ export default function Finish({
 							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"
+								selectedModule === "reading" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-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>
@@ -140,11 +110,8 @@ export default function Finish({
 							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"
+								selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-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>
@@ -154,11 +121,8 @@ export default function Finish({
 							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"
+								selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-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>
@@ -168,11 +132,8 @@ export default function Finish({
 							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"
+								selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-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>
@@ -182,11 +143,8 @@ export default function Finish({
 							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"
+								selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-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>
@@ -194,18 +152,8 @@ export default function Finish({
 				</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
+						<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
-              className={clsx(
+						<span className={clsx("text-center text-2xl font-bold", moduleColors[selectedModule].progress)}>
-                "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!
@@ -214,30 +162,22 @@ export default function Finish({
 				)}
 				{!isLoading && (
 					<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
-            <span className="max-w-3xl">
+						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
-              {moduleResultText(selectedModule, bandScore)}
-            </span>
 						<div className="flex gap-9 px-16">
 							<div
-                className={clsx(
+								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
-                  "radial-progress overflow-hidden",
-                  moduleColors[selectedModule].progress,
-                )}
 								style={
 									{
-                    "--value":
+										"--value": (selectedScore.correct / selectedScore.total) * 100,
-                      (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>
@@ -247,12 +187,7 @@ export default function Finish({
 									<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>
@@ -260,9 +195,7 @@ export default function Finish({
 								<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">
+										<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
-                      {selectedScore.correct.toString().padStart(2, "0")}
-                    </span>
 										<span className="text-lg">Correct</span>
 									</div>
 								</div>
@@ -270,9 +203,7 @@ export default function Finish({
 									<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)
+											{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
-                        .toString()
-                        .padStart(2, "0")}
 										</span>
 										<span className="text-lg">Wrong</span>
 									</div>
@@ -289,8 +220,7 @@ export default function Finish({
 						<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>
@@ -298,8 +228,7 @@ export default function Finish({
 						<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
 							<button
 								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>

src/exams/Listening.tsx

@@ -16,11 +16,14 @@ interface Props {
 	onFinish: (userSolutions: UserSolution[]) => void;
 }
 
+const INSTRUCTIONS_AUDIO_SRC =
+	"https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/listening_recordings%2Fgeneric_intro.mp3?alt=media&token=9b9cfdb8-e90d-40d1-854b-51c4378a5c4b";
+
 export default function Listening({exam, showSolutions = false, onFinish}: Props) {
 	const [questionIndex, setQuestionIndex] = useState(0);
 	const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 	const [exerciseIndex, setExerciseIndex] = useState(showSolutions ? 0 : -1);
-	const [partIndex, setPartIndex] = useState(0);
+	const [partIndex, setPartIndex] = useState(exam.variant === "partial" ? 0 : -1);
 	const [timesListened, setTimesListened] = useState(0);
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>(
 		exam.parts.flatMap((x) => x.exercises).map((x) => defaultUserSolutions(x, exam)),
@@ -104,6 +107,17 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 		};
 	};
 
+	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">
 			<div className="flex flex-col w-full gap-2">
@@ -133,7 +147,9 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 			<div className="flex flex-col h-full w-full gap-8 justify-between">
 				<ModuleTitle
 					exerciseIndex={
-						(exam.parts
+						partIndex === -1
+							? 0
+							: (exam.parts
 									.flatMap((x) => x.exercises)
 									.findIndex(
 										(x) => x.id === exam.parts[partIndex].exercises[exerciseIndex === -1 ? exerciseIndex + 1 : exerciseIndex]?.id,
@@ -147,22 +163,33 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 					totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
 					disableTimer={showSolutions}
 				/>
-				{renderAudioPlayer()}
+				{/* Audio Player for the Instructions */}
+				{partIndex === -1 && renderAudioInstructionsPlayer()}
+
+				{/* Part's audio player */}
+				{partIndex > -1 && renderAudioPlayer()}
+
+				{/* Exercise renderer */}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.parts[partIndex].exercises.length &&
 					!showSolutions &&
 					renderExercise(getExercise(), nextExercise, previousExercise, setCurrentQuestionIndex)}
+
+				{/* Solution renderer */}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.parts[partIndex].exercises.length &&
 					showSolutions &&
 					renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise, setCurrentQuestionIndex)}
 			</div>
-			{exerciseIndex === -1 && partIndex > 0 && (
+
+			{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((prev) => prev - 1);
 						}}
@@ -175,7 +202,13 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 					</Button>
 				</div>
 			)}
-			{exerciseIndex === -1 && partIndex === 0 && (
+
+			{exerciseIndex === -1 && 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={() => nextExercise()} className="max-w-[200px] self-end w-full justify-self-end">
 					Start now
 				</Button>