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 timer reappearing after exam submission

Browse Source
This commit is contained in:
shafin-r
2025-09-01 17:13:35 +06:00
parent 5507602031
commit 5fd76bc0ec
3 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/QuestionItem.tsx
View File

@ -9,6 +9,9 @@ interface QuestionItemProps {
index: number;
selectedAnswer: Answer;
onSelect: (answer: Answer) => void;
userAnswer?: Answer; // new
correctAnswer?: Answer; // new
showResults?: boolean; // control whether to highlight or not
}
const letters = ["A", "B", "C", "D"]; // extend if needed
@ -18,6 +21,9 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
index,
selectedAnswer,
onSelect,
userAnswer,
correctAnswer,
showResults = false,
}) => {
return (
<div className="border border-blue-100 p-6 bg-slate-100 rounded-3xl mb-6">
@ -25,10 +31,12 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
{index + 1}. {question.question}
</p>
<div className="w-full flex justify-between">
<div></div>
<Bookmark size={24} />
</div>
{!showResults && (
<div className="w-full flex justify-between">
<div></div>
<Bookmark size={24} />
</div>
)}
<div className="flex flex-col gap-3">
{question.options.map((opt, optIdx) => {
@ -38,10 +46,41 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
: Array.isArray(selectedAnswer) &&
selectedAnswer.includes(optIdx);
// ✅ logic for coloring after results
let btnClasses = "bg-gray-100 text-gray-900 border-gray-400";
if (isSelected) {
btnClasses = "bg-blue-600 text-white border-blue-600";
}
if (showResults && correctAnswer !== undefined) {
if (question.type === "Single") {
if (userAnswer === optIdx && userAnswer !== correctAnswer) {
btnClasses = "bg-red-500 text-white border-red-600"; // wrong
}
if (correctAnswer === optIdx) {
btnClasses = "bg-green-500 text-white border-green-600"; // correct
}
} else {
// Multi-select case
const userSelected =
Array.isArray(userAnswer) && userAnswer.includes(optIdx);
const isCorrect =
Array.isArray(correctAnswer) && correctAnswer.includes(optIdx);
if (userSelected && !isCorrect) {
btnClasses = "bg-red-500 text-white border-red-600";
}
if (isCorrect) {
btnClasses = "bg-green-500 text-white border-green-600";
}
}
}
return (
<div key={optIdx} className="flex items-center gap-3">
<button
onClick={() => {
if (showResults) return; // disable changes in results mode
if (question.type === "Single") {
onSelect(optIdx);
} else {
@ -58,12 +97,8 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
}}
className={`w-7 h-7 rounded-full border font-bold
flex items-center justify-center
${
isSelected
? "bg-blue-600 text-white border-blue-600"
: "bg-gray-100 text-gray-900 border-gray-400"
}
hover:bg-blue-500 hover:text-white transition-colors`}
${btnClasses}
transition-colors`}
>
{letters[optIdx]}
</button>