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