Scribd
Upload
5 views

JavaSript Pdf1

bla

Uploaded by

vanshbosssrahate
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

JavaSript Pdf1

bla

Uploaded by

vanshbosssrahate
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

JAVASCRIPT

MICROPROJECT
QUIZ DEVELOPEMENT
ABSTRACT

The concept of quizzes is currently very popular among educated circles as well
as in entertainment shows. Though the quiz can be conducted manually it also
needs elaborate preparations, quizzes contribute to the growth of knowledge of
an individual and they are a popular source of entertainment. This program in
JavaScript focuses on creating interactive quizzes with a considerably of
JavaScript subject questions. The program utilizes most of important concept in
JavaScript and CSS design to get the final output is envision to knowledge and
get entertainment with value addition. The system reduces paperwork.. This
program mainly shows questions. It is designed to replace existing paperwork
and manual correction. The implementation of the system in the organization will
considerably reduce time and also provide readily calculated marks.

INTRODUCTION

Today, it may see that many people want to test their memory and general
knowledge power. We help them doing so with the help of our small program
which allows them to to check their overall IQ. The test contains all type of
questions that proves to be helpful to a person who keeps a very keen interest in
subject. The tests prepared via electronic exam systems, now, have been an
alternative for those who prepare for their exams by using their personal
computers or mobile devices. Connecting such services requires a computer and

Page 1
an internet access. In other words it is necessary that students must be in an
environment which provides above mentioned conditions in order to access such
electronic exam systems. This app is mainly for CO5I students. This will help
them do the revision at the important times like semester exams. If they use this
app they won’t need extra load of study materials and faculty to do the rest of the
learning.

 Questions

This option leads the user to the main page of our program. The main page
consists of test questions.

 Test

It content 5 questions. The questions asked are mainly the questions which has
been seen in syllabus. The user can leave the question if he does not know the
answer. And in the end can press the score button to end that particular test and
see the results.

 Score

After each test, the score will be calculated. This section only shows the result of
the test and if the user wants to save the score.

Page 2
IMPLEMENTATION

On starting the program, the main screen is loaded with the 1st question of test.
The user can jump to any other question by using the next button.
The user can answer the question according to his own choice and submit the
test. The question contain multiple choice questions. After that, a score board
will be displayed indicating the individual score.

MODULE IMPLEMENTATION

Following are the modules for the our program.

Home Screen

Page 3
Test

This section will contain 5 questions. The questions asked are mainly the
questions which has been seen in subject number of times. The user can leave the
question if he does not know the answer. And in the end can press the score
button to end that particular test and see the results.

Page 4
Result

On clicking the score button. The score will be displayed in a new activity.

Page 5
Coding

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>Quiz</title>

<style>

body

background-image: url('IMG-20151102-WA0352.jpg');

.grid

width: 600px;

height: 500px;

margin: 0 auto;

background-color: #fff;

padding: 10px 50px 50px 50px;

Page 6
border: 1px solid black;

.grid h1

font-family: "Times";

color: green;

font-size: 60px;

font-style: italic;

text-align: center;

padding: 2px 0px;

#score

color: #01BBFF;

font-style: italic;

text-align: center;

font-size: 30px;

Page 7
.grid #question

font-family: "monospace";

font-style: italic;

font-size: 30px;

color: #01BBFF;

.buttons

margin-top: 30px;

#btn0, #btn1, #btn2, #btn3

background-color: pink;

width: 250px;

font-family: "monospace";

font-size: 20px;

color: black;

font-style: italic;

border: 1px solid #1D3C6A;

margin: 10px 40px 10px 0px;

Page 8
padding: 10px 10px;

#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover

cursor: pointer;

background-color: pink;

#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus

outline: 0;

#progress

color: #2b2b2b;

font-style: bold;

font-size: 18px;

</style>

Page 9
</head>

<body>

<div class="grid">

<div id="quiz">

<h1>Welcome to Quiz</h1>

<hr style="margin-bottom: 20px">

<p id="question"></p>

<div class="buttons">

<button id="btn0"><span id="choice0"></span></button>

<button id="btn1"><span id="choice1"></span></button>

<button id="btn2"><span id="choice2"></span></button>

<button id="btn3"><span id="choice3"></span></button>

</div>

<hr style="margin-top: 50px">

<footer>

<p id="progress">Question x of y</p>

</footer>

Page 10
</div>

</div>

<script >

function Quiz(questions)

this.score = 0;

this.questions = questions;

this.questionIndex = 0;

Quiz.prototype.getQuestionIndex = function()

return this.questions[this.questionIndex];

Quiz.prototype.guess = function(answer)

if(this.getQuestionIndex().isCorrectAnswer(answer))

Page 11
this.score++;

this.questionIndex++;

Quiz.prototype.isEnded = function()

return this.questionIndex === this.questions.length;

function Question(text, choices, answer)

this.text = text;

this.choices = choices;

this.answer = answer;

Question.prototype.isCorrectAnswer = function(choice)

return this.answer === choice;

Page 12
function populate()

if(quiz.isEnded())

showScores();

else

// show question

var element = document.getElementById("question");

element.innerHTML = quiz.getQuestionIndex().text;

// show options

var choices = quiz.getQuestionIndex().choices;

for(var i = 0; i < choices.length; i++) {

var element = document.getElementById("choice" + i);

element.innerHTML = choices[i];

guess("btn" + i, choices[i]);

showProgress();

Page 13
}

};

function guess(id, guess)

var button = document.getElementById(id);

button.onclick = function()

quiz.guess(guess);

populate();

};

function showProgress()

var currentQuestionNumber = quiz.questionIndex + 1;

var element = document.getElementById("progress");

element.innerHTML = "Question " + currentQuestionNumber + " of " +


quiz.questions.length;

};

function showScores()

Page 14
var gameOverHTML = "<h1>Result</h1>";

gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";

var element = document.getElementById("quiz");

element.innerHTML = gameOverHTML;

};

// create questions here

var questions = [

new Question("JavaScript is .... side scripting language?", ["Server side", "Client


side","Both side", "None of the above"], "Client side"),

new Question("Which language is used for styling web pages?", ["HTML", "JQuery",
"CSS", "XML"], "CSS"),

new Question("Which is not a JavaScript Framework?", ["Python Script",


"JQuery","Django", "NodeJS"], "Django"),

new Question("Which is used for Connect To Database?", ["PHP", "HTML", "JS", "All"],
"PHP"),

new Question("MIT is best institute for ...", ["Diploma", "BE", "B-Tech", "All"], "All")

];

// create quiz

var quiz = new Quiz(questions);

// display quiz

populate();

Page 15
</script>

</body>

</html>

Screen Shot

Page 16
Page 17
Page 18
Page 19

You might also like