PHP: Quiz App

Here’s a new programming blog for you. In this blog, we will learn how to create/build a simple PHP, Javascript (AJAX) and Bootstrap based Quiz program.

Create the following file in your system.

  • index.php
  • PhpPrograms.php
  • program-ajax.php


<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


     div#quiz-wrap {
        border: 5px dashed #4a2f2f;
        margin-top: 10px;
        background: #f1f1f1;
        padding: 10px 0;
        width: 100%;
        max-width: 350px;
        margin: 10px auto;
<div class="container">
	<div class="row">
		<div class="col-sm-12">
            <div id="quiz-wrap">            
            <h2 class="text-center">Play Quiz</h2>  
			<form class="m-4" id="programs" action="<?php echo  $_SERVER['PHP_SELF']; ?>" method="POST">
			  <div class="form-group">
			    <label for="exampleFormControlSelect1">Select Option</label>
			    <select class="form-control" name="program" id="select_program" required="">
                  <optgroup label="Airthmetic Quiz">
			      <option value="">--Select--</option>
			      <option value="sumOfDigits">Sum of Digit</option>
			      <option value="evenOddProgram">Odd/Even (Even or odd number)</option>
			      <option value="factorialProgram">Factorial</option>
			      <option value="tableOfNumber">Table of number</option>
			      <option value="primeNumber">First 15 prime number</option>
			      <option value="armstrongNumber">Armstrong Number</option>
                  <option value="palindromeNumber">Palindrome Number (Ex 1235321)</option>
			  <div class="form-group" id="digit_div">
			    <label for="digit">Enter number </label>
			    <input  class="form-control"  placeholder="" type="number" name="digit" id="digit" value="5" >
			   <input type="submit" name="submit" value="Check" class="btn btn-block btn-success">

			<div class="m-4 font-italic font-weight-bold text-center">

                <div class="card bg-light mb-3" style="max-width: 18rem;">
                  <div class="card-header">Answer</div>
                  <div class="card-body">
                    <!-- <h5 class="card-title">Light card title</h5> -->
                    <p class="card-text" id="ajax_response" > To see the answer to the quiz, please select the option from the dropdown and enter a number. (Note: the default number is 5. You can change a number.) </p>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="" ></script>
    <script src="" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script type="text/javascript">
    	$("#select_program").on('change', function() {
    	  //alert( this.value );

    	  if(this.value == "primeNumber"){

    <script type="text/javascript">
    	// Variable to hold request
    	var request;

    	// Bind to the submit event of our form

    	    // Prevent default posting of form - put here to work in case of errors

    	    // Abort any pending request
    	    if (request) {
    	    // setup some local variables
    	    var $form = $(this);

    	    // Let's select and cache all the fields
    	    var $inputs = $form.find("input, select, button, textarea");

    	    // Serialize the data in the form
    	    var serializedData = $form.serialize();

    	    // Let's disable the inputs for the duration of the Ajax request.
    	    // Note: we disable elements AFTER the form data has been serialized.
    	    // Disabled form elements will not be serialized.
    	    $inputs.prop("disabled", true);

    	    // Fire off the request to /form.php
    	    request = $.ajax({
    	        url: "",
    	        type: "post",
    	        data: serializedData

    	    // Callback handler that will be called on success
    	    request.done(function (response, textStatus, jqXHR){
    	        // Log a message to the console
    	        //console.log("Hooray, it worked!");

    	    // Callback handler that will be called on failure (jqXHR, textStatus, errorThrown){
    	        // Log the error to the console
    	            "The following error occurred: "+
    	            textStatus, errorThrown

    	    // Callback handler that will be called regardless
    	    // if the request failed or succeeded
    	    request.always(function () {
    	        // Reenable the inputs
    	        $inputs.prop("disabled", false);



class Programs
	public $sum=0; 
	public $rem=0;
	public $num;

	function __construct()


	public function sumOfDigits($num){

		$this->num = $num;

		for ($i =0; $i<=strlen($num);$i++)  
		  $this->sum = $this->sum + $this->rem;  
		return  $this->sum;  

	public function evenOddProgram($number)
		 return "$number is Even Number.";   
		 return "$number is Odd Number.";  

	public function primeNumber()
		$count = 0;  
		$num = 2;  
		while ($count < 15 ){  
			for ( $i=1; $i<=$num; $i++){  
				if (($num%$i)==0){  
			if ($div_count<3){  
				echo $num." , ";  

	public function tableOfNumber($value)
		define('a', $value);   
		for($i=1; $i<=10; $i++)   
		  echo a . " x " . $i . " = " . $i*a;   
		  echo '<br>';     

	public function factorialProgram($value)
		$num = $value;  
		$factorial = 1;  
		for ($x=$num; $x>=1; $x--)   
		  $factorial = $factorial * $x;  
		return "Factorial of $num is $factorial";  

	public function armstrongNumber($value)
		$num = $value;  
		echo "Yes it is an Armstrong number";  
		echo "No it is not an armstrong number";  

	public function palindrome($n){  
		$number = $n;  
		$sum = 0;  
		while(floor($number)) {  
			$rem = $number % 10;  
			$sum = $sum * 10 + $rem;  
			$number = $number/10;  
		return $sum;  

	public function palindromeNumber($value)
		$input = $value;  
		$num = $this->palindrome($input);  
		echo "$input is a Palindrome number";  
		} else {  
		echo "$input is not a Palindrome";  

$program = new Programs();


<?php include 'PhpPrograms.php'; ?>
 <?php if (count($_POST) != 0): $digit = $_POST['digit'];?>	 	
 	<?php if ($_POST['program'] == 'sumOfDigits'): ?>
 		<p>Sum of Digit <?php echo $_POST['digit'];?> is <?php echo $program->sumOfDigits($digit); ?></p>
 	<?php elseif ($_POST['program'] == 'evenOddProgram'):?>
 		<p><?php echo $program->evenOddProgram($digit);  ?></p>
 	<?php elseif ($_POST['program'] == 'factorialProgram'):?>
 		<p><?php echo $program->factorialProgram($digit); ?></p>
 	<?php elseif ($_POST['program'] == 'tableOfNumber'):?>
 		<p>Table of <?php echo $_POST['digit'];?> <br><?php echo $program->tableOfNumber($digit);  ?></p>
 	<?php elseif ($_POST['program'] == 'primeNumber'):?>
 		<p>Here is the list the first 15 prime numbers. <br><?php $program->primeNumber(); ?></p>
 		<?php elseif ($_POST['program'] == 'armstrongNumber'):?>
 		<p><?php $program->armstrongNumber($digit); ?></p>
 		<?php elseif ($_POST['program'] == 'palindromeNumber'):?>
 		<?php $program->palindromeNumber($digit); ?>
 	<?php endif ?> 	
 <?php endif;?>