Hello developers, today in this blog, you'll learn to create a Quiz App using HTML, CSS & JavaScript.
The quiz application is an application that allows one in organizing an online quiz. This application will be useful in organizing the quiz events in the colleges or the schools. The online quiz application will help smoothly manage the quiz event.
In this Quiz App, the webpage consists of the title and several questions with the options. When the user clicks the correct option for the respective question, the user can click the next button to move to the next question. After answering all the questions the score will be displayed, and there will be a button named start over where the user can start the quiz from the beginning.
The source code of this Quiz App is given below, if you want the source code of this program, you can copy it. You can use this Quiz App with your creativity and can take this project to the next level.
Quiz App [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,800);
body {
font-family: 'Open Sans';
font-size: 1em;
background: #00C9A7;
}
h1 {
text-align: center;
}
#title {
text-decoration: underline;
}
#quiz {
text-indent: 10px;
display:none;
}
.button {
border:4px solid;
border-radius:5px;
width: 40px;
padding-left:12px;
padding-right: 15px;
position: relative;
float:right;
background-color: #DCDCDC;
color: black;
margin: 0 9px 0 9px;
}
.button.active {
background-color: #00C9A7;
color: #00C9A7;
}
button {
position: relative;
float:right;
}
.button a {
text-decoration: none;
color: black;
}
#container {
width:50%;
margin:auto;
padding: 0 25px 40px 10px;
background-color: #12192c;
border:4px solid #B0E0E6;
border-radius:5px;
color: #FFFFFF;
box-shadow: 5px 5px 5px #888;
font-size: 20px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#prev {
display:none;
}
#start {
display:none;
width: 90px;
}
.credit{
text-align: center;
color: #000;
margin: 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
(function() {
var questions = [{
question: "1. HTML abbreviation?",
choices: ["Home Tool Markup Language", "Hyperspeed ex Tensible Markup Language", "HyperText Markup Language", "Hyperlinks and Text Markup Language"],
correctAnswer: 2
}, {
question: "2. How to write a comment in HTML?",
choices: ["<!--Comment-->", "#Comment", "//Comment", "/*Comment*/"],
correctAnswer: 0
}, {
question: "3. What is the HTML element for inserting the line break?",
choices: ["<break>", "<br>", "<lb>", "<b>"],
correctAnswer: 1
}, {
question: "4. Which item refers to the start tag, the end tag and everything in between?",
choices: ["HTML element", "head element", "body element", "section element"],
correctAnswer: 0
}, {
question: "5. How can you make a bulleted list?",
choices: ["<ol>", "<li>", "<dl>", "<ul>"],
correctAnswer: 3
}];
var questionCounter = 0;
var selections = [];
var quiz = $('#quiz');
displayNext();
$('#next').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
if (isNaN(selections[questionCounter])) {
alert('Please make a selection!');
} else {
questionCounter++;
displayNext();
}
});
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
$('#start').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();
});
$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});
function createQuestionElement(index) {
var qElement = $('', {
id: 'question'
});
var header = $('Question ' + (index + 1) + ':
');
qElement.append(header);
var question = $('').append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
function createRadios(index) {
var radioList = $('
');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('- ');
input = '';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}
function displayNext() {
quiz.fadeOut(function() {
$('#question').remove();
if(questionCounter < questions.length){
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
if (!(isNaN(selections[questionCounter]))) {
$('input[value='+selections[questionCounter]+']').prop('checked', true);
}
if(questionCounter === 1){
$('#prev').show();
} else if(questionCounter === 0){
$('#prev').hide();
$('#next').show();
}
}else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
});
}
function displayScore() {
var score = $('
',{id: 'question'});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
score.append('You scored ' + numCorrect + ' out of ' +
questions.length + ' questions!!!');
return score;
}
})();
Thank you for reading our blog. If you face any problem in creating this Quiz App using HTML, CSS & JavaScript, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team