QuizSpark is a responsive, accessible, and interactive quiz web app built with HTML, CSS, and JavaScript. It fetches trivia questions from the Open Trivia Database (OpenTDB) and presents them in a clean, mobile-first UI. This project was designed for fun, learning, and practicing modern web development techniques.
- ✅ Responsive design (mobile, tablet, desktop)
- ✅ Accessible answer buttons (keyboard + screen reader support)
- ✅ Dynamic progress tracking with styled range input
- ✅ Audio feedback for correct, incorrect, and final answers
- ✅ Smooth transitions between sections
- ✅ Reset functionality to replay the quiz
- ✅ Questions fetched from OpenTDB API
- Start Page: A welcome message and a button to start the quiz.
- Question Page:
- 5 multiple-choice animal-related questions are fetched via OpenTDB.
- User selects an answer; correct/incorrect feedback is shown.
- Score increases by 5 points per correct answer.
- A progress bar visually tracks quiz completion.
- Results Page: The total correct answers and final score are displayed, with an option to restart the quiz.
- HTML5 — Semantic markup and structure
- CSS3 — Custom properties (variables), media queries, transitions
- JavaScript (ES6) — Dynamic DOM manipulation, generators, async/await
- Google Fonts — Roboto family
- Audio API — For sound feedback
- OpenTDB API — For real-time trivia data