generated from muhtadeetaron/nextjs-template
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import React 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 } = useExamStore();
|
|
|
|
if (!result) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<p className="text-lg font-medium">No results to display.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const handleBackToHome = () => {
|
|
clearResult();
|
|
router.push("/categories");
|
|
};
|
|
|
|
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={() => {}} // disabled in results
|
|
/>
|
|
|
|
{/* Answer feedback */}
|
|
<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>
|
|
);
|
|
}
|