Changed approach to display level for Level Testing

src/exams/Finish.tsx

@@ -10,6 +10,8 @@ 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 { LevelScore } from "@/constants/ielts";
+import { getLevelScore } from "@/utils/score";
 
 interface Score {
 	module: Module;
@@ -66,6 +68,24 @@ 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 showLevel = (level: number) => {
+		if(selectedModule === "level") {
+			const [levelStr, grade] = getLevelScore(level);
+			return (
+				<div className="flex flex-col items-center justify-center gap-1">
+					<span className="text-xl font-bold">{levelStr}</span>
+					<span className="text-xl">{grade}</span>
+				</div>
+			)
+		} 
+		
+		
+		return <span className="text-3xl font-bold">{level}</span>;
+
+	}
+
 	return (
 		<>
 			<div className="w-full min-h-full h-fit flex flex-col items-center justify-between gap-8">
@@ -142,7 +162,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 				{!isLoading && (
 					<div className="w-full flex gap-9 mt-32 items-center justify-between mb-20">
 						<span className="max-w-3xl">
-							{moduleResultText(calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus))}
+							{moduleResultText(selectedModule, bandScore)}
 						</span>
 						<div className="flex gap-9 px-16">
 							<div
@@ -156,9 +176,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 										moduleColors[selectedModule].inner,
 									)}>
 									<span className="text-xl">Level</span>
-									<span className="text-3xl font-bold">
-										{calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus)}
-									</span>
+									{showLevel(bandScore)}
 								</div>
 							</div>
 							<div className="flex flex-col gap-5">