From d879f4afab4e8924ad9ccb09689bace9c908d2a6 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Thu, 27 Jul 2023 20:25:57 +0100 Subject: [PATCH] Made it so the timer is more dynamic --- src/components/Exercises/MatchSentences.tsx | 1 - src/components/Medium/ModuleTitle.tsx | 31 +++++++++++-- src/components/TimerEndedModal.tsx | 49 +++++++++++++++++++++ src/exams/Finish.tsx | 4 -- src/exams/Listening.tsx | 6 +++ src/exams/Reading.tsx | 6 +++ src/pages/exercises.tsx | 2 - 7 files changed, 88 insertions(+), 11 deletions(-) create mode 100644 src/components/TimerEndedModal.tsx diff --git a/src/components/Exercises/MatchSentences.tsx b/src/components/Exercises/MatchSentences.tsx index 731b3722..389da576 100644 --- a/src/components/Exercises/MatchSentences.tsx +++ b/src/components/Exercises/MatchSentences.tsx @@ -31,7 +31,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us }; useEffect(() => { - console.log({hasExamEnded}); if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hasExamEnded]); diff --git a/src/components/Medium/ModuleTitle.tsx b/src/components/Medium/ModuleTitle.tsx index 4d64f6a4..ff18d589 100644 --- a/src/components/Medium/ModuleTitle.tsx +++ b/src/components/Medium/ModuleTitle.tsx @@ -1,9 +1,12 @@ import {Module} from "@/interfaces"; import useExamStore from "@/stores/examStore"; import {moduleLabels} from "@/utils/moduleUtils"; +import clsx from "clsx"; +import {motion} from "framer-motion"; import {ReactNode, useEffect, useState} from "react"; import {BsBook, BsHeadphones, BsMegaphone, BsPen, BsStopwatch} from "react-icons/bs"; import ProgressBar from "../Low/ProgressBar"; +import TimerEndedModal from "../TimerEndedModal"; interface Props { minTimer: number; @@ -16,6 +19,8 @@ interface Props { export default function ModuleTitle({minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false}: Props) { const [timer, setTimer] = useState(minTimer * 60); + const [showModal, setShowModal] = useState(false); + const [warningMode, setWarningMode] = useState(false); const setHasExamEnded = useExamStore((state) => state.setHasExamEnded); useEffect(() => { @@ -29,8 +34,12 @@ export default function ModuleTitle({minTimer, module, label, exerciseIndex, tot }, [disableTimer, minTimer]); useEffect(() => { - if (timer <= 0) setHasExamEnded(true); - }, [setHasExamEnded, timer]); + if (timer <= 0) setShowModal(true); + }, [timer]); + + useEffect(() => { + if (timer < 300 && !warningMode) setWarningMode(true); + }, [timer, warningMode]); const moduleIcon: {[key in Module]: ReactNode} = { reading: , @@ -41,7 +50,21 @@ export default function ModuleTitle({minTimer, module, label, exerciseIndex, tot return ( <> -
+ { + setHasExamEnded(true); + setShowModal(false); + }} + /> + {timer > 0 && ( @@ -57,7 +80,7 @@ export default function ModuleTitle({minTimer, module, label, exerciseIndex, tot )} {timer <= 0 && <>00:00} -
+
{moduleIcon[module]}
diff --git a/src/components/TimerEndedModal.tsx b/src/components/TimerEndedModal.tsx new file mode 100644 index 00000000..98dc5f31 --- /dev/null +++ b/src/components/TimerEndedModal.tsx @@ -0,0 +1,49 @@ +import {Dialog, Transition} from "@headlessui/react"; +import {Fragment} from "react"; +import Button from "./Low/Button"; + +interface Props { + isOpen: boolean; + onClose: () => void; +} + +export default function TimerEndedModal({isOpen, onClose}: Props) { + return ( + + + +
+ + + +
+ + Time's up! + + The timer has ended! Your answers have been registered and saved, you will now move on to the next module (or to the + finish screen, if this was the last one). + + + +
+ +
+ + ); +} diff --git a/src/exams/Finish.tsx b/src/exams/Finish.tsx index 14d30595..37514577 100644 --- a/src/exams/Finish.tsx +++ b/src/exams/Finish.tsx @@ -53,10 +53,6 @@ export default function Finish({user, scores, modules, isLoading, onViewResults} }, }; - useEffect(() => { - console.log({selectedScore, selectedModule, scores}); - }, [scores, selectedModule, selectedScore]); - return ( <>
diff --git a/src/exams/Listening.tsx b/src/exams/Listening.tsx index fdb257ad..b4771181 100644 --- a/src/exams/Listening.tsx +++ b/src/exams/Listening.tsx @@ -27,6 +27,12 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]); + useEffect(() => { + if (hasExamEnded && exerciseIndex === -1) { + setExerciseIndex((prev) => prev + 1); + } + }, [hasExamEnded, exerciseIndex]); + const confirmFinishModule = (keepGoing?: boolean) => { if (!keepGoing) { setShowBlankModal(false); diff --git a/src/exams/Reading.tsx b/src/exams/Reading.tsx index 2e15ead7..bf9d80db 100644 --- a/src/exams/Reading.tsx +++ b/src/exams/Reading.tsx @@ -87,6 +87,12 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props) const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]); + useEffect(() => { + if (hasExamEnded && exerciseIndex === -1) { + setExerciseIndex((prev) => prev + 1); + } + }, [hasExamEnded, exerciseIndex]); + const confirmFinishModule = (keepGoing?: boolean) => { if (!keepGoing) { setShowBlankModal(false); diff --git a/src/pages/exercises.tsx b/src/pages/exercises.tsx index 01ab22a6..fcfc7e8a 100644 --- a/src/pages/exercises.tsx +++ b/src/pages/exercises.tsx @@ -203,8 +203,6 @@ export default function Page() { const solutionIds = solutions.map((x) => x.exercise); const solutionExams = solutions.map((x) => x.exam); - console.log(solutionExams, exam?.id, moduleIndex, selectedModules); - if (exam && !solutionExams.includes(exam.id)) return; if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {