TriviaTrail is an interactive tech quiz web app built as a Web Development course assignment. The main goal of the assignment was to demonstrate how to use REST APIs, handle AJAX requests, and update the DOM dynamically without page reloads using HTML, CSS, and Vanilla JavaScript.
The app pulls live trivia questions from QuizAPI, tracking your score and giving immediate feedback.
The first version of this project met the course requirements. You could pick basic categories (like Linux or DevOps), choose a difficulty, and fetch questions.
But it had some issues:
- The UI for picking categories was confusing and relied on popups that sometimes glitched.
- The layout didn't look great on mobile phones.
- It wasn't fully using the filtering tags that the QuizAPI provided.
Recently, the app went through a major cleanup and UI update to fix those bugs and better use the API:
- Removed buggy modals: Replaced the confusing popups with simple "Quick Modes" (like Interview Prep or AWS Certification).
- Better API usage: The app now combines your selections to query the API with complex tags (e.g. asking the API for questions tagged with both
javascriptandinterview). - New features: Added a running points total (the trophy icon) that saves to your browser, an animated tags ribbon, and a working light/dark mode toggle.
- Cleaner code: Fixed animation bugs and cleaned up legacy CSS.
Before
After
Before
After
Before
After
Before
After
- Clone the repository:
git clone https://github.com/lamamn/quiz-webapp-quizapi.git
- Open
index.htmlin your browser. (Note: you need a valid QuizAPI key for it to pull live questions).