Javascript quiz maker

Great script! Any way to have multiples questions on a single page? Thanks!

doesn't appear to be working in IE7

Thanks Rbezy,

This is actually a well known problem with IE6 and IE7 when you create radio buttons dynamically and give them a name afterwards.

I have fixed it and uploaded the download zip file.

Thanks again.

Great script! that what I was looking for long time

Thanks!

Hey great script , works a treat. I was wondering what would be the best/simplest way to implement another field, that can elaborate the answers better to the user, so when showscore fires it is displayed along with the correct answer. any insight would be great!. Thanks!.

JavaScript Quiz Maker software that you have for download is impossible use, the information and JavaScript is all over the page on notepad and not organized so that I can use it.

Can you help me get a better organized copy of JavaScript Quiz Maker to download?

Please send reply!
Tom Edwards

can I make a question that users can fill the answer by their own text?

Hi,
Thanks for the script. Is there any way you can create a MS access DB where all questions ,answers and employee details get stored.and also if you can disable the view source and back option.

Just a dumb question--Could a savvy user with Firebug or Chrome do "inspect element" on this quiz and see the correct answers in the javascript?thanks-T

Hello,I need some urgent help. The script doesn't seem to work in IE 9, it only shows the first question (without any possible answers). You can easily see that if you access this same page with IE 9, the demo has this same problem. Is there any way to fix this? Thank so much in advance!

very nice thank you very much!

Is there anyway to have a hyperlink after the end of the quiz?

Hi,Is there a way to put different images to some pages (if needed) to supplement the questionaires?

script not work in IE 9

This is a fantastic code - the quiz is really useful.I was wondering how one can change to font-size of the finished quiz.Many thanks in advance,David

Is there any way to force the user to enter the correct answer before moving onto the next question? Also any news on this working in IE9?

David,The final score page is rendered inside a div with class name "result". So you can modify the fonts with css. Example:<style type="text/css">.score{ color:blue; font-weight:bold; font-size:14px;}</style>Ross,The IE9 problem has been fixed by updating to newest Mootols library. I have implemented a new option "forceCorrectAnswer" which will give you the feature you requested. Example:var quizMaker = new DG.QuizMaker({   questions : questions,   el : 'questions',    forceCorrectAnswer:true,   listeners : {     'finish' : showScore,     'missinganswer' : showAnswerAlert,     'sendanswer' : clearErrorBox,      'wrongAnswer' : showWrongAnswer   }});when forceCorrectAnswer is set to true, you will not be able to move to next question until you have answered correctly on the current one. A "wrongAnswer" event will be fired. As you can see in the code above, I have added a listener to the "wrongAnswer" event. It will call the function showWrongAnswer which looks like this:function showWrongAnswer(){ document.id('error').set('html', 'Wrong answer, Please try again');}

A couple of hints ...In files for download there is a link to dg-count-down.js that is not provided and not needed in quiz-maker.htmlAlso there are other classes of interest which are needed for formatting:dg-question-optiondg-answer-button-containerI added for my own use dg-score, dg-score-span, and dg-summary-label

dear friend, your quiz maker script which is really useful. one more thing, how to add random method 6 0ut of 10 question.

dear friend, your quiz maker script which is really useful. one more thing, how to add random method 6 0ut of 10 question.

Great code, but... It seems that ShowAnswerAlert doesn't work properly. It works only with a first question, missing answer in the others is ignored without alert. Thanks for your reply...DveD

Sorry, I found it...

Thank you for this code, but I cannot get it to work. On the designer-developer scale, I am clearly on the designer end of the spectrum, albeit moving toward the developer end.I copied the JS code above, put it in the head of the HTML code, downloaded the files and located them appropriately, but . . . Nothing.I am sure it is something simple. Can you help me. Thank you!

Hi, how can i capture the final score and store in a database. I captured the result div in a string : $str="<div id=\"result\"></div>";But it doesn't store the result. Please help

Really useful script. Thanks!. I really want to be able to add images to some of the questions. Does anybody know how to accomplish this?? I would be very grateful Thank you!

Helloi would like know how can i do a quiz with random question.Thanks a lot

Great script! Any way to have multiples questions on a single page? Thanks!

please correct the code am getting error while displaying score<code><?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en"><head><meta http-equiv="default-style" content="text/html; charset=utf-8"/><title>LNS</title><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript"> $(function() { $(".ans").click(function(e){ var res = $(this).attr("data-type") var clickCounter = $("#count").data("clickCounter"); clickCounter = (clickCounter + res); $("#count").data("clickCounter", res); $("#count").html(clickCounter); }); $("#answer1_q1").click(function() { $("#answers_q1").html('Correct'); }); $("#answer2_q1").click(function() { $("#answers_q1").html('Wrong'); }); $("#answer1_q2").click(function() { $("#answers_q2").html('Correct'); }); $("#answer2_q2").click(function() { $("#answers_q2").html('Wrong'); }); $("#answer1_q3").click(function() { $("#answers_q3").html('Correct'); }); $("#answer2_q3").click(function() { $("#answers_q3").html('Wrong'); }); /**/ }); </script> </head><body> <style type="text/css"> .hide{ display:none; } </style> <div id="Question1">Question 1<div id="answers_q1"> <div id="answer1_q1" class="ans" data-type="1">answer 1</div> <div id="answer2_q1" class="ans" data-type="0">answer 2</div></div></div> <br /><div id="Question2">Question 2 <div id="answers_q2"> <div id="answer1_q2" class="ans" data-type="1">answer 1</div> <div id="answer2_q2" class="ans" data-type="0">answer 2</div> </div></div> <br /> <div id="Question3">Question 3 <div id="answers_q3"> <div id="answer1_q3" class="ans" data-type="1">answer 1</div> <div id="answer2_q3" class="ans" data-type="0">answer 2</div> </div></div> <br /><div id="total">Total Results <div id="answers_total"> You have <span id="count"></span> correct answers out of total 3 Questions!!! </div></div></body></html>

Thanks! Great work.
I want to add a timer and question pallet (where question numbers are mentioned, so user can switch to any question during exam). Any help would be appreciable.

Is there any way the entire page could reload at the user input of next? Basically I am looking for a one question per page script like this but when the user selects next it reloads the entire page.

Love the code. But I can get the image code above working. Any help or a link to a working model would be HUGELY appreciated!

Is posible send email results?

how to edit the submit button..css cant do it .dg-answer-button-container

Great code!thanks, btw how to set a timer?

Great Work!!!Thanks a lot...<p>Is there any way to move directly between questions...say i want to move to question 3 directly from question 1 and so on

Love the script, using the randomizer function posted above with it. I'm curious if there is a way to make this script randomly pull a pre-defined number of questions thou? Like say I have 250 questions loaded and I want it to randomly select 150 of those to populate the exam with?Many thanks!

Hello!Nice script but i wonder on how to create questions and save them to the database any soln i will appreciate

Hello guysI am trying to do the quiz. Is it possible to create a file after finishing the quiz and put there following information, like:1) question 1What is the capital of Great Britain> London - CORRECT2) question 2What is the capital of France> Lyon - INCORRECTetc.thank you in advance.

Is it possible to have version without mootools? Just pure AMD library.

Am I wrong? It seems that you use mootools only to extend the Class object? If yes, it would be easy to exclude mootols dependancy.

how to add images, in this script ?

Awesome script. Thank you.How many questions it can load? Because right now I can only add up to 8..is javascript var has limits? please advise..

how to add count time .js<script type="text/javascript" src="js/dg-count-down.js"></script>

Adding Image code is right process? its not working..if(!window.DG) { window.DG = {};};DG.QuizMaker = new Class( { Extends : Events, validEvents : ['start','sendanswer', 'correctanswer','wronganswer', 'finish','missinganswer','wrongAnswer'], config: { seconds: null, forceAnswer : false }, html : { el : null }, internal : { questionIndex : 0, questions : null, labelAnswerButton : 'Answer' }, user : { answers : [] }, forceCorrectAnswer:false, initialize : function(config) { if(config.el) { this.html.el = config.el; } if(config.forceAnswer) { this.config.forceAnswer = config.forceAnswer; } if(config.forceCorrectAnswer !== undefined)this.forceCorrectAnswer = config.forceCorrectAnswer; if(config.labelAnswerButton) { this.internal.labelAnswerButton = config.labelAnswerButton; } this.internal.questions = config.questions; if(config.listeners) { for(var listener in config.listeners) { if(this.validEvents.indexOf(listener)>=0) { this.addEvent(listener, config.listeners[listener]); } } } }, _displayQuestion : function() { this._clearEl(); this._addQuestionElement(); this._addAnsweringOptions(); this._addAnswerButton(); }, _addQuestionElement : function() { var el = new Element('div'); el.addClass('dg-question-label'); el.set('html', this._getCurrentQuestion().label); document.id(this.html.el).adopt(el); }, _addAnsweringOptions : function() { var currentQuestion = this._getCurrentQuestion(); var options = currentQuestion.options; var isMulti = currentQuestion.answer.length > 1; for(var i=0;i<options.length;i++) { var el = new Element('div'); el.addClass('dg-question-option'); var option = options[i]; var id = 'dg-quiz-option-' + this.internal.questionIndex + '-' + i; var checkbox = new Element('input', { name : 'dg-quiz-options', id : id, type : isMulti ? 'checkbox' : 'radio', value : option }); el.adopt(checkbox); var label = new Element('label', { 'for' : id, 'html' : option }); el.adopt(label); document.id(this.html.el).adopt(el); } }, _addAnswerButton : function() { var el = new Element('div'); el.addClass('dg-answer-button-container'); var button = new Element('input'); button.type = 'button'; button.set('value', this.internal.labelAnswerButton); button.addEvent('click', this._sendAnswer.bind(this)); el.adopt(button); document.id(this.html.el).adopt(el); }, _sendAnswer : function() { var answer = this._getAnswersFromForm(); this.fireEvent('sendanswer', this) var currentQuestion = this._getCurrentQuestion(); if((this.config.forceAnswer || currentQuestion.forceAnswer) && answer.length == 0) { this.fireEvent('missinganswer', this); return false; } this.user.answers[this.internal.questionIndex] = answer; if(!this._hasAnsweredCorrectly(this.internal.questionIndex) && (this.forceCorrectAnswer || currentQuestion['forceCorrectAnswer'])){ this.fireEvent('wrongAnswer', this); return false; } this.internal.questionIndex++; if (this.internal.questionIndex == this.internal.questions.length) { this._clearEl(); this.fireEvent('finish'); } else { this._displayQuestion(); } }, _getAnswersFromForm : function() { var ret = []; var els = document.id(this.html.el).getElements('input'); for(var i=0;i<els.length;i++) { if(els[i].checked) { ret.push( { index : i, answer : els[i].value }); } } return ret; }, _clearEl : function () { document.id(this.html.el).set('html',''); }, _getCurrentQuestion : function() { return this.internal.questions[this.internal.questionIndex]; }, start : function() { this._displayQuestion(); }, getScore : function() { var ret = { numCorrectAnswers : 0, numQuestions : this.internal.questions.length, percentageCorrectAnswers : 0, incorrectAnswers : [] }; var numCorrectAnswers = 0; for(var i=0;i<this.internal.questions.length; i++) { if(this._hasAnsweredCorrectly(i)) { numCorrectAnswers++; }else{ ret.incorrectAnswers.push({ questionNumber : i+1, label : this.internal.questions[i].label, correctAnswer : this._getTextualCorrectAnswer(i), userAnswer : this._getTextualUserAnswer(i) }) } } ret.numCorrectAnswers = numCorrectAnswers; ret.percentageCorrectAnswers = Math.round(numCorrectAnswers / this.internal.questions.length *100); return ret; }, _getTextualCorrectAnswer : function(questionIndex) { var ret = []; var question = this.internal.questions[questionIndex]; for(var i=0;i<question.answer.length;i++) { var answer = question.answer[i]; if(question.options.indexOf(answer) == -1) { answer = question.options[answer]; } ret.push(answer); } return ret.join(', '); }, _getTextualUserAnswer : function(questionIndex) { var ret = []; var userAnswer = this.user.answers[questionIndex]; for(var i=0;i<userAnswer.length;i++) { ret.push(userAnswer[i].answer); } return ret.join(', '); }, _hasAnsweredCorrectly : function(questionIndex) { var correctAnswer = this.internal.questions[questionIndex].answer; var answer = this.user.answers[questionIndex]; if(answer.length == correctAnswer.length ) { for(var i=0;i<answer.length;i++) { if(correctAnswer.indexOf(answer[i].answer) == -1 && correctAnswer.indexOf(answer[i].index) == -1){ return false; } } return true; } return false; }});

what is 'cry uncle', 'think again multiple choice quizes', ' match maker matching quizes', 'linear world ordering quizzes'

How to edit/format "Answer" button. Would like to change button size, color, etc.

To modify Answer Button, add this to your style sheet (CSS). Take care of other buttons as this code will change all default buttons. Here is the CSS code.

input[type=button] {
margin-top: 30px;
width: 150px;
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:10px;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

input[type=button]:hover {
background-color:rgba(255,204,0,0.8);
}

Thanks for sharing this very useful quiz script. I wondered how we can add a button at the end of the results form for 'retry quiz'? Thanks again

The radio button is not displaying when I am pasting the HTML code in my blogger.....
Please advise me

How can I fetch Quiz from json ?
Kindly help me