ENCOA-90: Updated the instances of Level test to use the Grading System

2024-08-27 00:18:01 +01:00
parent a0b8521f0a
commit 0aba6355ed
6 changed files with 360 additions and 350 deletions
--- a/src/components/StatGridItem.tsx
+++ b/src/components/StatGridItem.tsx
@@ -1,20 +1,20 @@
-import React from 'react';
-import { BsClock, BsXCircle } from 'react-icons/bs';
-import clsx from 'clsx';
-import { Stat, User } from '@/interfaces/user';
+import React from "react";
+import {BsClock, BsXCircle} from "react-icons/bs";
+import clsx from "clsx";
+import {Stat, User} from "@/interfaces/user";
 import {Module} from "@/interfaces";
 import ai_usage from "@/utils/ai.detection";
 import {calculateBandScore} from "@/utils/score";
-import moment from 'moment';
-import { Assignment } from '@/interfaces/results';
+import moment from "moment";
+import {Assignment} from "@/interfaces/results";
 import {uuidv4} from "@firebase/util";
 import {useRouter} from "next/router";
 import {uniqBy} from "lodash";
 import {sortByModule} from "@/utils/moduleUtils";
 import {convertToUserSolutions} from "@/utils/stats";
 import {getExamById} from "@/utils/exams";
-import { Exam, UserSolution } from '@/interfaces/exam';
-import ModuleBadge from './ModuleBadge';
+import {Exam, UserSolution} from "@/interfaces/exam";
+import ModuleBadge from "./ModuleBadge";

 const formatTimestamp = (timestamp: string | number) => {
 	const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
@@ -73,10 +73,10 @@ interface StatsGridItemProps {
 	examNumber?: number | undefined;
 	stats: Stat[];
 	timestamp: string | number;
-    user: User,
+	user: User;
 	assignments: Assignment[];
 	users: User[];
-    training?: boolean,
+	training?: boolean;
 	selectedTrainingExams?: string[];
 	maxTrainingExams?: number;
 	setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
@@ -108,7 +108,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	width = undefined,
 	height = undefined,
 	examNumber = undefined,
-    maxTrainingExams = undefined
+	maxTrainingExams = undefined,
 }) => {
 	const router = useRouter();
 	const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
@@ -134,13 +134,21 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	const {timeSpent, inactivity, session} = stats[0];

 	const selectExam = () => {
-        if (training && !isDisabled && typeof maxTrainingExams !== "undefined" && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") {
-            setSelectedTrainingExams(prevExams => {
-                const uniqueExams = [...new Set(stats.map(stat => `${stat.module}-${stat.date}`))];
-                const indexes = uniqueExams.map(exam => prevExams.indexOf(exam)).filter(index => index !== -1);
+		if (
+			training &&
+			!isDisabled &&
+			typeof maxTrainingExams !== "undefined" &&
+			typeof setSelectedTrainingExams !== "undefined" &&
+			typeof timestamp == "string"
+		) {
+			setSelectedTrainingExams((prevExams) => {
+				const uniqueExams = [...new Set(stats.map((stat) => `${stat.module}-${stat.date}`))];
+				const indexes = uniqueExams.map((exam) => prevExams.indexOf(exam)).filter((index) => index !== -1);
 				if (indexes.length > 0) {
 					const newExams = [...prevExams];
-                    indexes.sort((a, b) => b - a).forEach(index => {
+					indexes
+						.sort((a, b) => b - a)
+						.forEach((index) => {
 							newExams.splice(index, 1);
 						});
 					return newExams;
@@ -184,8 +192,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 		}

 		return true;
-    }
-    
+	};

 	const content = (
 		<>
@@ -216,19 +223,17 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 					{examNumber === undefined ? (
 						<>
 							{aiUsage >= 50 && user.type !== "student" && (
-                                <div className={clsx(
-                                    "ml-auto border px-1 rounded w-fit mr-1",
-                                    {
-                                        'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
-                                        'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
-                                    }
-                                )}>
+								<div
+									className={clsx("ml-auto border px-1 rounded w-fit mr-1", {
+										"bg-orange-100 border-orange-400 text-orange-700": aiUsage < 80,
+										"bg-red-100 border-red-400 text-red-700": aiUsage >= 80,
+									})}>
 									<span className="text-xs">AI Usage</span>
 								</div>
 							)}
 						</>
 					) : (
-                        <div className='flex justify-end'>
+						<div className="flex justify-end">
 							<span className="font-semibold bg-gray-200 text-gray-800 px-2.5 py-0.5 rounded-full mt-0.5">{examNumber}</span>
 						</div>
 					)}
@@ -236,10 +241,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 			</div>

 			<div className="w-full flex flex-col gap-1">
-                <div className={clsx(
-                    "grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2",
-                    examNumber !== undefined && "pr-10" 
-                )}>
+				<div className={clsx("grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2", examNumber !== undefined && "pr-10")}>
 					{aggregatedLevels.map(({module, level}) => (
 						<ModuleBadge key={module} module={module} level={level} />
 					))}
@@ -264,7 +266,10 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 					correct / total >= 0.7 && "hover:border-mti-purple",
 					correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
 					correct / total < 0.3 && "hover:border-mti-rose",
-                    typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.some(exam => exam.includes(timestamp)) && "border-2 border-slate-600",
+					typeof selectedTrainingExams !== "undefined" &&
+						typeof timestamp === "string" &&
+						selectedTrainingExams.some((exam) => exam.includes(timestamp)) &&
+						"border-2 border-slate-600",
 				)}
 				onClick={examNumber === undefined ? selectExam : undefined}
 				style={{
--- a/src/dashboards/Student.tsx
+++ b/src/dashboards/Student.tsx
@@ -3,6 +3,7 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import InviteCard from "@/components/Medium/InviteCard";
 import ProfileSummary from "@/components/ProfileSummary";
 import useAssignments from "@/hooks/useAssignments";
+import useGradingSystem from "@/hooks/useGrading";
 import useInvites from "@/hooks/useInvites";
 import useStats from "@/hooks/useStats";
 import useUsers from "@/hooks/useUsers";
@@ -13,7 +14,7 @@ import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {getUserCorporate} from "@/utils/groups";
 import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
-import {getLevelLabel, getLevelScore} from "@/utils/score";
+import {getGradingLabel, getLevelLabel, getLevelScore} from "@/utils/score";
 import {averageScore, groupBySession} from "@/utils/stats";
 import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
 import {PayPalButtons} from "@paypal/react-paypal-js";
@@ -34,8 +35,9 @@ interface Props {
 export default function StudentDashboard({user}: Props) {
 	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();

-	const {stats} = useStats(user.id, !user?.id);
 	const {users} = useUsers();
+	const {gradingSystem} = useGradingSystem();
+	const {stats} = useStats(user.id, !user?.id);
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
 	const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user.id});

@@ -173,10 +175,7 @@ export default function StudentDashboard({user}: Props) {
 											<div
 												className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
 												data-tip="Your screen size is too small to perform an assignment">
-												<Button
-													disabled={!assignment.start}
-													className="h-full w-full !rounded-xl"
-													variant="outline">
+												<Button disabled={!assignment.start} className="h-full w-full !rounded-xl" variant="outline">
 													Start
 												</Button>
 											</div>
@@ -243,7 +242,7 @@ export default function StudentDashboard({user}: Props) {
 									<div className="flex w-full justify-between">
 										<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
 										<span className="text-mti-gray-dim text-sm font-normal">
-											{module === "level" && `English Level: ${getLevelLabel(level).join(" / ")}`}
+											{module === "level" && !!gradingSystem && `English Level: ${getGradingLabel(level, gradingSystem.steps)}`}
 											{module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
 										</span>
 									</div>
@@ -252,9 +251,9 @@ export default function StudentDashboard({user}: Props) {
 									<ProgressBar
 										color={module}
 										label=""
-										mark={Math.round((desiredLevel * 100) / 9)}
+										mark={module === "level" ? undefined : Math.round((desiredLevel * 100) / 9)}
 										markLabel={`Desired Level: ${desiredLevel}`}
-										percentage={Math.round((level * 100) / 9)}
+										percentage={module === "level" ? level : Math.round((level * 100) / 9)}
 										className="h-2 w-full"
 									/>
 								</div>
--- a/src/exams/Finish.tsx
+++ b/src/exams/Finish.tsx
@@ -4,7 +4,7 @@ import {moduleResultText} from "@/constants/ielts";
 import {Module} from "@/interfaces";
 import {User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {calculateBandScore} from "@/utils/score";
+import {calculateBandScore, getGradingLabel} from "@/utils/score";
 import clsx from "clsx";
 import Link from "next/link";
 import {useRouter} from "next/router";
@@ -26,6 +26,7 @@ import {capitalize} from "lodash";
 import Modal from "@/components/Modal";
 import {UserSolution} from "@/interfaces/exam";
 import ai_usage from "@/utils/ai.detection";
+import useGradingSystem from "@/hooks/useGrading";

 interface Score {
 	module: Module;
@@ -53,8 +54,8 @@ export default function Finish({user, scores, modules, information, solutions, i
 	const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);

 	const aiUsage = Math.round(ai_usage(solutions) * 100);
-
 	const exams = useExamStore((state) => state.exams);
+	const {gradingSystem} = useGradingSystem();

 	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);

@@ -94,10 +95,10 @@ export default function Finish({user, scores, modules, information, solutions, i

 	const showLevel = (level: number) => {
 		if (selectedModule === "level") {
-			const [levelStr, grade] = getLevelScore(level);
+			const label = getGradingLabel(level, gradingSystem?.steps || []);
 			return (
 				<div className="flex flex-col items-center justify-center gap-1">
-					<span className="text-xl font-bold">{levelStr}</span>
+					<span className="text-xl font-bold">{label}</span>
 				</div>
 			);
 		}
@@ -165,13 +166,11 @@ export default function Finish({user, scores, modules, information, solutions, i
 								<span className="font-semibold">Writing</span>
 							</div>
 							{aiUsage >= 50 && user.type !== "student" && (
-							<div className={clsx(
-								"flex items-center justify-center border px-3 h-full rounded",
-								{
-									'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
-									'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
-								}
-							)}>
+								<div
+									className={clsx("flex items-center justify-center border px-3 h-full rounded", {
+										"bg-orange-100 border-orange-400 text-orange-700": aiUsage < 80,
+										"bg-red-100 border-red-400 text-red-700": aiUsage >= 80,
+									})}>
 									<span className="text-xs">AI Usage</span>
 								</div>
 							)}
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -24,6 +24,7 @@ import { v4 as uuidv4 } from "uuid";
 import useSessions from "@/hooks/useSessions";
 import ShortUniqueId from "short-unique-id";
 import clsx from "clsx";
+import useGradingSystem from "@/hooks/useGrading";

 interface Props {
 	page: "exams" | "exercises";
@@ -56,7 +57,7 @@ export default function ExamPage({ page }: Props) {
 	const {selectedModules, setSelectedModules} = useExamStore((state) => state);
 	const {inactivity, setInactivity} = useExamStore((state) => state);
 	const {bgColor, setBgColor} = useExamStore((state) => state);
-	const setShuffleMaps = useExamStore((state) => state.setShuffles)
+	const setShuffleMaps = useExamStore((state) => state.setShuffles);

 	const {user} = useUser({redirectTo: "/login"});
 	const router = useRouter();
@@ -205,9 +206,7 @@ export default function ExamPage({ page }: Props) {
 	});

 	useEffect(() => {
-		if (showSolutions) {
-			setModuleIndex(-1);
-		}
+		if (showSolutions) setModuleIndex(-1);
 	}, [setModuleIndex, showSolutions]);

 	useEffect(() => {
@@ -277,18 +276,13 @@ export default function ExamPage({ page }: Props) {
 	}, [statsAwaitingEvaluation]);

 	useEffect(() => {
-		if (statsAwaitingEvaluation.length > 0) {
-			checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
-		}
+		if (statsAwaitingEvaluation.length > 0) checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [statsAwaitingEvaluation]);

 	useEffect(() => {
-
-		if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) {
-			setBgColor("bg-ielts-level-light");
-		}
-	}, [exam, showSolutions, setBgColor])
+		if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) setBgColor("bg-ielts-level-light");
+	}, [exam, showSolutions, setBgColor]);

 	const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
 		setTimeout(async () => {
@@ -472,7 +466,7 @@ export default function ExamPage({ page }: Props) {
 					onViewResults={(index?: number) => {
 						if (exams[0].module === "level") {
 							const levelExam = exams[0] as LevelExam;
-							const allExercises = levelExam.parts.flatMap(part => part.exercises);
+							const allExercises = levelExam.parts.flatMap((part) => part.exercises);
 							const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
 							const orderedSolutions = userSolutions.slice().sort((a, b) => {
 								const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
@@ -480,7 +474,6 @@ export default function ExamPage({ page }: Props) {
 								return indexA - indexB;
 							});
 							setUserSolutions(orderedSolutions);
-
 						} else {
 							setUserSolutions(userSolutions);
 						}
--- a/src/pages/api/grading/index.ts
+++ b/src/pages/api/grading/index.ts
@@ -34,7 +34,8 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	const snapshot = await getDoc(doc(db, "grading", req.session.user.id));
 	if (snapshot.exists()) return res.status(200).json(snapshot.data());

-	if (req.session.user.type !== "teacher" && req.session.user.type !== "student") return res.status(200).json(CEFR_STEPS);
+	if (req.session.user.type !== "teacher" && req.session.user.type !== "student")
+		return res.status(200).json({steps: CEFR_STEPS, user: req.session.user.id});

 	const corporate = await getUserCorporate(req.session.user.id);
 	if (!corporate) return res.status(200).json(CEFR_STEPS);
@@ -42,7 +43,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	const corporateSnapshot = await getDoc(doc(db, "grading", corporate.id));
 	if (corporateSnapshot.exists()) return res.status(200).json(snapshot.data());

-	return res.status(200).json(CEFR_STEPS);
+	return res.status(200).json({steps: CEFR_STEPS, user: req.session.user.id});
 }

 async function post(req: NextApiRequest, res: NextApiResponse) {
--- a/src/utils/score.ts
+++ b/src/utils/score.ts
@@ -1,5 +1,4 @@
-import {Module} from "@/interfaces";
-import {LevelScore} from "@/constants/ielts";
+import {Module, Step} from "@/interfaces";
 import {Stat, User} from "@/interfaces/user";

 type Type = "academic" | "general";
@@ -135,6 +134,8 @@ export const calculateBandScore = (correct: number, total: number, module: Modul
 	const marking = moduleMarkings[module][type];
 	const percentage = (correct * 100) / total;

+	if (module === "level") return percentage;
+
 	for (const value of Object.keys(marking)
 		.map((x) => parseFloat(x))
 		.sort((a, b) => b - a)) {
@@ -147,7 +148,11 @@ export const calculateBandScore = (correct: number, total: number, module: Modul
 };

 export const calculateAverageLevel = (levels: {[key in Module]: number}) => {
-	return Object.keys(levels).reduce((accumulator, current) => levels[current as Module] + accumulator, 0) / 5;
+	return (
+		Object.keys(levels)
+			.filter((x) => x !== "level")
+			.reduce((accumulator, current) => levels[current as Module] + accumulator, 0) / 4
+	);
 };

 export const getLevelScore = (level: number) => {
@@ -180,6 +185,14 @@ export const getLevelLabel = (level: number) => {
 	return ["Proficiency", "C2"];
 };

+export const getGradingLabel = (score: number, grading: Step[]) => {
+	for (const step of grading) {
+		if (score >= step.min && score <= step.max) return step.label;
+	}
+
+	return "N/A";
+};
+
 export const averageLevelCalculator = (users: User[], studentStats: Stat[]) => {
 	const formattedStats = studentStats
 		.map((s) => ({