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?
<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";
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>
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:
<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";
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>
The Web Standards Project – Build accessible standard compliant websites, please! Browse Happy – Don't forget to support the browsers with standard compliance
Reply With Quote
Bookmarks