This tutorial is about how to create a basic quiz app in Angular. This is a fundamental example of understanding the angular concept. Quiz application in one form or the other is becoming a general requirement for most applications these days.
About:
A list of questions will be displayed, each with four answer choices. There will be only one option is correct. You can move the next and the previous question through the button. Once you will reach to last question finish button will come 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 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 for importing and extracting from JSON files. Add resolveJsonModule in the tsconfig.json file.
"resolveJsonModule": true,
Step 3: Update the ts file.
Add the below code in 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 below code in 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 below link.
https://mdbootstrap.com/docs/angular/