PDA

View Full Version : Javascript Errors in IE but not in Chrome



jefffogel1974
Mar 12th, 2013, 05:46 PM
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

http://www.kill-zone.com/error.png


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;
}
});

Old Pedant
Mar 12th, 2013, 07:52 PM
I would say the real error is on the just prior line:
var label = new Element('label', { 'for' : id, 'html' : option });

Element is not a standard object, so it must be defined in some other library. (It's not defined in dg-qui-maker.js, at least.) Need to track down where it is coming from. Presumably, it is part of motools.

You could try just commenting out line 90, for now. All it is doing is adding a <label> to the checkbox. You eventually need the <label>, but at least you could find out if not adding it fixes the other problems.

jefffogel1974
Mar 12th, 2013, 08:14 PM
I apologize I left out the commented out header section which eats up 26 lines which is

/**************************************************************************************************** ********
[D]html[G]oodies Quiz maker script
Copyright (C) August 2010 DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2010
Owner of DHTMLgoodies.com

**************************************************************************************************** ********/

So with this header info it makes line 90 this, without header it makes it line 64
el.set('html', this._getCurrentQuestion().label);

Does this help in solve the problem? Or is line 90 still the line you said it was or does the commented junk at the top of the file count for line count?

jefffogel1974
Mar 12th, 2013, 08:27 PM
I corrected my screenshot and took out the commented out header section so the real line is now line 64 for the error message. Hope this helps, and I am sorry I wasn't thinking clearly when first posted.

Old Pedant
Mar 12th, 2013, 08:33 PM
Makes a big difference. Unfortunately, it also makes it far less obvious.

I don't suppose you can show us this live? Give us a URL to look at?

I don't see why any question would not have a label, the way the code is written.

But the obvious question is: Have you tried contacting Alf Magne Kalleland??

jefffogel1974
Mar 12th, 2013, 08:54 PM
Well this is rather interresting, because the site I am working with is an internal site and is Sharepoint 2010, but I wanted to give you a preview of what it does so I uploaded it to my personal external website and it works absolutely fine in IE??? That is so strange?

Here is the live quiz site, but is working, so maybe its something with my Sharepoint 2010 server and not Java which is not displaying it correctly??? Hmm more to think about.

http://www.kill-zone.com/Admissionprocess/Admissionprocess.html

Old Pedant
Mar 12th, 2013, 10:04 PM
Whoosh! That *IS* strange!

It's not the version of IE that is different, is it? That is, when you view the Sharepoint-hosted code are you using IE8 but when you view your own site your are using IE9? Or something like that?

I don't see how the server could make any difference to HTML and JS code.

jefffogel1974
Mar 13th, 2013, 04:00 PM
Yeah I am just confused at this because IE is the same version on my PC as it is on one of my test users.

In Chrome we can both get to the Sharepoint hosted site and it works, but in IE neither of ours works.

Putting the script on a public server which is the URL I posted in an earlier post I can get it to work in IE, but my other test user cannot get it working.

xelawho
Mar 13th, 2013, 04:14 PM
I get this error in IE8/IE7 compat mode:

Message: 'this._getCurrentQuestion().label' is null or not an object
Line: 64
Character: 3
Code: 0
URI: http://www.kill-zone.com/Admissionprocess/js/dg-quiz-maker.js

after answering the two questions. Seems like it doesn't know that it has reached the end, maybe?

Old Pedant
Mar 13th, 2013, 09:09 PM
Good catch, Xelawho. That should be an easy fix, then.

Time for a little debugging, Jeff: Find out if this._getCurrentQuestion() is null at that point. If it is, then of course the .label won't work.