Updated the Record to start with the overall screen

src/components/Solutions/Writing.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import {WritingExercise} from "@/interfaces/exam";
 import {CommonProps} from ".";
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import Button from "../Low/Button";
 import {Dialog, Tab, Transition} from "@headlessui/react";
 import {writingReverseMarking} from "@/utils/score";
@@ -85,7 +85,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 				</div>
 
 				<div className="w-full h-full flex flex-col gap-8">
-					{userSolutions && (
+					{userSolutions && userSolutions.length > 0 && (
 						<div className="flex flex-col gap-4 w-full">
 							<span>Your answer:</span>
 							<div className="w-full h-full min-h-[320px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl whitespace-pre-wrap">

src/pages/(exam)/ExamPage.tsx

@@ -30,7 +30,7 @@ interface Props {
 
 export default function ExamPage({page}: Props) {
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
-	const [moduleIndex, setModuleIndex] = useState(0);
+	const [moduleIndex, setModuleIndex] = useState(-1);
 	const [sessionId, setSessionId] = useState("");
 	const [exam, setExam] = useState<Exam>();
 	const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
@@ -247,14 +247,15 @@ export default function ExamPage({page}: Props) {
 					user={user!}
 					disableSelection={page === "exams"}
 					onStart={(modules, avoid) => {
-						setSelectedModules(modules);
+						setModuleIndex(0);
 						setAvoidRepeated(avoid);
+						setSelectedModules(modules);
 					}}
 				/>
 			);
 		}
 
-		if (moduleIndex >= selectedModules.length) {
+		if (moduleIndex >= selectedModules.length || moduleIndex === -1) {
 			return (
 				<Finish
 					isLoading={isEvaluationLoading}

src/pages/record.tsx

@@ -215,8 +215,7 @@ export default function History({user}: {user: User}) {
 						)}
 					</div>
 					<div className="flex flex-row gap-2">
-						<span
+						<span className={textColor}>
-							className={textColor}>
 							Level{" "}
 							{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
 						</span>