On this page

PHP: Quiz App

January 3, 2020

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

On this page

1 index.php
2 PhpPrograms.php
3 program-ajax.php

index.php

<!doctype html>
<html lang="en">
  <head>
    <!-- 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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Program</title>

    <style>
     div#quiz-wrap {
        border: 5px dashed #4a2f2f;
        margin-top: 10px;
        background: #f1f1f1;
        padding: 10px 0;
        width: 100%;
        max-width: 350px;
        margin: 10px auto;
    }
    </style>
  </head>
  <body>
<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>
              </optgroup>                              
			    </select>
			  </div>
			  <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" >
			  </div>				   
			   <input type="submit" name="submit" value="Check" class="btn btn-block btn-success">
			</form>

			<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>
                  </div>
                </div>

            </div>
	       </div>
		</div>
	</div>
</div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

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


    	  if(this.value == "primeNumber"){
    	  	$("#digit_div").hide();
    	  }
    	  else{
    	  	$("#digit_div").show();
    	  }

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

    	// Bind to the submit event of our form
    	$("#programs").submit(function(event){

    	    // Prevent default posting of form - put here to work in case of errors
    	    event.preventDefault();

    	    // Abort any pending request
    	    if (request) {
    	        request.abort();
    	    }
    	    // 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: "https://statelyworld.com/projects/demos/play-quiz/program-ajax.php",
    	        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!");
    	        //console.log(response);
    	        $("#ajax_response").html(response);
    	    });

    	    // Callback handler that will be called on failure
    	    request.fail(function (jqXHR, textStatus, errorThrown){
    	        // Log the error to the console
    	        console.error(
    	            "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);
    	    });

    	});
    </script>
  </body>
</html>

PhpPrograms.php

<?php 
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->rem=$num%10;  
		  $this->sum = $this->sum + $this->rem;  
		  $num=$num/10;  
		}
		return  $this->sum;  
	}

	public function evenOddProgram($number)
	{		
		if($number%2==0)  
		{  
		 return "$number is Even Number.";   
		}  
		else  
		{  
		 return "$number is Odd Number.";  
		}   
	}

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

	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;  
		$total=0;  
		$x=$num;  
		while($x!=0)  
		{  
		$rem=$x%10;  
		$total=$total+$rem*$rem*$rem;  
		$x=$x/10;  
		}  
		if($num==$total)  
		{  
		echo "Yes it is an Armstrong number";  
		}  
		else  
		{  
		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);  
		if($input==$num){  
		echo "$input is a Palindrome number";  
		} else {  
		echo "$input is not a Palindrome";  
		}  
	}
}

$program = new Programs();
?>

program-ajax.php

<?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;?>