Building a Progressive Quiz App with Vue, Vuex, and Firestore: Part 4

In this part we will create the quiz testing process.

• part 1: project setup
• part 2: authentication with Firebase and Vuex
• part 3: quiz creation
• part 4: taking quizes
• part 5: making it progressive

links:

• Demo: https://testing-firestore-40209.firebaseapp.com/#/
• Git Repo: https://github.com/LazyFatArrow/vue-quiz-pwa

Taking Quizes

In order to take a quiz, the user will click on the take it now button on the quiz card. The take it now button will take the user to the quiz testing page that contains the quiz id in the url. We will use that id to fetch the quiz information and create the tester.

First, we will create a component called Quiz.vue inside the pages directory. In this component we will first get the quiz id and call an action that will fetch the quiz from firestore:

src/pages/Quiz.vue

Now, let’s attach this component to a route inside our router:

src/router/index.js

As you can see, we passed the id as parameter using the ‘:name’ syntax in the path attribute, the name we passed there is the same one we’re using inside the Quiz component.

Now we will add the getQuiz action that will fetch a quiz using an id. First we will create a mutation that given a quiz will set it in our store:

src/store/quiz/mutations.js

Nice! we will use this mutation now and implement the getQuiz action:

src/store/quiz/index.js

We will use the getter we created to get the quiz object inside our Quiz component, then we will display the length of the question to test if our code works:

src/pages/Quiz.vue

Now we will use Vuetify’s steppers to represent our quiz, each step will be a question, so we will create some reactive data:

• step: will represent the current question.
• score: will be the total score of the user.
• stepAnswer: will contain the current question’s answer.
• done: a boolean which indicates if the quiz is done.
• mistakes: an array of all the mistakes the user made.

we will create a method that will move the user to the next question, this method will do few things:

• verify if the chosen answer is right
• if it’s not, it will ad an object to the mistakes array
• checks if the quiz is done or not

src/pages/Quiz.vue

Nice! now let’s give it a test:

Now all we have left is to display the result, we will use vue’s if else directives to display a screen containing the total score that we will compute in a computed function. We will also loop over the mistakes array and display them if there is any, the full code looks like this:

src/pages/Quiz.vue

And the final result:

wow!

Conclusion

In the next part we will make our app progressive and store the quizes so we can take them offline.