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, this animal is called '<strong>tigër</strong>'. What is it 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, this animal is called '<strong>antilopë</strong>'. What is it 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, this animal is called '<strong>krokodil</strong>'. What is it 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, this animal is called '<strong>elefant</strong>'. What is it 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, this animal is called '<strong>zebra</strong>'. What is it 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 {
padding: 0 1rem 0 1rem;
border: 1px solid rgba(100, 100, 100, 0.24);
background: radial-gradient(circle at 10% 20%, rgba(216, 241, 230, 0.46) 0.1%, rgba(233, 226, 226, 0.28) 90.1%);
}
#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);
}
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-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)
<?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>';
?>
Arithmetic operators
Background that adapts to the current season
Calculate the similarity of text
Comparison operators
Count page views in a session
Display a random image
Display a random text
Display array values
Display a time based greeting
Display the current copyright year
Display current date
Display the current date in another language
Display date based on system language settings
Quiz with input fields
Quiz with input fields, multi-steps
Quiz with radio buttons
Quiz with radio buttons, multi-steps
Redirect users to another page
Retrieve checkbox values
Retrieve form input values
Retrieve the value of the selected option
Retrieve the value of the star rating
Store the value of a radio button in a session
Truncate a string to a specified width
Word Wrap