fix(exam): fix pretest screen start exam button

This commit is contained in:
shafin-r
2025-07-07 21:01:11 +06:00
parent 22eb8285ec
commit d42a42a8d1
10 changed files with 122 additions and 128 deletions

View File

@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
import { useExam, useExamResults } from "@/context/ExamContext";
import { useEffect } from "react";
import React from "react";
import { ArrowLeft } from "lucide-react";
interface Question {
solution: string;
@ -54,7 +55,7 @@ export default function ResultsPage() {
useEffect(() => {
// Redirect if no completed exam
if (!isExamCompleted()) {
router.push("/exam/select");
router.push("/unit");
return;
}
}, [isExamCompleted, router]);
@ -67,15 +68,10 @@ export default function ResultsPage() {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<h1 className="text-2xl font-bold text-gray-900 mb-4">
No exam results found
</h1>
<button
onClick={() => router.push("/exam/select")}
className="bg-blue-900 text-white px-6 py-3 rounded-lg hover:bg-blue-800"
>
Take an Exam
</button>
<div className="mt-60 flex flex-col items-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
<p className="text-xl font-medium text-center">Loading...</p>
</div>
</div>
</div>
);
@ -85,8 +81,12 @@ export default function ResultsPage() {
const apiResponse = getApiResponse();
const handleBackToHome = () => {
router.push("/unit");
clearExam();
// Give time for state to fully reset before pushing new route
setTimeout(() => {
router.push("/unit");
}, 400); // 50100ms is usually enough
};
const timeTaken =
@ -100,18 +100,24 @@ export default function ResultsPage() {
return (
<div className="min-h-screen bg-white">
<div className="bg-white rounded-lg shadow-lg px-10 py-20">
<button className="p-10" onClick={() => router.push("/unit")}>
<ArrowLeft size={30} color="black" />
</button>
<div className="bg-white rounded-lg shadow-lg px-10 pb-20">
<h1 className="text-2xl font-bold text-gray-900 mb-2 text-center">
Keep up the good work!
</h1>
{/* Score Display */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="bg-blue-50 rounded-lg p-6 text-center">
<div className="text-3xl font-bold text-blue-900 mb-2">
{examResults.score}%
<div className="mb-8">
<div className="bg-blue-50/60 border border-[#113678]/50 rounded-4xl h-[150px] flex flex-col items-center justify-center">
<div className="text-xl text-black mb-2">Accuracy:</div>
<div className="text-5xl font-bold text-[#113678]">
{((examResults.score / examResults.totalQuestions) * 100).toFixed(
1
)}
%
</div>
<div className="text-sm text-gray-600">Final Score</div>
</div>
</div>
@ -122,7 +128,11 @@ export default function ResultsPage() {
</h3>
<div className="flex flex-col gap-7">
{apiResponse.questions?.map((question) => (
<QuestionItem key={question.id} question={question} />
<QuestionItem
key={question.id}
question={question}
selectedAnswer={undefined}
/>
))}
</div>
</div>