Logo Luan Morina
   A Simple Quiz with Ajax

1. Which country has the most earthquakes?

2. Which country has the most islands?

3. Which country has the most lawyers per capita?

4. Which country has the most fresh water?

5. Which Country has the most pollution?

HTML
<div class="demo-container">
<form action="" method="post" id="demoForm">
<h4>1. Which country has the most earthquakes?</h4>
<div class="questions-container">

<div class="form-check">
<input type="radio" class="form-check-input" name="question-01" id="question-01-A" value="A" required /><label for="question-01-A">Japan</label>
</div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-01" id="question-01-B" value="B" />
<label for="question-01-B">Australia</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-01" id="question-01-C" value="C" />
<label for="question-01-C">USA</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-01" id="question-01-D" value="D" />
<label for="question-01-D">Italy</label></div>

</div>

<h4>2. Which country has the most islands?</h4>
<div class="questions-container">

<div class="form-check">
<input type="radio" class="form-check-input" name="question-02" id="question-02-A" value="A" required /><label for="question-02-A">USA</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-02" id="question-02-B" value="B" />
<label for="question-02-B">Sweden</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-02" id="question-02-C" value="C" />
<label for="question-02-C">Albania</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-02" id="question-02-D" value="D" />
<label for="question-02-D">Germany</label></div>

</div>

<h4>3. Which country has the most lawyers per capita?</h4>

<div class="questions-container">

<div class="form-check">
<input type="radio" class="form-check-input" name="question-03" id="question-03-A" value="A" required /><label for="question-03-A">Belgium</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-03" id="question-03-B" value="B" />
<label for="question-03-B">North Korea</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-03" id="question-03-C" value="C" />
<label for="question-03-C">South Korea</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-03" id="question-03-D" value="D" />
<label for="question-03-D">USA</label></div>

</div>

<h4>4. Which country has the most fresh water?</h4>

<div class="questions-container">
<div class="form-check"> 
<input type="radio" class="form-check-input" name="question-04" id="question-04-A" value="A" required /><label for="question-04-A">Italy</label></div> 

<div class="form-check">
<input type="radio" class="form-check-input" name="question-04" id="question-04-B" value="B" />
<label for="question-04-B">The Netherlands</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-04" id="question-04-C" value="C" />
<label for="question-04-C">USA</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-04" id="question-04-D" value="D" />
<label for="question-04-D">Brazil</label></div>

</div>

<h4>5. Which Country has the most pollution?</h4>

<div class="questions-container">

<div class="form-check">
<input type="radio" class="form-check-input" name="question-05" id="question-05-A" value="A" required /><label for="question-05-A">Mongolia</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-05" id="question-05-B" value="B" />
<label for="question-05-B">China</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-05" id="question-05-C" value="C" />
<label for="question-05-C">India</label></div>

<div class="form-check">
<input type="radio" class="form-check-input" name="question-05" id="question-05-D" value="D" />
<label for="question-05-D">Belgium</label></div>

</div>

<div class="message-container">

<div id="message"></div>
</div>
<div class="submit-button-container">
<input type="submit" value="Submit" class="btn btn-secondary submit-button" />
</div>

</form> 
</div>
PHP post
<?php
$answer_01 = $_POST['question-01'];
$answer_02 = $_POST['question-02'];
$answer_03 = $_POST['question-03'];
$answer_04 = $_POST['question-04'];
$answer_05 = $_POST['question-05'];

$totalRight = 0;

if ($answer_01 == "A") { $totalRight++; }
if ($answer_02 == "B") { $totalRight++; }
if ($answer_03 == "C") { $totalRight++; }
if ($answer_04 == "D") { $totalRight++; }
if ($answer_05 == "A") { $totalRight++; }

// result:

if ($totalRight == 0 ) {
$result = "<strong>All</strong> answers are <strong>incorrent</strong>";
}

if ($totalRight == 1 ) {
$result = "Only <strong>one</strong> answer is <strong>correct</strong>";
}

if ($totalRight == 2 ) {
$result = "<strong>Two</strong> answers are <strong>correct</strong>";
}

if ($totalRight == 3 ) {
$result = "<strong>Three</strong> answers are <strong>correct</strong>";
}

if ($totalRight == 4 ) {
$result = "<strong>Four</strong> answers are <strong>correct</strong>";
}

if ($totalRight == 5 ) {
$result = "<strong>All</strong> answers are <strong>correct</strong>";
}

echo "" . $result . "";
?>
JS
<script>
$(function () {
$("#message").html("Answer these questions");
$('#demoForm').on('submit', function (event) {
$.ajax({
type: 'post',
url: 'post.php',
data: $('#demoForm').serialize(),
success: function (data) {
$("#message").html(data);
}
});
event.preventDefault();
});
});
</script>
CSS
.demo-container {
margin: 4em auto;
max-width: 600px;
}

.demo-container h4 {
font-size: 1em;
border-bottom: 1px dashed #ececec;
}

.questions-container  {
margin-bottom: 2em;
}

.submit-button-container  {
margin-top: 2em;
text-align: right;
}

.submit-button {
width: 160px;
text-align: center;
}

.message-container {
background-color: rgba(255, 118, 0, 0.20);
border-radius: 4px;
text-align: center;
margin: 1em 0;
padding: 4px 20px;
}
   A Simple Quiz with PHP and Ajax