Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: question

  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts

    question

    Could someone please take a look at my code? It's a simple quiz with one multiple choice question and one fill in the blank.

    When the user clicks on 'submit' I tried to show some kind of response with correct/incorrect images next to the question. It works with the multiple choice question, but not with the fill in the blank. How can I get the fill in the blank question to work. It always shows the answer as being wrong. Thank you.

    answer_list = [
    ['False'],
    ['body','hips','knees']

    // Note: No comma after final entry
    ];

    response = [];

    function setAnswer(question, answer) {
    response[question] = answer;
    }

    function CheckAnswers() {
    var correct = 0;

    var flag, resp, answ;

    for (var i = 0; i < answer_list.length; i++) {
    flag = false;
    for(var j=0; j<answer_list[i].length; j++){
    resp = response[i].toLowerCase();
    answ = answer_list[i][j].toLowerCase();


    #################################################################################################
    if (response[0] == answer_list[0]) {

    flag = true;
    document.myquiz.a1c.style.backgroundImage="url('correct.gif')";
    }
    else{
    document.myquiz.a1c.style.backgroundImage = "url('incorrect.gif')";
    document.myquiz.a1c.value = " ANS: False. Position the head snugly against the top bar of the frame and then bring the foot board to the infant's feet.";
    }


    if (response[1] == answer_list[1]) {

    flag = true;
    document.myquiz.a1d.style.backgroundImage="url('correct.gif')";
    }
    else{
    document.myquiz.a1d.style.backgroundImage = "url('incorrect.gif')";

    }
    ###################################################################################################

    }

    if (flag) { correct++; }
    }
    document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!");
    }

    </SCRIPT>
    </HEAD>
    <FORM name="myquiz">

    <B>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</B>
    <label><INPUT TYPE=radio NAME=question0 VALUE="True" onClick="setAnswer(0,this.value)">True</label>
    <label><INPUT TYPE=radio NAME=question0 VALUE="False" onClick="setAnswer(0,this.value)">False</label>

    <textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea>


    <B>2. When taking a supine length measurement, straighten the infant's <INPUT id="test" TYPE=text NAME=question1 size=10
    onChange="setAnswer(1, this.value)">, <INPUT id="test" TYPE=text NAME=question1 size=10
    onChange="setAnswer(1, this.value)">, and <INPUT id="test" TYPE=text NAME=question1 size=10
    onChange="setAnswer(1, this.value)">.</B>

    <textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea>


    <INPUT TYPE="button" NAME="check" VALUE="Check Answers" onClick=CheckAnswers()>
    </FORM>
    </div>
    </FONT>
    </BODY>
    </HTML>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    In question two you have this line in all answers:
    onChange="setAnswer(1, this.value)">

    This changes the answer to the text input. In other words setAnswer starts as body then changes to hips NOT body, hips.

    So in the js check for true or false you compare knees to body,hips,knees.

    ANOTHER problem is => if question one is not answered the program freezes.

    Lastly this line:
    document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!");
    will over write the entire page.

  • Users who have thanked sunfighter for this post:

    lm111 (09-13-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    So what do you suggest I do to fix the problem?
    Is there a different way of doing this?
    Thank you.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Does anyone have any suggestions please?? Thank you

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Instead of triggering the answer to log for question 2 with onchange just trigger it to log the answer for question 2 when "check answers" is run. You will still need to adjust your approach for logging that answer so that the three text inputs are assembled as an array which will mean that you can't use your current setAnswer function for question 2.

    Update your "check answers" button to this:
    Code:
    <input type="button" name="check" value="Check Answers" onclick="setAnswer(1,[document.myquiz.question1_a.value,document.myquiz.question1_b.value,document.myquiz.question1_c.value]);CheckAnswers();" />
    And then go into your form and update your question 2 entries to this:
    Code:
    <b>2. When taking a supine length measurement, straighten the infant's
    <input type="text" name="question1_a" size="10">, 
    <input type="text" name="question1_b" size="10">, and 
    <input type="text" name="question1_c" size="10">.</b>
    I think that will fix it...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    lm111 (09-14-2011)

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Thank you so much for your help. I modified my code. Could you please give me a hint on how to update the setAnswer function. I would really appreciate it. Thank you.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Sorry, I think my wording was confusing. The adjustment you needed to make was in using this:

    Code:
    setAnswer(1,[document.myquiz.question1_a.value,document.myquiz.question1_b.value,document.myquiz.question1_c.value]);
    rather than this:

    Code:
    setAnswer(1,this.value);
    Since you have now done that with the updates I provided in my last post I think that should be enough to get the script running as intended.

    Is there anything still going wrong with the script at this point?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    lm111 (09-14-2011)

  • #8
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    When I click on 'Check Answers' the alert statement "alert("You got " + correct + " of " + answer_list.length + " questions correct!");" does not work. Any idea why?

    Code:
    <HTML>
    <HEAD>
    <TITLE>Short Quiz</TITLE>
    <SCRIPT type="text/javascript"> 
    
    answer_list = [
      ['False'],
      ['body','hips','knees']
      
    ];
    
    response = [];
    
    function setAnswer(question, answer) { 
    
    response[question] = answer;  
    }
    
    function CheckAnswers() {	
       
      var correct = 0;
      
      var flag, resp, answ;
      
      for (var i = 0; i < answer_list.length; i++) {
        flag = false;
        for(var j=0; j<answer_list[i].length; j++){
          resp = response[i].toLowerCase();
          answ = answer_list[i][j].toLowerCase();
    	 //  alert(answer_list[i][j] + "=" + answer_list[i][j]);
          if (resp == answ) { flag = true; } 
        }
    	
        if (flag) { correct++; }
    	
    	
      }
      alert("You got " + correct + " of " + answer_list.length + " questions correct!"); 
    }
    
    </SCRIPT>
    </HEAD>
    <body>
    <FORM name="myquiz">
    
    <input type="button" name="check" value="Check Answers" onclick="setAnswer(1,[document.myquiz.question1_a.value,document.myquiz.question1_b.value,document.myquiz.question1_c.value]);CheckAnswers();" />
    
    <br/>
    <B>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</B><br/><br/>
     <label><INPUT TYPE=radio NAME=question0 VALUE="True"
     onClick="setAnswer(0,this.value)">True</label><BR>
     <label><INPUT TYPE=radio NAME=question0 VALUE="False"
     onClick="setAnswer(0,this.value)">False</label>
    <br/>
     
     <textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea>
    
     <br />
           
    <B>2. When taking a supine length measurement, straighten the infant's <input type="text" name="question1_a" size="10">, 
    <input type="text" name="question1_b" size="10">, and 
    <input type="text" name="question1_c" size="10">.</b>
    <br/>
    
     <textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea>
    
     </FORM>
    </FONT>
    </BODY>
    </HTML>

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    OK I think I found the problem. one of the brackets was wrong. The alert box is working now. But for some reason question 2 is always wrong. Hm??

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You had a bunch of "#" characters without escaping them, which caused a javascript error.

    Then you had some errors in your handling of the response data. Namely, you can't apply toLowerCase() to an array which was causing it to fail. So a solution there was to apply toString() first and then to run the toLowerCase() after that.

    Then you still had some errors in your logic that were going to prevent successful processing so I did a minor overhaul to your page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Quiz</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    var answer_list = [
    	['False'],
    	['body,hips,knees']
    
    // Note: No comma after final entry
    ];
    
    var response = [];
    
    function getCheckedValue(radioObj) {
    	if(!radioObj)
    		return "";
    	var radioLength = radioObj.length;
    	if(radioLength == undefined)
    		if(radioObj.checked)
    			return radioObj.value;
    		else
    			return "";
    	for(var i = 0; i < radioLength; i++) {
    		if(radioObj[i].checked) {
    			return radioObj[i].value;
    		}
    	}
    	return "";
    }
    
    function setAnswer(question, answer) {
    	response[question] = answer;
    }
    
    function CheckAnswers() {
    	var correct = 0;
    	var resp, answ;
    	for (var i = 0; i < answer_list.length; i++) {
    		resp = response[i].toString();
    		resp = resp.toLowerCase();
    		answ = answer_list[i].toString();
    		answ = answ.toLowerCase();
    //#################################################################################################
    		if (resp == answ) {
    			correct++;
    			if(i==0){
    				document.forms[0].a1c.style.backgroundImage="url('correct.gif')";
    				document.forms[0].a1c.value = "";
    			}
    			else{
    				document.forms[0].a1d.style.backgroundImage="url('correct.gif')";
    				document.forms[0].a1d.value = "";
    			}
    		}
    		else{
    			if(i==0){
    				document.forms[0].a1c.style.backgroundImage = "url('incorrect.gif')";
    				document.forms[0].a1c.value = " ANS: False. Position the head snugly against the top bar of the frame and then bring the foot board to the infant's feet.";
    			}
    			else{
    				document.forms[0].a1d.style.backgroundImage = "url('incorrect.gif')";
    				document.forms[0].a1d.value = " ANS: " + answ;
    			}
    //###################################################################################################
    		}
    	}
    	document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!");
    }
    </script>
    </head>
    <body>
    <form action="" method="post">
    <div>
    <b>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</b><br />
    <label><input type="radio" name="question0" value="True" />True</label>
    <label><input type="radio" name="question0" value="False" />False</label>
    <br />
    <textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea>
    <br />
    <b>2. When taking a supine length measurement, straighten the infant's
    <input type="text" name="question1_a" size="10" />, 
    <input type="text" name="question1_b" size="10" />, and 
    <input type="text" name="question1_c" size="10" />.</b>
    <br />
    <textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea>
    <br />
    <input type="button" name="check" value="Check Answers" onclick="setAnswer(0,getCheckedValue(document.forms[0].question0));setAnswer(1,[document.forms[0].question1_a.value,document.forms[0].question1_b.value,document.forms[0].question1_c.value]);CheckAnswers();" />
    </div>
    </form>
    </body>
    </html>
    I believe that should work.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    You are awesome. Thank you. I hope you don;t mind me asking one more question. What if answers in question 2 were allowed to be in any order? Like: hips,body,knees or knees,hips,body and so on.
    In my quiz some answers for the different fill in the blank questions will have to be in order and some not (like for example question 2 does not). Any suggestion?
    I REALLY appreciate you helping me on this. You are great!!!

  • #12
    New Coder
    Join Date
    Sep 2011
    Posts
    25
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Could someone please help me with my last question????? I would appreciate it. Thank you.....


  •  

    Posting Permissions

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