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>
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???
<!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>
One possible way is to store the body parts as object keys, such as:
var parts = {
'hips': false,
'body': false,
'knees': false
};
Then you could get the lowercase version of the each answer, set that key to true:
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:
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;