Angular – Fun Quiz App!

In this tutorial, we would build a complete Quiz app in Angular. So this would help us piece various Angular concepts together in a single App. Some of the concepts we’ll cover include:

• Component Styling
• Directives
• Conditional Rendering
• Passing values between compoents (@Input & @Output)
• Event Emitter
• Databinding

We would cover all of this using the following sub-topics:

1. Planning the Quiz App
2. Basic Quiz Setup
3. How it Works
4. The Question Section
5. Starting the Quiz
6. Setting the User’s answer
7. Scoring and Moving Next
8. Ending the Quiz

1. Planning the Quiz App

Anytime you have to build an app, you need to first plan  the logic of you app.

The app would have the following:

• a home component that welcomes the user and provides a button to start quiz
• a quiz component that provide a PREVIOUS and NEXT buttons. This component also displays the individual questions

The following states are required:

• quizStart: a boolean. Initially false but if set to true, then the quiz would start and load the first question. Becomes true if the user clicks on ‘Start’
• quizEnd: a boolean that is initially false but becomes true once the last question is reached
• currentIndex: keeps track of the current question

2. Basic Quiz Setup

The quiz.component.ts file for the basic quiz logic is given below:

export class QuizComponent implements OnInit {
  quizStart = false;
  quizEnd = false;
  currentIndex = 0;

  ngOnInit(): void {
  }

  startQuiz() {
    this.quizStart = true;
  }
  
  backHome() {
    this.quizStart = false;
    this.quizEnd = false;
  }

  endQuiz() {
    this.quizEnd = true;
  }
}

The html template is given below:

<div *ngIf="!quizStart">
  Home Page
  <button (click)="startQuiz()">Start</button>
</div>

<div *ngIf="quizStart && !quizEnd">
  Question Component goes here
  Quiz is running
  <button (click)="endQuiz()">Next</button>
</div>

<div *ngIf="quizEnd">
  Quiz has ended. Display Scoresheet.
  <button (click)="backHome()">Back to Home</button>
</div>

3. How it works

There are three sections that we need to conditionally render based on the values of quizStart and quizEnd.

• Once the application starts, the quizStart is false. And the home section displays if quizStart is false (ie not true: !quizStart)
• Once the user clicks on ‘Start’, the quizStart is set to true. So the Home section is removed and the Quiz section is displayed so long as quizEnd is not true
• If the Quiz terminates, the quizEnd is set to true and the Scoresheet is displayed.

Also not that we have only one button, that is the Next button. To keep it simple, when the user have answered a question, he cannot go back to change it.

4. The Question Section

This section would display individual questions. We can do this in two ways. First we can show the question in a div tag. Second, we can show the question in a different component. Since you need put the what we’ve learnt to use, we’ll go for the second one.

So we would create a Question component, which would be a child of the Quiz component. This component receives the currentQuestion from the parent and displays it.

5. Starting the Quiz

The quiz starts when the user clicks on Start in the home section. A this point, the currentIndex is zero. The current question is set based on the current index. The Question child component is loaded. Finally, the Question child component receives and renders the current question. Also, at this point, the Next button is disabled until the user selects an option. A disabled state emits a value of ‘true’ from the child(so Next button can be disabled)

6. Setting User Answer

When the user selects an option, the user’s answer is emitted. At the same time, the disabled state emits a value of false(so Next button can be enabled).

The user’s answer is received in the by the Quiz component at the receiveAnswers() method and used to set the answers state. Similarly, the disabled state is received at the userSelected() method and used to set disabled attribute of the Next button

7. Scoring and Moving Next

This is done in the Quiz component. We have decided to check the user’s answer when the Next button is clicked. This is because, the user can select and option and later selects another. But when he clicks on Next, the answer is accepted. So at moveNext() method we do the following:

• disable the Next button
• update the user’s score (by calling another method)
• increment the question index

8. Ending the Quiz

The quiz is ended when the currenIndex equals the total questions. So anytime the next question is loaded, this check is made. Once, the condition holds, then the endQuiz method is called. This method simply sets the quizOver state to true. Then, the scoresheet section is displayed.

Wow! Quite a lot to take in. I recommend you watch the video so you can follow the step by step to do it yourself. Also get the complete source code in my GitHub repo.