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
Code:
<!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
Code:
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;
}
});
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.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
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?
Last edited by jefffogel1974; 03-12-2013 at 08:28 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.
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.
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.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
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.
Before you post, read our: 
