Hello friends, in today’s blog we are going to make a quiz app in which you will be asked 10 questions out of which you have to click on one of the 4 options. In the end you will be shown your score that how many questions you answered correctly and how many you answered wrongly.
Step :- Create a file named index.html in VS Code.
HTML Code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GK Quiz</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<header class="header bg-primary">
<div class="left-title">GK Quiz</div>
<div class="right-title">Total Questions: <span id="tque"></span></div>
<div class="clearfix"></div>
</header>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="result" class="quiz-body">
<form name="quizForm" onSubmit="">
<fieldset class="form-group">
<h4><span id="qid">1.</span> <span id="question"></span></h4>
<div class="option-block-container" id="question-options">
</div>
</fieldset>
<button name="previous" id="previous" class="btn btn-success">Previous</button>
<button name="next" id="next" class="btn btn-success">Next</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Step 02 :- Create another file named style.css
CSS Code :-
html {
background-color: #d3d3d3;
}
.content {
margin-top: 54px;
background-color: #d3d3d3;
}
.header {
padding: 15px;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.left-title {
width: 80px;
color: #fff;
font-size: 18px;
float: left;
}
.right-title {
width: 150px;
text-align: right;
float: right;
color: #fff;
}
.quiz-body {
margin-top: 15px;
padding-bottom: 50px;
}
.option-block-container {
margin-top: 20px;
max-width: 420px;
}
.option-block {
padding: 10px;
background: aliceblue;
border: 1px solid #84c5fe;
margin-bottom: 10px;
cursor: pointer;
}
.result-question {
font-weight: bold;
}
.c-wrong {
margin-left: 20px;
color: #ff0000;
}
.c-correct {
margin-left: 20px;
color: green;
}
.last-row {
border-bottom: 1px solid #ccc;
padding-bottom: 25px;
margin-bottom: 25px;
}
.res-header {
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
padding-bottom: 15px;
}
Step 03 :- Create script.js file in VS Code
JavaScript :-
var quiz = {
"JS": [
{
"id": 1,
"question": "Which of the three banks will be merged with the other two to create India’s third-largest bank?",
"options": [
{
"a": "Punjab National Bank",
"b": "Indian Bank",
"c": "Bank of Baroda ",
"d": "Dena Bank"
}
],
"answer": "Indian Bank",
"score": 0,
"status": ""
},
{
"id": 2,
"question": "What is the name of the weak zone of the earth’s crust?",
"options": [
{
"a": "Seismic",
"b": "Cosmic",
"c": "Formic"
}
],
"answer": "Seismic",
"score": 0,
"status": ""
},
{
"id": 3,
"question": "Where was India’s first national Museum opened?",
"options": [
{
"a": "Delhi",
"b": "Hyderabad",
"c": "Mumbai"
}
],
"answer": "Mumbai",
"score": 0,
"status": ""
},
{
"id": 4,
"question": "In 2019, Which popular singer was awarded the Bharat Ratna award?",
"options": [
{
"a": " Lata Mangeshkar",
"b": " Asha Bhosle",
"c": "Bhupen Hazarika ",
"d": " Manna Dey ",
}
],
"answer": "Bhupen Hazarika",
"score": 0,
"status": ""
},
{
"id": 5,
"question": "The world’s nation 5G mobile network was launched by which country?",
"options": [
{
"a": "Japan",
"b": "Asia",
"c": "South Korea",
"d": "Malaysia",
}
],
"answer": "South Korea",
"score": 0,
"status": ""
},
{
"id": 6,
"question": "When was Pravasi Bhartiya Divas held in Varanasi?",
"options": [
{
"a": "2017",
"b": "2015",
"c": "2019",
"d": "2020"
}
],
"answer": "2019",
"score": 0,
"status": ""
},
{
"id": 7,
"question": "Vijay Singh (golf player) is from which country?",
"options": [
{
"a": "UK",
"b": "USA",
"c": "India",
"d": "Fiji"
}
],
"answer": "Fiji",
"score": 0,
"status": ""
},
{
"id": 8,
"question": "The green planet in the solar system is?",
"options": [
{
"a": "Mars",
"b": "Uranus",
"c": "Venus",
"d": " Earth",
}
],
"answer": "Uranus",
"score": 0,
"status": ""
},
{
"id": 9,
"question": "Which of these is the small-scale industry in India?",
"options": [
{
"a": "Jute industry",
"b": "Paper Industry",
"c": "Textile Industry",
"d": "Handloom Industry"
}
],
"answer": "Handloom Industry",
"score": 0,
"status": ""
},
{
"id": 10,
"question": "Which of these is the plant important in sericulture?",
"options": [
{
"a": "Cassia",
"b": "Legumes",
"c": "Pea",
"d": "Mulberry",
}
],
"answer": "Mulberry",
"score": 0,
"status": ""
},
]
}
var quizApp = function () {
this.score = 0;
this.qno = 1;
this.currentque = 0;
var totalque = quiz.JS.length;
this.displayQuiz = function (cque) {
this.currentque = cque;
if (this.currentque < totalque) {
$("#tque").html(totalque);
$("#previous").attr("disabled", false);
$("#next").attr("disabled", false);
$("#qid").html(quiz.JS[this.currentque].id + '.');
$("#question").html(quiz.JS[this.currentque].question);
$("#question-options").html("");
for (var key in quiz.JS[this.currentque].options[0]) {
if (quiz.JS[this.currentque].options[0].hasOwnProperty(key)) {
$("#question-options").append(
"<div class='form-check option-block'>" +
"<label class='form-check-label'>" +
"<input type='radio' class='form-check-input' name='option' id='q" + key + "' value='" + quiz.JS[this.currentque].options[0][key] + "'><span id='optionval'>" +
quiz.JS[this.currentque].options[0][key] +
"</span></label>"
);
}
}
}
if (this.currentque <= 0) {
$("#previous").attr("disabled", true);
}
if (this.currentque >= totalque) {
$('#next').attr('disabled', true);
for (var i = 0; i < totalque; i++) {
this.score = this.score + quiz.JS[i].score;
}
return this.showResult(this.score);
}
}
this.showResult = function (scr) {
$("#result").addClass('result');
$("#result").html("<h1 class='res-header'>Total Score: " + scr + '/' + totalque + "</h1>");
for (var j = 0; j < totalque; j++) {
var res;
if (quiz.JS[j].score == 0) {
res = '<span class="wrong">' + quiz.JS[j].score + '</span><i class="fa fa-remove c-wrong"></i>';
} else {
res = '<span class="correct">' + quiz.JS[j].score + '</span><i class="fa fa-check c-correct"></i>';
}
$("#result").append(
'<div class="result-question"><span>Q ' + quiz.JS[j].id + '</span> ' + quiz.JS[j].question + '</div>' +
'<div><b>Correct answer:</b> ' + quiz.JS[j].answer + '</div>' +
'<div class="last-row"><b>Score:</b> ' + res +
'</div>'
);
}
}
this.checkAnswer = function (option) {
var answer = quiz.JS[this.currentque].answer;
option = option.replace(/</g, "<")
option = option.replace(/>/g, ">")
option = option.replace(/"/g, """)
if (option == quiz.JS[this.currentque].answer) {
if (quiz.JS[this.currentque].score == "") {
quiz.JS[this.currentque].score = 1;
quiz.JS[this.currentque].status = "correct";
}
} else {
quiz.JS[this.currentque].status = "wrong";
}
}
this.changeQuestion = function (cque) {
this.currentque = this.currentque + cque;
this.displayQuiz(this.currentque);
}
}
var jsq = new quizApp();
var selectedopt;
$(document).ready(function () {
jsq.displayQuiz(0);
$('#question-options').on('change', 'input[type=radio][name=option]', function (e) {
$(this).prop("checked", true);
selectedopt = $(this).val();
});
});
$('#next').click(function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(1);
});
$('#previous').click(function (e) {
e.preventDefault();
if (selectedopt) {
jsq.checkAnswer(selectedopt);
}
jsq.changeQuestion(-1);
});
OutPut :-
