devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-08-27 00:18:01 +01:00
parent a0b8521f0a
commit 0aba6355ed
6 changed files with 360 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/StatGridItem.tsx
View File

@@ -1,20 +1,20 @@
import React from 'react'; import React from "react";
import { BsClock, BsXCircle } from 'react-icons/bs'; import {BsClock, BsXCircle} from "react-icons/bs";
import clsx from 'clsx'; import clsx from "clsx";
import { Stat, User } from '@/interfaces/user'; import {Stat, User} from "@/interfaces/user";
import {Module} from "@/interfaces"; import {Module} from "@/interfaces";
import ai_usage from "@/utils/ai.detection"; import ai_usage from "@/utils/ai.detection";
import {calculateBandScore} from "@/utils/score"; import {calculateBandScore} from "@/utils/score";
import moment from 'moment'; import moment from "moment";
import { Assignment } from '@/interfaces/results'; import {Assignment} from "@/interfaces/results";
import {uuidv4} from "@firebase/util"; import {uuidv4} from "@firebase/util";
import {useRouter} from "next/router"; import {useRouter} from "next/router";
import {uniqBy} from "lodash"; import {uniqBy} from "lodash";
import {sortByModule} from "@/utils/moduleUtils"; import {sortByModule} from "@/utils/moduleUtils";
import {convertToUserSolutions} from "@/utils/stats"; import {convertToUserSolutions} from "@/utils/stats";
import {getExamById} from "@/utils/exams"; import {getExamById} from "@/utils/exams";
import { Exam, UserSolution } from '@/interfaces/exam'; import {Exam, UserSolution} from "@/interfaces/exam";
import ModuleBadge from './ModuleBadge'; import ModuleBadge from "./ModuleBadge";
const formatTimestamp = (timestamp: string | number) => { const formatTimestamp = (timestamp: string | number) => {
const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp; const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
@@ -73,10 +73,10 @@ interface StatsGridItemProps {
examNumber?: number | undefined; examNumber?: number | undefined;
stats: Stat[]; stats: Stat[];
timestamp: string | number; timestamp: string | number;
user: User, user: User;
assignments: Assignment[]; assignments: Assignment[];
users: User[]; users: User[];
training?: boolean, training?: boolean;
selectedTrainingExams?: string[]; selectedTrainingExams?: string[];
maxTrainingExams?: number; maxTrainingExams?: number;
setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>; setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
@@ -108,7 +108,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
width = undefined, width = undefined,
height = undefined, height = undefined,
examNumber = undefined, examNumber = undefined,
maxTrainingExams = undefined maxTrainingExams = undefined,
}) => { }) => {
const router = useRouter(); const router = useRouter();
const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0); 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 {timeSpent, inactivity, session} = stats[0];
const selectExam = () => { const selectExam = () => {
if (training && !isDisabled && typeof maxTrainingExams !== "undefined" && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") { if (
setSelectedTrainingExams(prevExams => { training &&
const uniqueExams = [...new Set(stats.map(stat => `${stat.module}-${stat.date}`))]; !isDisabled &&
const indexes = uniqueExams.map(exam => prevExams.indexOf(exam)).filter(index => index !== -1); 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) { if (indexes.length > 0) {
const newExams = [...prevExams]; const newExams = [...prevExams];
indexes.sort((a, b) => b - a).forEach(index => { indexes
.sort((a, b) => b - a)
.forEach((index) => {
newExams.splice(index, 1); newExams.splice(index, 1);
}); });
return newExams; return newExams;
@@ -184,8 +192,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
} }
return true; return true;
} };
const content = ( const content = (
<> <>
@@ -216,19 +223,17 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
{examNumber === undefined ? ( {examNumber === undefined ? (
<> <>
{aiUsage >= 50 && user.type !== "student" && ( {aiUsage >= 50 && user.type !== "student" && (
<div className={clsx( <div
"ml-auto border px-1 rounded w-fit mr-1", className={clsx("ml-auto border px-1 rounded w-fit mr-1", {
{ "bg-orange-100 border-orange-400 text-orange-700": aiUsage < 80,
'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80, "bg-red-100 border-red-400 text-red-700": aiUsage >= 80,
'bg-red-100 border-red-400 text-red-700': aiUsage >= 80, })}>
}
)}>
<span className="text-xs">AI Usage</span> <span className="text-xs">AI Usage</span>
</div> </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> <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>
)} )}
@@ -236,10 +241,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
</div> </div>
<div className="w-full flex flex-col gap-1"> <div className="w-full flex flex-col gap-1">
<div className={clsx( <div className={clsx("grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2", examNumber !== undefined && "pr-10")}>
"grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2",
examNumber !== undefined && "pr-10"
)}>
{aggregatedLevels.map(({module, level}) => ( {aggregatedLevels.map(({module, level}) => (
<ModuleBadge key={module} module={module} level={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.7 && "hover:border-mti-purple",
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red", correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
correct / total < 0.3 && "hover:border-mti-rose", 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} onClick={examNumber === undefined ? selectExam : undefined}
style={{ style={{

17
src/dashboards/Student.tsx
View File

@@ -3,6 +3,7 @@ import ProgressBar from "@/components/Low/ProgressBar";
import InviteCard from "@/components/Medium/InviteCard"; import InviteCard from "@/components/Medium/InviteCard";
import ProfileSummary from "@/components/ProfileSummary"; import ProfileSummary from "@/components/ProfileSummary";
import useAssignments from "@/hooks/useAssignments"; import useAssignments from "@/hooks/useAssignments";
import useGradingSystem from "@/hooks/useGrading";
import useInvites from "@/hooks/useInvites"; import useInvites from "@/hooks/useInvites";
import useStats from "@/hooks/useStats"; import useStats from "@/hooks/useStats";
import useUsers from "@/hooks/useUsers"; import useUsers from "@/hooks/useUsers";
@@ -13,7 +14,7 @@ import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams"; import {getExamById} from "@/utils/exams";
import {getUserCorporate} from "@/utils/groups"; import {getUserCorporate} from "@/utils/groups";
import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils"; 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 {averageScore, groupBySession} from "@/utils/stats";
import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js"; import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
import {PayPalButtons} from "@paypal/react-paypal-js"; import {PayPalButtons} from "@paypal/react-paypal-js";
@@ -34,8 +35,9 @@ interface Props {
export default function StudentDashboard({user}: Props) { export default function StudentDashboard({user}: Props) {
const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>(); const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
const {stats} = useStats(user.id, !user?.id);
const {users} = useUsers(); const {users} = useUsers();
const {gradingSystem} = useGradingSystem();
const {stats} = useStats(user.id, !user?.id);
const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id}); const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user.id}); const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user.id});
@@ -173,10 +175,7 @@ export default function StudentDashboard({user}: Props) {
<div <div
className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden" 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"> data-tip="Your screen size is too small to perform an assignment">
<Button <Button disabled={!assignment.start} className="h-full w-full !rounded-xl" variant="outline">
disabled={!assignment.start}
className="h-full w-full !rounded-xl"
variant="outline">
Start Start
</Button> </Button>
</div> </div>
@@ -243,7 +242,7 @@ export default function StudentDashboard({user}: Props) {
<div className="flex w-full justify-between"> <div className="flex w-full justify-between">
<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span> <span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
<span className="text-mti-gray-dim text-sm font-normal"> <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})`} {module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
</span> </span>
</div> </div>
@@ -252,9 +251,9 @@ export default function StudentDashboard({user}: Props) {
<ProgressBar <ProgressBar
color={module} color={module}
label="" label=""
mark={Math.round((desiredLevel * 100) / 9)} mark={module === "level" ? undefined : Math.round((desiredLevel * 100) / 9)}
markLabel={`Desired Level: ${desiredLevel}`} markLabel={`Desired Level: ${desiredLevel}`}
percentage={Math.round((level * 100) / 9)} percentage={module === "level" ? level : Math.round((level * 100) / 9)}
className="h-2 w-full" className="h-2 w-full"
/> />
</div> </div>

21
src/exams/Finish.tsx
View File

@@ -4,7 +4,7 @@ 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 useExamStore from "@/stores/examStore";
import {calculateBandScore} from "@/utils/score"; import {calculateBandScore, getGradingLabel} from "@/utils/score";
import clsx from "clsx"; import clsx from "clsx";
import Link from "next/link"; import Link from "next/link";
import {useRouter} from "next/router"; import {useRouter} from "next/router";
@@ -26,6 +26,7 @@ import {capitalize} from "lodash";
import Modal from "@/components/Modal"; import Modal from "@/components/Modal";
import {UserSolution} from "@/interfaces/exam"; import {UserSolution} from "@/interfaces/exam";
import ai_usage from "@/utils/ai.detection"; import ai_usage from "@/utils/ai.detection";
import useGradingSystem from "@/hooks/useGrading";
interface Score { interface Score {
module: Module; module: Module;
@@ -53,8 +54,8 @@ export default function Finish({user, scores, modules, information, solutions, i
const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false); const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);
const aiUsage = Math.round(ai_usage(solutions) * 100); const aiUsage = Math.round(ai_usage(solutions) * 100);
const exams = useExamStore((state) => state.exams); const exams = useExamStore((state) => state.exams);
const {gradingSystem} = useGradingSystem();
useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]); 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) => { const showLevel = (level: number) => {
if (selectedModule === "level") { if (selectedModule === "level") {
const [levelStr, grade] = getLevelScore(level); const label = getGradingLabel(level, gradingSystem?.steps || []);
return ( return (
<div className="flex flex-col items-center justify-center gap-1"> <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> </div>
); );
} }
@@ -165,13 +166,11 @@ export default function Finish({user, scores, modules, information, solutions, i
<span className="font-semibold">Writing</span> <span className="font-semibold">Writing</span>
</div> </div>
{aiUsage >= 50 && user.type !== "student" && ( {aiUsage >= 50 && user.type !== "student" && (
<div className={clsx( <div
"flex items-center justify-center border px-3 h-full rounded", 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-orange-100 border-orange-400 text-orange-700': aiUsage < 80, "bg-red-100 border-red-400 text-red-700": aiUsage >= 80,
'bg-red-100 border-red-400 text-red-700': aiUsage >= 80, })}>
}
)}>
<span className="text-xs">AI Usage</span> <span className="text-xs">AI Usage</span>
</div> </div>
)} )}

21
src/pages/(exam)/ExamPage.tsx
View File

@@ -24,6 +24,7 @@ import { v4 as uuidv4 } from "uuid";
import useSessions from "@/hooks/useSessions"; import useSessions from "@/hooks/useSessions";
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
import clsx from "clsx"; import clsx from "clsx";
import useGradingSystem from "@/hooks/useGrading";
interface Props { interface Props {
page: "exams" | "exercises"; page: "exams" | "exercises";
@@ -56,7 +57,7 @@ export default function ExamPage({ page }: Props) {
const {selectedModules, setSelectedModules} = useExamStore((state) => state); const {selectedModules, setSelectedModules} = useExamStore((state) => state);
const {inactivity, setInactivity} = useExamStore((state) => state); const {inactivity, setInactivity} = useExamStore((state) => state);
const {bgColor, setBgColor} = 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 {user} = useUser({redirectTo: "/login"});
const router = useRouter(); const router = useRouter();
@@ -205,9 +206,7 @@ export default function ExamPage({ page }: Props) {
}); });
useEffect(() => { useEffect(() => {
if (showSolutions) { if (showSolutions) setModuleIndex(-1);
setModuleIndex(-1);
}
}, [setModuleIndex, showSolutions]); }, [setModuleIndex, showSolutions]);
useEffect(() => { useEffect(() => {
@@ -277,18 +276,13 @@ export default function ExamPage({ page }: Props) {
}, [statsAwaitingEvaluation]); }, [statsAwaitingEvaluation]);
useEffect(() => { useEffect(() => {
if (statsAwaitingEvaluation.length > 0) { if (statsAwaitingEvaluation.length > 0) checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
}
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [statsAwaitingEvaluation]); }, [statsAwaitingEvaluation]);
useEffect(() => { useEffect(() => {
if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) setBgColor("bg-ielts-level-light");
if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) { }, [exam, showSolutions, setBgColor]);
setBgColor("bg-ielts-level-light");
}
}, [exam, showSolutions, setBgColor])
const checkIfStatsHaveBeenEvaluated = (ids: string[]) => { const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
setTimeout(async () => { setTimeout(async () => {
@@ -472,7 +466,7 @@ export default function ExamPage({ page }: Props) {
onViewResults={(index?: number) => { onViewResults={(index?: number) => {
if (exams[0].module === "level") { if (exams[0].module === "level") {
const levelExam = exams[0] as LevelExam; 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 exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
const orderedSolutions = userSolutions.slice().sort((a, b) => { const orderedSolutions = userSolutions.slice().sort((a, b) => {
const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity; const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
@@ -480,7 +474,6 @@ export default function ExamPage({ page }: Props) {
return indexA - indexB; return indexA - indexB;
}); });
setUserSolutions(orderedSolutions); setUserSolutions(orderedSolutions);
} else { } else {
setUserSolutions(userSolutions); setUserSolutions(userSolutions);
} }

5
src/pages/api/grading/index.ts
View File

@@ -34,7 +34,8 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
const snapshot = await getDoc(doc(db, "grading", req.session.user.id)); const snapshot = await getDoc(doc(db, "grading", req.session.user.id));
if (snapshot.exists()) return res.status(200).json(snapshot.data()); 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); const corporate = await getUserCorporate(req.session.user.id);
if (!corporate) return res.status(200).json(CEFR_STEPS); 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)); const corporateSnapshot = await getDoc(doc(db, "grading", corporate.id));
if (corporateSnapshot.exists()) return res.status(200).json(snapshot.data()); 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) { async function post(req: NextApiRequest, res: NextApiResponse) {

19
src/utils/score.ts
View File

@@ -1,5 +1,4 @@
import {Module} from "@/interfaces"; import {Module, Step} from "@/interfaces";
import {LevelScore} from "@/constants/ielts";
import {Stat, User} from "@/interfaces/user"; import {Stat, User} from "@/interfaces/user";
type Type = "academic" | "general"; type Type = "academic" | "general";
@@ -135,6 +134,8 @@ export const calculateBandScore = (correct: number, total: number, module: Modul
const marking = moduleMarkings[module][type]; const marking = moduleMarkings[module][type];
const percentage = (correct * 100) / total; const percentage = (correct * 100) / total;
if (module === "level") return percentage;
for (const value of Object.keys(marking) for (const value of Object.keys(marking)
.map((x) => parseFloat(x)) .map((x) => parseFloat(x))
.sort((a, b) => b - a)) { .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}) => { 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) => { export const getLevelScore = (level: number) => {
@@ -180,6 +185,14 @@ export const getLevelLabel = (level: number) => {
return ["Proficiency", "C2"]; 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[]) => { export const averageLevelCalculator = (users: User[], studentStats: Stat[]) => {
const formattedStats = studentStats const formattedStats = studentStats
.map((s) => ({ .map((s) => ({