PDA

Click to See Complete Forum and Search --> : Where's the Bug?

BSquared18
07-17-2003, 09:17 PM
I've seen the code below in several places on the web. It's a cool design for a matching test, but in every case there appears to be a bug where when you make your first response, the "a" choice is automatically checked off in additon to whichever one should be checked off.

Can someone suggest what change or changes need to be made to this code to eliminate that bug?

Thanks!

Bill B.

_______________________________________

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<!-- Cut-N-Paste JavaScript from ISN Toolbox
Copyright 1998, Infohiway, Inc. Restricted use is hereby
granted (commercial and personal OK) so long as this code
is not *directly* sold and the copyright notice is buried
somewhere deep in your HTML document. A link to our site
http://www.infohiway.com is always appreciated of course,
but is absolutely and positively not necessary. ;-) -->
<script language="JavaScript">
<!--
function Question(text,answer) {
this.text = text;
this.answer = answer;
}
answers = new Object();
answers["a"] = "George Washington";
answers["b"] = "HyperText Marking Linguistics";
answers["c"] = "50";
answers["d"] = "George Bush";
answers["e"] = "Olympia";
answers["f"] = "HyperText Markup Language";
answers["g"] = "48";
answers["h"] = "Trenton";
answers.length = 8;

questions = new Object();
questions[0] = null; // skip index [0]
questions[1] = new Question("How many states are in the United States?","c");
questions[2] = new Question("Who was the first president of the United States?","a");
questions[3] = new Question("What's the capital of Washington state?","e");
questions[4] = new Question("What does HTML stand for?","f");
questions.length = 4;

quiz_title = "HTML and United States Knowledge Test";
maximum_score = 100;
penalty_for_wrong_answer = -10;
reveal_correct_answer = false;

function choice() {
for(n=0;n<answers.length;n++)
eval("document.matching.answer"+n+".checked = false");
for(n=1;n<=questions.length;n++) {
sel = eval("document.matching.choice"+n+".selectedIndex");
eval("document.matching.answer"+sel+".checked = true");
}
}
function gradeQuiz() {
wrong = "";
correct = questions.length;
score = maximum_score;
for(n=1;n<=questions.length;n++) {
sel = eval("document.matching.choice"+n+".selectedIndex");
if (alpha.charAt(sel) != questions[n].answer) {
correct -= 1;
score += penalty_for_wrong_answer;
wrong += "#"+n+" wrong! "
+(reveal_correct_answer?"Correct answer is "+questions[n].answer:"")
+"\r\n";
}
}
document.matching.evaluation.value = "You answered "+correct+" of "+questions.length
+" correctly for a score of "+score+".\r\n"+wrong;
}
alpha = "abcdefghijklmnopqrstuvwxyz";

answers_menu = "";
answers_text = "<td nowrap rowspan="+questions.length+" valign=top><br>";
for(n=0;n<answers.length;n++) {
answers_menu += "<option>"+alpha.charAt(n);
answers_text += '<input type=checkbox name="answer'+n+'">&nbsp;'
+alpha.charAt(n)+".&nbsp;"+answers[alpha.charAt(n)]+'<br>';
}
answers_text += "</td>";

document.write('<form name="matching"><table cellpadding=0 cellspacing=0>'
+'<tr><td colspan=3><h4>'+quiz_title
+'</h4><i>Directions: Match each statement with the proper term. '
+'Make your selection for each match to the left of the statement. The terms '
+'will be checked automatically to indicate they are already '
+'used.<br><br></i></td></tr>');
for(n=1;n<=questions.length;n++)
document.write('<tr><td align=right><select name="choice'+n
+'" size=1 onChange="choice()">'+answers_menu+'</select>&nbsp;&nbsp;</td><td><br>'+n+'. '
+questions[n].text+'</td>'+(n==1?answers_text:"")+'</tr>');
document.write('<tr><td colspan=3><center><input type=button value="Grade the Quiz" '
+'onClick="gradeQuiz()"><br><textarea rows=3 cols=55 name="evaluation"></textarea>'
+'</td></tr></table></form>');
// -->
</script>
</body>
</html>

___________________________________________
Exuro
07-17-2003, 10:32 PM
Well, that was messy... The problem had to do with the fact that all the Select elements started out with the value a selected. Since a was always selected at the beginning, it would check the box next to answer a. What I did was made all the Select elements start out as - instead. I had to add in a couple other things too so that it wouldn't yell at me for doing that, but that's about it. Here's the code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<!-- Cut-N-Paste JavaScript from ISN Toolbox
Copyright 1998, Infohiway, Inc. Restricted use is hereby
granted (commercial and personal OK) so long as this code
is not *directly* sold and the copyright notice is buried
somewhere deep in your HTML document. A link to our site
http://www.infohiway.com is always appreciated of course,
but is absolutely and positively not necessary. ;-) -->
<script language="JavaScript">
<!--
function Question(text,answer) {
this.text = text;
this.answer = answer;
}
answers = new Object();
answers["a"] = "George Washington";
answers["b"] = "HyperText Marking Linguistics";
answers["c"] = "50";
answers["d"] = "George Bush";
answers["e"] = "Olympia";
answers["f"] = "HyperText Markup Language";
answers["g"] = "48";
answers["h"] = "Trenton";
answers.length = 8;

questions = new Object();
questions[0] = null; // skip index [0]
questions[1] = new Question("How many states are in the United States?","c");
questions[2] = new Question("Who was the first president of the United States?","a");
questions[3] = new Question("What's the capital of Washington state?","e");
questions[4] = new Question("What does HTML stand for?","f");
questions.length = 4;

quiz_title = "HTML and United States Knowledge Test";
maximum_score = 100;
penalty_for_wrong_answer = -10;
reveal_correct_answer = false;

function choice() {
for(n=0;n<answers.length;n++)
eval("document.matching.answer"+n+".checked = false");
for(n=1;n<=questions.length;n++) {
sel = eval("document.matching.choice"+n+".selectedIndex");
if (sel<answers.length)
eval("document.matching.answer"+sel+".checked = true");
}
}
function gradeQuiz() {
wrong = "";
correct = questions.length;
score = maximum_score;
for(n=1;n<=questions.length;n++) {
sel = eval("document.matching.choice"+n+".selectedIndex");
if (alpha.charAt(sel) != questions[n].answer) {
correct -= 1;
score += penalty_for_wrong_answer;
wrong += "#"+n+" wrong! "
+(reveal_correct_answer?"Correct answer is "+questions[n].answer:"")
+"\r\n";
}
}
document.matching.evaluation.value = "You answered "+correct+" of "+questions.length
+" correctly for a score of "+score+".\r\n"+wrong;
}
alpha = "abcdefghijklmnopqrstuvwxyz";

answers_menu = "";
answers_text = "<td nowrap rowspan="+questions.length+" valign=top><br>";
for(n=0;n<answers.length;n++) {
answers_menu += "<option>"+alpha.charAt(n);
answers_text += '<input type=checkbox name="answer'+n+'"> '
+alpha.charAt(n)+". "+answers[alpha.charAt(n)]+'<br>';
}
answers_text += "</td>";
answers_menu += "<option selected>-"

document.write('<form name="matching"><table cellpadding=0 cellspacing=0>'
+'<tr><td colspan=3><h4>'+quiz_title
+'</h4><i>Directions: Match each statement with the proper term. '
+'Make your selection for each match to the left of the statement. The terms '
+'will be checked automatically to indicate they are already '
+'used.<br><br></i></td></tr>');
for(n=1;n<=questions.length;n++)
document.write('<tr><td align=right><select name="choice'+n
+'" size=1 onChange="choice()">'+answers_menu+'</select> </td><td><br>'+n+'. '
+questions[n].text+'</td>'+(n==1?answers_text:"")+'</tr>');
document.write('<tr><td colspan=3><center><input type=button value="Grade the Quiz" '
+'onClick="gradeQuiz()"><br><textarea rows=3 cols=55 name="evaluation"></textarea>'
+'</td></tr></table></form>');
// -->
</script>
</body>
</html>
BSquared18
07-17-2003, 11:23 PM
Thanks for the quick response!

Bill B.