Results 1 to 3 of 3

Thread: Need help to solve a JavaScript / DOCTYPE problem

  1. #1
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Need help to solve a JavaScript / DOCTYPE problem

    Hello,

    I would like to insert the Quiz script (code below) in my Web page, but I meet a problem with "onClick" button on FireFox depending of the DOCTYPE!

    My Web page has to use a "HTML 4.1" or "XHTML 1.0" DOCTYPE to be displayed correctly.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    or
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">


    On FireFox, the "onClick" button (function findout) runs correctly with a "HTML 4.0" DOCTYPE only!
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    If the DOCTYPE is "HTML 4.1" or "XHTML 1.0", it's ok with IE and Safari, but not with FireFox.

    Could you help me to resolve this problem?

    Thanks a lot,
    Chris

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	
    <style>
    body {font-family:Arial;}
    .chosen {background:yellow;}
    .right {background:lime;}
    .wrong {background:red;}
    </style>
    
    <script type="text/javascript">
    var quizname = "quiz1"
    var desc = 'quiz1'
    var questions = new Array(
    	"Question #1",
    	"Question #2",
    	"Question #3"
    )
    var num = questions.length 
    var answers = [[
    "First answer choice for Question #1",
    "Second answer choice for Question #1",
    "Third answer choice for Question #1"
    ],[
    "First answer choice for Question #2",
    "Second answer choice for Question #2",
    "Third answer choice for Question #2"
    ],[
    "First answer choice for Question #3",
    "Second answer choice for Question #3",
    "Third answer choice for Question #3"
    ]]
    var real = new Array(
    3,	// Good answer number for Question #1
    2,	// Good answer number for Question #2
    3	// Good answer number for Question #3
    )
    var expl = new Array(
    "Explanation about the good answer for Question #1",
    "Explanation about the good answer for Question #2",
    "Explanation about the good answer for Question #3"
    )
    </script>
    
    </head>
    <body>
    
    <a name="top"></a>
    
    <form method="get" name="form1">
    <input type="hidden" name="num" value="">
    <input type="hidden" name="real" value="">
    
    <span id="results"></span>
    
    <script type="text/javascript">
    
    var letters = new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z")
    
    for(i=0;i<num;i++)
    {
    
    	document.write(i+1 + ") &nbsp; " + questions[i] + "<blockquote>")
    	var options = answers//[i].split("#")
    	for(j=0;j<options[i].length;j++)
    	{
    		document.write("<span id='a"+i+"b"+j+"' class=''><input type='radio' value='"+options[i][j]+"' name='a"+(i+1)+"'>&nbsp;"+letters[j] + ") &nbsp; "  + options[i][j]+"</span><br>")
    	}
    //onclick='alert(this.id)'
    	document.write("<span id='rw"+i+"' class='' style='display:none;'>right/wrong</span><BR><span id='expl"+i+"' class='' style='display:none;'>expl<Br></span></blockquote>")
    }
    
    document.form1.num.value=num
    document.form1.real.value=real
    </script>
    
    <div id="buttons"><input type="button" value="Check answers" onClick="findout()"></div>
    
    <div id="redobuttons" style="display:none"><input type="button" value="Re-take test!" onClick="window.location.href='quiz1.php'"></div>
    
    </form>
    
    <script type="text/javascript">
    var num = questions.length
    
    for(i=0;i<num;i++)
    {
    eval("a"+i + "=-1")
    }
    
    function findout()
    {	
    buttons.style.display="none"
    redobuttons.style.display=""
    
    var correct = 0
    var wrong = 0
    var notanswered = 0
    
    		for(i=0;i<num;i++)
    		{
    			q = eval("document.form1.a"+(i+1)+".length")
    			for(x=0;x<q;x++)	
    			{
    				r = eval("document.form1.a"+(i+1)+"["+x+"].checked")
    				if(r == true)	
    				{
    					eval("a"+i+"=x");
    					eval("a"+i+"b"+x+".className='chosen'")
    					eval("a"+i+"b"+(real[i]-1)+".className='right'")
    				}
    			}
    			
    	//		alert("Real: " + real[i])
    			//alert("Answer: " + eval("a"+i))
    			if(eval("a"+i) == -1)
    			{
    				notanswered++
    				eval("rw"+i+".innerHTML='<BR>Failed to answer!<BR>'")
    			}
    			else if(eval("a"+i) == (real[i]-1))
    			{
    				correct++;
    				eval("rw"+i+".innerHTML='<BR>Correct!<BR>'")
    
    			}
    			else
    			{
    				wrong++
    				eval("rw"+i+".innerHTML='<Br>Wrong!  The right answer was "+letters[(real[i]-1)]+").'")
    				eval("expl"+i+".innerHTML=expl[i]")
    				eval("expl"+i+".style.display=''")
    				
    			}
    
    			eval("rw"+i+".style.display=''")				
    			
    		}
    		
    		pc = correct/num * 100
    		
    		results.innerHTML += "You got " + correct + " questions right out of " + num + ".<BR>"
    		if(notanswered > 0){results.innerHTML += "You failed to answer " + notanswered + " questions.<BR>"}
    		results.innerHTML += "Percentage: " + pc.toFixed(1) + "%<BR><BR>"
    		results.innerHTML += "Review your answers below.<BR><BR>"
    		location.href="#top"
    }
    
    function doit()
    {
    a1b1.className="chosen"
    a2b0.className="wrong"
    rw1.className="right"
    expl1.className="chosen"
    }
    //doit()
    </script>
    
    </body>
    </html>
    Last edited by chrbar; 03-13-2008 at 05:19 PM.

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default try

    onclick() with a lowercase c.

  3. #3
    Join Date
    Aug 2006
    Posts
    44
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks Bob, but I've tried with a lowercase c, and that didn't solve the problem
    Another idea?

Bookmarks

Posting Permissions

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