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

Added a button to review the exam from the selected module forward

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-04-21 21:29:43 +01:00
parent f76b7578a6
commit 0f8f9bc05b
2 changed files with 814 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/exams/Finish.tsx
View File

@@ -9,9 +9,19 @@ import clsx from "clsx";
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 {
BsArrowCounterclockwise,
BsBook,
BsClipboard,
BsEyeFill,
BsHeadphones,
BsMegaphone,
BsPen,
BsShareFill,
} from "react-icons/bs";
import { LevelScore } from "@/constants/ielts";
import { getLevelScore } from "@/utils/score";
import { capitalize } from "lodash";
interface Score {
module: Module;
@@ -25,18 +35,30 @@ interface Props {
modules: Module[];
scores: Score[];
isLoading: boolean;
onViewResults: () => void;
onViewResults: (moduleIndex?: number) => void;
}
export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
export default function Finish({
user,
scores,
modules,
isLoading,
onViewResults,
}: Props) {
const [selectedModule, setSelectedModule] = useState(modules[0]);
const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
const [selectedScore, setSelectedScore] = useState<Score>(
scores.find((x) => x.module === modules[0])!,
);
const exams = useExamStore((state) => state.exams);
useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
useEffect(
() => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
[scores, selectedModule],
);
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",
@@ -68,7 +90,12 @@ 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 bandScore: number = calculateBandScore(
selectedScore.correct,
selectedScore.total,
selectedModule,
user.focus,
);
const showLevel = (level: number) => {
if (selectedModule === "level") {
@@ -99,8 +126,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
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" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-reading",
)}>
selectedModule === "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>
@@ -110,8 +140,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
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" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
)}>
selectedModule === "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>
@@ -121,8 +154,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
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",
)}>
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>
@@ -132,8 +168,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
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" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
)}>
selectedModule === "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>
@@ -143,8 +182,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
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" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
)}>
selectedModule === "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>
@@ -152,8 +194,18 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
</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 className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
<span className={clsx("text-center text-2xl font-bold", moduleColors[selectedModule].progress)}>
<span
className={clsx(
"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!
@@ -162,22 +214,30 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
)}
{!isLoading && (
<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
<span className="max-w-3xl">
{moduleResultText(selectedModule, bandScore)}
</span>
<div className="flex gap-9 px-16">
<div
className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
className={clsx(
"radial-progress overflow-hidden",
moduleColors[selectedModule].progress,
)}
style={
{
"--value": (selectedScore.correct / selectedScore.total) * 100,
"--value":
(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>
@@ -188,7 +248,12 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
<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>
@@ -196,7 +261,9 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
<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">{selectedScore.correct.toString().padStart(2, "0")}</span>
<span className="text-mti-purple-light">
{selectedScore.correct.toString().padStart(2, "0")}
</span>
<span className="text-lg">Correct</span>
</div>
</div>
@@ -204,7 +271,9 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
<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).toString().padStart(2, "0")}
{(selectedScore.total - selectedScore.correct)
.toString()
.padStart(2, "0")}
</span>
<span className="text-lg">Wrong</span>
</div>
@@ -224,18 +293,31 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
<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>
</div>
<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">
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"
>
<BsEyeFill className="h-7 w-7 text-white" />
</button>
<span>Review Answers</span>
<span>Review All</span>
</div>
<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button
onClick={() =>
onViewResults(modules.findIndex((x) => x === selectedModule))
}
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 {capitalize(selectedModule)}</span>
</div>
</div>

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

@@ -15,7 +15,10 @@ import useUser from "@/hooks/useUser";
import { Exam, UserSolution, Variant } from "@/interfaces/exam";
import { Stat } from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
import {
evaluateSpeakingAnswer,
evaluateWritingAnswer,
} from "@/utils/evaluation";
import { defaultExamUserSolutions, getExam } from "@/utils/exams";
import axios from "axios";
import { useRouter } from "next/router";
@@ -34,7 +37,9 @@ export default function ExamPage({page}: Props) {
const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
const [showAbandonPopup, setShowAbandonPopup] = useState(false);
const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<
string[]
>([]);
const [timeSpent, setTimeSpent] = useState(0);
const resetStore = useExamStore((state) => state.reset);
@@ -52,7 +57,9 @@ export default function ExamPage({page}: Props) {
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 { selectedModules, setSelectedModules } = useExamStore(
(state) => state,
);
const { user } = useUser({ redirectTo: "/login" });
const router = useRouter();
@@ -90,7 +97,10 @@ export default function ExamPage({page}: Props) {
});
};
useEffect(() => setTimeSpent((prev) => prev + initialTimeSpent), [initialTimeSpent]);
useEffect(
() => setTimeSpent((prev) => prev + initialTimeSpent),
[initialTimeSpent],
);
useEffect(() => {
if (userSolutions.length === 0 && exams.length > 0) {
@@ -112,10 +122,28 @@ export default function ExamPage({page}: Props) {
)
saveSession();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [assignment, exam, exams, moduleIndex, selectedModules, sessionId, userSolutions, user, exerciseIndex, partIndex, questionIndex]);
}, [
assignment,
exam,
exams,
moduleIndex,
selectedModules,
sessionId,
userSolutions,
user,
exerciseIndex,
partIndex,
questionIndex,
]);
useEffect(() => {
if (timeSpent % 20 === 0 && timeSpent > 0 && moduleIndex < selectedModules.length && !showSolutions) saveSession();
if (
timeSpent % 20 === 0 &&
timeSpent > 0 &&
moduleIndex < selectedModules.length &&
!showSolutions
)
saveSession();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [timeSpent]);
@@ -149,11 +177,20 @@ export default function ExamPage({page}: Props) {
useEffect(() => {
(async () => {
if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
if (
selectedModules.length > 0 &&
exams.length > 0 &&
moduleIndex < selectedModules.length
) {
const nextExam = exams[moduleIndex];
if (partIndex === -1 && nextExam.module !== "listening") setPartIndex(0);
if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam.module)) setExerciseIndex(0);
if (partIndex === -1 && nextExam.module !== "listening")
setPartIndex(0);
if (
exerciseIndex === -1 &&
!["reading", "listening"].includes(nextExam?.module)
)
setExerciseIndex(0);
setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
}
})();
@@ -168,7 +205,9 @@ export default function ExamPage({page}: Props) {
module,
avoidRepeated,
variant,
user?.type === "student" || user?.type === "developer" ? user.preferredGender : undefined,
user?.type === "student" || user?.type === "developer"
? user.preferredGender
: undefined,
),
);
Promise.all(examPromises).then((values) => {
@@ -185,7 +224,13 @@ export default function ExamPage({page}: Props) {
}, [selectedModules, setExams, exams]);
useEffect(() => {
if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
if (
selectedModules.length > 0 &&
exams.length !== 0 &&
moduleIndex >= selectedModules.length &&
!hasBeenUploaded &&
!showSolutions
) {
const newStats: Stat[] = userSolutions.map((solution) => ({
...solution,
id: solution.id || uuidv4(),
@@ -221,10 +266,17 @@ export default function ExamPage({page}: Props) {
const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
setTimeout(async () => {
try {
const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
const solutionsEvaluated = awaitedStats.every((stat) => stat.solutions.every((x) => x.evaluation !== null));
const awaitedStats = await Promise.all(
ids.map(
async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data,
),
);
const solutionsEvaluated = awaitedStats.every((stat) =>
stat.solutions.every((x) => x.evaluation !== null),
);
if (solutionsEvaluated) {
const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
const statsUserSolutions: UserSolution[] = awaitedStats.map(
(stat) => ({
id: stat.id,
exercise: stat.exercise,
score: stat.score,
@@ -232,15 +284,20 @@ export default function ExamPage({page}: Props) {
type: stat.type,
exam: stat.exam,
module: stat.module,
}));
}),
);
const updatedUserSolutions = userSolutions.map((x) => {
const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
const respectiveSolution = statsUserSolutions.find(
(y) => y.exercise === x.exercise,
);
return respectiveSolution ? respectiveSolution : x;
});
setUserSolutions(updatedUserSolutions);
return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
return setStatsAwaitingEvaluation((prev) =>
prev.filter((x) => !ids.includes(x)),
);
}
return checkIfStatsHaveBeenEvaluated(ids);
@@ -256,7 +313,8 @@ export default function ExamPage({page}: Props) {
Object.assign(p, {
exercises: p.exercises.map((x) =>
Object.assign(x, {
userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
userSolutions: userSolutions.find((y) => x.id === y.exercise)
?.solutions,
}),
),
}),
@@ -266,7 +324,8 @@ export default function ExamPage({page}: Props) {
const exercises = exam.exercises.map((x) =>
Object.assign(x, {
userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
userSolutions: userSolutions.find((y) => x.id === y.exercise)
?.solutions,
}),
);
return Object.assign(exam, { exercises });
@@ -280,7 +339,12 @@ export default function ExamPage({page}: Props) {
if (exam && !solutionExams.includes(exam.id)) return;
if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
if (
exam &&
(exam.module === "writing" || exam.module === "speaking") &&
solutions.length > 0 &&
!showSolutions
) {
setHasBeenUploaded(true);
setIsEvaluationLoading(true);
@@ -289,22 +353,45 @@ export default function ExamPage({page}: Props) {
exam.exercises.map(async (exercise, index) => {
const evaluationID = uuidv4();
if (exercise.type === "writing")
return await evaluateWritingAnswer(exercise, index + 1, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
return await evaluateWritingAnswer(
exercise,
index + 1,
solutions.find((x) => x.exercise === exercise.id)!,
evaluationID,
);
if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
if (
exercise.type === "interactiveSpeaking" ||
exercise.type === "speaking"
)
return await evaluateSpeakingAnswer(
exercise,
solutions.find((x) => x.exercise === exercise.id)!,
evaluationID,
);
}),
)
).filter((x) => !!x) as UserSolution[];
newSolutions = [...newSolutions.filter((x) => !responses.map((y) => y.exercise).includes(x.exercise)), ...responses];
setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
newSolutions = [
...newSolutions.filter(
(x) => !responses.map((y) => y.exercise).includes(x.exercise),
),
...responses,
];
setStatsAwaitingEvaluation((prev) => [
...prev,
...responses.filter((x) => !!x).map((r) => (r as any).id),
]);
setHasBeenUploaded(false);
}
axios.get("/api/stats/update");
setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...newSolutions]);
setUserSolutions([
...userSolutions.filter((x) => !solutionIds.includes(x.exercise)),
...newSolutions,
]);
setModuleIndex(moduleIndex + 1);
setPartIndex(-1);
@@ -312,7 +399,12 @@ export default function ExamPage({page}: Props) {
setQuestionIndex(0);
};
const aggregateScoresByModule = (): {module: Module; total: number; missing: number; correct: number}[] => {
const aggregateScoresByModule = (): {
module: Module;
total: number;
missing: number;
correct: number;
}[] => {
const scores: {
[key in Module]: { total: number; missing: number; correct: number };
} = {
@@ -345,7 +437,12 @@ export default function ExamPage({page}: Props) {
userSolutions.forEach((x) => {
const examModule =
x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
x.module ||
(x.type === "writing"
? "writing"
: x.type === "speaking" || x.type === "interactiveSpeaking"
? "speaking"
: undefined);
scores[examModule!] = {
total: scores[examModule!].total + x.score.total,
@@ -382,10 +479,12 @@ export default function ExamPage({page}: Props) {
isLoading={isEvaluationLoading}
user={user!}
modules={selectedModules}
onViewResults={() => {
onViewResults={(index?: number) => {
setShowSolutions(true);
setModuleIndex(0);
setExerciseIndex(["reading", "listening"].includes(exams[0].module) ? -1 : 0);
setModuleIndex(index || 0);
setExerciseIndex(
["reading", "listening"].includes(exams[0].module) ? -1 : 0,
);
setPartIndex(exams[0].module === "listening" ? -1 : 0);
setExam(exams[0]);
}}
@@ -395,23 +494,49 @@ export default function ExamPage({page}: Props) {
}
if (exam && exam.module === "reading") {
return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
return (
<Reading
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
}
if (exam && exam.module === "listening") {
return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
return (
<Listening
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
}
if (exam && exam.module === "writing") {
return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
return (
<Writing
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
}
if (exam && exam.module === "speaking") {
return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
return (
<Speaking
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
}
if (exam && exam.module === "level") {
return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
return (
<Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />
);
}
return <>Loading...</>;
@@ -424,8 +549,13 @@ export default function ExamPage({page}: Props) {
<Layout
user={user}
className="justify-between"
focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
focusMode={
selectedModules.length !== 0 &&
!showSolutions &&
moduleIndex < selectedModules.length
}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
<>
{renderScreen()}
{!showSolutions && moduleIndex < selectedModules.length && (