Redesigned the Record page along with solving some bugs on the FillBlanks
This commit is contained in:
@@ -17,7 +17,9 @@ interface WordsDrawerProps {
|
|||||||
function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}: WordsDrawerProps) {
|
function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}: WordsDrawerProps) {
|
||||||
const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
|
const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
|
||||||
|
|
||||||
useEffect(() => setSelectedWord(previouslySelectedWord), [previouslySelectedWord]);
|
useEffect(() => {
|
||||||
|
console.log({previouslySelectedWord}), setSelectedWord(previouslySelectedWord);
|
||||||
|
}, [previouslySelectedWord]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -79,11 +81,11 @@ export default function FillBlanks({
|
|||||||
}: FillBlanksExercise & CommonProps) {
|
}: FillBlanksExercise & CommonProps) {
|
||||||
const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
|
const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
|
||||||
const [currentBlankId, setCurrentBlankId] = useState<string>();
|
const [currentBlankId, setCurrentBlankId] = useState<string>();
|
||||||
const [blankSelectedWord, setBlankSelectedWord] = useState<string>();
|
const [isDrawerShowing, setIsDrawerShowing] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setBlankSelectedWord(currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined);
|
setTimeout(() => setIsDrawerShowing(!!currentBlankId), 100);
|
||||||
}, [answers, currentBlankId]);
|
}, [currentBlankId]);
|
||||||
|
|
||||||
const calculateScore = () => {
|
const calculateScore = () => {
|
||||||
const total = text.match(/({{\d+}})/g)?.length || 0;
|
const total = text.match(/({{\d+}})/g)?.length || 0;
|
||||||
@@ -120,17 +122,19 @@ export default function FillBlanks({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-col gap-4 mt-4 h-full mb-20">
|
<div className="flex flex-col gap-4 mt-4 h-full mb-20">
|
||||||
<WordsDrawer
|
{(!!currentBlankId || isDrawerShowing) && (
|
||||||
blankId={currentBlankId}
|
<WordsDrawer
|
||||||
words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
|
blankId={currentBlankId}
|
||||||
previouslySelectedWord={blankSelectedWord}
|
words={words.map((word) => ({word, isDisabled: allowRepetition ? false : answers.map((x) => x.solution).includes(word)}))}
|
||||||
isOpen={!!currentBlankId}
|
previouslySelectedWord={currentBlankId ? answers.find((x) => x.id === currentBlankId)?.solution : undefined}
|
||||||
onCancel={() => setCurrentBlankId(undefined)}
|
isOpen={isDrawerShowing}
|
||||||
onAnswer={(solution: string) => {
|
onCancel={() => setCurrentBlankId(undefined)}
|
||||||
setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
|
onAnswer={(solution: string) => {
|
||||||
setCurrentBlankId(undefined);
|
setAnswers((prev) => [...prev.filter((x) => x.id !== currentBlankId), {id: currentBlankId!, solution}]);
|
||||||
}}
|
setCurrentBlankId(undefined);
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<span className="text-sm w-full leading-6">
|
<span className="text-sm w-full leading-6">
|
||||||
{prompt.split("\\n").map((line, index) => (
|
{prompt.split("\\n").map((line, index) => (
|
||||||
<Fragment key={index}>
|
<Fragment key={index}>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
|
|||||||
className={clsx(
|
className={clsx(
|
||||||
"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
|
"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
|
||||||
"transition duration-300 ease-in-out",
|
"transition duration-300 ease-in-out",
|
||||||
selectedQuestion === id && "!text-white bg-mti-green",
|
selectedQuestion === id && "!text-white !bg-mti-green",
|
||||||
id,
|
id,
|
||||||
)}>
|
)}>
|
||||||
{id}
|
{id}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import {User} from "@/interfaces/user";
|
import {User} from "@/interfaces/user";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
import {useRouter} from "next/router";
|
||||||
import Navbar from "../Navbar";
|
import Navbar from "../Navbar";
|
||||||
import Sidebar from "../Sidebar";
|
import Sidebar from "../Sidebar";
|
||||||
|
|
||||||
@@ -10,11 +11,13 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Layout({user, children, className}: Props) {
|
export default function Layout({user, children, className}: Props) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
|
<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
|
||||||
<Navbar user={user} />
|
<Navbar user={user} />
|
||||||
<div className="h-full w-full flex py-4 pb-8 gap-2">
|
<div className="h-full w-full flex py-4 pb-8 gap-2">
|
||||||
<Sidebar path={window.location.pathname} />
|
<Sidebar path={router.pathname} />
|
||||||
<div
|
<div
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden",
|
"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden",
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export default function Sidebar({path}: Props) {
|
|||||||
<Nav Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
|
<Nav Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" />
|
||||||
<Nav Icon={BsPencil} label="Exercises" path={path} keyPath="/#" />
|
<Nav Icon={BsPencil} label="Exercises" path={path} keyPath="/#" />
|
||||||
<Nav Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
|
<Nav Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" />
|
||||||
<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/#" />
|
<Nav Icon={BsClockHistory} label="Record" path={path} keyPath="/record" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -150,7 +150,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
|
|||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<div className="w-3 h-3 bg-mti-green-light rounded-full mt-1" />
|
<div className="w-3 h-3 bg-mti-green-light rounded-full mt-1" />
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<span className="text-mti-green-light">{selectedScore.total.toString().padStart(2, "0")}</span>
|
<span className="text-mti-green-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
|
||||||
<span className="text-lg">Correct</span>
|
<span className="text-lg">Correct</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import {totalExamsByModule} from "@/utils/stats";
|
|||||||
import useStats from "@/hooks/useStats";
|
import useStats from "@/hooks/useStats";
|
||||||
import Button from "@/components/Low/Button";
|
import Button from "@/components/Low/Button";
|
||||||
import {calculateAverageLevel} from "@/utils/score";
|
import {calculateAverageLevel} from "@/utils/score";
|
||||||
|
import {sortByModuleName} from "@/utils/moduleUtils";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user: User;
|
user: User;
|
||||||
@@ -164,7 +165,7 @@ export default function Selection({user, onStart}: Props) {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => onStart(selectedModules)}
|
onClick={() => onStart(selectedModules.sort(sortByModuleName))}
|
||||||
color="green"
|
color="green"
|
||||||
className="px-12 w-full max-w-xs self-end"
|
className="px-12 w-full max-w-xs self-end"
|
||||||
disabled={selectedModules.length === 0}>
|
disabled={selectedModules.length === 0}>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import {Module} from "@/interfaces";
|
|||||||
|
|
||||||
import Selection from "@/exams/Selection";
|
import Selection from "@/exams/Selection";
|
||||||
import Reading from "@/exams/Reading";
|
import Reading from "@/exams/Reading";
|
||||||
import {Exam, ListeningExam, ReadingExam, SpeakingExam, UserSolution, WritingExam, WritingExercise} from "@/interfaces/exam";
|
import {Exam, ListeningExam, ReadingExam, SpeakingExam, UserSolution, WritingEvaluation, WritingExam, WritingExercise} from "@/interfaces/exam";
|
||||||
import Listening from "@/exams/Listening";
|
import Listening from "@/exams/Listening";
|
||||||
import Writing from "@/exams/Writing";
|
import Writing from "@/exams/Writing";
|
||||||
import {ToastContainer, toast} from "react-toastify";
|
import {ToastContainer, toast} from "react-toastify";
|
||||||
@@ -22,6 +22,7 @@ import useExamStore from "@/stores/examStore";
|
|||||||
import Sidebar from "@/components/Sidebar";
|
import Sidebar from "@/components/Sidebar";
|
||||||
import Layout from "@/components/High/Layout";
|
import Layout from "@/components/High/Layout";
|
||||||
import {sortByModule} from "@/utils/moduleUtils";
|
import {sortByModule} from "@/utils/moduleUtils";
|
||||||
|
import {writingReverseMarking} from "@/utils/score";
|
||||||
|
|
||||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||||
const user = req.session.user;
|
const user = req.session.user;
|
||||||
@@ -127,7 +128,7 @@ export default function Page() {
|
|||||||
const writingExam = exams.find((x) => x.id === examId)!;
|
const writingExam = exams.find((x) => x.id === examId)!;
|
||||||
const exercise = writingExam.exercises.find((x) => x.id === exerciseId)! as WritingExercise;
|
const exercise = writingExam.exercises.find((x) => x.id === exerciseId)! as WritingExercise;
|
||||||
|
|
||||||
const response = await axios.post("/api/exam/writing/evaluate", {
|
const response = await axios.post<WritingEvaluation>("/api/exam/writing/evaluate", {
|
||||||
question: `${exercise.prompt} ${exercise.attachment ? exercise.attachment.description : ""}`.replaceAll("\n", ""),
|
question: `${exercise.prompt} ${exercise.attachment ? exercise.attachment.description : ""}`.replaceAll("\n", ""),
|
||||||
answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
|
answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
|
||||||
});
|
});
|
||||||
@@ -135,7 +136,15 @@ export default function Page() {
|
|||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
setUserSolutions([
|
setUserSolutions([
|
||||||
...userSolutions.filter((x) => x.exercise !== exerciseId),
|
...userSolutions.filter((x) => x.exercise !== exerciseId),
|
||||||
{...solution, solutions: [{id: exerciseId, solution: solution.solutions[0].solution, evaluation: response.data}]},
|
{
|
||||||
|
...solution,
|
||||||
|
score: {
|
||||||
|
correct: writingReverseMarking[response.data.overall],
|
||||||
|
missing: 0,
|
||||||
|
total: 100,
|
||||||
|
},
|
||||||
|
solutions: [{id: exerciseId, solution: solution.solutions[0].solution, evaluation: response.data}],
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,153 +0,0 @@
|
|||||||
/* eslint-disable @next/next/no-img-element */
|
|
||||||
import Head from "next/head";
|
|
||||||
import SingleDatasetChart from "@/components/UserResultChart";
|
|
||||||
import Navbar from "@/components/Navbar";
|
|
||||||
import ProfileCard from "@/components/ProfileCard";
|
|
||||||
import {withIronSessionSsr} from "iron-session/next";
|
|
||||||
import {sessionOptions} from "@/lib/session";
|
|
||||||
import {Stat, User} from "@/interfaces/user";
|
|
||||||
import {useEffect, useState} from "react";
|
|
||||||
import useStats from "@/hooks/useStats";
|
|
||||||
import {averageScore, convertToUserSolutions, formatModuleTotalStats, groupByDate, groupBySession, totalExams} from "@/utils/stats";
|
|
||||||
import {Divider} from "primereact/divider";
|
|
||||||
import useUser from "@/hooks/useUser";
|
|
||||||
import {Timeline} from "primereact/timeline";
|
|
||||||
import moment from "moment";
|
|
||||||
import {AutoComplete} from "primereact/autocomplete";
|
|
||||||
import useUsers from "@/hooks/useUsers";
|
|
||||||
import {Dropdown} from "primereact/dropdown";
|
|
||||||
import useExamStore from "@/stores/examStore";
|
|
||||||
import {Exam, ListeningExam, ReadingExam, SpeakingExam, WritingExam} from "@/interfaces/exam";
|
|
||||||
import {Module} from "@/interfaces";
|
|
||||||
import axios from "axios";
|
|
||||||
import {toast} from "react-toastify";
|
|
||||||
import {useRouter} from "next/router";
|
|
||||||
import Icon from "@mdi/react";
|
|
||||||
import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
|
|
||||||
import {uniqBy} from "lodash";
|
|
||||||
import {getExamById} from "@/utils/exams";
|
|
||||||
import {sortByModule} from "@/utils/moduleUtils";
|
|
||||||
|
|
||||||
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
|
||||||
const user = req.session.user;
|
|
||||||
|
|
||||||
if (!user) {
|
|
||||||
res.setHeader("location", "/login");
|
|
||||||
res.statusCode = 302;
|
|
||||||
res.end();
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
user: null,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: {user: req.session.user},
|
|
||||||
};
|
|
||||||
}, sessionOptions);
|
|
||||||
|
|
||||||
export default function History({user}: {user: User}) {
|
|
||||||
const [selectedUser, setSelectedUser] = useState<User>(user);
|
|
||||||
const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
|
|
||||||
|
|
||||||
const {users, isLoading: isUsersLoading} = useUsers();
|
|
||||||
const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
|
|
||||||
|
|
||||||
const setExams = useExamStore((state) => state.setExams);
|
|
||||||
const setShowSolutions = useExamStore((state) => state.setShowSolutions);
|
|
||||||
const setUserSolutions = useExamStore((state) => state.setUserSolutions);
|
|
||||||
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (stats && !isStatsLoading) {
|
|
||||||
setGroupedStats(groupByDate(stats));
|
|
||||||
}
|
|
||||||
}, [stats, isStatsLoading]);
|
|
||||||
|
|
||||||
const formatTimestamp = (timestamp: string) => {
|
|
||||||
const date = moment(parseInt(timestamp));
|
|
||||||
const formatter = "YYYY/MM/DD - HH:mm";
|
|
||||||
|
|
||||||
return date.format(formatter);
|
|
||||||
};
|
|
||||||
|
|
||||||
const customContent = (timestamp: string) => {
|
|
||||||
if (!groupedStats) return <></>;
|
|
||||||
|
|
||||||
const dateStats = groupedStats[timestamp];
|
|
||||||
const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
|
|
||||||
const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
|
|
||||||
|
|
||||||
const selectExam = () => {
|
|
||||||
const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
|
|
||||||
|
|
||||||
Promise.all(examPromises).then((exams) => {
|
|
||||||
if (exams.every((x) => !!x)) {
|
|
||||||
setUserSolutions(convertToUserSolutions(dateStats));
|
|
||||||
setShowSolutions(true);
|
|
||||||
setExams(exams.map((x) => x!).sort(sortByModule));
|
|
||||||
setSelectedModules(
|
|
||||||
exams
|
|
||||||
.map((x) => x!)
|
|
||||||
.sort(sortByModule)
|
|
||||||
.map((x) => x!.module),
|
|
||||||
);
|
|
||||||
router.push("/exam");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<span>{formatTimestamp(timestamp)}</span>
|
|
||||||
<div
|
|
||||||
className="bg-white p-4 rounded-xl mb-4 flex justify-between items-center drop-shadow-lg cursor-pointer hover:bg-neutral-100 hover:drop-shadow-xl focus:bg-neutral-100 focus:drop-shadow-xl transition ease-in-out duration-300"
|
|
||||||
onClick={selectExam}
|
|
||||||
role="button">
|
|
||||||
<div className="flex flex-col gap-2 ">
|
|
||||||
<span>
|
|
||||||
Modules:{" "}
|
|
||||||
{formatModuleTotalStats(dateStats)
|
|
||||||
.filter((x) => x.value > 0)
|
|
||||||
.map((x) => x.label)
|
|
||||||
.join(", ")}
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
Score: {correct}/{total} | {((correct / total) * 100).toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Icon path={mdiChevronRight} color="black" size={1} className="cursor-pointer" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Head>
|
|
||||||
<title>IELTS GPT | Muscat Training Institute</title>
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
|
||||||
/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
<main className="w-full h-full min-h-[100vh] flex flex-col bg-neutral-100 text-black">
|
|
||||||
<div className="w-fit self-center">
|
|
||||||
{!isUsersLoading && user.type !== "student" && (
|
|
||||||
<Dropdown value={selectedUser} options={users} optionLabel="name" onChange={(e) => setSelectedUser(e.target.value)} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="w-2/3 h-full p-4 relative flex flex-col gap-8">
|
|
||||||
{groupedStats && !isStatsLoading && (
|
|
||||||
<Timeline value={Object.keys(groupedStats).sort((a, b) => parseInt(b) - parseInt(a))} content={customContent} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
239
src/pages/record.tsx
Normal file
239
src/pages/record.tsx
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
/* eslint-disable @next/next/no-img-element */
|
||||||
|
import Head from "next/head";
|
||||||
|
import SingleDatasetChart from "@/components/UserResultChart";
|
||||||
|
import Navbar from "@/components/Navbar";
|
||||||
|
import ProfileCard from "@/components/ProfileCard";
|
||||||
|
import {withIronSessionSsr} from "iron-session/next";
|
||||||
|
import {sessionOptions} from "@/lib/session";
|
||||||
|
import {Stat, User} from "@/interfaces/user";
|
||||||
|
import {useEffect, useState} from "react";
|
||||||
|
import useStats from "@/hooks/useStats";
|
||||||
|
import {averageScore, convertToUserSolutions, formatModuleTotalStats, groupByDate, groupBySession, totalExams} from "@/utils/stats";
|
||||||
|
import {Divider} from "primereact/divider";
|
||||||
|
import useUser from "@/hooks/useUser";
|
||||||
|
import {Timeline} from "primereact/timeline";
|
||||||
|
import moment from "moment";
|
||||||
|
import {AutoComplete} from "primereact/autocomplete";
|
||||||
|
import useUsers from "@/hooks/useUsers";
|
||||||
|
import {Dropdown} from "primereact/dropdown";
|
||||||
|
import useExamStore from "@/stores/examStore";
|
||||||
|
import {Exam, ListeningExam, ReadingExam, SpeakingExam, WritingExam} from "@/interfaces/exam";
|
||||||
|
import {Module} from "@/interfaces";
|
||||||
|
import axios from "axios";
|
||||||
|
import {toast, ToastContainer} from "react-toastify";
|
||||||
|
import {useRouter} from "next/router";
|
||||||
|
import Icon from "@mdi/react";
|
||||||
|
import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
|
||||||
|
import {uniqBy} from "lodash";
|
||||||
|
import {getExamById} from "@/utils/exams";
|
||||||
|
import {sortByModule} from "@/utils/moduleUtils";
|
||||||
|
import Layout from "@/components/High/Layout";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
|
||||||
|
import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
|
||||||
|
|
||||||
|
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
|
||||||
|
const user = req.session.user;
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
res.setHeader("location", "/login");
|
||||||
|
res.statusCode = 302;
|
||||||
|
res.end();
|
||||||
|
return {
|
||||||
|
props: {
|
||||||
|
user: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
props: {user: req.session.user},
|
||||||
|
};
|
||||||
|
}, sessionOptions);
|
||||||
|
|
||||||
|
export default function History({user}: {user: User}) {
|
||||||
|
const [selectedUser, setSelectedUser] = useState<User>(user);
|
||||||
|
const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
|
||||||
|
|
||||||
|
const {users, isLoading: isUsersLoading} = useUsers();
|
||||||
|
const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
|
||||||
|
|
||||||
|
const setExams = useExamStore((state) => state.setExams);
|
||||||
|
const setShowSolutions = useExamStore((state) => state.setShowSolutions);
|
||||||
|
const setUserSolutions = useExamStore((state) => state.setUserSolutions);
|
||||||
|
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (stats && !isStatsLoading) {
|
||||||
|
setGroupedStats(groupByDate(stats));
|
||||||
|
}
|
||||||
|
}, [stats, isStatsLoading]);
|
||||||
|
|
||||||
|
const formatTimestamp = (timestamp: string) => {
|
||||||
|
const date = moment(parseInt(timestamp));
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
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]}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const customContent = (timestamp: string) => {
|
||||||
|
if (!groupedStats) return <></>;
|
||||||
|
|
||||||
|
const dateStats = groupedStats[timestamp];
|
||||||
|
const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
|
||||||
|
const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
|
||||||
|
const aggregatedScores = aggregateScoresByModule(dateStats).filter((x) => x.total > 0);
|
||||||
|
|
||||||
|
const aggregatedLevels = aggregatedScores.map((x) => ({
|
||||||
|
module: x.module,
|
||||||
|
level: calculateBandScore(x.correct, x.total, x.module, user.focus),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const selectExam = () => {
|
||||||
|
const examPromises = uniqBy(dateStats, "exam").map((stat) => getExamById(stat.module, stat.exam));
|
||||||
|
|
||||||
|
Promise.all(examPromises).then((exams) => {
|
||||||
|
if (exams.every((x) => !!x)) {
|
||||||
|
setUserSolutions(convertToUserSolutions(dateStats));
|
||||||
|
setShowSolutions(true);
|
||||||
|
setExams(exams.map((x) => x!).sort(sortByModule));
|
||||||
|
setSelectedModules(
|
||||||
|
exams
|
||||||
|
.map((x) => x!)
|
||||||
|
.sort(sortByModule)
|
||||||
|
.map((x) => x!.module),
|
||||||
|
);
|
||||||
|
router.push("/exam");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={timestamp}
|
||||||
|
className={clsx(
|
||||||
|
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300",
|
||||||
|
correct / total >= 0.7 && "hover:border-mti-green",
|
||||||
|
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-blue",
|
||||||
|
correct / total < 0.3 && "hover:border-mti-orange",
|
||||||
|
)}
|
||||||
|
onClick={selectExam}
|
||||||
|
role="button">
|
||||||
|
<div className="w-full flex justify-between items-center">
|
||||||
|
<span className="font-medium">{formatTimestamp(timestamp)}</span>
|
||||||
|
<span
|
||||||
|
className={clsx(
|
||||||
|
correct / total >= 0.7 && "text-mti-green",
|
||||||
|
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-blue",
|
||||||
|
correct / total < 0.3 && "text-mti-orange",
|
||||||
|
)}>
|
||||||
|
Level{" "}
|
||||||
|
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 gap-4 place-items-center w-full">
|
||||||
|
{aggregatedLevels.map(({module, level}) => (
|
||||||
|
<div
|
||||||
|
key={module}
|
||||||
|
className={clsx(
|
||||||
|
"flex gap-2 items-center w-fit text-white px-4 py-2 rounded-xl",
|
||||||
|
module === "reading" && "bg-ielts-reading",
|
||||||
|
module === "listening" && "bg-ielts-listening",
|
||||||
|
module === "writing" && "bg-ielts-writing",
|
||||||
|
module === "speaking" && "bg-ielts-speaking",
|
||||||
|
)}>
|
||||||
|
{module === "reading" && <BsBook className="w-4 h-4" />}
|
||||||
|
{module === "listening" && <BsHeadphones className="w-4 h-4" />}
|
||||||
|
{module === "writing" && <BsPen className="w-4 h-4" />}
|
||||||
|
{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
|
||||||
|
<span className="text-sm">{level.toFixed(1)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>IELTS GPT | Muscat Training Institute</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
||||||
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
</Head>
|
||||||
|
<ToastContainer />
|
||||||
|
{user && (
|
||||||
|
<Layout user={user}>
|
||||||
|
<div className="w-fit">
|
||||||
|
{!isUsersLoading && user.type !== "student" && (
|
||||||
|
<>
|
||||||
|
<select
|
||||||
|
className="select w-full max-w-xs bg-white border border-mti-gray-platinum outline-none font-normal text-base"
|
||||||
|
onChange={(e) => setSelectedUser(users.find((x) => x.id === e.target.value)!)}>
|
||||||
|
{users.map((x) => (
|
||||||
|
<option key={x.id} selected={selectedUser.id === x.id} value={x.id}>
|
||||||
|
{x.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
|
||||||
|
<div className="grid grid-cols-3 w-full gap-6">
|
||||||
|
{Object.keys(groupedStats)
|
||||||
|
.sort((a, b) => parseInt(b) - parseInt(a))
|
||||||
|
.map(customContent)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{groupedStats && Object.keys(groupedStats).length === 0 && !isStatsLoading && (
|
||||||
|
<span className="font-semibold ml-1">No record to display...</span>
|
||||||
|
)}
|
||||||
|
</Layout>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -12,3 +12,7 @@ export const moduleLabels: {[key in Module]: string} = {
|
|||||||
export const sortByModule = (a: {module: Module}, b: {module: Module}) => {
|
export const sortByModule = (a: {module: Module}, b: {module: Module}) => {
|
||||||
return MODULE_ARRAY.findIndex((x) => a.module === x) - MODULE_ARRAY.findIndex((x) => b.module === x);
|
return MODULE_ARRAY.findIndex((x) => a.module === x) - MODULE_ARRAY.findIndex((x) => b.module === x);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const sortByModuleName = (a: string, b: string) => {
|
||||||
|
return MODULE_ARRAY.findIndex((x) => a === x) - MODULE_ARRAY.findIndex((x) => b === x);
|
||||||
|
};
|
||||||
|
|||||||
@@ -2,6 +2,32 @@ import {Module} from "@/interfaces";
|
|||||||
|
|
||||||
type Type = "academic" | "general";
|
type Type = "academic" | "general";
|
||||||
|
|
||||||
|
export const writingReverseMarking: {[key: number]: number} = {
|
||||||
|
9: 90,
|
||||||
|
8: 80,
|
||||||
|
7: 70,
|
||||||
|
6: 60,
|
||||||
|
5: 50,
|
||||||
|
4: 40,
|
||||||
|
3: 30,
|
||||||
|
2: 20,
|
||||||
|
1: 10,
|
||||||
|
0: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
const writingMarking: {[key: number]: number} = {
|
||||||
|
90: 9,
|
||||||
|
80: 8,
|
||||||
|
70: 7,
|
||||||
|
60: 6,
|
||||||
|
50: 5,
|
||||||
|
40: 4,
|
||||||
|
30: 3,
|
||||||
|
20: 2,
|
||||||
|
10: 1,
|
||||||
|
0: 0,
|
||||||
|
};
|
||||||
|
|
||||||
const readingGeneralMarking: {[key: number]: number} = {
|
const readingGeneralMarking: {[key: number]: number} = {
|
||||||
100: 9,
|
100: 9,
|
||||||
97.5: 8.5,
|
97.5: 8.5,
|
||||||
@@ -46,8 +72,8 @@ const moduleMarkings: {[key in Module]: {[key in Type]: {[key: number]: number}}
|
|||||||
general: academicMarking,
|
general: academicMarking,
|
||||||
},
|
},
|
||||||
writing: {
|
writing: {
|
||||||
academic: academicMarking,
|
academic: writingMarking,
|
||||||
general: readingGeneralMarking,
|
general: writingMarking,
|
||||||
},
|
},
|
||||||
speaking: {
|
speaking: {
|
||||||
academic: academicMarking,
|
academic: academicMarking,
|
||||||
|
|||||||
Reference in New Issue
Block a user