Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Errors in IE but not in Chrome

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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by jefffogel1974; 03-12-2013 at 09:28 PM.

  • #4
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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??
    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.

  • #6
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/Admissionpr...onprocess.html

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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.
    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.

  • #8
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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/Admissionpr...-quiz-maker.js

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

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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.
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •