generated from muhtadeetaron/nextjs-template
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useEffect } from "react";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { useExamStore } from "@/stores/examStore";
|
|
import QuestionItem from "@/components/QuestionItem";
|
|
import SlidingGallery from "@/components/SlidingGallery";
|
|
import { getResultViews } from "@/lib/gallery-views";
|
|
|
|
export default function ResultsPage() {
|
|
const router = useRouter();
|
|
const { result, clearResult, setStatus, status } = useExamStore();
|
|
|
|
function handleBackToHome() {
|
|
clearResult();
|
|
router.replace("/categories");
|
|
}
|
|
|
|
useEffect(() => {
|
|
const handlePopState = () => {
|
|
if (status !== "finished") {
|
|
handleBackToHome();
|
|
}
|
|
};
|
|
|
|
window.addEventListener("popstate", handlePopState);
|
|
return () => {
|
|
window.removeEventListener("popstate", handlePopState);
|
|
};
|
|
}, [status, router, setStatus]);
|
|
|
|
if (!result) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<p className="text-lg font-medium">Redirecting...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const views = getResultViews(result);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<button className="px-10 pt-10" onClick={handleBackToHome}>
|
|
<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-[#113768] text-center">
|
|
You did great!
|
|
</h1>
|
|
|
|
<SlidingGallery views={views} height={"26vh"} />
|
|
|
|
{/* Render questions with correctness */}
|
|
{result.user_questions.map((q, idx) => {
|
|
const userAnswer = result.user_answers[idx];
|
|
const correctAnswer = result.correct_answers[idx];
|
|
|
|
return (
|
|
<div key={q.question_id} className="rounded-3xl mb-6">
|
|
<QuestionItem
|
|
question={q}
|
|
index={idx}
|
|
selectedAnswer={userAnswer}
|
|
onSelect={() => {}}
|
|
userAnswer={userAnswer}
|
|
correctAnswer={correctAnswer}
|
|
showResults={true}
|
|
/>
|
|
|
|
{/* Optional answer feedback below the question */}
|
|
{/* <div className="mt-2 text-sm">
|
|
{userAnswer === null ? (
|
|
<span className="text-yellow-600 font-medium">
|
|
Skipped — Correct: {String.fromCharCode(65 + correctAnswer)}
|
|
</span>
|
|
) : userAnswer === correctAnswer ? (
|
|
<span className="text-green-600 font-medium">Correct</span>
|
|
) : (
|
|
<span className="text-red-600 font-medium">
|
|
Your Answer: {String.fromCharCode(65 + userAnswer)} |
|
|
Correct Answer: {String.fromCharCode(65 + correctAnswer)}
|
|
</span>
|
|
)}
|
|
</div> */}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleBackToHome}
|
|
className="fixed bottom-0 w-full bg-blue-900 text-white h-[74px] font-bold text-lg hover:bg-blue-800 transition-colors"
|
|
>
|
|
Finish
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|