how to make online quiz system using Javascript
hello guys This is ravish mukkar. I am going to teach you today a very intersting topic. How to make a online quiz system
using javascript.You can copy and pest all the code in your code editor and use it in your web programme. I want to tell you that
in this project will be use Javascipt language. Javascript language is a powerful programming language. I is using to develope many
projects like typing test , online quiz and many more other project.
About the project
In this project I will be give you javascript source code of online quiz system. Before copy the code I want to tell you
that you have to know about html, css and javacript basic topics. If you are a begineer then you can use it in your programme
I tried to make it more easy to understand for begineers.
Follow this steps
1. make a file named by index.html and pest all the codes below under the line
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Quiz Project</title>
<link type='text/css' rel='stylesheet' href='style.css'/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
</head>
<body>
<div id='container'>
<div id='title'>
<h1>Learning Js Properly: Project #1 - Dynamic Quiz</h1>
</div>
<br/>
<div id='quiz'></div>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Prev</a></div>
<div class='button' id='start'> <a href='#'>Start Over</a></div>
<!-- <button class='' id='next'>Next</a></button>
<button class='' id='prev'>Prev</a></button>
<button class='' id='start'> Start Over</a></button> -->
</div>
<script src="jquery.min.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript" src='quiz.js'></script>
</body>
</html>
2. make an another file named by style.css
in this file we will be decorate all the html code beautifully. It will be our style file.
put all the codes below the line in this file.
font-family: Open Sans;
}
h1 {
text-align: center;
}
#title {
text-decoration: underline;
}
#quiz {
text-indent: 10px;
}
.button {
border:4px solid;
border-radius:5px;
width: 40px;
padding-left:5px;
padding-right: 5px;
position: relative;
float:right;
background-color: #DCDCDC;
color: black;
margin: 0 2px 0 2px;
}
.button.active {
background-color: #F8F8FF;
color: #525252;
}
button {
position: relative;
float:right;
}
.button a {
text-decoration: none;
color: black;
}
#container {
width:50%;
margin:auto;
padding: 0 25px 40px 10px;
background-color: #1E90FF;
border:4px solid #B0E0E6;
border-radius:5px;
color: #FFFFFF;
font-weight: bold;
box-shadow: 5px 5px 5px #888;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#prev {
display:none;
}
#start {
display:none;
width: 90px;
}
3. Create a new file named by quiz.js
In This file we will be use all the javascipt code of our project. This file is going to very important. All neccessary function are included in this file
pest all the code below under the line and save the file
(function() {
var questions = [{
question: "What is 2*5?",
choices: [2, 5, 10, 15, 20],
correctAnswer: 2
}, {
question: "What is 3*6?",
choices: [3, 6, 9, 12, 18],
correctAnswer: 4
}, {
question: "What is 8*9?",
choices: [72, 99, 108, 134, 156],
correctAnswer: 0
}, {
question: "What is 1*7?",
choices: [4, 5, 6, 7, 8],
correctAnswer: 3
}, {
question: "What is 8*8?",
choices: [20, 30, 40, 50, 64],
correctAnswer: 4
}];
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object
// Display initial question
displayNext();
// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();
// Suspend click listener during fade animation
if(quiz.is(':animated')) {
return false;
}
choose();
// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
alert('Please make a selection!');
} else {
questionCounter++;
displayNext();
}
});
// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// Click handler for the 'Start Over' button
$('#start').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
questionCounter1 = 0;
selections = [];
displayNext();
$('#start').hide();
});
// Animates buttons on hover
$('.button').on('mouseenter', function () {
$(this).addClass('active');
});
$('.button').on('mouseleave', function () {
$(this).removeClass('active');
});
// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question'
});
console.log(qElement);
var header = $('<h2>Question ' + (index + 1) + ':</h2>');
qElement.append(header);
var question = $('<p>').append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
var item;
var input;
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
console.log(selections);
}
// Displays next requested element
function displayNext() {
// quiz.fadeOut(function() {
$('#question').remove();
if(questionCounter < questions.length){
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
// Controls display of 'prev' button
if(questionCounter === 1){
$('#prev').show();
} else if(questionCounter === 0){
$('#prev').hide();
$('#next').show();
}
}else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
// });
}
// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $('<p>',{id: 'question'});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
score.append('You got ' + numCorrect + ' questions out of ' +
questions.length + ' right!!!');
return score;
}
})();
after finishing these three steps successfully the open this file in any browser as you want and plat with online tying test
Please don't forget to share this artical in your friends.
No comments:
Post a Comment
thanks for your comments