build ionic quiz app using radio buttons and storage – Part1

Posted on Posted in Beginner

In this tutorial, we are going to use radio button and storage to create quiz app in ionic 2+ application. This quiz application is an offline app,  that is, the answers to the quiz are stored locally in the application, unlike an online quiz app where the answers are stored on a remote server. I hope to write on that if the need arises.




To complete our task on this project, we need to do the following:

  1. Create a new app called quizApp
  2. Create five different pages namely question2, question3, question4 and question5 and results
  3. Create quiz user interface in the newly created pages.
  4. Write methods to navigate through the quiz
  5. Test your app

 

If you are ready, I am ready

  1. Create a new app called quizApp

Change to command prompt and type the code below to create an app in ionic

ionic start quizApp blank

Type Y at the prompt  Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) y and press enter key

ionicdon-quizApp

Done?




Change directory to our newly created app – quizApp and run your app

                ionic serve –l

Phew!!!, do you have what I have below?

ionicdon-quizApp

WELL DONE




2.Create five different pages namely question2, question3, question4 and question5 and results

Let’s create the five pages, using the following commands

Ionic g page question2

Ionic g page question3

Ionic g page question4

Ionic g page question5

Ionic g page results

As shown below in succession

ionicdon-quizApp




Now, open app.modules.ts under src/app/  and do the following

  1. Import page from their locations

Import { Question2Page } from ‘../pages/question2/question2’;

Import { Question3Page } from ‘../pages/question3/question3’;

Import { Question4Page } from ‘../pages/question4/question4’;

Import { Question5Page } from ‘../pages/question5/question5’;

Import { ResultsPage } from ‘../pages/results/results’;

 

  1. Add the pages to declaration and entryComponents section

Your app.module.ts will look like this:( see How To Navigate Between Pages In Ionic 2+ Application

For details)

ionicdon-quizApp




3.Create quiz user interface in the newly created pages.

In this section we are going to use ion-card for the questions and ion-radio for the multiple choices and  ion-button for submission and navigation to next page.

Let’s go

Open home.html and update the content to look like below

<ion-header>

<ion-navbar>

<ion-title>

Quiz App

</ion-title>

</ion-navbar>

</ion-header>

<ion-content >

<ion-card>

<ion-card-header>

Question 1

</ion-card-header>

<ion-card-content>

Which country is the most populous country in Africa

</ion-card-content>

</ion-card>

<ion-list radio-group no-lines padding>

<ion-item >

<ion-radio value=”A” ></ion-radio>

<ion-label>A – South Africa</ion-label>

</ion-item>

<ion-item>

<ion-radio value=”B”> </ion-radio>

<ion-label>B – Nigeria</ion-label>

</ion-item>

<ion-item >

<ion-radio value=”C” ></ion-radio>

<ion-label>C – Ethiopia</ion-label>

</ion-item>

<ion-item>

<ion-radio value=”D”> </ion-radio>

<ion-label>D – Cameroun</ion-label>

</ion-item>

<ion-item >

<ion-radio value=”E” ></ion-radio>

<ion-label>E – Ghana</ion-label>

</ion-item>

</ion-list>

<button ion-button  float-right (click)=goNext()>SUBMIT</button>

</ion-content>

Save your file and run the app using

ionic serve –l

Do ….. you …..have ….. what I have?




ionicdon-quizApp

You sure have this? Great!!!

Now let do the same for question2, question3, question4 and question5 using the table below

S/N Questions A B C D E
2 Which is the longest and largest river in West Africa Saint Paul River Sankarani River River Niger River Volta Cavalia River
3 Which is the longest bridge in Africa Third Mainland Bridge Katima Mulilo Bridge Dona Ana Bridge 6th October Bridge Mozambique Island Bridge
4 Who is Nigerian President Pierre Nkurunziza Paul Biya Muhammadu Buhari Nana Akufo-Addo George Weah
5 Which is capital of Mali Abuja Accra Algiers Yaounde Bamako

 

Hope you find the exercise fun?




4.Write methods to navigate through the quiz

Open home.ts and add the following code under constructor,

goNext(){

this.navCtrl.push(Question2Page);

}

And add import { Question2Pgae } from  ‘../question2/question2’;

 

With that, you should be able to navigate to question 2 page. Interesting, isn’t it?

 

Now, do the same for all the other pages. For more information see How To Navigate Between Pages In Ionic 2+ Application

 

5.Test your app

If you are through with the above exercise, then run our app and see what happens, watch below video




Leave a Reply

Your email address will not be published. Required fields are marked *