Scribd
Upload
151 views

Mini Project Report

The document describes the development of an online MCQ quiz application using HTML5, CSS, and JavaScript. Key features of the application include adding, viewing, editing, and deleting quiz questions, as well as taking tests without time limits. The application aims to help students prepare for competitive exams by allowing them to store questions and take tests anytime. The source code details the technical implementation using HTML for structure, CSS for styling, and JavaScript/jQuery for functionality like storing and checking answers.

Uploaded by

PAVAN KUMAR BHEESETTI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
151 views

Mini Project Report

The document describes the development of an online MCQ quiz application using HTML5, CSS, and JavaScript. Key features of the application include adding, viewing, editing, and deleting quiz questions, as well as taking tests without time limits. The application aims to help students prepare for competitive exams by allowing them to store questions and take tests anytime. The source code details the technical implementation using HTML for structure, CSS for styling, and JavaScript/jQuery for functionality like storing and checking answers.

Uploaded by

PAVAN KUMAR BHEESETTI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

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.
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

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>
<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
<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>
<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;
}
.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%;
}
}

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
$('.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);
Output of the Project
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
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

You might also like