🧮 Math Quiz Game

An engaging web-based math quiz game built with vanilla JavaScript that challenges players with random arithmetic operations. Features progressive scoring, local progress saving, and responsive design for an optimal learning experience.

✨ Features

• 🎲 Random question generation for four basic operations (addition, subtraction, multiplication, division)
• 📈 Progressive scoring system (+3 for correct answers, -1 for incorrect)
• 💾 Local storage integration for saving progress
• 🎯 Three attempts per question before showing the correct answer
• 📱 Fully responsive design across all devices
• 🔔 Interactive toast notifications for user feedback
• 🎨 Modern UI with smooth animations and transitions

🚀 Live Demo

Experience the game live: Math Quiz Game

📸 Screenshots

🛠️ Technologies Used

• HTML5
• CSS3 with Tailwind CSS
• Vanilla JavaScript
• Toastify JS Library
• Local Storage API

🌟 Key Learnings

During the development of this project, I gained valuable experience in:

1. Generating random numbers within specific ranges
2. Understanding CSS Sticky Position property
3. Working with the animationend event
4. Browser reflow optimization techniques
5. Local Storage API implementation
6. Toast notifications using Toastify JS
7. Error handling and user feedback
8. Tailwind CSS @layer directives

💡 How to Play

1. Choose to save your score locally, through the browser prompt
2. Start the game by answering the initial question
3. Each correct answer adds 3 points to your score
4. Each incorrect answer deducts 1 point
5. You get 3 attempts per question before the correct answer is shown
6. Continue your progress across sessions, using the local storage feature

🎮 Game Controls

• Type your answer in the input field
• Press Enter or click Submit to check your answer
• Use the local storage prompt to manage your progress:
  • Type 'Yes' to save progress
  • Type 'No' to play without saving
  • Type 'Delete' to remove saved progress
  • Click 'Cancel' if progress is already saved

📥 Installation

1. Clone the repository:

   git clone https://github.com/VinayNoogler000/Math-Quiz-Game.git
   

2. Navigate to the project directory:

   cd Math-Quiz-Game
   

3. Install tailwindcss via npm:

     npm install -D tailwindcss
   

4. Start the Tailwind's build process to Build the CSS file:

     npx tailwindcss -i src/style.css -o dist/output.css --watch
   

5. Open index.html in your preferred browser & see the project working live.

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Add some AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a Pull Request

🐛 Bug Reporting

Found a bug? Please open an issue with a clear description and steps to reproduce. Your input helps make this project better for everyone!

📝 Todo

• Add difficulty levels
• Implement a timer feature
• Add sound effects
• Create a leaderboard
• Add more mathematical operations
• Implement a practice mode

🙏 Acknowledgments

• Tailwind CSS for the utility-first CSS framework
• Toastify JS for the notification system

🔑 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

📞 Contact Developer & Owner

Vinay Tambey

• Email: Send Email to Vinay
• LinkedIn: Vinay Tambey
• GitHub: @VinayNoogler000
• Twitter/X: @VinayNoogler000

Project Link: GitHub Repo
Let's connect and collaborate! I'm always open to new opportunities in frontend web development.

📊 Project Status

This project is, currently, not in development by the Owner, but we're always looking to add new features and improvements!

💼 Support

Give a ⭐️ if this project helped you!

Made with ❤️ by Vinay Tambey