From 00feee2179b75285ac4a986c52deea4184eb70b7 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Wed, 24 Apr 2024 08:53:53 +0100 Subject: [PATCH] Disabled the short length exams --- src/exams/Selection.tsx | 708 ++++++++++++++++++++++++---------------- 1 file changed, 420 insertions(+), 288 deletions(-) diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx index 95169e27..b33ea752 100644 --- a/src/exams/Selection.tsx +++ b/src/exams/Selection.tsx @@ -1,310 +1,442 @@ /* eslint-disable @next/next/no-img-element */ -import {useState} from "react"; -import {Module} from "@/interfaces"; +import { useState } from "react"; +import { Module } from "@/interfaces"; import clsx from "clsx"; -import {User} from "@/interfaces/user"; +import { User } from "@/interfaces/user"; import ProgressBar from "@/components/Low/ProgressBar"; -import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs"; -import {totalExamsByModule} from "@/utils/stats"; +import { + BsArrowRepeat, + BsBook, + BsCheck, + BsCheckCircle, + BsClipboard, + BsHeadphones, + BsMegaphone, + BsPen, + BsXCircle, +} from "react-icons/bs"; +import { totalExamsByModule } from "@/utils/stats"; import useStats from "@/hooks/useStats"; import Button from "@/components/Low/Button"; -import {calculateAverageLevel} from "@/utils/score"; -import {sortByModuleName} from "@/utils/moduleUtils"; -import {capitalize} from "lodash"; +import { calculateAverageLevel } from "@/utils/score"; +import { sortByModuleName } from "@/utils/moduleUtils"; +import { capitalize } from "lodash"; import ProfileSummary from "@/components/ProfileSummary"; -import {Variant} from "@/interfaces/exam"; -import useSessions, {Session} from "@/hooks/useSessions"; +import { Variant } from "@/interfaces/exam"; +import useSessions, { Session } from "@/hooks/useSessions"; import SessionCard from "@/components/Medium/SessionCard"; import useExamStore from "@/stores/examStore"; import moment from "moment"; interface Props { - user: User; - page: "exercises" | "exams"; - onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void; - disableSelection?: boolean; + user: User; + page: "exercises" | "exams"; + onStart: ( + modules: Module[], + avoidRepeated: boolean, + variant: Variant, + ) => void; + disableSelection?: boolean; } -export default function Selection({user, page, onStart, disableSelection = false}: Props) { - const [selectedModules, setSelectedModules] = useState([]); - const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true); - const [variant, setVariant] = useState("full"); +export default function Selection({ + user, + page, + onStart, + disableSelection = false, +}: Props) { + const [selectedModules, setSelectedModules] = useState([]); + const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true); + const [variant, setVariant] = useState("full"); - const {stats} = useStats(user?.id); - const {sessions, isLoading, reload} = useSessions(user.id); + const { stats } = useStats(user?.id); + const { sessions, isLoading, reload } = useSessions(user.id); - const state = useExamStore((state) => state); + const state = useExamStore((state) => state); - const toggleModule = (module: Module) => { - const modules = selectedModules.filter((x) => x !== module); - setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module])); - }; + const toggleModule = (module: Module) => { + const modules = selectedModules.filter((x) => x !== module); + setSelectedModules((prev) => + prev.includes(module) ? modules : [...modules, module], + ); + }; - const loadSession = async (session: Session) => { - state.setSelectedModules(session.selectedModules); - state.setExam(session.exam); - state.setExams(session.exams); - state.setSessionId(session.sessionId); - state.setAssignment(session.assignment); - state.setExerciseIndex(session.exerciseIndex); - state.setPartIndex(session.partIndex); - state.setModuleIndex(session.moduleIndex); - state.setTimeSpent(session.timeSpent); - state.setUserSolutions(session.userSolutions); - state.setShowSolutions(false); - state.setQuestionIndex(session.questionIndex); - }; + const loadSession = async (session: Session) => { + state.setSelectedModules(session.selectedModules); + state.setExam(session.exam); + state.setExams(session.exams); + state.setSessionId(session.sessionId); + state.setAssignment(session.assignment); + state.setExerciseIndex(session.exerciseIndex); + state.setPartIndex(session.partIndex); + state.setModuleIndex(session.moduleIndex); + state.setTimeSpent(session.timeSpent); + state.setUserSolutions(session.userSolutions); + state.setShowSolutions(false); + state.setQuestionIndex(session.questionIndex); + }; - return ( - <> -
- {user && ( - , - label: "Reading", - value: totalExamsByModule(stats, "reading"), - tooltip: "The amount of reading exams performed.", - }, - { - icon: , - label: "Listening", - value: totalExamsByModule(stats, "listening"), - tooltip: "The amount of listening exams performed.", - }, - { - icon: , - label: "Writing", - value: totalExamsByModule(stats, "writing"), - tooltip: "The amount of writing exams performed.", - }, - { - icon: , - label: "Speaking", - value: totalExamsByModule(stats, "speaking"), - tooltip: "The amount of speaking exams performed.", - }, - { - icon: , - label: "Level", - value: totalExamsByModule(stats, "level"), - tooltip: "The amount of level exams performed.", - }, - ]} - /> - )} + return ( + <> +
+ {user && ( + + ), + label: "Reading", + value: totalExamsByModule(stats, "reading"), + tooltip: "The amount of reading exams performed.", + }, + { + icon: ( + + ), + label: "Listening", + value: totalExamsByModule(stats, "listening"), + tooltip: "The amount of listening exams performed.", + }, + { + icon: ( + + ), + label: "Writing", + value: totalExamsByModule(stats, "writing"), + tooltip: "The amount of writing exams performed.", + }, + { + icon: ( + + ), + label: "Speaking", + value: totalExamsByModule(stats, "speaking"), + tooltip: "The amount of speaking exams performed.", + }, + { + icon: ( + + ), + label: "Level", + value: totalExamsByModule(stats, "level"), + tooltip: "The amount of level exams performed.", + }, + ]} + /> + )} -
- About {capitalize(page)} - - {page === "exercises" && ( - <> - In the realm of language acquisition, practice makes perfect, and our exercises are the key to unlocking your full - potential. Dive into a world of interactive and engaging exercises that cater to diverse learning styles. From grammar - drills that build a strong foundation to vocabulary challenges that broaden your lexicon, our exercises are carefully - designed to make learning English both enjoyable and effective. Whether you're looking to reinforce specific - skills or embark on a holistic language journey, our exercises are your companions in the pursuit of excellence. - Embrace the joy of learning as you navigate through a variety of activities that cater to every facet of language - acquisition. Your linguistic adventure starts here! - - )} - {page === "exams" && ( - <> - Welcome to the heart of success on your English language journey! Our exams are crafted with precision to assess and - enhance your language skills. Each test is a passport to your linguistic prowess, designed to challenge and elevate - your abilities. Whether you're a beginner or a seasoned learner, our exams cater to all levels, providing a - comprehensive evaluation of your reading, writing, speaking, and listening skills. Prepare to embark on a journey of - self-discovery and language mastery as you navigate through our thoughtfully curated exams. Your success is not just a - destination; it's a testament to your dedication and our commitment to empowering you with the English language. - - )} - -
+
+ About {capitalize(page)} + + {page === "exercises" && ( + <> + In the realm of language acquisition, practice makes perfect, + and our exercises are the key to unlocking your full potential. + Dive into a world of interactive and engaging exercises that + cater to diverse learning styles. From grammar drills that build + a strong foundation to vocabulary challenges that broaden your + lexicon, our exercises are carefully designed to make learning + English both enjoyable and effective. Whether you're + looking to reinforce specific skills or embark on a holistic + language journey, our exercises are your companions in the + pursuit of excellence. Embrace the joy of learning as you + navigate through a variety of activities that cater to every + facet of language acquisition. Your linguistic adventure starts + here! + + )} + {page === "exams" && ( + <> + Welcome to the heart of success on your English language + journey! Our exams are crafted with precision to assess and + enhance your language skills. Each test is a passport to your + linguistic prowess, designed to challenge and elevate your + abilities. Whether you're a beginner or a seasoned learner, + our exams cater to all levels, providing a comprehensive + evaluation of your reading, writing, speaking, and listening + skills. Prepare to embark on a journey of self-discovery and + language mastery as you navigate through our thoughtfully + curated exams. Your success is not just a destination; it's + a testament to your dedication and our commitment to empowering + you with the English language. + + )} + +
- {sessions.length > 0 && ( -
-
-
- Unfinished Sessions - -
-
- - {sessions - .sort((a, b) => moment(b.date).diff(moment(a.date))) - .map((session) => ( - - ))} - -
- )} + {sessions.length > 0 && ( +
+
+
+ + Unfinished Sessions + + +
+
+ + {sessions + .sort((a, b) => moment(b.date).diff(moment(a.date))) + .map((session) => ( + + ))} + +
+ )} -
-
toggleModule("reading") : undefined} - className={clsx( - "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", - selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum", - )}> -
- -
- Reading: -

- Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English. -

- {!selectedModules.includes("reading") && !selectedModules.includes("level") && !disableSelection && ( -
- )} - {(selectedModules.includes("reading") || disableSelection) && ( - - )} - {selectedModules.includes("level") && } -
-
toggleModule("listening") : undefined} - className={clsx( - "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", - selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum", - )}> -
- -
- Listening: -

- Improve your ability to follow conversations in English and your ability to understand different accents and intonations. -

- {!selectedModules.includes("listening") && !selectedModules.includes("level") && !disableSelection && ( -
- )} - {(selectedModules.includes("listening") || disableSelection) && ( - - )} - {selectedModules.includes("level") && } -
-
toggleModule("writing") : undefined} - className={clsx( - "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", - selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum", - )}> -
- -
- Writing: -

- Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays. -

- {!selectedModules.includes("writing") && !selectedModules.includes("level") && !disableSelection && ( -
- )} - {(selectedModules.includes("writing") || disableSelection) && ( - - )} - {selectedModules.includes("level") && } -
-
toggleModule("speaking") : undefined} - className={clsx( - "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", - selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum", - )}> -
- -
- Speaking: -

- You'll have access to interactive dialogs, pronunciation exercises and speech recordings. -

- {!selectedModules.includes("speaking") && !selectedModules.includes("level") && !disableSelection && ( -
- )} - {(selectedModules.includes("speaking") || disableSelection) && ( - - )} - {selectedModules.includes("level") && } -
- {!disableSelection && ( -
toggleModule("level") : undefined} - className={clsx( - "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", - selectedModules.includes("level") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum", - )}> -
- -
- Level: -

You'll be able to test your english level with multiple choice questions.

- {!selectedModules.includes("level") && selectedModules.length === 0 && !disableSelection && ( -
- )} - {(selectedModules.includes("level") || disableSelection) && ( - - )} - {!selectedModules.includes("level") && selectedModules.length > 0 && ( - - )} -
- )} -
-
-
-
setAvoidRepeatedExams((prev) => !prev)}> - -
- -
- - Avoid Repeated Questions - -
-
setVariant((prev) => (prev === "full" ? "partial" : "full"))}> - -
- -
- Full length exams -
-
-
- -
- -
-
- - ); +
+
toggleModule("reading") + : undefined + } + className={clsx( + "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", + selectedModules.includes("reading") || disableSelection + ? "border-mti-purple-light" + : "border-mti-gray-platinum", + )} + > +
+ +
+ Reading: +

+ Expand your vocabulary, improve your reading comprehension and + improve your ability to interpret texts in English. +

+ {!selectedModules.includes("reading") && + !selectedModules.includes("level") && + !disableSelection && ( +
+ )} + {(selectedModules.includes("reading") || disableSelection) && ( + + )} + {selectedModules.includes("level") && ( + + )} +
+
toggleModule("listening") + : undefined + } + className={clsx( + "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", + selectedModules.includes("listening") || disableSelection + ? "border-mti-purple-light" + : "border-mti-gray-platinum", + )} + > +
+ +
+ Listening: +

+ Improve your ability to follow conversations in English and your + ability to understand different accents and intonations. +

+ {!selectedModules.includes("listening") && + !selectedModules.includes("level") && + !disableSelection && ( +
+ )} + {(selectedModules.includes("listening") || disableSelection) && ( + + )} + {selectedModules.includes("level") && ( + + )} +
+
toggleModule("writing") + : undefined + } + className={clsx( + "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", + selectedModules.includes("writing") || disableSelection + ? "border-mti-purple-light" + : "border-mti-gray-platinum", + )} + > +
+ +
+ Writing: +

+ Allow you to practice writing in a variety of formats, from simple + paragraphs to complex essays. +

+ {!selectedModules.includes("writing") && + !selectedModules.includes("level") && + !disableSelection && ( +
+ )} + {(selectedModules.includes("writing") || disableSelection) && ( + + )} + {selectedModules.includes("level") && ( + + )} +
+
toggleModule("speaking") + : undefined + } + className={clsx( + "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", + selectedModules.includes("speaking") || disableSelection + ? "border-mti-purple-light" + : "border-mti-gray-platinum", + )} + > +
+ +
+ Speaking: +

+ You'll have access to interactive dialogs, pronunciation + exercises and speech recordings. +

+ {!selectedModules.includes("speaking") && + !selectedModules.includes("level") && + !disableSelection && ( +
+ )} + {(selectedModules.includes("speaking") || disableSelection) && ( + + )} + {selectedModules.includes("level") && ( + + )} +
+ {!disableSelection && ( +
toggleModule("level") + : undefined + } + className={clsx( + "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out", + selectedModules.includes("level") || disableSelection + ? "border-mti-purple-light" + : "border-mti-gray-platinum", + )} + > +
+ +
+ Level: +

+ You'll be able to test your english level with multiple + choice questions. +

+ {!selectedModules.includes("level") && + selectedModules.length === 0 && + !disableSelection && ( +
+ )} + {(selectedModules.includes("level") || disableSelection) && ( + + )} + {!selectedModules.includes("level") && + selectedModules.length > 0 && ( + + )} +
+ )} +
+
+
+
setAvoidRepeatedExams((prev) => !prev)} + > + +
+ +
+ + Avoid Repeated Questions + +
+
setVariant((prev) => (prev === "full" ? "partial" : "full"))}> + > + +
+ +
+ Full length exams +
+
+
+ +
+ +
+
+ + ); }