The feature image for the project Quizzical.
The feature image for the project Quizzical.
The feature image for the project Quizzical.
The feature image for the project Quizzical.

FRONTEND WEB APP | 2026

Quizzical

A trivia quiz app powered by the Open Trivia Database — pick your category, difficulty, and question count, then race against a countdown timer to score above 50% and win.

React
JavaScript
CSS
Open Trivia DB API

OVERVIEW

Quizzical pulls live trivia questions from the Open Trivia Database and presents them as a timed multiple-choice quiz. Players configure each session by category, difficulty, and question count before the game begins. Each question has a 5-second countdown — run out of time and the answer is revealed automatically. Score above 50% to win, complete with a confetti celebration.

IMPLEMENTATION

TECH STACK

Framework

React, Vite

Language

JavaScript

Styling

CSS

Api

Open Trivia Database

Deployment

Render

FEATURES

Configurable quiz setup — category, difficulty, and question count

5-second countdown timer per question with auto-submit on expiry

Randomised answer order for each question

Win/loss detection with confetti animation

Visual correct/incorrect feedback after each answer

API error handling for invalid or exhausted question pools

CHALLENGES & SOLUTIONS

Auto-submitting answers when the timer expires

Used a useEffect with a setInterval countdown tied to the selected answer state. When the interval reaches zero, it programmatically triggers the same submit handler used for manual answers — ensuring identical scoring logic regardless of how the question was completed.

Shuffling answers without breaking True/False questions

Multiple-choice answers are shuffled by randomly sorting all options, but boolean questions must always display as "True" and "False" in a fixed order. Added a question type check before shuffling to skip randomisation for boolean questions entirely.

API response data containing HTML entities

The Open Trivia Database returns question text and answers as HTML-encoded strings (e.g. &, '). Used the html-entities library to decode all API responses before storing them in state, preventing raw entity strings from rendering in the UI.