ENCOA-90: Updated the instances of Level test to use the Grading System
This commit is contained in:
Tiago Ribeiro
@@ -1,298 +1,303 @@
|
||||
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 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 { 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 {calculateBandScore} from "@/utils/score";
|
||||
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";
|
||||
|
||||
const formatTimestamp = (timestamp: string | number) => {
|
||||
const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
|
||||
const date = moment(time);
|
||||
const formatter = "YYYY/MM/DD - HH:mm";
|
||||
return date.format(formatter);
|
||||
const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
|
||||
const date = moment(time);
|
||||
const formatter = "YYYY/MM/DD - HH:mm";
|
||||
return date.format(formatter);
|
||||
};
|
||||
|
||||
const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number; missing: number; correct: number }[] => {
|
||||
const scores: {
|
||||
[key in Module]: { total: number; missing: number; correct: number };
|
||||
} = {
|
||||
reading: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
listening: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
writing: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
speaking: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
level: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
};
|
||||
const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
|
||||
const scores: {
|
||||
[key in Module]: {total: number; missing: number; correct: number};
|
||||
} = {
|
||||
reading: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
listening: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
writing: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
speaking: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
level: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
};
|
||||
|
||||
stats.forEach((x) => {
|
||||
scores[x.module!] = {
|
||||
total: scores[x.module!].total + x.score.total,
|
||||
correct: scores[x.module!].correct + x.score.correct,
|
||||
missing: scores[x.module!].missing + x.score.missing,
|
||||
};
|
||||
});
|
||||
stats.forEach((x) => {
|
||||
scores[x.module!] = {
|
||||
total: scores[x.module!].total + x.score.total,
|
||||
correct: scores[x.module!].correct + x.score.correct,
|
||||
missing: scores[x.module!].missing + x.score.missing,
|
||||
};
|
||||
});
|
||||
|
||||
return Object.keys(scores)
|
||||
.filter((x) => scores[x as Module].total > 0)
|
||||
.map((x) => ({ module: x as Module, ...scores[x as Module] }));
|
||||
return Object.keys(scores)
|
||||
.filter((x) => scores[x as Module].total > 0)
|
||||
.map((x) => ({module: x as Module, ...scores[x as Module]}));
|
||||
};
|
||||
|
||||
interface StatsGridItemProps {
|
||||
width?: string | undefined;
|
||||
height?: string | undefined;
|
||||
examNumber?: number | undefined;
|
||||
stats: Stat[];
|
||||
timestamp: string | number;
|
||||
user: User,
|
||||
assignments: Assignment[];
|
||||
users: User[];
|
||||
training?: boolean,
|
||||
selectedTrainingExams?: string[];
|
||||
maxTrainingExams?: number;
|
||||
setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
|
||||
setExams: (exams: Exam[]) => void;
|
||||
setShowSolutions: (show: boolean) => void;
|
||||
setUserSolutions: (solutions: UserSolution[]) => void;
|
||||
setSelectedModules: (modules: Module[]) => void;
|
||||
setInactivity: (inactivity: number) => void;
|
||||
setTimeSpent: (time: number) => void;
|
||||
renderPdfIcon: (session: string, color: string, textColor: string) => React.ReactNode;
|
||||
width?: string | undefined;
|
||||
height?: string | undefined;
|
||||
examNumber?: number | undefined;
|
||||
stats: Stat[];
|
||||
timestamp: string | number;
|
||||
user: User;
|
||||
assignments: Assignment[];
|
||||
users: User[];
|
||||
training?: boolean;
|
||||
selectedTrainingExams?: string[];
|
||||
maxTrainingExams?: number;
|
||||
setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
|
||||
setExams: (exams: Exam[]) => void;
|
||||
setShowSolutions: (show: boolean) => void;
|
||||
setUserSolutions: (solutions: UserSolution[]) => void;
|
||||
setSelectedModules: (modules: Module[]) => void;
|
||||
setInactivity: (inactivity: number) => void;
|
||||
setTimeSpent: (time: number) => void;
|
||||
renderPdfIcon: (session: string, color: string, textColor: string) => React.ReactNode;
|
||||
}
|
||||
|
||||
const StatsGridItem: React.FC<StatsGridItemProps> = ({
|
||||
stats,
|
||||
timestamp,
|
||||
user,
|
||||
assignments,
|
||||
users,
|
||||
training,
|
||||
selectedTrainingExams,
|
||||
setSelectedTrainingExams,
|
||||
setExams,
|
||||
setShowSolutions,
|
||||
setUserSolutions,
|
||||
setSelectedModules,
|
||||
setInactivity,
|
||||
setTimeSpent,
|
||||
renderPdfIcon,
|
||||
width = undefined,
|
||||
height = undefined,
|
||||
examNumber = undefined,
|
||||
maxTrainingExams = undefined
|
||||
stats,
|
||||
timestamp,
|
||||
user,
|
||||
assignments,
|
||||
users,
|
||||
training,
|
||||
selectedTrainingExams,
|
||||
setSelectedTrainingExams,
|
||||
setExams,
|
||||
setShowSolutions,
|
||||
setUserSolutions,
|
||||
setSelectedModules,
|
||||
setInactivity,
|
||||
setTimeSpent,
|
||||
renderPdfIcon,
|
||||
width = undefined,
|
||||
height = undefined,
|
||||
examNumber = undefined,
|
||||
maxTrainingExams = undefined,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
|
||||
const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
|
||||
const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
|
||||
const assignmentID = stats.reduce((_, current) => current.assignment as any, "");
|
||||
const assignment = assignments.find((a) => a.id === assignmentID);
|
||||
const isDisabled = stats.some((x) => x.isDisabled);
|
||||
const router = useRouter();
|
||||
const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
|
||||
const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
|
||||
const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
|
||||
const assignmentID = stats.reduce((_, current) => current.assignment as any, "");
|
||||
const assignment = assignments.find((a) => a.id === assignmentID);
|
||||
const isDisabled = stats.some((x) => x.isDisabled);
|
||||
|
||||
const aiUsage = Math.round(ai_usage(stats) * 100);
|
||||
const aiUsage = Math.round(ai_usage(stats) * 100);
|
||||
|
||||
const aggregatedLevels = aggregatedScores.map((x) => ({
|
||||
module: x.module,
|
||||
level: calculateBandScore(x.correct, x.total, x.module, user.focus),
|
||||
}));
|
||||
const aggregatedLevels = aggregatedScores.map((x) => ({
|
||||
module: x.module,
|
||||
level: calculateBandScore(x.correct, x.total, x.module, user.focus),
|
||||
}));
|
||||
|
||||
const textColor = clsx(
|
||||
correct / total >= 0.7 && "text-mti-purple",
|
||||
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
|
||||
correct / total < 0.3 && "text-mti-rose",
|
||||
);
|
||||
const textColor = clsx(
|
||||
correct / total >= 0.7 && "text-mti-purple",
|
||||
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
|
||||
correct / total < 0.3 && "text-mti-rose",
|
||||
);
|
||||
|
||||
const { timeSpent, inactivity, session } = stats[0];
|
||||
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 (indexes.length > 0) {
|
||||
const newExams = [...prevExams];
|
||||
indexes.sort((a, b) => b - a).forEach(index => {
|
||||
newExams.splice(index, 1);
|
||||
});
|
||||
return newExams;
|
||||
} else {
|
||||
if (prevExams.length + uniqueExams.length <= maxTrainingExams) {
|
||||
return [...prevExams, ...uniqueExams];
|
||||
} else {
|
||||
return prevExams;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const examPromises = uniqBy(stats, "exam").map((stat) => {
|
||||
return getExamById(stat.module, stat.exam);
|
||||
});
|
||||
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 (indexes.length > 0) {
|
||||
const newExams = [...prevExams];
|
||||
indexes
|
||||
.sort((a, b) => b - a)
|
||||
.forEach((index) => {
|
||||
newExams.splice(index, 1);
|
||||
});
|
||||
return newExams;
|
||||
} else {
|
||||
if (prevExams.length + uniqueExams.length <= maxTrainingExams) {
|
||||
return [...prevExams, ...uniqueExams];
|
||||
} else {
|
||||
return prevExams;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const examPromises = uniqBy(stats, "exam").map((stat) => {
|
||||
return getExamById(stat.module, stat.exam);
|
||||
});
|
||||
|
||||
if (isDisabled) return;
|
||||
if (isDisabled) return;
|
||||
|
||||
Promise.all(examPromises).then((exams) => {
|
||||
if (exams.every((x) => !!x)) {
|
||||
if (!!timeSpent) setTimeSpent(timeSpent);
|
||||
if (!!inactivity) setInactivity(inactivity);
|
||||
setUserSolutions(convertToUserSolutions(stats));
|
||||
setShowSolutions(true);
|
||||
setExams(exams.map((x) => x!).sort(sortByModule));
|
||||
setSelectedModules(
|
||||
exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
);
|
||||
router.push("/exercises");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
Promise.all(examPromises).then((exams) => {
|
||||
if (exams.every((x) => !!x)) {
|
||||
if (!!timeSpent) setTimeSpent(timeSpent);
|
||||
if (!!inactivity) setInactivity(inactivity);
|
||||
setUserSolutions(convertToUserSolutions(stats));
|
||||
setShowSolutions(true);
|
||||
setExams(exams.map((x) => x!).sort(sortByModule));
|
||||
setSelectedModules(
|
||||
exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
);
|
||||
router.push("/exercises");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const shouldRenderPDFIcon = () => {
|
||||
if(assignment) {
|
||||
return assignment.released;
|
||||
}
|
||||
const shouldRenderPDFIcon = () => {
|
||||
if (assignment) {
|
||||
return assignment.released;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<div className="w-full flex justify-between -md:items-center 2xl:items-center">
|
||||
<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
|
||||
<span className="font-medium">{formatTimestamp(timestamp)}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{!!timeSpent && (
|
||||
<span className="text-sm flex gap-2 items-center tooltip" data-tip="Time Spent">
|
||||
<BsClock /> {Math.floor(timeSpent / 60)} minutes
|
||||
</span>
|
||||
)}
|
||||
{!!inactivity && (
|
||||
<span className="text-sm flex gap-2 items-center tooltip" data-tip="Inactivity">
|
||||
<BsXCircle /> {Math.floor(inactivity / 60)} minutes
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-row gap-2">
|
||||
<span className={textColor}>
|
||||
Level{" "}
|
||||
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
|
||||
</span>
|
||||
{shouldRenderPDFIcon() && renderPdfIcon(session, textColor, textColor)}
|
||||
</div>
|
||||
{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,
|
||||
})}>
|
||||
<span className="text-xs">AI Usage</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<div className="w-full flex justify-between -md:items-center 2xl:items-center">
|
||||
<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
|
||||
<span className="font-medium">{formatTimestamp(timestamp)}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{!!timeSpent && (
|
||||
<span className="text-sm flex gap-2 items-center tooltip" data-tip="Time Spent">
|
||||
<BsClock /> {Math.floor(timeSpent / 60)} minutes
|
||||
</span>
|
||||
)}
|
||||
{!!inactivity && (
|
||||
<span className="text-sm flex gap-2 items-center tooltip" data-tip="Inactivity">
|
||||
<BsXCircle /> {Math.floor(inactivity / 60)} minutes
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-row gap-2">
|
||||
<span className={textColor}>
|
||||
Level{" "}
|
||||
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
|
||||
</span>
|
||||
{shouldRenderPDFIcon() && renderPdfIcon(session, textColor, textColor)}
|
||||
</div>
|
||||
{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,
|
||||
}
|
||||
)}>
|
||||
<span className="text-xs">AI Usage</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</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")}>
|
||||
{aggregatedLevels.map(({module, level}) => (
|
||||
<ModuleBadge key={module} module={module} level={level} />
|
||||
))}
|
||||
</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"
|
||||
)}>
|
||||
{aggregatedLevels.map(({ module, level }) => (
|
||||
<ModuleBadge key={module} module={module} level={level} />
|
||||
))}
|
||||
</div>
|
||||
{assignment && (
|
||||
<span className="font-light text-sm">
|
||||
Assignment: {assignment.name}, Teacher: {users.find((u) => u.id === assignment.assigner)?.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
{assignment && (
|
||||
<span className="font-light text-sm">
|
||||
Assignment: {assignment.name}, Teacher: {users.find((u) => u.id === assignment.assigner)?.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
|
||||
isDisabled && "grayscale tooltip",
|
||||
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",
|
||||
)}
|
||||
onClick={examNumber === undefined ? selectExam : undefined}
|
||||
style={{
|
||||
...(width !== undefined && { width }),
|
||||
...(height !== undefined && { height }),
|
||||
}}
|
||||
data-tip="This exam is still being evaluated..."
|
||||
role="button">
|
||||
{content}
|
||||
</div>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
|
||||
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",
|
||||
)}
|
||||
data-tip="Your screen size is too small to view previous exams."
|
||||
style={{
|
||||
...(width !== undefined && { width }),
|
||||
...(height !== undefined && { height }),
|
||||
}}
|
||||
role="button">
|
||||
{content}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
|
||||
isDisabled && "grayscale tooltip",
|
||||
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",
|
||||
)}
|
||||
onClick={examNumber === undefined ? selectExam : undefined}
|
||||
style={{
|
||||
...(width !== undefined && {width}),
|
||||
...(height !== undefined && {height}),
|
||||
}}
|
||||
data-tip="This exam is still being evaluated..."
|
||||
role="button">
|
||||
{content}
|
||||
</div>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
|
||||
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",
|
||||
)}
|
||||
data-tip="Your screen size is too small to view previous exams."
|
||||
style={{
|
||||
...(width !== undefined && {width}),
|
||||
...(height !== undefined && {height}),
|
||||
}}
|
||||
role="button">
|
||||
{content}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatsGridItem;
|
||||
@@ -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>
|
||||
|
||||
@@ -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";
|
||||
@@ -24,8 +24,9 @@ import {LevelScore} from "@/constants/ielts";
|
||||
import {getLevelScore} from "@/utils/score";
|
||||
import {capitalize} from "lodash";
|
||||
import Modal from "@/components/Modal";
|
||||
import { UserSolution } from "@/interfaces/exam";
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -155,26 +156,24 @@ export default function Finish({user, scores, modules, information, solutions, i
|
||||
)}
|
||||
{modules.includes("writing") && (
|
||||
<div className="flex w-full justify-between items-center">
|
||||
<div
|
||||
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",
|
||||
)}>
|
||||
<BsPen className="h-6 w-6" />
|
||||
<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,
|
||||
}
|
||||
)}>
|
||||
<span className="text-xs">AI Usage</span>
|
||||
<div
|
||||
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",
|
||||
)}>
|
||||
<BsPen className="h-6 w-6" />
|
||||
<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,
|
||||
})}>
|
||||
<span className="text-xs">AI Usage</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{modules.includes("speaking") && (
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
import { Module } from "@/interfaces";
|
||||
import { useEffect, useState } from "react";
|
||||
import {Module} from "@/interfaces";
|
||||
import {useEffect, useState} from "react";
|
||||
|
||||
import AbandonPopup from "@/components/AbandonPopup";
|
||||
import Layout from "@/components/High/Layout";
|
||||
@@ -12,24 +12,25 @@ import Selection from "@/exams/Selection";
|
||||
import Speaking from "@/exams/Speaking";
|
||||
import Writing from "@/exams/Writing";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import { Exam, LevelExam, UserSolution, Variant } from "@/interfaces/exam";
|
||||
import { Stat } from "@/interfaces/user";
|
||||
import {Exam, LevelExam, UserSolution, Variant} from "@/interfaces/exam";
|
||||
import {Stat} from "@/interfaces/user";
|
||||
import useExamStore from "@/stores/examStore";
|
||||
import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
|
||||
import { defaultExamUserSolutions, getExam } from "@/utils/exams";
|
||||
import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
|
||||
import {defaultExamUserSolutions, getExam} from "@/utils/exams";
|
||||
import axios from "axios";
|
||||
import { useRouter } from "next/router";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import {useRouter} from "next/router";
|
||||
import {toast, ToastContainer} from "react-toastify";
|
||||
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";
|
||||
}
|
||||
|
||||
export default function ExamPage({ page }: Props) {
|
||||
export default function ExamPage({page}: Props) {
|
||||
const [variant, setVariant] = useState<Variant>("full");
|
||||
const [avoidRepeated, setAvoidRepeated] = useState(false);
|
||||
const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
|
||||
@@ -44,21 +45,21 @@ export default function ExamPage({ page }: Props) {
|
||||
const assignment = useExamStore((state) => state.assignment);
|
||||
const initialTimeSpent = useExamStore((state) => state.timeSpent);
|
||||
|
||||
const { exam, setExam } = useExamStore((state) => state);
|
||||
const { exams, setExams } = useExamStore((state) => state);
|
||||
const { sessionId, setSessionId } = useExamStore((state) => state);
|
||||
const { partIndex, setPartIndex } = useExamStore((state) => state);
|
||||
const { moduleIndex, setModuleIndex } = useExamStore((state) => state);
|
||||
const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
|
||||
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 { inactivity, setInactivity } = useExamStore((state) => state);
|
||||
const { bgColor, setBgColor } = useExamStore((state) => state);
|
||||
const setShuffleMaps = useExamStore((state) => state.setShuffles)
|
||||
const {exam, setExam} = useExamStore((state) => state);
|
||||
const {exams, setExams} = useExamStore((state) => state);
|
||||
const {sessionId, setSessionId} = useExamStore((state) => state);
|
||||
const {partIndex, setPartIndex} = useExamStore((state) => state);
|
||||
const {moduleIndex, setModuleIndex} = useExamStore((state) => state);
|
||||
const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
|
||||
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 {inactivity, setInactivity} = useExamStore((state) => state);
|
||||
const {bgColor, setBgColor} = useExamStore((state) => state);
|
||||
const setShuffleMaps = useExamStore((state) => state.setShuffles);
|
||||
|
||||
const { user } = useUser({ redirectTo: "/login" });
|
||||
const {user} = useUser({redirectTo: "/login"});
|
||||
const router = useRouter();
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@@ -205,9 +206,7 @@ export default function ExamPage({ page }: Props) {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (showSolutions) {
|
||||
setModuleIndex(-1);
|
||||
}
|
||||
if (showSolutions) setModuleIndex(-1);
|
||||
}, [setModuleIndex, showSolutions]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -261,11 +260,11 @@ export default function ExamPage({ page }: Props) {
|
||||
date: new Date().getTime(),
|
||||
isDisabled: solution.isDisabled,
|
||||
shuffleMaps: solution.shuffleMaps,
|
||||
...(assignment ? { assignment: assignment.id } : {}),
|
||||
...(assignment ? {assignment: assignment.id} : {}),
|
||||
}));
|
||||
|
||||
axios
|
||||
.post<{ ok: boolean }>("/api/stats", newStats)
|
||||
.post<{ok: boolean}>("/api/stats", newStats)
|
||||
.then((response) => setHasBeenUploaded(response.data.ok))
|
||||
.catch(() => setHasBeenUploaded(false));
|
||||
}
|
||||
@@ -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 () => {
|
||||
@@ -333,7 +327,7 @@ export default function ExamPage({ page }: Props) {
|
||||
),
|
||||
}),
|
||||
);
|
||||
return Object.assign(exam, { parts });
|
||||
return Object.assign(exam, {parts});
|
||||
}
|
||||
|
||||
const exercises = exam.exercises.map((x) =>
|
||||
@@ -341,7 +335,7 @@ export default function ExamPage({ page }: Props) {
|
||||
userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
|
||||
}),
|
||||
);
|
||||
return Object.assign(exam, { exercises });
|
||||
return Object.assign(exam, {exercises});
|
||||
};
|
||||
|
||||
const onFinish = async (solutions: UserSolution[]) => {
|
||||
@@ -396,7 +390,7 @@ export default function ExamPage({ page }: Props) {
|
||||
correct: number;
|
||||
}[] => {
|
||||
const scores: {
|
||||
[key in Module]: { total: number; missing: number; correct: number };
|
||||
[key in Module]: {total: number; missing: number; correct: number};
|
||||
} = {
|
||||
reading: {
|
||||
total: 0,
|
||||
@@ -438,7 +432,7 @@ export default function ExamPage({ page }: Props) {
|
||||
|
||||
return Object.keys(scores)
|
||||
.filter((x) => scores[x as Module].total > 0)
|
||||
.map((x) => ({ module: x as Module, ...scores[x as Module] }));
|
||||
.map((x) => ({module: x as Module, ...scores[x as Module]}));
|
||||
};
|
||||
|
||||
const renderScreen = () => {
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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) => ({
|
||||
|
||||
Reference in New Issue
Block a user