Angular 10 – Quiz App(Part 1)

Time for a little fun stuff!
Let’s apply what we’ve learnt so far to build a simple Quiz App. We are going to break in down and take it step by step.

1. Initial Setup
2. Modify the Questions Array
3. Display a List of Options
4. Next Steps

1. The Initial Setup

Firs we’ll have two components: Quiz and Question. The quiz component is the parent component while the question component is the child component.

The Question component contains a list of questions. It will show this questions one at a time. The Quiz component holds the index of the current question. This index is passed to the child component(Learn about Passing Properties from Parent to Child)

So the child shows a particular question based on the index it received from the parent. The Quiz component also has a Previous and Next buttons. Clicking this button decrements or increments the current index respectively.

question.component.ts

export class QuestionComponent implements OnInit, DoCheck {
  questions: string[];
  @Input() questionIndex: number;
  currentQuestion: string;

  ngOnInit(): void {
   this.questions = [
      'What is your name?',
      'Who created you?',
      'Why do birds sing?',
      'Do you know this song?',
      'How do I get books?'];
  }

  ngDoCheck(): void {
    this.currentQuestion = this.questions[this.questionIndex];
  }
}

Notice that the questionIndex is an @Input property. The value is received from the parent. Also note that the currentQuestion is updated in the ngDoCheck() method. Learn about Angular Lifecycle Methods.

Later, we’ll adjust the questions to include options and answer. Let’s just keep it simple for now.

question.component.html

Question {{questionIndex+1}} of {{questions.length}}
<br>
{{currentQuestion}}

The question HTML template is quite clear. So I’ll not explain it.

quiz.component.ts

export class QuizComponent implements OnInit {
  currentIndex = 0;

  ngOnInit(): void {
  }

  goNext() {
    this.currentIndex++;
  }

  goPrevious() {
    this.currentIndex--;
  }
}

The quiz.component.ts is also very clear. Just the two methods for incrementing and decrementing the index.

<app-question [questionIndex]="currentIndex" >
</app-question>
<br>
<button (click)="goPrevious()">Previous</button>
<button (click)="goNext()">Next</button>

You can see that in the quiz HTML template, the currentIndex variable is passed from the parent(Quiz) to the child via the questionIndex input variable.

2. Modify the Questions Array

We’ll like to display the questions along with 4 options. So for each question, there should be 4 options and and answer.

You need to change the list of questions like so:

Then the questions would be of type ‘any’ instead of string[].

   this.questions = [
     {
       question: 'What is your name?',
       options: ['Kindson', 'Saffron', 'Othniel', 'Osondu'],
       answer: 'Kindson'
     },
     {
       question: 'Where do you Live?',
       options: ['India', 'Hungary', 'USA', 'Nigeria'],
       answer: 'Hungary'
     },
     {
       question: 'Who is PM of India?',
       options: ['Ghandi', 'Mordi', 'Gagan', 'Kumar'],
       answer: 'Mordi'
     }
     ];

Finally, the ngDoCheck() method would then be modified as follows:

  ngDoCheck(): void {
    this.currentQuestion = this.questions[this.questionIndex].question;
  }

3. Display the List of Options

Now, we’ll like to display the list of of options along with each question. We’ll take a simple approach.

First create a variable currentOptions of type string[]. This is just like you have currentQuestions. Then assign this variable in the ngDoCheck() method. The ngDoCheck() would not be as below:

  ngDoCheck(): void {
    this.currentQuestion = this.questions[this.questionIndex].question;
    this.currentOptions = this.questions[this.questionIndex].options;
  }

In the Question component HTML template, you can now use conditional directive *ngFor to loop through and display the four options. So the new Questions HTML template is given below:

Question {{questionIndex+1}} of {{questions.length}}
<br>
<h5>{{currentQuestion}}</h5>
<p *ngFor="let option of currentOptions">
  {{option}}
</p>

Now you can launch the application! If you got it right, then the quiz page would be like shown below:

4. Next Steps

So far so good! However, there’s yet much to be done. For instance:

• making the options clickable
• checking for correct answer
• displaying the user’s final score
• allow for a replay

Let’s cover this in Part 2. But for now, try to digest this.