🎯 Quiz Game - OOP JavaScript Practice

Project Overview

A clean, interactive quiz application built with vanilla JavaScript following Object-Oriented Programming principles. This project demonstrates modern JavaScript techniques and DOM manipulation skills.

Features

• Category Selection: Choose from multiple quiz categories
• Difficulty Levels: Easy, Medium, and Hard difficulty settings
• Customizable Question Count: Set how many questions you want to answer
• Score Tracking: Real-time score display throughout the quiz
• Smooth Animations: Enhanced user experience with AOS (Animate On Scroll) library
• Responsive Design: Works seamlessly on desktop and mobile devices

Technologies Used

• HTML5 - Semantic markup and page structure
• CSS3 - Styling and responsive design
• Bootstrap 5 - UI components and layout system
• JavaScript (ES6+) - Application logic and OOP implementation
• AOS Library - Scroll animations and transitions
• Open Trivia DB API - Question data source

Technical Implementation

• OOP Architecture: Implemented using JavaScript classes for questions, quiz logic, and UI rendering
• Modern JavaScript: Utilizes ES6+ features (classes, arrow functions, template literals)
• Dynamic Content: Questions and answers are generated dynamically based on user selections
• API Integration: Fetches questions from the Open Trivia Database API

Project Structure

quiz-game/
├── index.html
├── css/
│   ├── bootstrap.min.css
│   └── style.css
├── images/
│   └── quiz.png
└── js/
    ├── bootstrap.bundle.min.js
    ├── index.js
    ├── question.js
    └── quiz.js

How to Use

1. Select your preferred quiz category
2. Choose a difficulty level
3. Enter the number of questions you want to answer
4. Click "Start" to begin the quiz
5. Read each question and click on your answer
6. View your final score at the end
7. Click "Try Again" to restart with new options

Live Demo

🔗 Try the Quiz Game here

Screenshots

Quiz start screen with category selection

Interactive question interface with animated elements

Results page showing final score

Development Focus

This project was created specifically to practice and demonstrate Object-Oriented Programming principles in JavaScript, highlighting the importance of clean code architecture in frontend development.

👩‍💻 Developed By Asmaa Abdo