Quizzical 🧠

A responsive React quiz application that tests your knowledge on a wide range of topics using the Open Trivia Database API.

Features

• Dynamic Questions: Fetches 5 random multiple-choice questions from the Open Trivia Database
• Interactive UI: Clean, modern interface with smooth transitions
• Real-time Feedback: Visual indicators for correct/incorrect answers after checking
• Score Tracking: Displays your score out of total questions
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Error Handling: Graceful error handling with retry functionality
• Loading States: Smart loading indicators that appear only when needed

Demo

https://quizzical-tanzir.netlify.app/

Screenshots

Main Features:

• Intro Screen: Welcome page with quiz introduction
• Question Interface: Multiple choice questions with single selection
• Results Display: Color-coded feedback showing correct (green) and incorrect (red) answers
• Play Again: Start a new quiz with fresh questions

Tech Stack

• Frontend: React 19 with Hooks (useState, useEffect)
• Styling: CSS3 with responsive design and media queries
• API: Open Trivia Database API
• Build Tool: Vite
• Package Manager: npm

Installation

1. Clone the repository

   git clone https://github.com/TanzirR/Quizzical.git
   cd Quizzical

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to see the app

Project Structure

Quizzical/
├── public/
│   └── vite.svg
├── src/
│   ├── Quiz.jsx              # Individual quiz question component
│   ├── App.jsx               # Main application component
│   ├── App.css               # Application styles
│   ├── index.css             # Global styles
│   └── main.jsx              # Application entry point
├── index.html
├── package.json
├── vite.config.js
└── README.md

Key Components

App.jsx

• Main application state management
• Handles quiz flow and navigation
• Manages API calls and error handling
• Score calculation and results display

Quiz.jsx

• Individual question rendering
• Answer selection logic
• Visual feedback for results
• Responsive button styling

API Integration

Uses the Open Trivia Database API:

• Endpoint: https://opentdb.com/api.php?amount=5&type=multiple
• Response: 5 multiple choice questions with categories, difficulty, and answers
• Data Processing: HTML entity decoding for proper text display

Responsive Design

• Desktop: Full-width layout with horizontal answer options
• Tablet: Adjusted spacing and button sizes
• Mobile: Vertical answer layout with touch-friendly buttons
• Breakpoints: 1024px, 768px, 480px, 320px

Development Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

Future Enhancements

• Category selection
• Question count customization
• Dark mode toggle

Acknowledgments

• Open Trivia Database for providing the quiz questions
• React for the frontend framework
• Vite for the build tool

Contact

• GitHub: TanzirR
• Email: tanzir.razzaque@northsouth.edu