1st YearBeginnerWeb 2-3 weeks
Quiz Application with Timer
A browser-based multiple-choice quiz app with categories, timed questions, score tracking, and a leaderboard — supporting custom quiz creation.
HTMLCSSJavaScript
Find GitHub repos & source code →How to build it — step by step
- 1Question Bank: Store questions in a JS array/JSON with category, question, options, correct answer, and explanation
- 2Quiz Engine: Render questions one by one, track time per question using setInterval, handle answer selection
- 3Scoring: Award points based on speed (faster answer = more points), subtract for wrong answers
- 4Results: Show detailed results with correct answers and explanations; store high scores in localStorage
Key features to implement
- ✓Multiple categories (History, Science, Tech, Math)
- ✓Countdown timer per question with visual bar
- ✓Bonus points for quick correct answers
- ✓Review mode showing all answers with explanations
- ✓Local leaderboard
💡 Unique twist to stand out
Add a "Custom Quiz Builder" where users can create and share their own quiz by generating a shareable link (encode quiz data in the URL).
🎓 What you'll learn
Event handling, timers, state management in vanilla JS, and URL parameter encoding/decoding.