dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Where's the Bug?

  1. #1
    Join Date
    Jan 2003
    Location
    Minneapolis
    Posts
    19

    Where's the Bug?

    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>

    ___________________________________________

  2. #2
    Join Date
    Dec 2002
    Location
    Taiwan
    Posts
    1,297
    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>

  3. #3
    Join Date
    Jan 2003
    Location
    Minneapolis
    Posts
    19
    Thanks for the quick response!

    Bill B.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles