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

Corrected the behaviour of the exam after the timer has ended

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-11-20 10:26:59 +00:00
parent e6d77af53f
commit 0eed8e4612
7 changed files with 53 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Medium/Timer.tsx
View File

@@ -1,9 +1,9 @@
import useExamStore from "@/stores/examStore";
import {useEffect, useState} from "react";
import {motion} from "framer-motion";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import TimerEndedModal from "../TimerEndedModal";
import clsx from "clsx";
import {BsStopwatch} from "react-icons/bs";
import { BsStopwatch } from "react-icons/bs";
interface Props {
minTimer: number;
@@ -11,13 +11,13 @@ interface Props {
standalone?: boolean;
}
const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) => {
const Timer: React.FC<Props> = ({ minTimer, disableTimer, standalone = false }) => {
const [timer, setTimer] = useState(minTimer * 60);
const [showModal, setShowModal] = useState(false);
const [warningMode, setWarningMode] = useState(false);
const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
const {timeSpent} = useExamStore((state) => state);
const { timeSpent } = useExamStore((state) => state);
useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);
@@ -54,9 +54,9 @@ const Timer: React.FC<Props> = ({minTimer, disableTimer, standalone = false}) =>
standalone ? "top-10" : "top-4",
warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
)}
initial={{scale: warningMode && !disableTimer ? 0.8 : 1}}
animate={{scale: warningMode && !disableTimer ? 1.1 : 1}}
transition={{repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut"}}>
initial={{ scale: warningMode && !disableTimer ? 0.8 : 1 }}
animate={{ scale: warningMode && !disableTimer ? 1.1 : 1 }}
transition={{ repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut" }}>
<BsStopwatch className="w-6 h-6" />
<span className="text-lg font-bold w-12">
{timer > 0 && (

5
src/exams/Level/index.tsx
View File

@@ -101,6 +101,11 @@ export default function Level({ exam, showSolutions = false, onFinish, preview =
const [showSolutionsSave, setShowSolutionsSave] = useState(showSolutions ? userSolutions.filter((x) => x.module === "level") : undefined)
useEffect(() => {
if (hasExamEnded) onFinish(userSolutions)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hasExamEnded]);
useEffect(() => {
if (typeof currentSolution !== "undefined") {
setUserSolutions([...userSolutions.filter((x) => x.exercise !== currentSolution.exercise), { ...currentSolution, module: "level" as Module, exam: exam.id, shuffleMaps: exam.shuffle ? [...shuffles.find((x) => x.exerciseID == currentExercise?.id)?.shuffles!] : [] }]);

7
src/exams/Listening.tsx
View File

@@ -145,10 +145,9 @@ export default function Listening({ exam, showSolutions = false, preview = false
}, []);
useEffect(() => {
if (hasExamEnded && exerciseIndex === -1) {
setExerciseIndex(exerciseIndex + 1);
}
}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
if (hasExamEnded) onFinish(userSolutions)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hasExamEnded]);
const confirmFinishModule = (keepGoing?: boolean) => {
if (!keepGoing) {

7
src/exams/Reading.tsx
View File

@@ -173,10 +173,9 @@ export default function Reading({ exam, showSolutions = false, preview = false,
}, []);
useEffect(() => {
if (hasExamEnded && exerciseIndex === -1) {
setExerciseIndex(exerciseIndex + 1);
}
}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
if (hasExamEnded) onFinish(userSolutions)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hasExamEnded]);
const confirmFinishModule = (keepGoing?: boolean) => {
if (!keepGoing) {

7
src/exams/Speaking.tsx
View File

@@ -53,10 +53,9 @@ export default function Speaking({ exam, showSolutions = false, onFinish, previe
}, [exerciseIndex]);
useEffect(() => {
if (hasExamEnded && exerciseIndex === -1) {
setExerciseIndex(exerciseIndex + 1);
}
}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
if (hasExamEnded) onFinish(userSolutions)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hasExamEnded]);
const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));

9
src/exams/Writing.tsx
View File

@@ -34,10 +34,9 @@ export default function Writing({ exam, showSolutions = false, preview = false,
const [showPartDivider, setShowPartDivider] = useState<boolean>(typeof exam.exercises[0].intro === "string" && exam.exercises[0].intro !== "");
useEffect(() => {
if (hasExamEnded && exerciseIndex === -1) {
setExerciseIndex(exerciseIndex + 1);
}
}, [hasExamEnded, exerciseIndex, setExerciseIndex]);
if (hasExamEnded) onFinish(userSolutions)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hasExamEnded]);
const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
@@ -100,7 +99,7 @@ export default function Writing({ exam, showSolutions = false, preview = false,
defaultTitle="Writing exam"
section={exam.exercises[exerciseIndex]}
sectionIndex={exerciseIndex}
onNext={() => { setShowPartDivider(false); setBgColor("bg-white"); setSeenParts((prev) => new Set(prev).add(exerciseIndex))}}
onNext={() => { setShowPartDivider(false); setBgColor("bg-white"); setSeenParts((prev) => new Set(prev).add(exerciseIndex)) }}
/> : (
<div className="flex flex-col h-full w-full gap-8 items-center">
<ModuleTitle

50
src/pages/(admin)/Lists/ExamList.tsx
View File

@@ -1,30 +1,30 @@
import {useMemo, useState} from "react";
import {PERMISSIONS} from "@/constants/userPermissions";
import { useMemo, useState } from "react";
import { PERMISSIONS } from "@/constants/userPermissions";
import useExams from "@/hooks/useExams";
import useUsers from "@/hooks/useUsers";
import {Module} from "@/interfaces";
import {Exam} from "@/interfaces/exam";
import {Type, User} from "@/interfaces/user";
import { Module } from "@/interfaces";
import { Exam } from "@/interfaces/exam";
import { Type, User } from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import {getExamById} from "@/utils/exams";
import {countExercises} from "@/utils/moduleUtils";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import { getExamById } from "@/utils/exams";
import { countExercises } from "@/utils/moduleUtils";
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import axios from "axios";
import clsx from "clsx";
import {capitalize, uniq} from "lodash";
import {useRouter} from "next/router";
import {BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX} from "react-icons/bs";
import {toast} from "react-toastify";
import {useListSearch} from "@/hooks/useListSearch";
import { capitalize, uniq } from "lodash";
import { useRouter } from "next/router";
import { BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX } from "react-icons/bs";
import { toast } from "react-toastify";
import { useListSearch } from "@/hooks/useListSearch";
import Modal from "@/components/Modal";
import {checkAccess} from "@/utils/permissions";
import { checkAccess } from "@/utils/permissions";
import useGroups from "@/hooks/useGroups";
import Button from "@/components/Low/Button";
import { EntityWithRoles } from "@/interfaces/entity";
const searchFields = [["module"], ["id"], ["createdBy"]];
const CLASSES: {[key in Module]: string} = {
const CLASSES: { [key in Module]: string } = {
reading: "text-ielts-reading",
listening: "text-ielts-listening",
speaking: "text-ielts-speaking",
@@ -34,7 +34,7 @@ const CLASSES: {[key in Module]: string} = {
const columnHelper = createColumnHelper<Exam>();
const ExamOwnerSelector = ({options, exam, onSave}: {options: User[]; exam: Exam; onSave: (owners: string[]) => void}) => {
const ExamOwnerSelector = ({ options, exam, onSave }: { options: User[]; exam: Exam; onSave: (owners: string[]) => void }) => {
const [owners, setOwners] = useState(exam.owners || []);
return (
@@ -57,12 +57,12 @@ const ExamOwnerSelector = ({options, exam, onSave}: {options: User[]; exam: Exam
);
};
export default function ExamList({user, entities}: {user: User; entities: EntityWithRoles[];}) {
export default function ExamList({ user, entities }: { user: User; entities: EntityWithRoles[]; }) {
const [selectedExam, setSelectedExam] = useState<Exam>();
const {exams, reload} = useExams();
const {users} = useUsers();
const {groups} = useGroups({admin: user?.id, userType: user?.type});
const { exams, reload } = useExams();
const { users } = useUsers();
const { groups } = useGroups({ admin: user?.id, userType: user?.type });
const filteredExams = useMemo(() => exams.filter((e) => {
if (!e.private) return true
@@ -90,7 +90,7 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
});
}, [filteredExams, users]);
const {rows: filteredRows, renderSearch} = useListSearch<Exam>(searchFields, parsedExams);
const { rows: filteredRows, renderSearch } = useListSearch<Exam>(searchFields, parsedExams);
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
@@ -110,14 +110,14 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
setExams([exam]);
setSelectedModules([module]);
router.push("/exercises");
router.push("/exam");
};
const privatizeExam = async (exam: Exam) => {
if (!confirm(`Are you sure you want to make this ${capitalize(exam.module)} exam ${exam.private ? "public" : "private"}?`)) return;
axios
.patch(`/api/exam/${exam.module}/${exam.id}`, {private: !exam.private})
.patch(`/api/exam/${exam.module}/${exam.id}`, { private: !exam.private })
.then(() => toast.success(`Updated the "${exam.id}" exam`))
.catch((reason) => {
if (reason.response.status === 404) {
@@ -227,7 +227,7 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
{
header: "",
id: "actions",
cell: ({row}: {row: {original: Exam}}) => {
cell: ({ row }: { row: { original: Exam } }) => {
return (
<div className="flex gap-4">
{(row.original.owners?.includes(user.id) || checkAccess(user, ["admin", "developer"])) && (
@@ -273,7 +273,7 @@ export default function ExamList({user, entities}: {user: User; entities: Entity
{renderSearch()}
<Modal isOpen={!!selectedExam} title={`Edit Exam Owners - ${selectedExam?.id}`} onClose={() => setSelectedExam(undefined)}>
{!!selectedExam ? (
<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, {owners})} />
<ExamOwnerSelector options={filteredCorporates} exam={selectedExam} onSave={(owners) => updateExam(selectedExam, { owners })} />
) : (
<div />
)}