PDA

View Full Version : 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




<!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?