I have a Java Script quiz I downloaded for a basic website, but I get some errors in IE but not in Chrome. How can I prevent these errors because all my users will use IE?
The error states in IE
The file structure I have is two files
js/external/mootools-core-1.4.5-minified.js
js/dg-quiz-maker.js
Admissionsprocess.html
Admissionsprocess.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Admission Process Quiz</title>
<script type="text/javascript" src="js/external/mootools-core-1.4.5-minified.js"></script>
<script type="text/javascript" src="js/dg-quiz-maker.js"></script>
<style type="text/css">
body {
font-family: 'Trebuchet MS', 'Helvetica'
}
.dg-question-label{ /* Question label */
font-weight:bold;
}
img{
border:0px;
}
#error {
font-style:italic;
color:red;
}
</style>
</head>
<body>
<center><img src="https://www.fieldsresearch.com/media/hhcahps/vision.gif"></center><p>
<?
include($_SERVER['DOCUMENT_ROOT']."/config/clicksor_760.php");
?>
<div id="questions"></div>
<div id="error"></div>
<div id="result"></div>
<script type="text/javascript">
function showWrongAnswer(){
document.id('error').set('html', 'Wrong answer, Please try again');
}
function showScore() {
var score = quizMaker.getScore();
var el = new Element('h3');
el.set('html', 'Thank you!');
document.id('result').adopt(el);
el = new Element('h4');
el.set('html', 'Score: ' + score.numCorrectAnswers + ' of ' + score.numQuestions);
document.id('result').adopt(el);
if(score.incorrectAnswers.length > 0) {
el = new Element('h4');
el.set('html', 'Incorrect answers:');
document.id('result').adopt(el);
for(var i=0;i<score.incorrectAnswers.length;i++) {
var incorrectAnswer = score.incorrectAnswers[i];
el = new Element('div');
el.set('html', '<b>' + incorrectAnswer.questionNumber + ': ' + incorrectAnswer.label + '</b>');
document.id('result').adopt(el);
el = new Element('div');
el.set('html', 'Correct answer : ' + incorrectAnswer.correctAnswer);
document.id('result').adopt(el);
el = new Element('div');
el.set('html', 'Your answer : ' + incorrectAnswer.userAnswer);
document.id('result').adopt(el);
}
}
}
var questions = [
{
label : 'What is the last step when entering an admission?',
options : ['Assign bed', 'Enter resident name and date of birth', 'Assign organization','None of the above'],
answer : ['Assign bed'],
forceAnswer : true
},
{
label : 'What widget is used to enter new admissions?',
options : ['Favorites', 'Recent Admissions', 'Processes','None of the above'],
answer : ['Processes']
},
]
function showAnswerAlert() {
document.id('error').set('html', 'You have to answer before you continue to the next question');
}
function clearErrorBox() {
document.id('error').set('html','');
}
var quizMaker = new DG.QuizMaker({
questions : questions,
el : 'questions',
forceCorrectAnswer:false,
listeners : {
'finish' : showScore,
'missinganswer' : showAnswerAlert,
'sendanswer' : clearErrorBox,
'wrongAnswer' : showWrongAnswer
}
});
quizMaker.start();
</script>
</body>
</html>
dg-qui-maker.js
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;
}
});
