In this tutorial we are going to learn how to create an android quiz application with Json parser, Php and Mysql database. This is going to be a long tutorial so relax as we take the journey together.

Most of the concepts you will see here has been covered in some of my previous tutorials and I will suggest you read these two tutorials before you continue - How to Parse JSON in Android (http://inducesmile.com/android-tutorials-for-nigerian-developer/how-to-parse-json-in-android-example/) and Android Login and Registration with Php and Mysql (http://inducesmile.com/android-snippets/android-login-and-registration-with-php-and-mysql/)

We are going to store our quiz questions and answers in Mysql database which can be local or remote. One advantage of using this concept in android quiz application is that it will afford you the opportunity to add and edit quiz questions and solutions with the need to update your application.

Android quiz application can also be achieved by storing the quiz questions and solutions using android SQLITE database. In this case, the application will not require internet connection to access the database.

If you do not know much about Php and Mysql, kindly read it up w3school.com.

Before we start with the detailed instruction, it is important to know that we will first of all download and install a web server in our system. I am going to use WAMP server but feel free to use whatever web server you are familiar with.

The detail instruction on how to install WAMP can be found on their website.

With the web server installed, start your web server and go to PhpMyAdmin. We will create a new database called quiz. In our created database, we will create a single table called quiz_questions. The below script is used to create our users table.

CREATE TABLE IF NOT EXISTS 'quiz_questions' (
'id' bigint(20) NOT NULL AUTO_INCREMENT,
'question' varchar(300) NOT NULL,
'possible_answers' varchar(300) NOT NULL,
'correct_answer' int(5) NOT NULL,
PRIMARY KEY ('id'),
UNIQUE KEY 'question' ('question')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

The next step is to create our Php project structure. I will make use of Aptana IDE for Php and Mysql development but feel free to use whatever IDE you like the best.

Create a folder called Android_Quiz inside the www folder of your web server. Inside this folder, create another folder called include. The include folder will house our configuration file for database connection.

Create a file called index.php in your project root directory. All the request that comes to the web server will go through this index file.
In our include folder, create three files called config.php, db.php and quiz.php.

When a client sends a request, the index.php file will analyze the request and talk to the database. It will retrieve all the quiz questions present in the quiz_questions table. The data will first be converted to an array and rather will be output as a Json object.

The android application will consume the Json object and we will use android Json parsing API to manipulate the content of the server response.
Open the Php database config file called config.php and paste the following code on it.

<?php

define("DB_HOST", 'localhost' );
define("DB_USER", 'quiz' );
define("DB_PASSWORD", 'quiz' );
define("DB_NAME", 'quiz' );

?>

This is the database connection details. Please make sure you change this information in accordance with your database server. In the code above we are just defining the database connection properties.

With this in place, we will establish a database connection with our Php application. This is done in the db.php file. Open the file and paste the following code below.

<?php
include_once 'config.php';

class DbConnect{	
	
	private $connect;	
	
	public function __construct(){
		
		$this->connect = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
		 
		if (mysqli_connect_errno($this->connect))
		{
			echo "Failed to connect to MySQL: " . mysqli_connect_error();  
		}
	}
	
	public function getDb(){
		
		return $this->connect;
	}
	
}

The config file was included in the beginning of db.php file. The getDB function returns an instance of our database connection.
Now that we have our database connection, create a quiz.php file. The quiz class contains a function that will query the database to obtain all the quiz questions present in the database.

The quiz class includes the db.php class. Copy and paste the following code in the file.

<?php

include_once 'db.php';

class Quiz{
	
	private $db;
	private $db_table = "quiz_questions";
	
	public function __construct(){
		$this->db = new DbConnect();
	}
	
	public function getAllQuizQuestions(){
		
		$json_array = array();
		
		$query = "select * from quiz_questions";
		$result = mysqli_query($this->db->getDb(), $query);
		
		if(mysqli_num_rows($result) > 0){			
			while ($row = mysqli_fetch_assoc($result)) {				
				$json_array["quiz_questions"][] = $row;				
			}			
		}
		return $json_array;
	}
}

?>

Now we will finish up with our index.php file. We will include the quiz.php file in the index.php. What it will basically do is to return all the quiz questions store in MYSQL database and output it as a Json object.

Please note that this is a simple tutorial and there is no other measure taken to make sure that the request is not malicious.

The code is below. You can copy it and paste in your own project.

<?php

require_once 'include/quiz.php';

$quizObject = new Quiz();

$json_quiz_objects = $quizObject->getAllQuizQuestions();
echo json_encode($json_quiz_objects);

?>

A simple example of the Json object output from the server is shown below

{"quiz_questions":[{"id":"1","question":"Who is the most popular musician in Nigeria","possible_answers":"Tufac, P Square, Dbanji, Tiwa Savage","correct_answer":"1"},{"id":"2","question":"Who is the winner of 2015 Presidential Election in Nigeria?","possible_answers":"Obasanjo, Goodluck, Buhari, Fashola","correct_answer":"3"}]} 

With the web application completed, we will move over to create our android application.

In order to parse JSON object from a remote server source, we are going to need internet access for our application.

It is important to note that when you are working with internet or accessing data from a remote source in android, you will need to add internet permission in your android manifest file.

<uses-permission android:name="android.permission.INTERNET"/>

We are going to use android API for HTTP request. Once we get the Json output as an InputStream, we will convert it to a string. The string object will be pass as a parameter to an instance of JsonObject class.

We will also use an AsyncTask class to make server calls in a background Thread. This is important so that we will not end up blocking the main UI Thread.

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7
Android Studio
Samsung Galaxy Fame Lite
Min SDK 14
Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu
Click on New menu
Click on Android Application
Enter Project name: AndroidQuizApplication
Package: com.inducesmile.androidquizapplication
Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

Quiz Design

The first step here is to have a clear view about what we are planning to achieve. In this android quiz application, there will be an intro activity page with a button when a user clicks on the button view it will take the user to the quiz activity page where the user will start taking the quiz.

A diagram that illustrate the quiz application is shown below.

Main Layout
We will start by adding background image to the root layout in our activity_main.xml layout file. The image I used can be found in the project source code below. You can use your own image be changing the above used image.

Add a Button View to the layout as shown in the image above. If you are using Eclipse or Android Studio, you can switch to the design view and drag and drop this View inside your layout file.

You can also copy and paste the following code below into this file if you don’t want to do it yourself.

<RelativeLayout xmlns:android="link"
xmlns:tools="link"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
tools:context=".MainActivity">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp"
android:background="@drawable/mbutton"
android:layout_marginBottom="48dp" />
</RelativeLayout>

The text content of our View components are stored in the strings.xml file. The updated contain of the file is shown below

<resources>
<string name="app_name">Android Quiz Application</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="title_activity_quiz">Quiz Questions</string>
<string name="question">Question 1. How is the first president of Nigeria?</string>
<string name="answer_one">Answer One</string>
<string name="answer_two"> Answer Two</string>
<string name="answer_three">Answer Three</string>
<string name="answer_four"> Answer Four</string>
<string name="next_questions"> Next Question</string>
<string name="previous_questions"> Previous Question</string>
</resources>

We will make use of few colors in this application so we have to update our color.xml file to include all these colours. This is important because it lets us have a single place where we can change and set colours for our project. The code is shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000000</color>
<color name="white">#ffffff</color>
</resources>

MainActivity.java

In the MainActivity.java file, we will get the instance of our button View and attach and event listener to the button View. When the button is click, it will redirect to the QuizActivity page. The code for the MainActivity.java is shown below.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button startButton = (Button)findViewById(R.id.button);
startButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, QuizActivity.class);
startActivity(intent);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Main Layout

We will start by adding background image to the root layout in our activity_main.xml layout file. The image I used can be found in the project source code below. You can use your own image be changing the above used image.

Add a Button View to the layout as shown in the image above. If you are using Eclipse or Android Studio, you can switch to the design view and drag and drop this View inside your layout file.

You can also copy and paste the following code below into this file if you don’t want to do it yourself.

<RelativeLayout xmlns:android="link missing due to Nairaland bot"
xmlns:tools="link missing due to Nairaland bot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
tools:context=".MainActivity">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp"
android:background="@drawable/mbutton"
android:layout_marginBottom="48dp" />
</RelativeLayout>

The text content of our View components are stored in the strings.xml file. The updated contain of the file is shown below

<resources>
<string name="app_name">Android Quiz Application</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="title_activity_quiz">Quiz Questions</string>
<string name="question">Question 1. How is the first president of Nigeria?</string>
<string name="answer_one">Answer One</string>
<string name="answer_two"> Answer Two</string>
<string name="answer_three">Answer Three</string>
<string name="answer_four"> Answer Four</string>
<string name="next_questions"> Next Question</string>
<string name="previous_questions"> Previous Question</string>
</resources>

We will make use of few colors in this application so we have to update our color.xml file to include all these colours. This is important because it lets us have a single place where we can change and set colours for our project. The code is shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000000</color>
<color name="white">#ffffff</color>
</resources>

MainActivity.java

In the MainActivity.java file, we will get the instance of our button View and attach and event listener to the button View. When the button is click, it will redirect to the QuizActivity page. The code for the MainActivity.java is shown below.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button startButton = (Button)findViewById(R.id.button);
startButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, QuizActivity.class);
startActivity(intent);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

nollyj:
In this tutorial we are going to learn how to create an android quiz application with Json parser, Php and Mysql database. This is going to be a long tutorial so relax as we take the journey together.

Most of the concepts you will see here has been covered in some of my previous tutorials and I will suggest you read these two tutorials before you continue - How to Parse JSON in Android (http://inducesmile.com/android-tutorials-for-nigerian-developer/how-to-parse-json-in-android-example/) and Android Login and Registration with Php and Mysql (http://inducesmile.com/android-snippets/android-login-and-registration-with-php-and-mysql/)

We are going to store our quiz questions and answers in Mysql database which can be local or remote. One advantage of using this concept in android quiz application is that it will afford you the opportunity to add and edit quiz questions and solutions with the need to update your application.

Android quiz application can also be achieved by storing the quiz questions and solutions using android SQLITE database. In this case, the application will not require internet connection to access the database.

If you do not know much about Php and Mysql, kindly read it up w3school.com.

Before we start with the detailed instruction, it is important to know that we will first of all download and install a web server in our system. I am going to use WAMP server but feel free to use whatever web server you are familiar with.

The detail instruction on how to install WAMP can be found on their website.

With the web server installed, start your web server and go to PhpMyAdmin. We will create a new database called quiz. In our created database, we will create a single table called quiz_questions. The below script is used to create our users table.

CREATE TABLE IF NOT EXISTS 'quiz_questions' (
'id' bigint(20) NOT NULL AUTO_INCREMENT,
'question' varchar(300) NOT NULL,
'possible_answers' varchar(300) NOT NULL,
'correct_answer' int(5) NOT NULL,
PRIMARY KEY ('id'),
UNIQUE KEY 'question' ('question')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

The next step is to create our Php project structure. I will make use of Aptana IDE for Php and Mysql development but feel free to use whatever IDE you like the best.

Create a folder called Android_Quiz inside the www folder of your web server. Inside this folder, create another folder called include. The include folder will house our configuration file for database connection.

Create a file called index.php in your project root directory. All the request that comes to the web server will go through this index file.
In our include folder, create three files called config.php, db.php and quiz.php.

When a client sends a request, the index.php file will analyze the request and talk to the database. It will retrieve all the quiz questions present in the quiz_questions table. The data will first be converted to an array and rather will be output as a Json object.

wow. thanks . I'm so following this. more grease to ur elbow

nollyj2:
Main Layout

We will start by adding background image to the root layout in our activity_main.xml layout file. The image I used can be found in the project source code below. You can use your own image be changing the above used image.

Add a Button View to the layout as shown in the image above. If you are using Eclipse or Android Studio, you can switch to the design view and drag and drop this View inside your layout file.

You can also copy and paste the following code below into this file if you don’t want to do it yourself.

<RelativeLayout xmlns:android="link missing due to Nairaland bot"
xmlns:tools="link missing due to Nairaland bot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
tools:context=".MainActivity">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp"
android:background="@drawable/mbutton"
android:layout_marginBottom="48dp" />
</RelativeLayout>

The text content of our View components are stored in the strings.xml file. The updated contain of the file is shown below

<resources>
<string name="app_name">Android Quiz Application</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="title_activity_quiz">Quiz Questions</string>
<string name="question">Question 1. How is the first president of Nigeria?</string>
<string name="answer_one">Answer One</string>
<string name="answer_two"> Answer Two</string>
<string name="answer_three">Answer Three</string>
<string name="answer_four"> Answer Four</string>
<string name="next_questions"> Next Question</string>
<string name="previous_questions"> Previous Question</string>
</resources>

We will make use of few colors in this application so we have to update our color.xml file to include all these colours. This is important because it lets us have a single place where we can change and set colours for our project. The code is shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000000</color>
<color name="white">#ffffff</color>
</resources>

MainActivity.java

In the MainActivity.java file, we will get the instance of our button View and attach and event listener to the button View. When the button is click, it will redirect to the QuizActivity page. The code for the MainActivity.java is shown below.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button startButton = (Button)findViewById(R.id.button);
startButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, QuizActivity.class);
startActivity(intent);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

What bout a screenshot of when the user finishes the quiz sir ?

jamb20s:

What bout a screenshot of when the user finishes the quiz sir ?

When I finish the application but right now I keep getting ban by bot whenever I post so I don't know when I will finish it. It is in the hands of Nairaland bot