Angular 10 – Quiz App(Part 2)

This is Part  of out Simple Quiz App. This follows from Part 1. We’ll cover the following in this part:

1. Making the Options Clickable
2. Setting User’s Score
3. Getting User Response via Event Emitter
4. Assigning User Score
5. Yet More to be Done

1. Making the Options Clickable

We’ll like to allow the user to select a particular option. There are many fancy ways to do this. But we’ll use the simple and easy one. Later, we can garnish the app with more bells and whistles.

We’ll simple display the options in an options list.

Just adjust the Question HTML template to also include a radio button

See the new template below:

Question {{questionIndex+1}} of {{questions.length}}
<br>
<h5>{{currentQuestion}}</h5>
<p *ngFor="let option of currentOptions">
  <input
    (click)="setUserAnswer(option)"
    type="radio"
    value={{option}}
    name="answer"> {{option}}
</p>

Then, in the ts file, we have the setUserAnswer() method that receives the selected option. This method takes the selected option as parameter. For now, I just print the selected option to the console.

  setUserAnswer(option: string) {
    console.log(option);
  }

2. Setting the User’s Response

So far, so good!

But now, we’ll like to set the user’s answer once the users selects an option.

So this is how it will work: the method sets the variable userAnswer. But the user can click on different options. So the only time we’ll check the user’s answer for correctness is when the user clicks on the Next button.

Wait a minute! But the Next button is in the parent component. Also, the parent component keeps track of the user’s score. So we need to pass the user’s answer from the child to the parent. Additionally, the correct answer need to be passed too so that the parent can compare user’s answer with the correct answer. We’ll solve this problem using EventEmitter. (Learn about EventEmitters here).

3. Getting User Response via EventEmitter

First create an output property answers. It would be an EventEmitter. This would be an object that holds both the user answer and correct answer.

@Output() answers =
    new EventEmitter<{user_answer: string, correct_answer: string}>();

Next, adjust the setUserAnswer function like so:

  setUserAnswer(option: string) {
    this.userAnswer = option;
    this.correctAnswer = this.questions[this.questionIndex].answer;
    this.answers.emit(
      {user_answer: this.userAnswer, correct_answer: this.correctAnswer});
  }

Then in the Quiz component, you can receive this values. Simply adjust the markup of the quiz component template as shown below:

<app-question [questionIndex]="currentIndex"
              (answers) ="receiveAnswers($event)" >
</app-question>

In the ts file, write the receiveAnswers() method that responds the events from the child component. The received values are stored in the variable receivedAnswers.

  receiveAnswers(receivedAnswers) {
    console.log(receivedAnswers);
  }

At this point, when the user selects an option, the answers variables are set in the Question component. Also an event is emitted. This event is captured in the Quiz component via the event handler receiveAnswers() and the variables are stored in receivedAnswers.

4. Assigning User’s Score

Now, let’s check for correct answer. If the answer is correct, we increase the user’s score by 1. This is easy now since we have both the user’s answer and correct answer. So this is how it will work:

• once the user clicks on the Next button, we check his answer and update his score
• to keep things simple, we’ll also disable the back button once the score is updated

I have written and updateScore() method that would check if the user’s answer is correct and update the score whenever the

  goNext() {
    this.currentIndex++;
    this.updateScore();
  }
  receiveAnswers(receivedAnswers) {
    this.answers = receivedAnswers;
  }

  updateScore(){
    if (this.answers.user_answer === this.answers.correct_answer) {
      this.score++;
    }
  }

Of course, you need to create the score and answers variables in the Quiz component.

5. Yet More to be Done

So far so good!

As you know, I’m not just building this quiz app. I’m trying to take you through the various aspect of app design. So we are taking it bit by bit. In the next part, we’ll see how to:

• make sure the user answers the current question before he can go to the next
• prevent user from going back
• disable the Previous button if it’s the first question
• disable the next button for if it’s the last question
• display the final score

Let’s now move on to the next part!