Build a Quiz app with Angular and Webiny Headless CMS

Next, click on NEW API KEY and a prompt will appear where we can set up our API token. First, enter the name and description of the API token.

_4.png)

Next, scroll down to the Content tab, expand it and select All locales.

_3.png)

Next, scroll to the Headless CMS tab, expand it and make the following changes which include selecting the API type and model we the generated token to have access to.

_2.png)

_1.png)

Then click on the SAVE API KEY at the bottom of the page and the API token will be visible at the top of the page:

.png)

Copy and save it as an environment variable just as described above.

Next, let's get the endpoint. in the sidebar click on API Playground, then in the playground click on the Headless CMS - Read API tab at the top of the page, copy the URL directly below the tab and supply it as environment variable.

.png)

Now to initialize Apollo Client, head over to the src/app/graphql-module.ts file and modify it to the following:

import {NgModule} from '@angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache, ApolloLink } from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import { setContext } from '@apollo/client/link/context';
import { environment } from './../environments/environment';

const uri = environment.apiUrl
const auth = setContext(() => {
  return {
    headers: {
      Authorization: `Bearer ${environment.apiToken}`
    }
  }
})

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
  return {
    link: ApolloLink.from([auth, httpLink.create({ uri })]),
    cache: new InMemoryCache(),
  };
}

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})

export classOnChanges GraphQLModule {}

Next, in the src/app/app.module.ts file, add the following import:

import { ApolloModule } from 'apollo-angular';

Then, add ApolloModule to the import property:

imports: [
  // ...
  ApolloModule,
],

With this, we can now start sending GraphQL requests to Webiny.

Fetching all Quiz

To do this first let’s create a service where all our GraphQL requests will be done. Enter the following command in the terminal:

ng g s services/quiz

This will create a quiz service in a services folder in app. Now, let’s write our first query which will be for fetching all quizzes in our CMS. In app/services/quiz.service.ts add the following import and query.

import { Apollo, gql } from 'apollo-angular'

const GET_QUIZZES = gql`{
    listQuizzes {
      data {
        id
        name
        description
      }
    }
  }
`

Next, to inject Apollo into this service, modify the class constructor to the following:

constructor(private apollo: Apollo) { }

Next, add the following method after the constructor for sending query requests to get all quizzes.

getQuizzes() {
  return this.apollo.watchQuery<any>({
    query: GET_QUIZZES
  })
}

To use this function, head over to app/pages/quizzes/quizzes.component.ts and add the following import:

import { QuizService } from 'src/app/services/quiz.service';

Then modify the QuizzesComponent to the following:

export class QuizzesComponent implements OnInit {
  quizzes = []

  constructor(private quizService: QuizService) {}

  ngOnInit(): void {
    this.quizService.getQuizzes().valueChanges.subscribe(({data}) => {
      this.quizzes = data.listQuizzes.data
    })
  }
}

In the above code, we fetch our quizzes and store them in a quizzes array variable which will be iterated over in the template to display the quizzes.

Head over to the quizzes.component.html file and modify it to the following:

<div class="quizzes container">
  <h2>Take a Quiz</h2>
  <p>Test your knowledge of any of the following quiz you are familiar with.</p>
  <div class="quizzes__list" *ngFor="let quiz of quizzes">
    <app-quiz-card [quizData]="quiz"></app-quiz-card>
  </div>
</div>

Next, modify the app/components/quiz-card/quiz-card.component.html file to the following:

<div class="quizCard">
  <h3>{{quizData.name}}</h3>
  <p>{{quizData.description}}</p>
  <span>questions: <span>{{questionsLength}}</span></span>
  <button [routerLink]="['quiz', quizData.id]">Take quiz</button>
</div>

With this, quizzes in our CMS should now be displayed. Right now if you notice the length of the questions displayed in the quiz card is 0 which is static. Let’s fix that.

To fix this, we will use the ID of a quiz to fetch all its questions and then display their length. Head over to app/services/quiz.services and add the following query after GET_QUIZZES:

const GET_QUESTIONS = gql`
  query GetQuestions($where:QuestionListWhereInput){
    listQuestions(where: $where) {
      data {
        title
        option1
        option2
        option3
        option4
        answer
      }
    }
  }
`

Next, add the following method for fetching all the questions of a quiz when the quiz id is passed to it getQuizzes:

getQuestions(id:string) {
  return this.apollo.watchQuery<any>({
    query: GET_QUESTIONS,
    variables: {
      where: {ref: {id}}
    }
  })
}

Next, head over app/components/quiz-card/quiz-card.component.ts and import the quiz service:

import { QuizService } from 'src/app/services/quiz.service';

Next, modify the class constructor and ngOnInit method to the following:

constructor(private quizService: QuizService) {}

ngOnInit(): void {
  this.quizService.getQuestions(this.quizData.id).valueChanges.subscribe(({data}) => {
    this.questionsLength = data.listQuestions.data.length
  })
}

The above code fetches all questions for a quiz and then modifies the questions variable to the length of the fetched questions. With this, the problem is solved.

Implementing the quiz functionality

If we click on the Take quiz button on a quiz in our app we will be taken to the quiz page. On the quiz page, all the questions for a quiz will be displayed in a paginated pattern, we will be able to select the answers to questions and submit the quiz to get the result. Right now it's just mock data that's been displayed with no functionalities included. Let’s work on that.

First, let’s replace the mock data with the one from our CMS and add the pagination functionality where we can go to the next or previous question if it exists by clicking a button.

Head over to the app/services/quiz.service.ts file let’s create a function to fetch the data for a single quiz so it can be used to replace the static on the quiz page. Add the following query after GET_QUESTIONS:

const GET_QUIZ = gql`
  query GetQuiz($where:QuizGetWhereInput!){
    getQuiz(where: $where) {
      data {
       name
       description
      }
    }
  }
`

Next, add the following lines of code after the getQuestions method:

getQuiz(id:string) {
  return this.apollo.watchQuery<any>({
    query: GET_QUIZ,
    variables: {
      where: {id}
    }
  })
}

Next, head over to the app/pages/quiz/quiz.component.ts and add the following imports:

import { QuizService } from 'src/app/services/quiz.service';
import { ActivatedRoute } from '@angular/router';

Next, modify the QuizComponent to the following:

export class QuizComponent implements OnInit {

  quiz = [];
  quizLength = 0
  questions = [];
  questionNumber = 0;
  id!:string;

  constructor(
    private quizService: QuizService,
    private route: ActivatedRoute
  ) { }

  goToNext() {
    this.questionNumber++
  }
  goToPrevious() {
    this.questionNumber--
  }

  ngOnInit(): void {
    this.id = this.route.snapshot.paramMap.get('id')!
    this.quizService.getQuestions(this.id)
    .valueChanges
    .subscribe(({data}) => {
      this.questions = data.listQuestions.data
      this.quizLength = data.listQuestions.data.length
    })

    this.quizService.getQuiz(this.id)
    .valueChanges
    .subscribe(({data}) => {
      this.quiz = data.getQuiz.data
    })
  }
}

Above, in the ngOnInit method, we are fetching all questions and the quiz whose ID is attached as a parameter to the URL and storing the returned data in the corresponding properties.

We have also created a goToNext and goToPrevious method for increasing and decreasing the questionNumber property respectively. We are doing this because we will be using the questionNumber property to get a single question object in the questions array (questions[questionNumber]) which will be displayed in the UI. This way when one (1) is added questionNumber the next question will be displayed and when one (1) is subtracted, the previous question will be displayed creating the pagination functionality.

Next, modify its HTML file quiz.component.html to the following:

<div class="quiz">
  <app-question
    [question]="questions[questionNumber]"
    [questionNumber]="questionNumber+1"
    [quiz]="quiz"
    [quizLength]="quizLength"
    (nextQuestion)="this.goToNext()"
    (prevQuestion)="this.goToPrevious()"
  ></app-question>
</div>

Now head over to the app/components/question.component.html file and modify it to the following:

<div class="question container">
  <h2>{{quiz?.name}}</h2>
  <p>{{quiz?.description}}</p>
  <div class="question__body">
    <h4>{{question?.title}}</h4>
    <div class="question__bodyOpt">
      <div *ngFor="let option of [
        {label: 'A', value: question?.option1},
        {label: 'B', value: question?.option2},
        {label: 'C', value: question?.option3},
        {label: 'D', value: question?.option4},
      ]">
        <span>{{option.label}}.</span>{{option.value}}
      </div>
    </div>
    <div class="question__btn">
      <button
        (click)="this.prevQuestion.emit()"
        [disabled]="questionNumber === 1"><</button>
      <span>{{questionNumber}}/{{quizLength}}</span>
      <button
        (click)="this.nextQuestion.emit()"
        *ngIf="questionNumber !== quizLength"
        [disabled]="questionNumber === quizLength">></button>
      <button
        class="question__submit"
        *ngIf="questionNumber === quizLength">
        Submit
      </button>
    </div>
  </div>
</div>

With the above code, we are replacing the mock data with the one from our CMS, disabling the previous button when the first question is displayed and replacing the next button with a submit button when the last question is displayed.

Now let’s work on highlighting the selected option for a question. Head over the app/services/quiz/services.ts file and add the following property to the class:

answers: any[] = []

Next, add the following method after getQuiz method:

pickedAnswer(selectedOption:string, correctAnswer:string, questionNumber:number) {
  let alreadyAnswered = this.answers.filter(answer => (
    Object.values(answer).includes(questionNumber)
  )).length
  if(alreadyAnswered === 0){
    this.answers = [...this.answers, {questionNumber, selectedOption, correctAnswer}]
  }else {
    let answerIndex = this.answers.findIndex(answer => (
      questionNumber === answer.questionNumber
    ))
    this.answers[answerIndex].selectedOption = selectedOption
  }
}

The above method will be called whenever a question is answered. It will be used to store the selected option for the question, the correct answer to the question, and the question’s number as an object in the answers array property. So each answered question will be represented as an object in the answers array. Doing it this way will enable us to highlight the selected option for any question, by using its number to filter out the right object from answers then highlighting the option that is equal to the one in the object. Also, when we want to calculate the total score for a quiz we can compare the selected option for a question and the answer to the question present in every object in the answers array to find out which question was answered correctly.

Now to call the above function Head over to app/component/question/question.components.ts and first import the quiz service:

import { QuizService } from 'src/app/services/quiz.service';

Next, inject the service and add the following method:

constructor(private quizService: QuizService) { }

selectOption(selectedOption:string, correctAnswer:string, questionNumber:number) {
    this.selectedOption = selectedOption
    this.quizService.pickedAnswer(selectedOption, correctAnswer, questionNumber)
}

Next, in its HTML file question.component.html modify the div with the class name of question__bodyOpt to the following:

<div class="question__bodyOpt">
  <div *ngFor="let option of [
    {label: 'A', value: question?.option1},
    {label: 'B', value: question?.option2},
    {label: 'C', value: question?.option3},
    {label: 'D', value: question?.option4},
  ]"
  (click)="selectOption(option.value, question.answer, this.questionNumber)"
  [ngClass]="{selected: selectedOption === option.value}">
    <span>{{option.label}}.</span>{{option.value}}
  </div>
</div>

Above, we have attached a click event to every option which calls the selectOption method when clicked and we a conditional adding a selected class to add highlighting if the value of the selectedOption property equals the option. Since the selectOption method sets selectedOption to the value of the click option, whenever it's called that option will be highlighted. This works but it's not exactly how we want it to be, because right now if we select an option in another question and go back to the previous one we will see that its selected option is no longer highlighted, which is like that because the value of selectedOption has been changed since we clicked on another option.

To fix this, whenever we navigate to a question the selectedOption property has to be reset to the option that was selected. This is where the answers array property in the quiz service which is modified by the pickedAnswer method will be of use.

Add the following lines of code after selectOption in the QuestionComponent:

ngOnChanges() {
  let answer = this.quizService.answers.filter((answer) => (
    this.questionNumber === answer.questionNumber
  ))
  this.selectedOption = answer[0]?.selectedOption
}

In the above code, we are using the ngOnChanges lifecycle hook which runs anytime a data-bound property changes in order to reset the selectedOption property. With this anytime questionNumber (the next or previous button has been clicked) the above hook will run.

With this, the selected options will stay highlighted.

Calculating the score for a quiz

The score page will display the score of a question, the wrong answers, correct answers, and attempted questions. To get all these values and make them accessible in the score page, we will create a method in the quiz service that calculates these values and store them as properties in the service, then for accessing these properties in the score page we will create another method for that.

Head over to app/services/quiz.service.ts and add the following properties after the answers property:

attempts = 0
wrongAnswers = 0
correctAnswers = 0
quizLength = 0

Next, add the following methods after pickedAnswer:

score(quizLength:number) {
  this.quizLength = quizLength
  this.attempts = this.answers.length
  this.wrongAnswers = 0
  this.answers.forEach((answer) => {
    if(answer.selectedOption.trim() !== answer.correctAnswer.trim()) {
      this.wrongAnswers++
    }else{
      this.correctAnswers++
    }
  })
}

getScore() {
  return {
    quizLength: this.quizLength,
    attempts: this.attempts,
    wrongAnswers: this.wrongAnswers,
    correctAnswers: this.correctAnswers
  }
}

Next, head over app/components/question/question.component.ts and import router which will use to navigate to the score page when the a quiz is submitted :

import { Router } from '@angular/router';

Next, inject router by modifying the constructor to the following:

constructor(private quizService: QuizService, private router: Router) { }

Next, add the following method after selectOption when called will call the score method in the service then navigate to the score page.

score() {
  this.quizService.score(this.quizLength)
  this.router.navigate(['/score']);
}

Now to call the above method, in the question.component.html file modify the<Submit> button into the following:

<button
  class="question__submit"
  (click)="score()"
  *ngIf="questionNumber === quizLength">
  Submit
</button>

Next, let’s display the scores and other values in the score page when a quiz is submitted. Head over to app/pages/score/component.ts and first import the quiz service:

import { QuizService } from 'src/app/services/quiz.service';

Next, add the following variable and modify the constructor an ngOnInit method to the following:

score: any;

constructor(private quizService: QuizService) { }

ngOnInit(): void {
  this.score = this.quizService.getScore()
}

Finally, modify the score.component.html file to the following:

<div class="score container">
  <h2>CSS Quiz</h2>
  <p>A simple quiz to test your knowledge of CSS (Cascading style sheets)</p>
  <div class="score__body">
    <h3>Congratulation!!!</h3>
    <p>Below are your details:</p>
    <div class="score__details">
      <div>
        Total Questions Attempted: <span>{{score.attempts}}</span><br>
        Total Wrong Answered: <span>{{score.wrongAnswers}}</span><br>
        Total Correct Answers: <span>{{score.correctAnswers}}</span><br>
      </div>
      <div>
        Score:
        <span>
          {{score.correctAnswers}}/{{score.quizLength}}
        </span>
      </div>
    </div>
  </div>
</div>

With this, when we take a quiz and click on the submit button, we will be taken to the score page where we the results will be displayed

Conclusion

Quiz apps include features that require one to think logically in order to create them which makes it a great coding challenge for those starting out. In this tutorial, we have learned about Webiny CMS and how we can use it to build a quiz app where our data will be coming from a CMS rather than being hardcoded, giving us the liberty to update the questions and answers for a quiz by using a ready-to-use Admin page without having to update and redeploy our code.

Full source code: https://github.com/webiny/write-with-webiny/tree/main/tutorials/angular-quiz-app

This article was written by a contributor to the Write with Webiny program. Would you like to write a technical article like this and get paid to do so? Check out the Write with Webiny GitHub repo.