shafin808s/examjam-frontend
1
0
Fork 0
generated from muhtadeetaron/nextjs-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fix results screen

Browse Source
This commit is contained in:
shafin-r
2025-07-22 17:59:15 +06:00
parent 5245ab878d
commit 341a46e788
8 changed files with 450 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/exam/[id]/page.tsx
View File

@ -9,65 +9,67 @@ import Header from "@/components/Header";
import { Bookmark, BookmarkCheck } from "lucide-react";
import { useModal } from "@/context/ModalContext";
import Modal from "@/components/ExamModal";
import { Question } from "@/types/exam";
import QuestionItem from "@/components/QuestionItem";
// Types
interface Question {
id: number;
question: string;
options: Record<string, string>;
}
// interface Question {
// id: number;
// question: string;
// options: Record<string, string>;
// }
interface QuestionItemProps {
question: Question;
selectedAnswer?: string;
handleSelect: (questionId: number, option: string) => void;
}
// interface QuestionItemProps {
// question: Question;
// selectedAnswer?: string;
// handleSelect: (questionId: number, option: string) => void;
// }
const QuestionItem = React.memo<QuestionItemProps>(
({ question, selectedAnswer, handleSelect }) => {
const [bookmark, setBookmark] = useState(false);
// const QuestionItem = React.memo<QuestionItemProps>(
// ({ question, selectedAnswer, handleSelect }) => {
// const [bookmark, setBookmark] = useState(false);
return (
<div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col">
<h3 className="text-xl font-medium mb-[20px]">
{question.id}. {question.question}
</h3>
<div className="flex justify-between items-center">
<div></div>
<button onClick={() => setBookmark(!bookmark)}>
{bookmark ? (
<BookmarkCheck size={25} color="#113768" />
) : (
<Bookmark size={25} color="#113768" />
)}
</button>
</div>
<div className="flex flex-col gap-4 items-start">
{Object.entries(question.options).map(([key, value]) => (
<button
key={key}
className="flex items-center gap-3"
onClick={() => handleSelect(question.id, key)}
>
<span
className={`flex items-center rounded-full border px-1.5 ${
selectedAnswer === key
? "text-white bg-[#113768] border-[#113768]"
: ""
}`}
>
{key.toUpperCase()}
</span>
<span className="option-description">{value}</span>
</button>
))}
</div>
</div>
);
}
);
// return (
// <div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col">
// <h3 className="text-xl font-medium mb-[20px]">
// {question.id}. {question.question}
// </h3>
// <div className="flex justify-between items-center">
// <div></div>
// <button onClick={() => setBookmark(!bookmark)}>
// {bookmark ? (
// <BookmarkCheck size={25} color="#113768" />
// ) : (
// <Bookmark size={25} color="#113768" />
// )}
// </button>
// </div>
// <div className="flex flex-col gap-4 items-start">
// {Object.entries(question.options).map(([key, value]) => (
// <button
// key={key}
// className="flex items-center gap-3"
// onClick={() => handleSelect(question.id, key)}
// >
// <span
// className={`flex items-center rounded-full border px-1.5 ${
// selectedAnswer === key
// ? "text-white bg-[#113768] border-[#113768]"
// : ""
// }`}
// >
// {key.toUpperCase()}
// </span>
// <span className="option-description">{value}</span>
// </button>
// ))}
// </div>
// </div>
// );
// }
// );
QuestionItem.displayName = "QuestionItem";
// QuestionItem.displayName = "QuestionItem";
export default function ExamPage() {
// All hooks at the top - no conditional calls
@ -267,7 +269,7 @@ export default function ExamPage() {
if (submissionLoading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<div className="flex flex-col items-center justify-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
<p className="text-lg font-medium text-gray-900">Submitting...</p>
</div>
@ -343,6 +345,7 @@ export default function ExamPage() {
question={q}
selectedAnswer={getAnswer(q.id.toString())}
handleSelect={handleSelect}
mode="exam"
/>
))}
</div>