How to Build a Web-Based Quiz App with Angular, Firebase Deployment, and JSON-Based Questions

Introduction

A quiz app is a great way to test knowledge in various domains. This tutorial will guide you through building a quiz app with Angular, where questions are stored in JSON files inside the assets folder, and the app has the ability to shuffle questions to prevent repetitive patterns. Finally, we'll deploy the app on Firebase Hosting.

🚀 GitHub Source Code: Smart-Quiz-App

---

Features of the Web App

• Questions stored as JSON files in assets folder
• Shuffle questions randomly on each quiz session
• Multiple-choice questions with instant feedback
• Score calculation at the end of the quiz
• Responsive UI using Angular Material
• Deployed on Firebase Hosting

---

Tech Stack

• Frontend: Angular 17, Angular Material
• Storage: JSON files inside the assets folder
• Deployment: Firebase Hosting

---

Step 1: Setting Up the Angular Project

1. Install Angular CLI

Ensure you have Node.js installed, then install Angular CLI globally:

npm install -g @angular/cli

2. Create a New Angular Project

ng new quiz-app
cd quiz-app

Select SCSS for styling.

3. Install Required Dependencies

npm install firebase @angular/fire angular-material

---

Step 2: Creating the Quiz JSON File

Inside the src/assets folder, create a file named questions.json and add quiz questions:

[
  {
    "question": "What is the capital of France?",
    "options": ["Berlin", "Madrid", "Paris", "Lisbon"],
    "answer": "Paris"
  },
  {
    "question": "Which planet is known as the Red Planet?",
    "options": ["Earth", "Mars", "Jupiter", "Venus"],
    "answer": "Mars"
  },
  {
    "question": "What is 2 + 2?",
    "options": ["3", "4", "5", "6"],
    "answer": "4"
  }
]

---

Step 3: Fetching and Shuffling Quiz Questions

1. Create a Quiz Service (quiz.service.ts)

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

interface Question {
  question: string;
  options: string[];
  answer: string;
}

@Injectable({
  providedIn: 'root'
})
export class QuizService {
  private jsonUrl = 'assets/questions.json';

  constructor(private http: HttpClient) {}

  getQuestions(): Observable<Question[]> {
    return this.http.get<Question[]>(this.jsonUrl).pipe(
      map(questions => this.shuffleArray(questions))
    );
  }

  private shuffleArray(array: any[]): any[] {
    return array.sort(() => Math.random() - 0.5);
  }
}

---

Step 4: Creating the Quiz Component

1. Generate Quiz Component

ng generate component quiz

2. Implement the Quiz Component (quiz.component.ts)

import { Component, OnInit } from '@angular/core';
import { QuizService } from '../services/quiz.service';

interface Question {
  question: string;
  options: string[];
  answer: string;
}

@Component({
  selector: 'app-quiz',
  templateUrl: './quiz.component.html',
  styleUrls: ['./quiz.component.scss']
})
export class QuizComponent implements OnInit {
  questions: Question[] = [];
  currentQuestionIndex = 0;
  selectedOption: string = '';
  score = 0;
  quizCompleted = false;

  constructor(private quizService: QuizService) {}

  ngOnInit(): void {
    this.quizService.getQuestions().subscribe(data => {
      this.questions = data;
    });
  }

  submitAnswer() {
    if (this.selectedOption === this.questions[this.currentQuestionIndex].answer) {
      this.score++;
    }
    this.selectedOption = '';

    if (this.currentQuestionIndex < this.questions.length - 1) {
      this.currentQuestionIndex++;
    } else {
      this.quizCompleted = true;
    }
  }

  restartQuiz() {
    this.currentQuestionIndex = 0;
    this.score = 0;
    this.quizCompleted = false;
    this.ngOnInit(); // Re-fetch and shuffle questions
  }
}

---

Step 5: Adding Quiz UI in quiz.component.html

<div *ngIf="!quizCompleted">
  <h2>Question {{ currentQuestionIndex + 1 }}/{{ questions.length }}</h2>
  <p>{{ questions[currentQuestionIndex].question }}</p>

  <div *ngFor="let option of questions[currentQuestionIndex].options">
    <label>
      <input type="radio" [value]="option" name="options" [(ngModel)]="selectedOption" />
      {{ option }}
    </label>
  </div>

  <button (click)="submitAnswer()" [disabled]="!selectedOption">Next</button>
</div>

<div *ngIf="quizCompleted">
  <h2>Quiz Completed!</h2>
  <p>Your Score: {{ score }}/{{ questions.length }}</p>
  <button (click)="restartQuiz()">Restart Quiz</button>
</div>

---

Step 6: Styling the Quiz (quiz.component.scss)

h2 {
  color: #007bff;
}

p {
  font-size: 18px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  margin-top: 10px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

---

Step 7: Configuring App Module

In app.module.ts, import necessary modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { QuizComponent } from './quiz/quiz.component';

@NgModule({
  declarations: [AppComponent, QuizComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

Step 8: Deploying the App on Firebase

1. Initialize Firebase Hosting

firebase login
firebase init hosting

Follow the prompts and select:

• "dist/quiz-app" as the public directory
• Configure as a single-page app (Yes)

2. Build and Deploy

ng build --configuration=production
firebase deploy

🎉 Your quiz app is now live on Firebase Hosting!

---

Conclusion

You've successfully built and deployed a web-based quiz app using Angular, with questions stored as JSON files and shuffled each time.

🚀 GitHub Repository: Complete Source Code Here