Quiz App using Angular - GeeksforGeeks

We will be creating a Quiz application using the Angular framework. This app will allow users to answer multiple-choice questions and view their results interactively. We'll use Angular Material for a polished UI and implement responsive design to ensure it looks great on all devices. The application will include features like dynamic question rendering, real-time feedback, and score calculation.

Project Preview

Screenshot-2024-08-08-at-23-34-10-QuizApp — Project Preview

Prerequisites

Approach

We will be initializing a Angular Project and making a Quiz App.
We will be using Angular Material for CSS purpose.
A random JSON data will be initialized for Quiz Questions.

Steps to Create Quiz App using Angular

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new quiz-app
cd quiz-app

Step 3: Create Standalone Component

Create a standalone component. You can generate a standalone component using the Angular CLI:

ng generate component quiz

Step 4: Install dependencies

Install Angular Material and Flex-Layout for better UI components:

ng add @angular/material @angular/flex-layout

Dependencies

"dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^16.2.0",
    "@angular/material": "^16.2.14",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
}

Project Structure

Example: Create the required files as seen in the folder structure and add the following codes. We will be taking a JSON data for Quiz Questions.

HTML

<!--quiz.component.html-->

<div class="container">
    <form [formGroup]="quizForm" (ngSubmit)="onSubmit()">
        <mat-card class="quiz-card">
            <mat-card-title>Quiz Questions</mat-card-title>
            <mat-card-content>
                <div *ngFor="let q of qBank" class="question">
                    <mat-card class="question-card">
                        <mat-card-title>{{ q.question }}</mat-card-title>
                        <mat-card-content>
                            <mat-radio-group [formControlName]="q.id.toString()">
                                <mat-radio-button *ngFor="let option of q.options"
                                                  [value]="option">
                                    {{ option }}
                                </mat-radio-button>
                            </mat-radio-group>
                            <div *ngIf="showResults" class="feedback">
                                <p *ngIf="q.selected === q.answer
                                          && q.selected !== ''" class="correct">
                                  Correct!</p>
                                <p *ngIf="q.selected !== q.answer 
                                          && q.selected !== ''" class="incorrect">
                                  Incorrect.
                                    Correct Answer: {{ q.answer }}</p>
                            </div>
                        </mat-card-content>
                    </mat-card>
                </div>
            </mat-card-content>
            <mat-card-actions>
                <button mat-raised-button color="primary" type="submit">Submit</button>
            </mat-card-actions>
        </mat-card>

        <div *ngIf="showResults" class="score">
            <h2>Your Score: {{ score }} / {{ qBank.length }}</h2>
        </div>
    </form>
</div>

HTML

<!--app.component.html-->
<router-outlet></router-outlet>

CSS

/**quiz.component.css**/

.container {
    max-width: