Logo Luan Morina
   A Multistep Quiz with Ajax
In Albanian they call it 'tigër'. How is this animal called in English?
In Albanian they call it 'antilopë'. How is this animal called in English?
In Albanian they call it 'krokodil'. How is this animal called in English?
In Albanian they call it 'elefant'. How is this animal called in English?
In Albanian they call it 'zebra'. How is this animal called in English?

Are you SURE you have answered all the questions correctly?

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="input-info">In Albanian they call it '<strong>tigër</strong>'. How is this animal called in English?</div>
<div class="input-container">
<input type="text" maxlength="10" class="form-control form-input-text" name="question-01" value="" autocomplete="off" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div> 
<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="input-info">In Albanian they call it '<strong>antilopë</strong>'. How is this animal called in English?</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="question-02" value="" autocomplete="off" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<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="input-info">In Albanian they call it '<strong>krokodil</strong>'. How is this animal called in English?</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="question-03" value="" autocomplete="off" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<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="input-info">In Albanian they call it '<strong>elefant</strong>'. How is this animal called in English?</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="question-04" value="" autocomplete="off" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<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="input-info">In Albanian they call it '<strong>zebra</strong>'. How is this animal called in English?</div>
<div class="input-container">
<input type="text" class="form-control form-input-text" name="question-05" value="" autocomplete="off" />
<div class="error-message-input-container">
<div class="input-error-check"></div>
</div>
</div>
<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="form-finish-question">
<p>Are you SURE you have answered all the questions correctly?</p>
</div>
<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-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="messageAfterSubmit"></div>

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

</div>
</div>

</div>
CSS
.container-main {
margin: 1em auto;
max-width: 640px;
padding: 2rem 2rem 0 2rem;
border: 1px solid rgba(100, 100, 100, 0.24);
background-color: rgba(255, 255, 255, 0.44);
}

#demoForm {
position: relative;
margin-top: 20px;
}

#demoForm fieldset {
border: 0 none;
border-radius: 0.5rem;
box-sizing: border-box;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative
}

#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 {
font-size: 11px;
color: #FF0004;
padding-left: 32px;
position: relative;
}

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

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

.form-container {
max-width: 600px;
}

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

.form-finish-question {
margin-bottom: 2rem;
padding: 2em 0;
text-align: center;
border-radius: 6px;
background-color: rgba(104, 104, 104, 0.12);
border: 1px solid rgba(104, 104, 104, 0.24);
}

.result-content {
padding: 2em 0;
margin-bottom: 2rem;
text-align: center;
border-radius: 6px;
background-color: rgba(104, 104, 104, 0.12);
border: 1px solid rgba(104, 104, 104, 0.24);
}
JS

$(document).ready(function() {

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

setProgressSteps(current);

$(".next-step").click(function() {

if ($('.input-container input[type=text]:visible').val() == '') {
$('.input-container input[type=text]:visible').addClass('input-error-state');
$('.input-container .input-error-check:visible').html('<div class="error-message-input-content">Please answer the question</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) {
$("#messageAfterSubmit").html(data);
}
});
event.preventDefault();
}); 

});
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'];
$answer_06 = $_POST['question-06'];

$totalRight = 0;

if ($answer_01 == "tiger" or $answer_01 == "Tiger") { $totalRight++; }
if ($answer_02 == "antilope" or $answer_02 == "Antilope") { $totalRight++; }
if ($answer_03 == "crocodile" or $answer_03 == "Crocodile") { $totalRight++; }
if ($answer_04 == "elephant" or $answer_04 == "Elephant") { $totalRight++; }
if ($answer_05 == "zebra" or $answer_05 == "Zebra") { $totalRight++; }

// result:

if ($totalRight == 0 ) {
$result = '<p><strong>All</strong> answers are <strong>incorrent</strong></p>
<p><a href="/snippets/php/a-simple-jquery-and-ajax-quiz-with-text-fields-with-multiple-steps/">TRY AGAIN</a></p>';
}

if ($totalRight == 1 ) {
$result = '<p>Only <strong>one</strong> answer is <strong>correct</strong></p>
<p><a href="/snippets/php/a-simple-jquery-and-ajax-quiz-with-text-fields-with-multiple-steps/">TRY AGAIN</a></p>';
}

if ($totalRight == 2 ) {
$result = '<p><strong>Two</strong> answers are <strong>correct</strong></p>
<p><a href="/snippets/php/a-simple-jquery-and-ajax-quiz-with-text-fields-with-multiple-steps/">TRY AGAIN</a></p>';
}

if ($totalRight == 3 ) {
$result = '<p><strong>Three</strong> answers are <strong>correct</strong></p>
<p><a href="/snippets/php/a-simple-jquery-and-ajax-quiz-with-text-fields-with-multiple-steps/">TRY AGAIN</a></p>';
}

if ($totalRight == 4 ) {
$result = '<p><strong>Four</strong> answers are <strong>correct</strong></p>
<p><a href="/snippets/php/a-simple-jquery-and-ajax-quiz-with-text-fields-with-multiple-steps/">TRY AGAIN</a></p>';
}

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

echo '<div class="result-content">'; 
echo '' . $result . ''; 
echo '</div>'; 

?>
   A Simple multi step quiz with Ajax
A simple quiz with PHP and jQuery Ajax, with radio buttons A simple quiz with PHP and jQuery Ajax, with radio buttons, with multiple steps A simple quiz with PHP and jQuery Ajax, with text fields A simple quiz with PHP and jQuery Ajax, with text fields, with multiple steps Arithmetic operators Comparison operators Convert date Disable directory browsing
Display a background image based on the current season Display a random image Display array values Display custom error pages Display random content Display the current copyright year Display the current date Get checkbox input values
Get form input values with jQuery Get the selected radio input value with jQuery Get the selected option value with jQuery Get stars input value Post contact form with jQuery Redirect users to another page Time based greeting