/angular-10-quiz-app

Angular 10 Codelab Quiz App

Primary LanguageTypeScript

Angular Quiz App

Hey everyone! 🎉

I'm really excited to share the Angular quiz app I've been working on! It's all about Angular and built entirely using Angular, and I would love for you to check it out here.

This dynamic and interactive quiz application is designed to present users with a series of questions across various milestones. It features timed quizzes, multiple-answer and single-answer questions, as well as explanations for each question. The app allows you to take engaging quizzes, navigate between questions smoothly, and provide real-time feedback based on your answers. The app is still a work in progress, with ongoing refinements to functionality, performance optimization, and a few features still under development.

Features

  • Multiple Question Types: Support for multiple-answer and single-answer questions.
  • Timer: Each question has a countdown timer to simulate a real-time quiz experience.
  • Score Tracking: Keeps track of the user’s score based on correct answers.
  • Explanations: Displays explanations for correct/incorrect answers after each question is answered.
  • Navigation: Users can navigate between questions using 'Next' and 'Previous' buttons or directly using the URL.
  • Responsive Design: Optimized for both desktop and mobile devices.

Technologies Used

  • Angular: Frontend framework
  • TypeScript: Main programming language
  • RxJS: Reactive programming with Observables
  • SCSS: Styling with Sass
  • Angular Material: UI components

Installation

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

Clone the Repository
bash
Copy code
git clone https://github.com/yourusername/quiz-app.git
cd quiz-app
Install Dependencies
bash
Copy code
npm install
Run the App
bash
Copy code
ng serve
Open your browser and navigate to http://localhost:4200.

Usage

  • Start the quiz by selecting a category or quiz set.
  • Answer the questions by selecting one or more options.
  • Navigate between questions using the 'Next' button or URL.
  • Track your score and review explanations for the answers provided.
  • Optionally, restart the quiz to try again.

Folder Structure

src/app/components: Contains all reusable components like quiz questions, timer, and options.
src/app/services: Contains services for managing quiz data, navigation, and other business logic.
src/app/models: Interfaces and models for question and quiz data structures.
src/app/pipes: Custom pipes for formatting data (e.g., joining strings for explanations).
src/styles: Global styles, including theme customization and SCSS variables.

Development Workflow

Adding a New Feature
Create a new component or service under the respective folder.
Update or create unit tests for your feature.
Test your feature locally by running: bash
Copy code
ng test
Debugging
Ensure ng serve is running, then inspect the app using browser developer tools.
Use the Angular ng commands to check components and debug issues.
Contributing
Contributions are welcome! To contribute:

Fork the repository.
Create a feature branch (git checkout -b feature-name).
Commit your changes (git commit -m 'Add new feature').
Push to the branch (git push origin feature-name).
Open a pull request.

Future Enhancements

Implement user authentication for saving quiz progress.
Add more question categories and question sets.
Leaderboard system to track top performers.

Show Your Support

If you're interested in Angular or just love interactive quiz apps, please take a look and give it a ⭐ if you like it! Your feedback and support would mean a lot!

License

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