PHP

Interactive Quiz with Radio Buttons

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?

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>

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

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

jQuery

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

PHP (post.php)

<?php
$answer_01 = $_POST['question-01'];
$answer_02 = $_POST['question-02'];
$answer_03 = $_POST['question-03'];
$answer_04 = $_POST['question-04'];

$totalRight = 0;

if ($answer_01 == "A") { $totalRight++; }
if ($answer_02 == "B") { $totalRight++; }
if ($answer_03 == "C") { $totalRight++; }
if ($answer_04 == "D") { $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>All</strong> answers are <strong>correct</strong>";
}

echo "" . $result . "";
?>