Skip to content

feat: add quiz timer and improve quiz UI #346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gayatripadalia wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add quiz timer and improve quiz UI #346

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 52 additions & 11 deletions app/quiz/[slug]/QuizClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,16 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
{ question: string; chosen: number; correct: number }[]
>([]);
const [questionSet, setQuestionSet] = useState<QuizQuestion[]>([]);

const QUIZ_TIME = 5 * 60; // 5 minutes

const [timeLeft, setTimeLeft] = useState(QUIZ_TIME);

const [didAutoStart, setDidAutoStart] = useState(false);

const isInline = inline ?? false;

const q = questionSet[current]!;
const q = questionSet[current];
const total = Math.min(10, quiz.questions.length);

function startQuiz() {
Expand All @@ -70,6 +76,7 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
setAnswered(false);
setScore(0);
setResults([]);
setTimeLeft(QUIZ_TIME);
setState("active");
setDidAutoStart(true);
}
Expand Down Expand Up @@ -107,10 +114,21 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
}

useEffect(() => {
if (isInline && autoStart && state === "idle" && !didAutoStart) {
startQuiz();
}
}, [autoStart, didAutoStart, isInline, state]);
if (state !== "active") return;

const timer = setInterval(() => {
setTimeLeft((prev) => {
if (prev <= 1) {
clearInterval(timer);
setState("finished");
return 0;
}
return prev - 1;
});
}, 1000);

return () => clearInterval(timer);
}, [state]);

function getOptionClass(idx: number): string {
const base =
Expand All @@ -126,6 +144,8 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
}

const pct = Math.round((score / total) * 100);
const minutes = Math.floor(timeLeft / 60);
const seconds = String(timeLeft % 60).padStart(2, "0");

if (state === "idle") {
return (
Expand Down Expand Up @@ -174,7 +194,7 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
<div className="mt-4 text-sm text-[#a07840] flex flex-wrap gap-2">
<span>{total} questions</span>
<span>·</span>
<span>No time limit</span>
<span>5 minute time limit</span>
<span>·</span>
<span>Instant feedback</span>
</div>
Expand All @@ -186,7 +206,7 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
<div className="flex justify-center flex-wrap gap-4 md:gap-6 mb-10 text-sm md:text-base text-[#a07840] font-medium" style={{ fontFamily: "Rockwell, serif" }}>
<span>{total} questions</span>
<span className="hidden sm:inline">·</span>
<span>No time limit</span>
<span>5 minute time limit</span>
<span className="hidden sm:inline">·</span>
<span>Instant feedback</span>
</div>
Expand Down Expand Up @@ -353,11 +373,32 @@ export default function QuizClient({ quiz, inline, onClose, autoStart }: Props)
>
← Back
</button>
<span className="text-sm text-[#edd9a5] uppercase tracking-[0.2em]">Quiz</span>
<span className="text-sm text-[#8B5E3C] uppercase tracking-[0.2em]">Quiz</span>
</div>
<div className="flex justify-between gap-4">
<span>Question {current + 1} of {total}</span>
<span>Score: {score}</span>
<div className="flex justify-between items-center gap-4">
<span className="font-semibold text-[#8B5E3C]">Question {current + 1} of {total}</span>

<span
className={`font-bold ${
timeLeft <= 10
? "text-red-500 animate-pulse"
: timeLeft <= 60
? "text-red-500"
: "text-emerald-300"
}`}
>
⏳ {minutes}:{seconds}
</span>

<span className="font-semibold text-[#8B5E3C]">Score: {score}</span>
</div>
<div className="w-full h-2 bg-gray-700 rounded-full mt-3">
<div
className="h-2 rounded-full bg-[#d2b48c] transition-all duration-300"
style={{
width: `${((current + 1) / total) * 100}%`,
}}
/>
</div>
</div>

Expand Down