quiz app using html css and javascript

Quiz App Using HTML, CSS and JavaScript (Source Code)

Quiz App Using HTML, CSS, and JavaScript (Source Code)

Hello Coder, Welcome to the Codewithrandom blog. In this article, We create a Quiz App using HTML, CSS, And JavaScript. In this Quiz Website Project, we Score System and Previous and Next Question and After Quiz Done we can check right answer.

Quiz App Using Html Css And Javascript

The main purpose of making a Quiz app is to make javascript concepts clearer and give users access to a web app so they may practice for competitive exams and improve their general knowledge. We’ll build a quiz app in this article.

Before we dive into the step-by-step process of creating a quiz app, let’s understand some of the general concepts of JavaScript for creating quiz apps.

Creating a Snake Game using C++ (With Source Code)

What is a Quiz APP?

A quiz app is an online web-based general awareness game that contains a series of questions along with multiple-choice options. The user has to select one of the answers from the list of four options, then repeat the same process for other questions, and finally,. The user needs to submit all the answers, and the quiz result is displayed to the user.

What are the benefits of creating a quiz app?

  1. Increase your thinking ability.
  2. Improves knowledge
  3. getting hands-on experience on real-world projects.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Code byAbhilash Narayan
Project DownloadLink Available below
Language usedHTML, CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Quiz App Table

 

Video Tutorial Of Quiz App Using Javascript:-

I hope you enjoy this video tutorial so let’s start with a basic HTML structure for the Quiz App Using Javascript.

Quiz 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>Javascript Quiz</title>
<link rel="stylesheet" href="style1.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">JS 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> <!-- End of option block -->
</fieldset>
<button name="previous" id="previous" class="btn btn-success">Previous</button>
&nbsp;
<button name="next" id="next" class="btn btn-success">Next</button>
</form>
</div>
</div> <!-- End of col-sm-12 -->
</div> <!-- End of row -->
</div> <!-- ENd of container fluid -->
</div> <!-- End of content -->
<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="app.js"></script>
</body>
</html>

HTML Structure :

We’ll add a few links to the external javascript and CSS files inside the header section before adding structure to our website. Additionally, since we utilized Bootstrap for this project, we need to include certain Bootstrap links in it.

<link rel="stylesheet" href="style1.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">

Before continuing, If you want to learn complete frontend web development then we have launched an E-Book “Master Frontend Development: Zero to Hero” for you. This E-Book includes hand-crafted lessons on HTML, CSS, Javascript, and Bootstrap. And also 100+ frontend projects and interview questions as well.

Now, Let’s continue –

Structure:

  •  Now using the div tag we will add the container of our quiz app.
  • Using the div tag we will add two titles one is for a javascript quiz and another is for counting the total number of questions inside our quiz app.
  • After that, we will add the structure of a form, such as one with a question, using the bootstrap predefined classes, and we will add the 4 alternatives to each question using the radio type input.

  • Next, we will construct two buttons with the button tag: one for going to the previous question and one for the following question.


Html output for quiz app:-

Quiz App Using Html Css And Javascript
 

CSS Code For Quiz App:-

.content {
margin-top: 54px;
}
.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;
}

Create Scroll Arrow Animation Using HTML and CSS

However, some of the default stylings are derived from the bootstrap predefined CSS. We have just contributed a few extra stylings to our quiz app’s CSS. The individual elements of our quiz app will get extra padding and margin in our CSS file using the class selector, making it seem more likable.

Updated output With HTML and CSS code For the Quiz App

ADVERTISEMENT

ADVERTISEMENT


ADVERTISEMENT

Quiz App Using Html Css And Javascript
 

JavaScript Code For Quiz App:-

/* Created and coded by Abhilash Narayan */
/* Quiz source: w3schools.com */
var quiz = {
"JS": [
{
"id": 1,
"question": "Inside which HTML element do we put the JavaScript?",
"options": [
{
"a": "&lt;script&gt;",
"b": "&lt;javascript&gt;",
"c": "&lt;scripting&gt;",
"d": "&lt;js&gt;"
}
],
"answer": "&lt;script&gt;",
"score": 0,
"status": ""
},
{
"id": 2,
"question": "Where is the correct place to insert a JavaScript?",
"options": [
{
"a": "The &lt;head&gt; section",
"b": "The &lt;body&gt; section",
"c": "Both the &lt;head&gt; section and the &lt;body&gt; section are correct"
}
],
"answer": "Both the &lt;head&gt; section and the &lt;body&gt; section are correct",
"score": 0,
"status": ""
},
{
"id": 3,
"question": "What is the correct syntax for referring to an external script called 'xxx.js'?",
"options": [
{
"a": "&ltscript href=&quot;xxx.js&quot;>",
"b": "&lt;script name=&quot;xxx.js&quot;&gt;",
"c": "&lt;script src=&quot;xxx.js&quot;&gt;"
}
],
"answer": "&lt;script src=&quot;xxx.js&quot;&gt;",
"score": 0,
"status": ""
},
{
"id": 4,
"question": "The external JavaScript file must contain the &lt;script&gt; tag.",
"options": [
{
"a": "True",
"b": "False"
}
],
"answer": "False",
"score": 0,
"status": ""
},
{
"id": 5,
"question": "How do you write &quot;Hello World&quot; in an alert box?",
"options": [
{
"a": "alertBox(&quot;Hello World&quot;);",
"b": "msg(&quot;Hello World&quot;);",
"c": "alert(&quot;Hello World&quot;);",
"d": "msgBox(&quot;Hello World&quot;);",
}
],
"answer": "alert(&quot;Hello World&quot;);",
"score": 0,
"status": ""
},
{
"id": 6,
"question": "How do you create a function in JavaScript?",
"options": [
{
"a": "function myFunction()",
"b": "function:myFunction()",
"c": "function = myFunction()",
}
],
"answer": "function myFunction()",
"score": 0,
"status": ""
},
{
"id": 7,
"question": "How do you call a function named &quot;myFunction&quot;?",
"options": [
{
"a": "call function myFunction()",
"b": "call myFunction()",
"c": "myFunction()",
}
],
"answer": "myFunction()",
"score": 0,
"status": ""
},
{
"id": 8,
"question": "How to write an IF statement in JavaScript?",
"options": [
{
"a": "if i = 5 then",
"b": "if i == 5 then",
"c": "if (i == 5)",
"d": " if i = 5",
}
],
"answer": "if (i == 5)",
"score": 0,
"status": ""
},
{
"id": 9,
"question": "Which of the following is a disadvantage of using JavaScript?",
"options": [
{
"a": "Client-side JavaScript does not allow the reading or writing of files.",
"b": "JavaScript can not be used for Networking applications because there is no such support available.",
"c": "JavaScript doesn't have any multithreading or multiprocess capabilities.",
"d": "All of the above."
}
],
"answer": "All of the above.",
"score": 0,
"status": ""
},
{
"id": 10,
"question": "How to write an IF statement for executing some code if &quot;i&quot; is NOT equal to 5?",
"options": [
{
"a": "if (i <> 5)",
"b": "if i <> 5",
"c": "if (i != 5)",
"d": "if i =! 5 then",
}
],
"answer": "if (i != 5)",
"score": 0,
"status": ""
},
{
"id": 11,
"question": "How does a WHILE loop start?",
"options": [
{
"a": "while i = 1 to 10",
"b": "while (i &lt;= 10; i++)",
"c": "while (i &lt;= 10)"
}
],
"answer": "while (i &lt;= 10)",
"score": 0,
"status": ""
},
{
"id": 12,
"question": "How does a FOR loop start?",
"options": [
{
"a": "for (i = 0; i &lt;= 5)",
"b": "for (i = 0; i &lt;= 5; i++)",
"c": "for i = 1 to 5",
"d": "for (i &lt;= 5; i++)"
}
],
"answer": "for (i = 0; i &lt;= 5; i++)",
"score": 0,
"status": ""
},
{
"id": 13,
"question": "How can you add a comment in a JavaScript?",
"options": [
{
"a": "//This is a comment",
"b": "&sbquo;This is a comment",
"c": "&lt;!--This is a comment--&gt;"
}
],
"answer": "//This is a comment",
"score": 0,
"status": ""
},
{
"id": 14,
"question": "How to insert a comment that has more than one line?",
"options": [
{
"a": "/*This comment has more than one line*/",
"b": "//This comment has more than one line//",
"c": "&lt;!--This comment has more than one line--&gt;"
}
],
"answer": "/*This comment has more than one line*/",
"score": 0,
"status": ""
},
{
"id": 15,
"question": "What is the correct way to write a JavaScript array?",
"options": [
{
"a": "var colors = (1:&quot;red&quot;, 2:&quot;green&quot;, 3:&quot;blue&quot;)",
"b": "var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;]",
"c": "var colors = 1 = (&quot;red&quot;), 2 = (&quot;green&quot;), 3 = (&quot;blue&quot;)",
"d": "var colors = &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;"
}
],
"answer": "var colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;]",
"score": 0,
"status": ""
},
{
"id": 16,
"question": "How do you round the number 7.25, to the nearest integer?",
"options": [
{
"a": "rnd(7.25)",
"b": "Math.round(7.25)",
"c": "Math.rnd(7.25)",
"d": "round(7.25)"
}
],
"answer": "Math.round(7.25)",
"score": 0,
"status": ""
},
{
"id": 17,
"question": "How do you find the number with the highest value of x and y?",
"options": [
{
"a": "Math.max(x, y)",
"b": "Math.ceil(x, y)",
"c": "top(x, y)",
"d": "ceil(x, y)"
}
],
"answer": "Math.max(x, y)",
"score": 0,
"status": ""
},
{
"id": 18,
"question": "What is the correct JavaScript syntax for opening a new window called &quot;w2&quot;?",
"options": [
{
"a": "w2 = window.new(&quot;http://www.w3schools.com&quot;);",
"b": "w2 = window.open(&quot;http://www.w3schools.com&quot;);"
}
],
"answer": "w2 = window.open(&quot;http://www.w3schools.com&quot;);",
"score": 0,
"status": ""
},
{
"id": 19,
"question": "JavaScript is the same as Java.",
"options": [
{
"a": "true",
"b": "false"
}
],
"answer": "false",
"score": 0,
"status": ""
},
{
"id": 20,
"question": "How can you detect the client&rsquo;s browser name?",
"options": [
{
"a": "navigator.appName",
"b": "browser.name",
"c": "client.navName"
}
],
"answer": "navigator.appName",
"score": 0,
"status": ""
},
{
"id": 21,
"question": "Which event occurs when the user clicks on an HTML element?",
"options": [
{
"a": "onchange",
"b": "onclick",
"c": "onmouseclick",
"d": "onmouseover"
}
],
"answer": "onclick",
"score": 0,
"status": ""
},
{
"id": 22,
"question": "How do you declare a JavaScript variable?",
"options": [
{
"a": "var carName;",
"b": "variable carName;",
"c": "v carName;"
}
],
"answer": "var carName;",
"score": 0,
"status": ""
},
{
"id": 23,
"question": "Which operator is used to assign a value to a variable?",
"options": [
{
"a": "*",
"b": "-",
"c": "=",
"d": "x"
}
],
"answer": "=",
"score": 0,
"status": ""
},
{
"id": 24,
"question": "What will the following code return: Boolean(10 &gt; 9)",
"options": [
{
"a": "NaN",
"b": "false",
"c": "true"
}
],
"answer": "true",
"score": 0,
"status": ""
},
{
"id": 25,
"question": "Is JavaScript case-sensitive?",
"options": [
{
"a": "No",
"b": "Yes"
}
],
"answer": "Yes",
"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: &nbsp;" + 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> &nbsp;' + quiz.JS[j].question + '</div>' +
'<div><b>Correct answer:</b> &nbsp;' + quiz.JS[j].answer + '</div>' +
'<div class="last-row"><b>Score:</b> &nbsp;' + res +
'</div>'
);
}
}
this.checkAnswer = function (option) {
var answer = quiz.JS[this.currentque].answer;
option = option.replace(/</g, "&lt;") //for <
option = option.replace(/>/g, "&gt;") //for >
option = option.replace(/"/g, "&quot;")
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) {
//var radio = $(this).find('input:radio');
$(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);
});

ADVERTISEMENT

First, we built an object in our Javascript, and then we added a question with a certain ID number to that object. We have built 25 questions in total and placed them within our object. The user will receive the quiz task’s outcome at the end of the quiz by utilizing the conditional statements to verify, as the user clicks on any of the alternatives, if and else statements, whether the answer they choose matches the proper response.

ADVERTISEMENT

10+ HTML CSS Projects For Beginners with Source Code

Final Output For Quiz App Using JavaScript:-

Quiz App Using Html Css And Javascript

 

Quiz App Using Html Css And Javascript
 

 

Now that we have completed our javascript section Quiz App. our updated output with Html, CSS, and Javascript For Quiz App.

Video Output:

[su_button id=”download” url=”https://drive.google.com/drive/folders/1Is-9xNaJRyAQBWK3EmoAh3LIxPEXjPo9?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD CODE NOW[/su_button]

Hope you like the Quiz App. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

Ecommerce website using HTML CSS and javascript

This post teaches us how to create a Quiz App Using using simple HTML & CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki
Code By – Abhilash Narayan

FAQ For Quiz App Project

How to Create a Quiz App Using HTML Code?

 Now using the div tag we will add the container of our quiz app .

Using the div tag we will add two title one is for javascript quiz and another is for counting the total  number of question inside our quiz app.

After that, we will add the structure of a form, such as one with a question, using the bootstrap predefined classes, and we will add the 4 alternatives to each question using the radio type input.

Next, we will construct two buttons with the button tag: one for going to the previous question and one for the following question.

What is a Quiz APP?

A quiz app is an online web-based general awareness game that contains a series of questions along with multiple-choice options. The user has to select one of the answers from the list of four options, then repeat the same process for other questions, and finally,. The user needs to submit all the answers, and the quiz result is displayed to the user.

What are the benefits of creating a quiz app?

Increase your thinking ability.
Improves knowledge
getting hands-on experience on real-world projects.



This Post Has 2 Comments

  1. Steve

    Thanks for posting this. Will take a closer look to increase my skill set. 👍

  2. Barni

    That’s very good one

Leave a Reply