Need help to solve a JavaScript / DOCTYPE problem

**chrbar** · 03-13-2008, 03:34 PM

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>

**Bob90** · 03-13-2008, 03:53 PM

onclick() with a lowercase c.

**chrbar** · 03-13-2008, 04:56 PM

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

Another idea?

Thread: Need help to solve a JavaScript / DOCTYPE problem

Thread Tools

Search Thread

Need help to solve a JavaScript / DOCTYPE problem

try

Bookmarks

Bookmarks

Posting Permissions