Added a Scroll To Top function

src/components/Exercises/MultipleChoice.tsx

@@ -63,6 +63,8 @@ export default function MultipleChoice({
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -93,6 +95,8 @@ export default function MultipleChoice({
 		} else {
 			setQuestionIndex((prev) => prev + 1);
 		}
+
+		scrollToTop();
 	};
 
 	const back = () => {
@@ -101,6 +105,8 @@ export default function MultipleChoice({
 		} else {
 			setQuestionIndex((prev) => prev - 1);
 		}
+
+		scrollToTop();
 	};
 
 	return (

src/exams/Listening.tsx

@@ -32,6 +32,8 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 
 	const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]);
 
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+
 	useEffect(() => {
 		if (hasExamEnded && exerciseIndex === -1) {
 			setExerciseIndex((prev) => prev + 1);
@@ -52,6 +54,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 	};
 
 	const nextExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
@@ -92,6 +95,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}

src/exams/Reading.tsx

@@ -93,6 +93,8 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 
 	const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]);
 
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+
 	useEffect(() => {
 		const listener = (e: KeyboardEvent) => {
 			if (e.key === "F3" || ((e.ctrlKey || e.metaKey) && e.key === "f")) {
@@ -127,6 +129,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 	};
 
 	const nextExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
@@ -167,6 +170,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}

src/exams/Speaking.tsx

@@ -26,11 +26,14 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>(exam.exercises.map((x) => defaultUserSolutions(x, exam)));
 	const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]);
 
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+
 	useEffect(() => {
 		setCurrentQuestionIndex(0);
 	}, [questionIndex]);
 
 	const nextExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
@@ -55,6 +58,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}

src/exams/Writing.tsx

@@ -24,7 +24,10 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 
 	const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]);
 
+	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
+
 	const nextExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}
@@ -48,6 +51,7 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
 	};
 
 	const previousExercise = (solution?: UserSolution) => {
+		scrollToTop();
 		if (solution) {
 			setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
 		}

src/pages/(exam)/ExamPage.tsx

@@ -15,10 +15,7 @@ import useUser from "@/hooks/useUser";
 import {Exam, UserSolution, Variant} from "@/interfaces/exam";
 import {Stat} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {
+import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
-  evaluateSpeakingAnswer,
-  evaluateWritingAnswer,
-} from "@/utils/evaluation";
 import {getExam} from "@/utils/exams";
 import axios from "axios";
 import {useRouter} from "next/router";
@@ -30,41 +27,27 @@ interface Props {
 }
 
 export default function ExamPage({page}: Props) {
-  const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
-  const [moduleIndex, setModuleIndex] = useState(0);
-  const [sessionId, setSessionId] = useState("");
-  const [exam, setExam] = useState<Exam>();
-  const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
-  const [showAbandonPopup, setShowAbandonPopup] = useState(false);
-  const [avoidRepeated, setAvoidRepeated] = useState(false);
-  const [timeSpent, setTimeSpent] = useState(0);
-  const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<
-    string[]
-  >([]);
 	const [variant, setVariant] = useState<Variant>("full");
+	const [avoidRepeated, setAvoidRepeated] = useState(false);
+	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
+	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
+	const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
+	const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
 
-  const [exams, setExams] = useExamStore((state) => [
+	const {assignment} = useExamStore((state) => state);
-    state.exams,
+	const {exam, setExam} = useExamStore((state) => state);
-    state.setExams,
+	const {exams, setExams} = useExamStore((state) => state);
-  ]);
+	const {timeSpent, setTimeSpent} = useExamStore((state) => state);
-  const [userSolutions, setUserSolutions] = useExamStore((state) => [
+	const {sessionId, setSessionId} = useExamStore((state) => state);
-    state.userSolutions,
+	const {moduleIndex, setModuleIndex} = useExamStore((state) => state);
-    state.setUserSolutions,
+	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
-  ]);
+	const {showSolutions, setShowSolutions} = useExamStore((state) => state);
-  const [showSolutions, setShowSolutions] = useExamStore((state) => [
+	const {selectedModules, setSelectedModules} = useExamStore((state) => state);
-    state.showSolutions,
-    state.setShowSolutions,
-  ]);
-  const [selectedModules, setSelectedModules] = useExamStore((state) => [
-    state.selectedModules,
-    state.setSelectedModules,
-  ]);
-  const assignment = useExamStore((state) => state.assignment);
 
 	const {user} = useUser({redirectTo: "/login"});
 	const router = useRouter();
 
-  useEffect(() => setSessionId(uuidv4()), []);
+	useEffect(() => setSessionId(uuidv4()), [setSessionId]);
 	useEffect(() => {
 		if (user?.type === "developer") console.log(exam);
 	}, [exam, user]);
@@ -73,7 +56,7 @@ export default function ExamPage({ page }: Props) {
 		selectedModules.length > 0 && timeSpent === 0 && !showSolutions;
 		if (selectedModules.length > 0 && timeSpent === 0 && !showSolutions) {
 			const timerInterval = setInterval(() => {
-        setTimeSpent((prev) => prev + 1);
+				setTimeSpent(timeSpent + 1);
 			}, 1000);
 
 			return () => {
@@ -85,15 +68,11 @@ export default function ExamPage({ page }: Props) {
 
 	useEffect(() => {
 		if (showSolutions) setModuleIndex(-1);
-  }, [showSolutions]);
+	}, [setModuleIndex, showSolutions]);
 
 	useEffect(() => {
 		(async () => {
-      if (
+			if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
-        selectedModules.length > 0 &&
-        exams.length > 0 &&
-        moduleIndex < selectedModules.length
-      ) {
 				const nextExam = exams[moduleIndex];
 				setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
 			}
@@ -104,9 +83,7 @@ export default function ExamPage({ page }: Props) {
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && exams.length === 0) {
-        const examPromises = selectedModules.map((module) =>
+				const examPromises = selectedModules.map((module) => getExam(module, avoidRepeated, variant));
-          getExam(module, avoidRepeated, variant),
-        );
 				Promise.all(examPromises).then((values) => {
 					if (values.every((x) => !!x)) {
 						setExams(values.map((x) => x!));
@@ -121,13 +98,7 @@ export default function ExamPage({ page }: Props) {
 	}, [selectedModules, setExams, exams]);
 
 	useEffect(() => {
-    if (
+		if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
-      selectedModules.length > 0 &&
-      exams.length !== 0 &&
-      moduleIndex >= selectedModules.length &&
-      !hasBeenUploaded &&
-      !showSolutions
-    ) {
 			const newStats: Stat[] = userSolutions.map((solution) => ({
 				...solution,
 				id: solution.id || uuidv4(),
@@ -161,12 +132,8 @@ export default function ExamPage({ page }: Props) {
 
 	const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
 		setTimeout(async () => {
-      const awaitedStats = await Promise.all(
+			const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
-        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 solutionsEvaluated = awaitedStats.every((stat) =>
-        stat.solutions.every((x) => x.evaluation !== null),
-      );
 			if (solutionsEvaluated) {
 				const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
 					id: stat.id,
@@ -179,16 +146,12 @@ export default function ExamPage({ page }: Props) {
 				}));
 
 				const updatedUserSolutions = userSolutions.map((x) => {
-          const respectiveSolution = statsUserSolutions.find(
+					const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
-            (y) => y.exercise === x.exercise,
-          );
 					return respectiveSolution ? respectiveSolution : x;
 				});
 
 				setUserSolutions(updatedUserSolutions);
-        return setStatsAwaitingEvaluation((prev) =>
+				return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
-          prev.filter((x) => !ids.includes(x)),
-        );
 			}
 
 			return checkIfStatsHaveBeenEvaluated(ids);
@@ -201,8 +164,7 @@ 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)
+							userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
-                ?.solutions,
 						}),
 					),
 				}),
@@ -212,8 +174,7 @@ export default function ExamPage({ page }: Props) {
 
 		const exercises = exam.exercises.map((x) =>
 			Object.assign(x, {
-        userSolutions: userSolutions.find((y) => x.id === y.exercise)
+				userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
-          ?.solutions,
 			}),
 		);
 		return Object.assign(exam, {exercises});
@@ -225,12 +186,7 @@ export default function ExamPage({ page }: Props) {
 
 		if (exam && !solutionExams.includes(exam.id)) return;
 
-    if (
+		if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
-      exam &&
-      (exam.module === "writing" || exam.module === "speaking") &&
-      solutions.length > 0 &&
-      !showSolutions
-    ) {
 			setHasBeenUploaded(true);
 			setIsEvaluationLoading(true);
 
@@ -238,32 +194,15 @@ export default function ExamPage({ page }: Props) {
 				exam.exercises.map(async (exercise) => {
 					const evaluationID = uuidv4();
 					if (exercise.type === "writing")
-            return await evaluateWritingAnswer(
+						return await evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
-              exercise,
-              solutions.find((x) => x.exercise === exercise.id)!,
-              evaluationID,
-            );
 
-          if (
+					if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
-            exercise.type === "interactiveSpeaking" ||
+						return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
-            exercise.type === "speaking"
-          )
-            return await evaluateSpeakingAnswer(
-              exercise,
-              solutions.find((x) => x.exercise === exercise.id)!,
-              evaluationID,
-            );
 				}),
 			)
 				.then((responses) => {
-          setStatsAwaitingEvaluation((prev) => [
+					setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
-            ...prev,
+					setUserSolutions([...userSolutions, ...responses.filter((x) => !!x)] as any);
-            ...responses.filter((x) => !!x).map((r) => (r as any).id),
-          ]);
-          setUserSolutions([
-            ...userSolutions,
-            ...responses.filter((x) => !!x),
-          ] as any);
 				})
 				.finally(() => {
 					setHasBeenUploaded(false);
@@ -272,16 +211,11 @@ export default function ExamPage({ page }: Props) {
 
 		axios.get("/api/stats/update");
 
-    setUserSolutions([
+		setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...solutions]);
-      ...userSolutions.filter((x) => !solutionIds.includes(x.exercise)),
+		setModuleIndex(moduleIndex + 1);
-      ...solutions,
-    ]);
-    setModuleIndex((prev) => prev + 1);
 	};
 
-  const aggregateScoresByModule = (
+	const aggregateScoresByModule = (answers: UserSolution[]): {module: Module; total: number; missing: number; correct: number}[] => {
-    answers: UserSolution[],
-  ): { module: Module; total: number; missing: number; correct: number }[] => {
 		const scores: {
 			[key in Module]: {total: number; missing: number; correct: number};
 		} = {
@@ -359,49 +293,23 @@ export default function ExamPage({ page }: Props) {
 		}
 
 		if (exam && exam.module === "reading") {
-      return (
+			return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Reading
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
 		}
 
 		if (exam && exam.module === "listening") {
-      return (
+			return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Listening
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
 		}
 
 		if (exam && exam.module === "writing") {
-      return (
+			return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Writing
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
 		}
 
 		if (exam && exam.module === "speaking") {
-      return (
+			return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Speaking
-          exam={exam}
-          onFinish={onFinish}
-          showSolutions={showSolutions}
-        />
-      );
 		}
 
 		if (exam && exam.module === "level") {
-      return (
+			return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
-        <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />
-      );
 		}
 
 		return <>Loading...</>;
@@ -414,13 +322,8 @@ export default function ExamPage({ page }: Props) {
 				<Layout
 					user={user}
 					className="justify-between"
-          focusMode={
+					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
-            selectedModules.length !== 0 &&
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
-            !showSolutions &&
-            moduleIndex < selectedModules.length
-          }
-          onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
-        >
 					<>
 						{renderScreen()}
 						{!showSolutions && moduleIndex < selectedModules.length && (

src/stores/examStore.ts

@@ -5,17 +5,35 @@ import {create} from "zustand";
 
 export interface ExamState {
 	exams: Exam[];
-	userSolutions: UserSolution[];
-	showSolutions: boolean;
-	hasExamEnded: boolean;
-	selectedModules: Module[];
-	assignment?: Assignment;
-	setHasExamEnded: (hasExamEnded: boolean) => void;
-	setUserSolutions: (userSolutions: UserSolution[]) => void;
 	setExams: (exams: Exam[]) => void;
+
+	userSolutions: UserSolution[];
+	setUserSolutions: (userSolutions: UserSolution[]) => void;
+
+	showSolutions: boolean;
 	setShowSolutions: (showSolutions: boolean) => void;
+
+	hasExamEnded: boolean;
+	setHasExamEnded: (hasExamEnded: boolean) => void;
+
+	selectedModules: Module[];
 	setSelectedModules: (modules: Module[]) => void;
+
+	assignment?: Assignment;
 	setAssignment: (assignment: Assignment) => void;
+
+	timeSpent: number;
+	setTimeSpent: (timeSpent: number) => void;
+
+	sessionId: string;
+	setSessionId: (sessionId: string) => void;
+
+	moduleIndex: number;
+	setModuleIndex: (moduleIndex: number) => void;
+
+	exam?: Exam;
+	setExam: (exam?: Exam) => void;
+
 	reset: () => void;
 }
 
@@ -26,16 +44,26 @@ export const initialState = {
 	selectedModules: [],
 	hasExamEnded: false,
 	assignment: undefined,
+	timeSpent: 0,
+	sessionId: "",
+	exam: undefined,
+	moduleIndex: 0,
 };
 
 const useExamStore = create<ExamState>((set) => ({
 	...initialState,
+
 	setUserSolutions: (userSolutions: UserSolution[]) => set(() => ({userSolutions})),
 	setExams: (exams: Exam[]) => set(() => ({exams})),
 	setShowSolutions: (showSolutions: boolean) => set(() => ({showSolutions})),
 	setSelectedModules: (modules: Module[]) => set(() => ({selectedModules: modules})),
 	setHasExamEnded: (hasExamEnded: boolean) => set(() => ({hasExamEnded})),
 	setAssignment: (assignment: Assignment) => set(() => ({assignment})),
+	setTimeSpent: (timeSpent) => set(() => ({timeSpent})),
+	setSessionId: (sessionId: string) => set(() => ({sessionId})),
+	setExam: (exam?: Exam) => set(() => ({exam})),
+	setModuleIndex: (moduleIndex: number) => set(() => ({moduleIndex})),
+
 	reset: () => set(() => initialState),
 }));
 

src/styles/globals.css

@@ -31,7 +31,15 @@
 	margin: 0;
 }
 
-html,
+html {
+	min-height: 100vh !important;
+	height: 100%;
+	max-width: 100vw;
+	overflow-x: hidden;
+	overflow-y: auto;
+	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
+}
+
 body {
 	min-height: 100vh !important;
 	height: 100%;