Build ionic quiz app using radio buttons and storage – Part2

In this second part of our tutorial, we are going to retrieve option chosen from the multiple choice and save it in the local storage, then compare our answer with the answer already stored correct answer in the storage and show result in our result page.

PREREQUISITE

Because this tutorial is a continuation of my earlier tutorial How to use radio button and storage to create ionic quiz app – part 2 you will need to read through the tutorial before you can continue.

 

To achieve our task of the day, we need to do the following

1. Add storage plugin to our app
2. Store correct answers in the local storage
3. Modify all our question page html files to retrieve selected option
4. Modify all our question page ts files to retrieve selected option, store the chosen answer in local storage
5. Modify results.html file to display final result
6. Modify results.ts file to retrieve all correct answers, remarks and number of correct answers.
7. Test your application.

If you are ready, I am ready

1. Add storage plugin to our app

To use storage in ionic app, we have to do the following

1. install the cordova-sqlite-storage plugin
2. install the storage package
3. Add storage to the imports list in your app.module.ts
4. Inject it into all the pages where storage plugin is going to be used.

 

 

1. install the cordova-sqlite-storage plugin

Open your command prompt, change directory to your application folder, in our own case it is quizApp, execute the following command as shown in the diagram below

ionic cordova plugin add cordova-sqlite-storage

 

 

2.    install the storage package

While you are still in the same directory, issue the following command as shown below

npm install –save @ionic/storage

3.    Add storage to the imports list in your app.module.ts

Open app.module.ts in your favorite editor and update it as shown below

4.   Inject it into all the pages where storage plugin is going to be used.

Open home.ts and add the following code as shown below

import { Storage} from ’@ionic/storage’;

Private storage: Storage  ( to the constructor)

TODO

Open question2.html, question3.html, question4.html and question5.html and repeat above process

 

2.      Store correct answers in the local storage and initialize number of correct answers

To store correct answer in the local storage and initialize number of correct answers, open home.ts file and add the following code

ngOnInit(){

this.storage.set(‘CA1’, ‘C’);

this.storage.set(‘CA2’, ‘C’);

this.storage.set(‘CA3’, ‘D’);

this.storage.set(‘CA4’, ‘C’);

this.storage.set(‘CA5’, ‘E’);

this.storage.set(‘correctAns’, 0);

}

With above code, we have set the correct answers and store the value in our local storage and initialized number of correct answer to zero.

3.      Modify all our question page html files to retrieve selected option

Open home.html page, add [(NgModel)] = “option” to the ion-list open-tag and (ionSelect) =”select(‘option’,’your-option’)” to the ion-radio open-tag, as shown below

 

4.      Modify all our question page ts files to retrieve selected option, store the chosen answer in local storage and compare the choose option with the correct answer

To achieve this, we need to get the correct answer from the storage while page loads by using the following code

this.storage.get(‘CA1’).then((value) => {

  this.CA1 = value ;

});

We also need to write a method for retrieve chosen option when the option is clicked and store it in the storage.

  select(option, answer){

 this.storage.set(‘answer1’,answer);

 this.answer1 = answer;

}

And finally we need to compare chosen option with the correct answer, and determine if the chosen answer is correct or not

if(this.answer1==this.CA1){

      this.storage.get(‘correctAns’).then((value) => {

        var CA = value ;

        this.tempCA = (CA+1);

       this.storage.set(‘correctAns’, this.tempCA);

        this.storage.set(‘remark1’, ‘correct’);

     })

      } else{

        this.storage.set(‘remark1’, ‘incorrect’);

      }

      console.log(this.answer1);

      console.log(this.CA1);

    this.navCtrl.push(Question2Page);

  }

When the above is completed, our home.ts will look like what we have below

Following the above process, our question2.ts file will look like the picture below

TODO

Open question3.ts, question4.ts and question5.ts and repeat above process

Note that :

1. Your answer1 in the code storage.set(‘answer2’, answer) will be changed to reflect question number, that is, for question 3, the code become this.storage.set(‘answer3’, answer) and so on.
2. The remark for each question reflect the particular question you are dealing with, that is, remark2 is for question2 while question3 remark will be remark3

 

 

5.    Modify results.html file to display final result

Open results.html and add the following code between <ion-content> and </ion-content> tag.

<ion-content padding>

  <h1>Results</h1>

  <h3> Your answer is as follows:</h3>

 <p>Question 1 is {{this.answer1}} {{this.remark1}}</p>

 <p> Question 2 is {{this.answer2}} {{this.remark2}}</p>

 <p>Question 3 is {{this.answer3}} {{this.remark3}}</p>

 <p> Question 4 is {{this.answer4}} {{this.remark4}}</p>

 <p>Question 5 is {{this.answer5}} {{this.remark5}}</p>

 <h4>Number of correct Answer is {{this.correctAns}}</h4>

 </ion-content>

 

6.    Modify results.ts file to retrieve all chosen answers, remarks and number of correct answers.

This is where local storage really come into play, here we will first initialize all the variables as follows

answer1 :any;  answer2:any;  answer3:any;  answer4:any;  answer5:any;

 remark1:any;  remark2:any;  remark3:any;  remark4:any;  remark5:any;

 correctAns:any;

 

Then, retrieve all the chosen answers, remarks and number of corrects answers by using the following codes

 

    Promise.all([this.storage.get(“remark1”), this.storage.get(“remark2”), this.storage.get(“remark3”),

    this.storage.get(“remark4”), this.storage.get(“remark5”), this.storage.get(“answer1”),

    this.storage.get(“answer2”), this.storage.get(“answer3”), this.storage.get(“answer4”),

    this.storage.get(“answer5”), this.storage.get(“correctAns”)]).then(values => {

  

      let data = {

            remark1: values[0], remark2: values[1], remark3: values[2], remark4: values[3],  remark5: values[4],

            answer1: values[5], answer2: values[6], answer3: values[7], answer4: values[8],  answer5: values[9],

            correctAns: values[10]

                   };

 

And finally, assign the data retrieved from storage to variables as shown below

  this.answer1 = data.answer1; this.answer2 = data.answer2; this.answer3 = data.answer3; this.answer4 = data.answer4;

        this.answer5 = data.answer5; this.remark1 = data.remark1; this.remark2 = data.remark2;  this.remark3 = data.remark3;

        this.remark4 = data.remark4; this.remark5 = data.remark5;  this.correctAns = data.correctAns;

 

Did you follow the steps as instructed? Let’s see if you have what I have below

Phew!!, it is quite some task, but, it is worth it, your ionic quiz app is ready.

 

7.      Test your application.

Now that you have completed all the above task including TODO, we can test our app by changing to command prompt and issue the following command

ionic serve –l

check the video below to see if your own app runs the same way

if you find the tutorial useful, don’t forget to bless others by sharing it