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>
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>
PHP (post.php)
<?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 . "";
?>
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;
}