WEB QUIZ APPLICATION USING HTML,CSS

AND JAVA SCRIPT

Mini project report submitted at the end of fourth semester in partial fulfillment of the
requirement for the award of the degree of

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING
By
B. PAVAN KUMAR G. MAHENDRA VARMA
193J1A0523 193J1A0551

Under the esteemed guidance

of

Mr. M. Purna Chandra Rao

Assistant Professor

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

RAGHU INSTITUTE OF TECHNOLOGY
(Autonomous)
Affiliated to JNTU-Kakinada
Dakamarri (V), Bheemunipatnam (M),
Visakhapatnam – 531162
2021

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

1
 RAGHU INSTITUTE OF TECHNOLOGY
(Autonomous)
Affiliated to JNTU-Kakinada
Dakamarri (V), Bheemunipatnam (M),
Visakhapatnam

CERTIFICATE
This is to certify that this project entitled “WEB QUIZ APPLICATION USING

HTML,CSS AND JAVASCRIPT” done by B.Pavan Kumar and G.Mahendra Varma

bearing Regd. No: 193J1A0523, 193J1A0551 during the academic year 2020-2021 in partial

fulfillment of the requirements for the completion of 2nd year of Bachelor of Technology in

Computer Science And Engineering, under the supervision of Mr. E.Uma Shankar Rao,

(PhD), M.Tech, CSE.

Internal Guide Head of The Department

Mr.M.Purna Chandra Rao, Dr. S.Adinarayana,
Department of CSE, Department of CSE,
Raghu Institute of Technology. Raghu Institute of Technology.

EXTERNAL EXAMINER

2
 DECLARATION

This is to certify that this project titled is “WEB QUIZ APPLICATION USING

HTML,CSS AND JAVASCRIPT” bonafide work done by us, in partial fulfilment of the

requirements for the completion of 2nd year of the degree B.Tech and submitted to the

Department of Computer Science & Engineering, Raghu Institute of Technology,

Dakamarri.

We also declare that this project is a result of our own effort and that has not been

copied from anyone and we have taken only citations from the sources which are

mentioned in the references.

B.Pavan Kumar G.Mahendra Varma

PLACE: RIT, Visakhapatnam DATE:

3
Abstract
Quiz In JavaScript project is developed using HTML 5, CSS, and
JavaScript. Here, the user can add, view, edit, and delete the quiz
questions. Also, you can take test by clicking on the html document
their will be no time limit.

This is developed primarily for students who prepare for various

competitive exams.
They can store various question and take the test at any point of
time. This helps students
to asses their position in the current competitive fields

HTML5 offers new additions such as new elements and attributes, a

renewed emphasis on the importance of DOM scripting, form control
attributes (number, date, time, calendar), graphic elements (svg and
canvas tags) and even multimedia elements. New Plugins and APIs
have also been added.

I have Learned HTML5 and all of its latest features by building a quiz
application. The project helped me to learn how to create the UI, how
to manipulate DOM using JQuery and even how to optimize coding in
HTML5.

4
Introduction
The ‘MCQ Quiz Application’ project will be developed to overcome
the time consuming problem of manual system. Apart from that in
current system, checking the answer sheets after taking test, waste the
students time, so this application will check the correct answer and
save the students time and carry the examination in an effective
manner .The aim of this project is to computerized the existing
manual system and help the students to
save their valuable time and important data. Apart from this, data
which are exist in this system, will exist for long period of time and
will be easy accessible. This project helps the students to manage
their services in a good way and provide a better service to their users.

The performance of the application will be fully control by

Student . The project will reduce the manual process in managing
examinations and all issues regarding that.

Methodology
Methodology
Methodology
Methodology

5
The methodology of developing of project will be a step-by-step
sequence to design, develop and deliver the application. In software
engineering this methodology called ‘waterfall model’ which one
portion of work follows after another in a linear sequence.
Following steps will be followed in this methodology:
- Initiation (Requirement Specification);
- Planning and design;
- Execution (construction and coding);
- Validation (Testing);
- Closure (Installation).

Source Code
The complete application is developed using HTML, CSS and
Javascript

HTML Source code :

<html>
<head>
<title>Html Quiz</title>
<meta charset="utf-8">
<meta name="Viewport" content="width=device-width,intial-
scale=1">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="container">
<header>
<div class="pull-left">Python Quiz</div>
<div class="pull-right">Bheesetti Pavan Kumar</div>
</header>
<main>
<form class="questionForm" id="q1" data-question="1">
<h3>1.What kind of loop I can use to accept the number
inputs from the user until the sum of numbers given by the user is
100</h3>
6
 <u1>
<li><input type="radio" name="q1" value="a"
/>For</li>
<li><input type="radio" name="q1" value="b"
/>While</li>
<li><input type="radio" name="q1" value="c" />Do-
While</li>
<li><input type="radio" name="q1" value="d" />if</li>
</u1>
<p>
<button id="submit">Submit</button>
</p>
</form>

<form class="questionForm" id="q2" data-question="2">

<h3>2.What will be the output of the following Python
code?
<br>i = 1
<br>while True:
<br>&nbsp;&nbsp;&nbsp;&nbsp;if i%3 == 0:
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break
<br>&nbsp;&nbsp;&nbsp;&nbsp; print(i)
<br>&nbsp;&nbsp;&nbsp;&nbsp; i + = 1</h3>
<u1>
<li><input type="radio" name="q2" value="a" />1 2
3</li>
<li><input type="radio" name="q2" value="b" />1 2</li>
<li><input type="radio" name="q2" value="c"
/>Error</li>
<li><input type="radio" name="q2" value="d" />None of
the Above</li>
</u1>
<p><button id="submit">Submit</button></p>
</form>

<form class="questionForm" id="q3" data-question="3">

<h3>3.What is the output of the following if statement

7
 <br>a, b = 12, 5
<br>if a + b:
<br>&nbsp&nbsp&nbsp&nbspprint('True')
<br>else:
<br>&nbsp&nbsp&nbsp&nbspprint('False')</h3>
<u1>
<li><input type="radio" name="q3" value="a"
/>True</li>
<li><input type="radio" name="q3" value="b"
/>False</li>
<li><input type="radio" name="q3" value="c"
/>Error</li>
<li><input type="radio" name="q3" value="d" />None of
the Above</li>
</u1>
<p><button id="submit">Submit</button></p>
</form>

<form class="questionForm" id="q4" data-question="4">

<h3>4.What is the output of the following range() function
<br>for num in range(2,-5,-1):
<br>&nbsp&nbsp&nbsp&nbspprint(num, end=", ")</h3>
<u1>
<li><input type="radio" name="q4" value="a" />2, 1,
0</li>
<li><input type="radio" name="q4" value="b" />2, 1, 0,
-1, -2, -3, -4, -5</li>
<li><input type="radio" name="q4" value="c" />2, 1, 0, -
1, -2, -3, -4</li>
<li><input type="radio" name="q4" value="d"
/>Error</li>
</u1>
<p><button id="submit">Submit</button></p>
</form>

<form class="questionForm" id="q5" data-question="5">

<h3>5.While(0), how many times a loop run ?</h3>

8
 <u1>
<li><input type="radio" name="q5" value="a" />0</li>
<li><input type="radio" name="q5" value="b" />1</li>
<li><input type="radio" name="q5" value="c"
/>Infinite</li>
<li><input type="radio" name="q5" value="d"
/>Error</li>
</u1>
<p><button id="submit">Submit</button></p>
</form>
<div id="result">
<br>
</div>
</main>
<footer>
<div id="pull-left">Total No of Questions : 5</div>
</footer>
</div>
<script src="js/jquery.js"></script>
<script src="js/quiz.js"></script>
</body>
</html>

CSS Source code :

body
{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
sans-serif;
font-size: medium;
line-height: 1.6em;
background-color:white;
}
li
{
list-style: none;
}

9
.container
{
width:75%;
margin: 20px auto;
overflow: auto;
}
.pull-left
{
float: left;
}
.pull-right
{
float:right;
}
header
{
background:white;
color: steelblue;
padding: 5px 10px;
overflow: auto;
font-size: 18px;
}
footer
{
background: white;
color: steelblue;
padding: 5px 10px;
overflow: auto;
font-size: 13px;
}
@media only screen and (max-width:900px)
{
.container
{
width: 90%;
}
}
10
JavaScript Source code:
We use Jquery for the backend to store the response from the student.
We can use Jquery using the file code or from the website
Jquery is necessary for the web application to Run

var score=0;
var total=5;
var point=1;
highest= total * point;

function init()
{
sessionStorage.setItem('a1','b');
sessionStorage.setItem('a2','b');
sessionStorage.setItem('a3','a');
sessionStorage.setItem('a4','c');
sessionStorage.setItem('a5','a');

}
$(document).ready(function(){
$('.questionForm').hide();
$('#q1').show();
$('.questionForm #submit').click(function(){
//Get data attributes
current = $(this).parents('form:first').data('question');
next = $(this).parents('form:first').data('question')+1;
//Hide all questions

11
 $('.questionForm').hide();
//Show next question
$('#q'+next+'').fadeIn(300);
process(''+current+'');
return false;
});
});
function process(n){
var submitted = $('input[name=q'+n+']:checked').val();
if(submitted == sessionStorage.getItem('a'+n+'')){
score = score + point;
}
if(n == total)
{
$('#result').html('<h3>Your final score is: '+score+' out of
'+highest+'</h3><a href="index.html">Take Quiz Again</a>');
}
return false;
}

window.addEventListener('load',init,false);

12
Output of the Project

13
14
15
Conclusion
This project is only for MCQ test but in the future we have plan to
extended it to support subjective type of questions with more
functionality. We will add Administrative part on it which able the
system to delete test, add user, delete user and so on graphically vie
the web.
To conclude, this is a simple Online MCQ Quiz which able a student
to punch MCQ question to system. The student will be able to attempt
any test for once. The marks of student will be calculated according to
questions they attempt and will be displayed by the system to the
student

16
References

1.  "quoz, n. (and int.)". Oxford English

Dictionary (Online ed.). Oxford University Press
2. "quiz, n.". Oxford English Dictionary (Online ed.).
Oxford University Press. (Subscription or participating
institution membership required.)
3. "quiz, v.1". Oxford English Dictionary (Online ed.).
Oxford University Press. (Subscription or participating
institution membership required.)
4.  "World Wide Words: Quiz". World Wide Words.
5.  "Quiz: How much do you know about China and
Turkey?". cnn.com.
6. http://www.cmxmods.net/quiz.php

17