PHP

Multi-Step 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?

5. Which Country has the most pollution?

HTML

<div class="container container-main">
<div class="row justify-content-center">
<div class="form-container">
<form id="demoForm">
<ul id="progress_steps" class="d-flex justify-content-center">
<li class="active" id="step_1"></li>
<li id="step_2"></li>
<li id="step_3"></li>
<li id="step_4"></li>
<li id="step_5"></li>
</ul>

<fieldset>
<div class="fieldset-content-container">
<div class="row g-3 justify-content-between">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-info">
<h4>1. Which country has the most earthquakes?</h4>
<div class="input-error-check"></div>
</div>

</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-input">

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

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

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

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

</div>

</div>
</div>
</div>
</div> 
</div> 
<p class="quiz-sub"></p>
<button type="button" class="btn btn-secondary form-button-next next-step"><span class="form-button-next-label"><i class="fa-solid fa-circle-arrow-right"></i></span>NEXT</button> 
</fieldset>

<fieldset>
<div class="fieldset-content-container">
<div class="row g-3 justify-content-between">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-info">
<h4>2. Which country has the most islands?</h4>
<div class="input-error-check"></div>
</div>

</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-input">

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

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

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

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

</div>

</div>
</div>
</div>
</div> 
</div> 
<p class="quiz-sub"></p>
<button type="button" class="btn btn-secondary form-button-previous previous-step"><span class="form-button-previous-label"><i class="fa-solid fa-circle-arrow-left"></i></span>PREVIOUS</button> 
<button type="button" class="btn btn-secondary form-button-next next-step"><span class="form-button-next-label"><i class="fa-solid fa-circle-arrow-right"></i></span>NEXT</button> 
</fieldset>

<fieldset>
<div class="fieldset-content-container">
<div class="row g-3 justify-content-between">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-info">
<h4>3. Which country has the most lawyers per capita?</h4>
<div class="input-error-check"></div>
</div>

</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-input">

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

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

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

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

</div>

</div>
</div>
</div>
</div> 
</div> 
<p class="quiz-sub"></p>
<button type="button" class="btn btn-secondary form-button-previous previous-step"><span class="form-button-previous-label"><i class="fa-solid fa-circle-arrow-left"></i></span>PREVIOUS</button> 
<button type="button" class="btn btn-secondary form-button-next next-step"><span class="form-button-next-label"><i class="fa-solid fa-circle-arrow-right"></i></span>NEXT</button> 
</fieldset>

<fieldset>
<div class="fieldset-content-container">
<div class="row g-3 justify-content-between">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-info">
<h4>4. Which country has the most fresh water?</h4>
<div class="input-error-check"></div>
</div>

</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-input">

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

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

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

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

</div>

</div>
</div>
</div>
</div> 
</div> 
<p class="quiz-sub"></p>
<button type="button" class="btn btn-secondary form-button-previous previous-step"><span class="form-button-previous-label"><i class="fa-solid fa-circle-arrow-left"></i></span>PREVIOUS</button> 
<button type="button" class="btn btn-secondary form-button-next next-step"><span class="form-button-next-label"><i class="fa-solid fa-circle-arrow-right"></i></span>NEXT</button> 
</fieldset>


<fieldset>
<div class="fieldset-content-container">
<div class="row g-3 justify-content-between">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-info">
<h4>5. Which Country has the most pollution?</h4>
<div class="input-error-check"></div>
</div>

</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">

<div class="quiz-question-input">

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

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

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

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

</div>

</div>
</div>
</div>
</div> 
</div> 
<p class="quiz-sub"></p>
<button type="button" class="btn btn-secondary form-button-previous previous-step"><span class="form-button-previous-label"><i class="fa-solid fa-circle-arrow-left"></i></span>PREVIOUS</button> 
<button id="btnLast" type="button" class="btn btn-secondary form-button-next next-step"><span class="form-button-next-label"><i class="fa-solid fa-circle-arrow-right"></i></span>NEXT</button> 
</fieldset>

<fieldset>

<div class="quiz-message-container">
<div id="quizMessage"></div>
</div>

<p class="quiz-sub"></p>
<button id="btnBack" type="button" class="btn btn-secondary form-button-previous previous-step"><span class="form-button-previous-label"><i class="fa-solid fa-circle-arrow-left"></i></span>BACK</button>
<button type="button" class="btn btn-success form-button-submit next-step" id="buttonSubmit" ><span class="form-button-submit-label"><i class="fa-solid fa-share-from-square"></i></span>SUBMIT</button> 
</fieldset>

</form>

<div id="progress-container">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>

</div>
</div>

CSS

.radio-item {}
  position: relative;}
  top: 5px;}
} 

.radio-item-label {}
  cursor: pointer;}
}

.radio-item-label span {}
  padding: 4px 10px;}
  border: 1px solid #eee;}
  display: inline-block;}
  width: 210px;}
  color: rgba(0, 155, 162, 0.92); }
  border-radius: 4px;}
}

.radio-item-label span:hover {}
  background-color: rgba(0, 155, 162, 0.22);}
}

.container-main {}
  padding-top: 2rem;}
}

.demo-section .card-text {}
  padding: 20px;}
}

.container-main .button-container  {}
  text-align: right;}
}

.container-main .submit-button {}
  width: 100%;}
  text-align: center;}
  padding: 4px 20px;}
}

.container-main .message-container {}
  background-color: rgba(255, 118, 0, 0.20);}
  border-radius: 4px;}
  text-align: center;}
  padding: 4px 20px;}
}

.container-main label {}
  border-bottom: none !important;}
} 

.container-main input:checked+label {}
  border-bottom: none !important;}
}

.quiz-question-container {

}

.quiz-question-container .card {

}

.quiz-question-info {}
  padding: 1rem;}
  font-size: larger;}
  text-align: center;}
} 

.quiz-question-info h4 {}
  font-size: 1em;}
  margin: 2rem 1rem 1rem 1rem;}
}

.quiz-sub {}
  margin-bottom: 1rem;}
} 

.quiz-question-input {}
  padding: 1rem;}
  margin-bottom: 1em;}
} 

.quiz-buttons-container {}
  margin-top: 1rem;}
}

#demoForm fieldset:not(:first-of-type) {}
  display: none}
}

#progress_steps {}
  margin-bottom: 30px;}
  margin-right: 40px;}
  overflow: hidden;}
  text-align: center;}
  color: #9A9A9A;}
}

#progress_steps .active {}
  color: #2F8D46;}
}

#progress_steps li {}
  list-style-type: none;}
  font-size: 15px;}
  width: 10%;}
  float: left;}
  position: relative;}
  z-index: 2;}
  font-weight: 400;}
}

#progress_steps #step_1:before {}
  content: "1";}
}

#progress_steps #step_2:before {}
  content: "2";}
}

#progress_steps #step_3:before {}
  content: "3";}
}

#progress_steps #step_4:before {}
  content: "4";}
}

#progress_steps #step_5:before {}
  content: "5";}
}

#progress_steps #step_6:before {}
  content: "6";}
}

#progress_steps #step_7:before {}
  content: "7";}
}

#progress_steps #step_8:before {}
  content: "8";}
}

#progress_steps #step_9:before {}
  content: "9";}
}

#progress_steps li:before {}
  width: 24px;}
  height: 24px;}
  line-height: 20px;}
  display: block;}
  font-size: 14px;}
  color: #ffffff;}
  background: lightgray;}
  border-radius: 50%;}
  margin: 0 auto 5px auto;}
  padding: 2px;}
}

#progress_steps li:after {}
  content: '';}
  width: 100%;}
  height: 2px;}
  background: lightgray;}
  position: absolute;}
  left: 0;}
  top: 12px;}
  z-index: -1;}
}

#progress_steps li.active:before,}
  #progress_steps li.active:after {}
  background: #61677C;}
}

#progress-container {}
  margin-top: 1rem;}
}

.progress {}
  height: 4px;}
  margin: 0;}
  border-radius: 0 !important;}
  font-size: 11px;}
  letter-spacing: 1px;}
}

.progress-bar {}
  background-color: #b9b9bd;}
}

.input-info {}
  padding: 1em;}
  background-color: rgba(71, 70, 70, 0.10);}
  border-radius: 10px;}
  text-align: center;}
  margin-bottom: 2rem;}
}

.previous-step {}
  float: left;}
}

.next-step {}
  float: right;}
}

.input-container {}
  margin: 2em 0;}
}

.form-input-text {}
  width: 100%;}
}

.error-message-input-container {}
  height: 40px;}
  padding-top: 10px;}
}

.error-message-input-content {}
  margin-top: 1rem;}
  font-size: 11px;}
  color: #FF0004;}
  padding: 0 32px;}
  position: relative;}
  text-align: center;}
}

.error-message-input-content::before {}
  position: absolute;}
  font-family: 'FontAwesome';}
  top: 0;}
  left: 0;}
  content: "\f071";}
}

.error-message-input-content::after {}
  position: absolute;}
  font-family: 'FontAwesome';}
  top: 0;}
  right: 0;}
  color: rgba(0, 155, 162, 0.92);}
  content: "\f192";}
}

.input-error-state {}
  background-color: rgba(255, 132, 134, 0.1);}
}

.form-container {}
}

.form-container .input-container {}
  margin: 0 auto;}
  max-width: 190px;}
}

.form-container .form-button-next {}
  position: relative;}
  width: 129px;}
  padding: 4px 6px 4px 12px;}
  text-align: left;}
}

.form-container .form-button-next-label {}
  position: absolute;}
  top: 0;}
  right: 0;}
  display: inline-block;}
  padding: 4px 6px;}
  background: rgba(0, 0, 0, 0.15);}
  border-radius: 0 3px 3px 0;}
}

.form-container .form-button-previous {}
  position: relative;}
  width: 129px;}
  padding: 4px 6px 4px 40px;}
  text-align: left;}
}

.form-container .form-button-previous-label {}
  position: absolute;}
  top: 0;}
  left: 0;}
  display: inline-block;}
  padding: 4px 6px;}
  background: rgba(0, 0, 0, 0.15);}
  border-radius: 3px 0 0 3px;}
}

.form-container .form-button-submit {}
  position: relative;}
  width: 129px;}
  padding: 4px 6px 4px 12px;}
  text-align: left;}
}

.form-container .form-button-submit-label {}
  position: absolute;}
  top: 0;}
  right: 0;}
  display: inline-block;}
  padding: 4px 6px;}
  background: rgba(0, 0, 0, 0.15);}
  border-radius: 0 3px 3px 0;}
}

.form-container .button-next {}
  float: right;}
}

.form-container .button-previous {}
  float: left;}
}

.form-container .button-submit {}
  float: right;}
}

.quiz-message-container {}
  margin-bottom: 2rem;}
  padding: 3rem 1rem 1rem 1rem;}
  text-align: center;}
  border-radius: 6px;}
  background-color: rgba(0, 155, 162, 0.2);}
  border: 1px solid rgba(0, 155, 162, 0.12);}
  min-height: 180px;}
}

.quiz-message-container p {}
  margin: 0;}
}

jQuery

$(document).ready(function() {

var currentMsfStep, nextMsfStep, previousMsfStep;
var opacity;
var current = 1;
var steps = $("fieldset").length;

setProgressSteps(current);

$(".next-step").click(function() {
if ($('input[type=radio]:checked:visible').length == 0) {
$('.input-error-check:visible').html('<div class="error-message-input-content">Please select an answer</div>');
return false;
}

currentMsfStep = $(this).parent();
nextMsfStep = $(this).parent().next();
$("#progress_steps li").eq($("fieldset")
.index(nextMsfStep)).addClass("active");
nextMsfStep.show();
currentMsfStep.animate({
opacity: 0
}, {
step: function(now) {
opacity = 1 - now;
currentMsfStep.css({
'display': 'none',
'position': 'relative'
});
nextMsfStep.css({
'opacity': opacity
});
},
duration: 500
});
setProgressSteps(++current);
});

$(".previous-step").click(function() {
currentMsfStep = $(this).parent();
previousMsfStep = $(this).parent().prev();
$("#progress_steps li").eq($("fieldset")
.index(currentMsfStep)).removeClass("active");

previousMsfStep.show();
currentMsfStep.animate({
opacity: 0
}, {
step: function(now) {
opacity = 1 - now;
currentMsfStep.css({
'display': 'none',
'position': 'relative'
});
previousMsfStep.css({
'opacity': opacity
});
},
duration: 500
});
setProgressSteps(--current);
});

function setProgressSteps(currentStep) {
var percent = parseFloat(100 / steps) * current;
percent = percent.toFixed();
$(".progress-bar").css("width", percent + "%");
$('.input-error-check').html('');
$('input[type=text]').removeClass('input-error-state');
}

$("#buttonSubmit").click(function(event) {
$.ajax({
type: 'post',
url: 'post.php',
data: $('#demoForm').serialize(),
success: function (data) {
$("#quizMessage").html(data);
$("#buttonSubmit").prop('disabled', true);
}
});
event.preventDefault();
}); 

$("#btnLast").click(function () {
$("#quizMessage").html("Are you SURE you have answered all the questions correctly?");
});

$("#btnBack").click(function () {
$("#buttonSubmit").prop('disabled', false);
$("#quizMessage").html("");
});

});

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 = '<p><strong>All</strong> answers are <strong>incorrent</strong></p>
<p>GO BACK AND TRY AGAIN</p>';
}

if ($totalRight == 1 ) {
$result = '<p>Only <strong>one</strong> answer is <strong>correct</strong></p>
<p>GO BACK AND TRY AGAIN</p>';
}

if ($totalRight == 2 ) {
$result = '<p><strong>Two</strong> answers are <strong>correct</strong></p>
<p>GO BACK AND TRY AGAIN</p>';
}

if ($totalRight == 3 ) {
$result = '<p><strong>Three</strong> answers are <strong>correct</strong></p>
<p>GO BACK AND TRY AGAIN</p>';
}

if ($totalRight == 4 ) {
$result = '<p><strong>Four</strong> answers are <strong>correct</strong></p>
<p>GO BACK AND TRY AGAIN</p>';
}

if ($totalRight == 5 ) {
$result = '<p><strong>All</strong> answers are <strong>correct</strong></p>
<p>WELL DONE!</p>';
}

echo '' . $result . ''; 

?>

About Luan Morina

A versatile educator who seamlessly integrates linguistic expertise, business acumen, and philosophical insight into every training session.

Read more...