Angular Quiz App

Welcome to the Angular Quiz App! 🚀

This dynamic and interactive application is built entirely with Angular and designed to provide an engaging quiz experience. It features timed questions, multiple and single-answer formats, and detailed explanations to help users learn while they test their knowledge. Check it out live here.

Key Features

• Diverse Question Types: Includes support for single-answer and multiple-answer questions.
• Countdown Timer: Each question is timed to simulate real-world quiz scenarios.
• Real-Time Scoring: Tracks your score dynamically as you progress.
• Detailed Explanations: Learn as you go with explanations for correct and incorrect answers.
• Smooth Navigation: Seamlessly move between questions using buttons or the URL.
• Responsive Design: Optimized for a great experience on both desktop and mobile devices.

Technologies Used

• Angular: For building the frontend framework.
• TypeScript: The main programming language.
• RxJS: To handle reactive programming with Observables.
• SCSS: For modular and maintainable styling.
• Angular Material: To leverage prebuilt UI components.

Installation

Prerequisites

• Node.js (v12.x or above)
• Angular CLI (v10.x or above)

Steps to Run Locally

1. Clone the repository:

   git clone https://github.com/yourusername/quiz-app.git
   cd quiz-app
   

2. Install dependencies:

   npm install

3. Run the application:

   ng serve

4. Open your browser and navigate to http://localhost:4200.

Usage

• Select a quiz category or set to start.
• Answer each question by selecting one or more options.
• Use the Next button or URL navigation to move between questions.
• Track your score and view explanations after each answer.
• Restart the quiz at any time to try again.

Folder Structure

• src/app/components: Reusable components like questions, timer, and options.
• src/app/services: Handles business logic, quiz data, and navigation.
• src/app/models: Interfaces and data models for the quiz structure.
• src/app/pipes: Custom pipes for formatting data (e.g., combining explanations).
• src/styles: Global SCSS styles, including themes and variables.

Development Workflow

Adding a New Feature

1. Create a new component or service in the appropriate folder.
2. Write or update unit tests for your feature.
3. Test locally:

   ng test

Debugging

• Run ng serve and inspect the app using browser developer tools.
• Use Angular CLI commands to debug components and services.

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a feature branch:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Add new feature"

4. Push to your branch:

   git push origin feature-name

5. Open a pull request.

Future Enhancements

• User Authentication: Allow users to save and track quiz progress.
• Additional Categories: Expand the range of quiz topics.
• Leaderboard: Introduce a leaderboard for top performers.

Show Your Support

If you enjoy using the app or find it useful, please give it a ⭐ on GitHub! Your feedback and support are greatly appreciated.

License

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