Quiz App using Angular

// quiz-component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';


@Component({
    selector: 'app-quiz',
    templateUrl: './quiz.component.html',
    styleUrls: ['./quiz.component.css']
})
export class QuizComponent implements OnInit {
    qBank = [
        { id: 1, question: "What is the capital of Haryana?", 
        options: ["Yamunanagar", "Panipat", "Gurgaon", "Chandigarh"], 
        answer: "Chandigarh", selected: '', correct: false },
        { id: 2, question: "What is the capital of Punjab?", 
        options: ["Patiala", "Ludhiana", "Amritsar", "Chandigarh"],
        answer: "Chandigarh", selected: '', correct: false },
        { id: 3, question: "What is the capital of India?", 
        options: ["Delhi", "Mumbai", "Kolkata", "Chennai"],
        answer: "Delhi", selected: '', correct: false },
        { id: 4, question: "What is the capital of Uttarakhand?", 
        options: ["Roorkee", "Haridwar", "Dehradun", "Nainital"], 
        answer: "Dehradun", selected: '', correct: false },
        { id: 5, question: "What is the capital of Uttar Pradesh?",
        options: ["GB Nagar", "Lucknow", "Prayagraj", "Agra"],
        answer: "Lucknow", selected: '', correct: false }
    ];

    quizForm: FormGroup;
    score: number = 0;
    showResults: boolean = false;

    constructor(private fb: FormBuilder) {
        this.quizForm = this.fb.group({});
    }

    ngOnInit() {
        this.qBank.forEach(q => {
            this.quizForm.addControl(q.id.toString(), new FormControl(''));
        });
    }

    onSubmit() {
        this.score = 0;
        this.qBank.forEach(q => {
            const controlValue = this.quizForm.get(q.id.toString())?.value;
            q.selected = controlValue;
            if (controlValue === q.answer) {
                q.correct = true;
                this.score++;
            } else {
                q.correct = false;
            }
        });

        this.showResults = true;
    }
}

// quiz.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { QuizComponent } from './quiz.component';

describe('QuizComponent', () => {
    let component: QuizComponent;
    let fixture: ComponentFixture<QuizComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [QuizComponent]
        });
        fixture = TestBed.createComponent(QuizComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

//app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { MatRadioModule } from '@angular/material/radio';
import { MatButtonModule } from '@angular/material/button';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { QuizComponent } from './quiz/quiz.component';


const routes: Routes = [
    { path: '', component: QuizComponent },
];

@NgModule({
    declarations: [
        AppComponent,
        QuizComponent
    ],
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        MatCardModule,
        MatRadioModule,
        MatButtonModule,
        FlexLayoutModule,
        RouterModule.forRoot(routes)
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'quiz-app';
}

// app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
    beforeEach(() => TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        declarations: [AppComponent]
    }));

    it('should create the app', () => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
        expect(app).toBeTruthy();
    });

    it(`should have as title 'quiz-app'`, () => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
        expect(app.title).toEqual('quiz-app');
    });

    it('should render title', () => {
        const fixture = TestBed.createComponent(AppComponent);
        fixture.detectChanges();
        const compiled = fixture.nativeElement as HTMLElement;
        expect(compiled.querySelector('.content span')?.textContent).
        toContain('quiz-app app is running!');
    });
});

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }