🎮 Usage Guide

How to Play

1. Choose a Topic: Choose HTML, CSS, or JavaScript from the home screen.
2. Answer Questions: For each question, select the correct answer. You can navigate between questions using Previous/Next buttons.
3. Timer: Complete all questions before the timer runs out. The timer bar changes color as time runs low.
4. Navigation: Use Previous/Next or jump to any question using the navigation panel.
5. Submit: Click "Finish Test" to see your results and review answers.
6. View Results: At the end, view your score, percentage, and review your answers.
7. Replay: Try again or select a different topic to improve your skills!

Controls

• Mouse/Touch: Click/tap to select answers and navigate.
• Navigation: Use on-screen Previous/Next buttons to move between questions.

🔧 Tech Stack

Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling, gradients, and responsive design
• JavaScript (ES6+): Modular code for quiz logic, timer, and utilities
• Bootstrap 5: Responsive grid and UI components
• Font Awesome: Iconography
• Git – Version control
• GitHub – Code hosting and collaboration
• GitHub Pages – Static website hosting

🛠️ Getting Started

1. Clone the repository:

   git clone https://github.com/pvm-harshavardhan/quiz-app.git
   

2. Change to the project directory:

   cd quiz-app
   

3. Open the app:
   • Open index.html in your web browser.
4. Start quizzing! 🎉

📁 Project Structure

quiz-app/
├── 📄 index.html          # Main HTML structure
├── 📁 css/
│   └── styles.css         # CSS styling and animations
└── 📁 js/
    ├── questions.js       # Quiz questions and topics
    ├── quiz.js            # Main quiz logic and UI rendering
    ├── timer.js           # Timer class for countdown
    └── utils.js           # Utility functions (shuffle, percent, etc.)

📱 Browser Compatibility

• ✅ Chrome (recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ⚠️ Internet Explorer (limited support)

🐛 Troubleshooting

Quiz Not Loading?

1. Ensure all JS and CSS files are present and paths are correct.
2. Check browser console for errors.
3. Make sure you are opening index.html from the correct directory.

Styling Issues?

1. Make sure all CSS files are loaded
2. Confirm Bootstrap and Font Awesome CDNs are accessible.
3. Clear browser cache and refresh.

Timer Not Working?

1. Make sure JavaScript is enabled in your browser.
2. Check for errors in the console.

🤝 Contributing

Contributions are welcome!
Feel free to open issues or submit pull requests to improve the app.

📄 License

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

📞 Contact

Your Name - @pvm_harsha
Project Link: Quiz App Project

Made with ❤️ by P VM Harsha

Happy Learning! 🚀📝