www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: JavaScript Quiz works in IE, FF, Chrome but not Safari

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20

    JavaScript Quiz works in IE, FF, Chrome but not Safari

    xelawho helped me learn more about JavaScript syntax for an online quiz i have and the quiz is almost there except for it's target audience on the iPad. It's using code from JavaScriptKit (from 2003) and cleaning up the syntax has it working on IE9, FF, and Chrome but not on Safari. There's a results page which just stays blank on Safari.

    This quiz helps learners see what they know and isn't used for grading (so it's okay that they can find the answers in a JS file).

    I'm pretty sure it's a syntax issue causing the issue, maybe even a comma, because it works fine in those other browsers.

    I'd like to know what and why and not just get a simple fix so that I can better learn JavaScript since it's becoming part of my daily tool set (I stopped using Flash a month ago and am doing JS, CSS, and HTML5).

    Any help and insight would be great, thanks!

    Here's a temp link: popquiz

    and here's the the code (the main html is rather long and had to be shortened for here) for the popquiz.htm page:
    HTML Code:
    <!doctype html>
    <!--[if IE] >< ![endif]--> <!-- prevents IE from downloading only one file at a time -->
    <html>
    <head>
    <style>
    .qheader{
    	font:bold;
    	padding-top:10px;
    	padding-bottom: 10px;
    }
    .qselections{
    	font:normal;
    	line-height: 2em;
    	padding-left: 20px;
    }
    </style>
    <script src="scripts/quizconfig.js"></script>
    <script type="text/javascript">
    var actualchoices=new Array();
    	document.cookie="ready=yes";
    </script>
    	<link rel="stylesheet" type="text/css" href="scripts/style96x.css" /> 
        
    <!--  JavaScriptKit.com Multiple Choice Quiz Script (http://www.javascriptkit.com)
    Copyright 2003 JavaScript Kit- http://www.javascriptkit.com -->
    
    </head>
    <body>
    <div id="wrap">
    	<div id="main">
    
    <form method="POST" name="myquiz">
    
    <h3>Delphi The Basics Course (9.6) Quiz</h3>
    <hr />
    <div class="qheader">
    1. From the Account Selection window, you can tell Delphi to search by clicking the Search button or:
    </div>
    <div class="qselections">
    <input type="radio" value="a" name="question1" /> 
    <font color="#33CC00">By pressing the ENTER key. <<</font><br />
    <input type="radio" value="b" name="question1" /> 
    By pressing the TAB key.<br />
    <input type="radio" value="c" name="question1" /> 
    By right-clicking in the Account Selection window and selecting Search.<br />
    <input type="radio" value="d" name="question1" /> 
    The only way to tell Delphi to search is by clicking the Search button.<br />
    </div>
    
    <br />
    
    <div class="qheader">
    2. In the Account Manager, where would you enter information, such as, &quot;<em>This account typically selects properties in the Southwest because it is a convenient location for all of their offices</em>&quot;?
    </div>
    <div class="qselections">
    <img src="images/desert.jpg" width="259" height="100" align="right" /><input type="radio" value="a" name="question2" /> 
    <font color="#33CC00">Account Comment window &lt;&lt;</font><br />
    <input type="radio" value="b" name="question2" /> 
    User Defined Fields<br />
    <input type="radio" value="c" name="question2" /> 
    In the Details folder<br />
    <input type="radio" value="d" name="question2" /> 
    Nowhere. You'd write the information on paper and keep it at your desk.<br />
    </div>
    
    <br />
    
    <div class="qheader">
    3. Select all of the fields from the Details folder that will carry over to bookings.
    </div>
    <div class="qselections">
    <input type="radio" value="a" name="question3" />
    Catering Manager, Service Manager, and Transient Manager)<br />
    <input type="radio" value="b" name="question3" />
    Catering Manager and Service Manager<br />
    <input type="radio" value="c" name="question3" />
    <font color="#33CC00">Catering Manager, Service Manager, and Lead Source &lt;&lt;</font><br />
    <input type="radio" value="d" name="question3" />
    Service Manager and Lead Source<br />
    </div>
    
    <br />
    
    <div class="qheader">
    4. In order for the postal code feature to work in Delphi, what field(s) must be left blank?
    </div>
    <div class="qselections">
    <input type="radio" value="a" name="question4" /> 
    <img src="images/state.png" width="325" height="83" align="right">
    <font color="#33CC00">City and State &lt;&lt;</font><br />
    <input type="radio" value="b" name="question4" /> 
    City<br />
    <input type="radio" value="c" name="question4" /> 
    Country<br />
    <input type="radio" value="d" name="question4" /> 
    City, State, Country<br />
    </div>
    
    <br />
    
    <div class="qheader">
    5. Click the _____________ button if you want to search for a booking.
    </div>
    <div class="qselections">
    <input type="radio" value="a" name="question5" /> 
    <img src="images/question5.png" width="423" height="78" align="right" />New<br />
    <input type="radio" value="b" name="question5" /> 
    <font color="#33CC00">Open &lt;&lt;</font><br />
    <input type="radio" value="c" name="question5" /> 
    Activity<br />
    <input type="radio" value="d" name="question5" />
    Quick Booking<br />
    </div>
    
    <!- bah, too many lines for the forum (and anyone else!) - there are another 5 questions that go here -->
    
    </form>
    
    <p>&nbsp;</p>
    
    <div>
    <form>
    <input type="button" value="Grade this quiz" name="B1" onClick="gradeit()" /> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()" />
    </form>
    </div>
    
    	</div>
    </div>
    </body>
    </html>
    here's the JavaScript file:

    Code:
    // JavaScript Document
    // JavaScriptKit.com Multiple Choice Quiz Script (http://www.javascriptkit.com)
    // Copyright 2003 JavaScript Kit- http://www.javascriptkit.com
    ///////////////////////////////
    // total questions
    var totalquestions=10
    ///////////////////////////////
    // answers to each
    var correctchoices=new Array()
    correctchoices[1]='a'
    correctchoices[2]='a'
    correctchoices[3]='c'
    correctchoices[4]='a'
    correctchoices[5]='b'
    correctchoices[6]='b'
    correctchoices[7]='b'
    correctchoices[8]='d'
    correctchoices[9]='b'
    correctchoices[10]='a'
    ///////////////////////////////
    // quiz function
    ///////////////////////////////
    function gradeit(){
    var incorrect=null;
    for (q=1;q<=totalquestions;q++){
    	var thequestion=eval("document.myquiz.question"+q);
    	for (c=0;c<thequestion.length;c++){
    		if (thequestion[c].checked==true)
    			actualchoices[q]=thequestion[c].value;
    			}
    		if (actualchoices[q]!=correctchoices[q]){
    			if (incorrect==null) {
    				incorrect=q;
    				} else {
    					incorrect+="/"+q;
    				}
    			}
    		}
    		if (incorrect==null)
    			incorrect="a/b";
    			document.cookie='q='+incorrect;
    		if (document.cookie=='')
    			alert("Your browser does not accept cookies. Please adjust your browser settings.");
    		else
    			window.location="results.htm";
    }
    and here's the results.htm:

    HTML Code:
    <!doctype html>
    <!--[if IE] >< ![endif]--> <!-- prevents IE from downloading only one file at a time -->
    <html>
    <head>
     	<meta charset="utf-8"> <!-- needs to be in first 1024 bytes for IE -->
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- force latest IE engine if multiple exist, error in validator but ok from boilerplate -->	
    	<meta name="viewport" content="width=1024" /> 
    	<meta name="description" content="Outstanding eLearning for Newmarket International solutions." />
    	<meta name="keywords" content="Newmarket, eLearning, sales, catering" />
    	<title>Newmarket eLearning</title>
    <link rel="stylesheet" type="text/css" href="scripts/style96x.css"/> 
    </head>
    
    <body>
    
    <div id="wrap">
    	<div id="main">
    
    <script src="scripts/quizconfig.js"></script>
    
    <h3>Delphi The Basics Course Quiz (9.6) Results</h3></p>
    
    <form method="POST" name="result">
           <div>Questions correct:<br />
           <input type="text" name="p" size="24" />
           </div>
           <div>Incorrect questions:<br />
            <textarea name="T2" rows="3" cols="24" wrap="virtual"></textarea />
            </div>
           <div>Grade %:<br />
             <input type="text" name="q" size="8" />
             </div>
        </form>
    
    <form method="POST">
    
    <script type="text/javascript">
    var wrong=0;
    	for (e=0;e<=2;e++)
    		document.result[e].value="";
    var results=document.cookie.split(";");
    	for (n=0;n<=results.length-1;n++){
    		if (results[n].charAt(1)=='q')
    			parse=n;
    }
    var incorrect=results[parse].split("=");
    	incorrect=incorrect[1].split("/");
    	if (incorrect[incorrect.length-1]=='b')
    		incorrect="";
    		document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions;
    		document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"%";
    	for (temp=0;temp<incorrect.length;temp++) {
    		document.result[1].value+=incorrect[temp]+", ";
    	}
    </script>
    
    <input type="button" value="Take the quiz again" name="B1" onClick="history.go(-1)" />
    
    </form>
    
    </div>
    </div>
    </body>
    </html>
    phew and thanks! =)

  2. #2
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    ooh, just discovered JSLint.com for validating JS . . . let's see if this helps and I'm still open to suggestions! thanks!

    To clarify a bit, most of the code is working because in Safari the results page will open but it opens without populating the info boxes.
    Last edited by subQuark; 04-27-2012 at 03:29 PM.

  3. #3
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    I think I have narrowed it down to the script in the results page. JSLint helped me format it more properly but still no go.

    For some reason it's not working in Safari. I would say the other scripts work fine but the small bit (below) is not populating the three information boxes.

    Any expert guidance would be greatly appreciated, thanks!

    Code:
    <script type="text/javascript">
    var wrong=0;
    	for (e=0;e<=2;e++)
    		document.result[e].value="";
    var results=document.cookie.split(";");
    	for (n=0;n<=results.length-1;n++){
    		if (results[n].charAt(1)=='q')
    			parse=n;
    }
    var incorrect=results[parse].split("=");
    	incorrect=incorrect[1].split("/");
    	if (incorrect[incorrect.length-1]=='b')
    		incorrect="";
    		document.result[0].value=totalquestions-incorrect.length+" out of "+totalquestions;
    		document.result[2].value=(totalquestions-incorrect.length)/totalquestions*100+"&#37;";
    	for (temp=0;temp<incorrect.length;temp++) {
    		document.result[1].value+=incorrect[temp]+", ";
    	}
    </script>

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    you have 3 loops here. 2 loops have starting and ending brackets

    Code:
    ...
    for (n=0;n<=results.length-1;n++){
    		if (results[n].charAt(1)=='q')
    			parse=n;
    }
    ...
    for (temp=0;temp<incorrect.length;temp++) {
    		document.result[1].value+=incorrect[temp]+", ";
    	}
    so why the first loop for (e=0;e<=2;e++) has no brackets? where does it end? do you have any errors?

  5. #5
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    hello Padonak and thank you. I rewrote some of it in the last hour and believe I have the loops properly closed but it still shows no results in Safari yet works in I9, FF, and Chrome (lol, I have been working on this since Friday and still not getting it!).

    I don't have enough background to determine where this Safari-only issue is coming from. It seems like it would be this bit since it is populating the results data but maybe it's elsewhere?

    I changed one part of the the form method where a textarea tag had wrap="virtual" and changed it to wrap="soft" since that is HTML5. But still no luck.

    I'm certain it is a minor issue but clearly a show stopper since this needs to run on an iPad!

    Code:
    var wrong = 0;
    for (e = 0; e <= 2; e++) {
    	document.result[e].value = "";
    }
    var results = document.cookie.split(";");
    for (n = 0; n <= results.length - 1; n++) {
    	if (results[n].charAt(1) === 'q') {
    		parse = n;
    	}
    }
    var incorrect = results[parse].split("=");
    incorrect = incorrect[1].split("/");
    if (incorrect[incorrect.length - 1] === 'b') {
    	incorrect = "";
    }
    document.result[0].value = totalquestions - incorrect.length + " out of " + totalquestions;
    document.result[2].value = ((totalquestions - incorrect.length) / totalquestions * 100).toFixed() + "%";
    for (temp = 0; temp < incorrect.length; temp++) {
    	document.result[1].value += incorrect[temp] + ", ";
    }

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    what if you try using

    var elems=document.forms['result'].elements;
    elems[0].value=bla-bla-bla...

    instead of

    document.result[0].value=bla-bla-bla...

    everywhere in your scripts?

    and use alert() to check suspicious places

  7. #7
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    Thanks Padonak, your tip on using alerts has helped me. I have only being doing JavaScript for a week and a half and your suggestion of creating a "elems" variable is beyond me at the moment, but I can see that it would be a better practice!

    The alerts at least let me know how far the code is going! In the working browsers, it all fires properly but in Safari the last alert I get is "results length", the functions after that never run!

    Code:
    var wrong = 0;
    	alert("results page");
    for (e = 0; e <= 2; e++) {
    	document.result[e].value = "";
    	alert("e loop");
    }
    var results = document.cookie.split(";");
    	alert("cookie split");
    for (n = 0; n <= results.length - 1; n++) {
            alert("results length");
    	if (results[n].charAt(1) === 'q') {
    		parse = n;
    		alert("n loop");
    	}
    }
    var incorrect = results[parse].split("=");
    incorrect = incorrect[1].split("/");
    if (incorrect[incorrect.length - 1] === 'b') {
    	incorrect = "";
    	alert("incorrect loop");
    }
    document.result[0].value = totalquestions - incorrect.length + " out of " + totalquestions;
    document.result[2].value = ((totalquestions - incorrect.length) / totalquestions * 100).toFixed() + "&#37;";
    for (temp = 0; temp < incorrect.length; temp++) {
    	document.result[1].value += incorrect[temp] + ", ";
    	alert("questions correct & percentage");
    }
    could it also be poor syntax in the result pages form tags?

    HTML Code:
    <form method="POST" name="result">
           <div>Questions correct:<br />
           <input type="text" name="p" size="24" />
           </div>
           <div>Incorrect questions:<br />
            <textarea name="T2" rows="3" cols="24" wrap="soft"></textarea>
            </div>
           <div>Grade %:<br />
             <input type="text" name="q" size="8" />
             </div>
        </form>
    Last edited by subQuark; 04-30-2012 at 01:06 PM.

  8. #8
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    When I do:

    Code:
    var results = document.cookie.split(";");
    		alert(results);
    I get an alert listing the questions I did get wrong! So that means it's simply not populating the info box but that part of the JS is working! It's getting closer!

    So Safari stops after the n loop but it does have some data, that must mean the document.results is not working and this is exactly what you said above Padonak!
    Last edited by subQuark; 04-30-2012 at 01:39 PM. Reason: added more info

  9. #9
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    I have rewritten the part you suggested and have it working but same result - works on IE9, FF, and Chrome but not Safari

    Code:
    var elems=document.forms['result'].elements;
    elems[0].value = totalquestions - incorrect.length + " out of " + totalquestions;
    elems[2].value = ((totalquestions - incorrect.length) / totalquestions * 100).toFixed(0) + "%";
    for (temp = 0; temp < incorrect.length; temp++) {
    	elems[1].value += incorrect[temp] + ", ";
    }

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    using alert() you can see not only the lables you made in the code (like results page or incorrect loop) but variables themselves and many other things like for example element's attributes. for me it is strange how can var incorrect = results[parse].split("="); work at all.

    the parse variable appears only inside the if (results[n].charAt(1) === 'q') { statement and never before. i think this variable must be defined at the beginning near to var wrong = 0; line.

    var incorrect = results[parse].split("="); must be an array after splitting of results[parse]. so you can use alert() to see this array if you place this alert next to this line:

    Code:
    var incorrect = results[parse].split("=");
    alert(incorrect);
    the same way you can check everything in your script and find the place where it stops working:

    Code:
    var wrong = 0;
    	
    for (e = 0; e <= 2; e++) {
    	document.result[e].value = "";
    
    }
    var results = document.cookie.split(";");
    	alert("var results = "+results);
    for (n = 0; n <= results.length - 1; n++) {
            alert("results length = "+results.length);
    	if (results[n].charAt(1) === 'q') {
    		parse = n;
    		alert("parse = "+parse);
    	}
    }
    // let's check parse again
    alert("parse = "+parse);
    var incorrect = results[parse].split("=");
    alert("var incorrect = "+incorrect);
    incorrect = incorrect[1].split("/");
    alert("var incorrect = "+incorrect);
    if (incorrect[incorrect.length - 1] === 'b') {
    	incorrect = "";
    	
    }
    document.result[0].value = totalquestions - incorrect.length + " out of " + totalquestions;
    document.result[2].value = ((totalquestions - incorrect.length) / totalquestions * 100).toFixed() + "%";
    for (temp = 0; temp < incorrect.length; temp++) {
    	document.result[1].value += incorrect[temp] + ", ";
    	alert("questions correct & percentage");
    }
    this way you can fast and easy find errors and debug your scripts.

    another good thing is the Opera error console or the same consoles in the other browsers. there you can get info on every current script error

  11. #11
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    Nice on reading all the variables in alerts, that's helpful. Thanks!

    And moving up that variable worked fine in the three working browsers. I updated the code as you have it but still no luck in Safari?

    I get the following three alerts with Safari if I only answer quiz questions 9 and 10 correctly:

    1. var results = q = 1/2/3/4/5/6/7, ready=yes
    2. results length = 2
    3. results length = 2


    Then the results page shows without values in the text areas.

    By comparison, in IE9, FF, and Chrome I have the identical following alerts after answering only questions 9 and 10 correctly:

    1. var results = ready=yes, q=1/2/3/4/5/6/7/8
    2. results length = 2
    3. results length = 2
    4. parse = 1
    5. parse = 1
    6. var incorrect = q,1/2/3/4/5/6/7/8
    7. var incorrect = 1/2/3/4/5/6/7/8
    8. questions & percentage
    9. questions & percentage
    10. questions & percentage
    11. questions & percentage
    12. questions & percentage
    13. questions & percentage
    14. questions & percentage
    15. questions & percentage


    PS - I make these changes live to the site for testing: http://subquark.com/html5/quiz/popquiz.htm
    Last edited by subQuark; 04-30-2012 at 03:10 PM.

  12. #12
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    Thanks on the Opera console tip! I used the debug in Safari and get this error

    ReferenceError: Can't find variable: parse

  13. #13
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    parse - i knew this one was no good

  14. #14
    Join Date
    Apr 2012
    Location
    Porstmouth, NH
    Posts
    20
    Ah, that is why you are an expert! It is amazing how someone, like yourself, gets to the point where they can quickly assess the issue from so many parts of code. My original post was huge and any number of issues could have been the specific Safari issue, but you were able to pinpoint the issue.

    I'd like to be able to get to that point (seems like it will take years from me perspective!).

    I looked up parse and it's a JavaScript method specific for working with dates and returning milliseconds. http://www.w3schools.com/jsref/jsref_parse.asp

    It is supported by all major browsers but the data I am trying to show is not a date! This code is old code from JavaScriptKit and has gone under a lot of revision by you in this post (thank you very much). If I am understanding properly, in this function "parse" is actually supposed to be a variable?

    So . . . the big question is, what method should be used here?

    I don't understand what part of that function is actually posting to the three textareas. Is that the "document" part?

    Safari does show the results in an Alert as q=1/2/3/4/5 etc (the wrong answers) so how can i simply write those into the incorrect answers textarea? They don't need to be separated and they are display4ed, in the other browsers, with commas.
    Last edited by subQuark; 05-01-2012 at 08:54 AM.

  15. #15
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    Quote Originally Posted by subQuark View Post
    ... you are an expert!..
    no, man, i am not! i am just a plumber who likes coding as a hobby and tries to improve his english ;-)) but here you can find real experts who are professional coders.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles