generated from muhtadeetaron/nextjs-template
fix(exam): fix pretest screen start exam button
This commit is contained in:
@ -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); // 50–100ms 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>
|
||||
|
||||
Reference in New Issue
Block a user