SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fill in the blank and multiple choice quiz

    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.

    Code:
    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. #2
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have updated my code and I was wondering if someone could help me? What if answers in question 2 were allowed to be in any order? Like: hips,body,knees or knees,hips,body and so on. How should I modify my code? Anyone please????

    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>

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lm111 View Post
    I have updated my code and I was wondering if someone could help me? What if answers in question 2 were allowed to be in any order? Like: hips,body,knees or knees,hips,body and so on. How should I modify my code? Anyone please????
    One possible way is to store the body parts as object keys, such as:

    Code javascript:
    var parts = {
        'hips': false,
        'body': false,
        'knees': false
    };

    Then you could get the lowercase version of the each answer, set that key to true:

    Code javascript:
    var bodyInputs = ['question_a', 'question_b', 'question_c'],
        part,
        i;
    for (i = 0; i < bodyInputs.length; i += 1) {
        part = form.elements[bodyInputs[i].toLowerCase();
        parts[part] = true;
    }

    and then check that they're all true at the end of things:

    Code javascript:
    var hasAllParts = true;
    for (bodypart in parts) {
        if (parts.hasOwnProperty(bodypart) {
            hasAllParts = hasAllParts && parts[bodypart];
        }
    }
    // allParts will still be true if each of the bodyparts has been mentioned
    return hasAllParts;
    Last edited by paul_wilkins; Sep 18, 2011 at 20:55.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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