This tutorial is about how to create a basic quiz app in Angular. This is a basic example for understanding the angular concept. Implementing a quiz in one form or another is becoming a general requirement for most applications these days.
about:
A list of questions will be displayed, each with four answer options. There will only be one correct option. You can move to the next and previous question through the button. Once you get to the last question a finish button will appear and you have to finish the quiz to see your score. Here the question is in JSON format.
Below are the steps to create a quiz app in Angular.
Step 1: Create a new app.
ng new quiz-app
Step 2: Create a JSON file and add some questions (filename:questions.json).
[
{
"id": 1,
"question": "What is the capital of Belgium?",
"a": "Vienna",
"b": "Berlin",
"c": "Brussels",
"d": "Prague",
"answer": "c"
},
{
"id": 2,
"question": "What is the capital of Australia?",
"a": "Vienna",
"b": "Canberra",
"c": "Brussels",
"d": "Prague",
"answer": "b"
},
{
"id": 3,
"question": "Which of the following countries is not a part of Melanesia region in the pacific ocean?",
"a": "Vanuatu",
"b": "Solomon Islands",
"c": "Fiji",
"d": "Kiribati",
"answer": "d"
},
{
"id": 4,
"question": "Which day is celebrated as International Literacy Day ?",
"a": "8 September",
"b": "7 July",
"c": "19 April",
"d": "28 June",
"answer": "a"
},
{
"id": 5,
"question": "Which day is celebrated as World Environment Day?",
"a": "16 May",
"b": "5 June",
"c": "17July",
"d": "18 December",
"answer": "b"
}
]
* resolveJsonModule
It allows importing and extracting JSON files. Add the resolveJsonModule in the tsconfig.json file.
"resolveJsonModule": true,
Step 3: Update the ts file.
Add the code below src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import questionData from '../../app/files/questions.json';
@Component({
selector: 'app-quiz',
templateUrl: './quiz.component.html',
styleUrls: ['./quiz.component.css']
})
export class AppComponent implements OnInit {
allQuestions:any[]=questionData;
currentIndex=0;
currentQuestion:any='';
counter:number=0;
option1:any='';
option2:any='';
option3:any='';
option4:any='';
id:any='';
options: any = [];
rightAnswer:number=0;
panelsts:boolean=false;
constructor() { }
ngOnInit(): void {
this.currentQuestion = this.allQuestions[this.currentIndex].question;
this.option1 = this.allQuestions[this.currentIndex].a;
this.option2 = this.allQuestions[this.currentIndex].b;
this.option3 = this.allQuestions[this.currentIndex].c;
this.option4 = this.allQuestions[this.currentIndex].d;
this.id = this.allQuestions[this.currentIndex].id;
}
nextQuestion(){
if(this.counter<= this.allQuestions.length){
this.counter++;
}
this.currentIndex = this.counter;
this.currentQuestion = this.allQuestions[this.currentIndex].question;
this.option1 = this.allQuestions[this.currentIndex].a;
this.option2 = this.allQuestions[this.currentIndex].b;
this.option3 = this.allQuestions[this.currentIndex].c;
this.option4 = this.allQuestions[this.currentIndex].d;
this.id = this.allQuestions[this.currentIndex].id;
}
prevQuestion(){
this.counter--;
this.currentIndex = this.counter;
this.currentQuestion = this.allQuestions[this.currentIndex].question;
this.option1 = this.allQuestions[this.currentIndex].a;
this.option2 = this.allQuestions[this.currentIndex].b;
this.option3 = this.allQuestions[this.currentIndex].c;
this.option4 = this.allQuestions[this.currentIndex].d;
this.id = this.allQuestions[this.currentIndex].id;
}
finish(){
this.panelsts = true;
for(let i=0; i<this.allQuestions.length;i++){
if(this.allQuestions[i].answer == this.options[i]){
this.rightAnswer++;
}
}
}
}
Step 4: Update the Html file.
Add the code below src/app/app.component.html.
<div class="card">
<div class="card-header">
<h3>Featured</h3>
</div>
<div class="card-body">
<h5 class="card-title"> {{counter+1}}. {{currentQuestion}}</h5>
<div class="card-text">
<!-- Default radio -->
<div class="form-check">
<input
mdbRadio
class="form-check-input"
type="radio"
[(ngModel)]="options[this.currentIndex]" name="option1" id="option1" value="a"
/>
<label class="form-check-label" for="option1"> {{option1}} </label>
</div>
<!-- Default checked radio -->
<div class="form-check">
<input
mdbRadio
class="form-check-input"
type="radio"
[(ngModel)]="options[this.currentIndex]" name="option2" value="b"
id="option2"
/>
<label class="form-check-label" for="option2">{{option2}}</label>
</div>
<div class="form-check">
<input
mdbRadio
class="form-check-input"
type="radio"
[(ngModel)]="options[this.currentIndex]" name="option3" value="c"
id="options3"
/>
<label class="form-check-label" for="options3"> {{ option3 }}</label>
</div>
<div class="form-check">
<input
mdbRadio
class="form-check-input"
type="radio"
[(ngModel)]="options[this.currentIndex]" name="option4" value="d"
id="options4"
/>
<label class="form-check-label" for="options4">{{option4}}</label>
</div>
</div><br>
<div class="alert alert-success" role="alert" *ngIf="panelsts">
Your Score is {{ rightAnswer}} out of {{ allQuestions.length }}
</div>
<button type="button" class="btn btn-secondary" [disabled]="counter==0" (click)="prevQuestion()" >Previous</button>
<button type="button" class="btn btn-primary" [disabled]="counter==allQuestions.length-1" *ngIf="counter!=allQuestions.length-1" (click)="nextQuestion()">Next</button>
<button type="button" class="btn btn-primary" *ngIf="counter==allQuestions.length-1" (click)="finish()">Finish</button>
</div>
</div>
That’s all about this quiz app in Angular. After writing the above code open http://localhost:4200.
To install the material design please visit the link below.
