Announcement

**Kor** · Sep 7, 2011, 10:37 AM

use an array of arrays.

Code:

var answer_list=[
['Red','Green'],
['New York Jets']
]

//.... so that the loop will become:

for (var i = 0; i < [COLOR="Blue"]answer_list.length[/COLOR]; i++) {
	[COLOR="Blue"]for(var j=0;j<answer_list[i].length;j++){[/COLOR]
		if (response[i] == answer_list[i][j]) {
		correct++;
		}
	[COLOR="Blue"]}[/COLOR]
}

Note that you don't need to use a separate variable to set the number of questions. Simply use the length of the array as the limit of your iteration.

**lm111** · Sep 7, 2011, 10:50 AM

Thank you. Now lets say one of my questions was like this:

Infant and child weights should be measured to the nearest _____kg or ___oz.
ANS: 0.01, 1/2

How should I modify my code now? Thank you.

Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>
<HTML>
<HEAD>
<TITLE>Short Quiz</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
number_questions = 2;
//answer_list = new Array(number_questions);
//answer_list[0] = "Red";
//answer_list[1] = "New York Jets";

var answer_list=[
['Red','Green'],
['New York Jets']
]


response = new Array(number_questions);
function setAnswer(question, answer) {
response[question] = answer;
}
function CheckAnswers() {
var correct = 0;
for (var i = 0; i < answer_list.length; i++) {
	for(var j=0;j<answer_list[i].length;j++){
if (response[i] == answer_list[i][j]) {
correct++;
}
}
}
alert("You got " + correct + " of "
+ number_questions + " questions correct!");
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR = #EEFFE8>
<FONT FACE="Arial" SIZE=6>Short Quiz</FONT><BR>
<HR SIZE=5 WIDTH=100%>
<FONT FACE="Arial" SIZE=3>
<FORM>
<B>1.  <INPUT TYPE=text NAME=question0 size=30
onChange="setAnswer(0, this.value)"> When taking a supine length measurements, straighten the infant's</B><P>
<BR><P>
<B>2. For what NFL team did Joe Namath play?</B><P>
<INPUT TYPE=radio NAME=question1 VALUE="New York Giants"
onClick="setAnswer(1,this.value)">New York Giants<BR>
<INPUT TYPE=radio NAME=question1 VALUE="New England Patriots"
onClick="setAnswer(1,this.value)">New England Patriots<BR>
<INPUT TYPE=radio NAME=question1 VALUE="New York Jets"
onClick="setAnswer(1,this.value)">New York Jets<BR>
<INPUT TYPE=radio NAME=question1 VALUE="Buffalo Bills"
onClick="setAnswer(1,this.value)">Buffalo Bills<BR><P>
</FORM>
<FORM>
<INPUT TYPE="button" NAME="check" VALUE="Check Answers"
onClick=CheckAnswers()>
</FORM>
</FONT>
</BODY>
</HTML>

**lm111** · Sep 7, 2011, 01:14 PM

Anyone pleaseee!???

**jmrker** · Sep 7, 2011, 02:12 PM

Expanding on 'Kor's suggestion, this adds logic to not rely on exact match of CASE.
It also makes an attempt to accept "shuttle" as well as "space shuttle" as a correct answer.

The problem with any "fill-in-the-blank" quiz is that the operator can still enter a correct response
that is NOT in the answer list or miss a correct response because of misspelling or typo errors.

Code:

<HTML>
<HEAD>
<TITLE>Short Quiz</TITLE>
<SCRIPT type="text/javascript"> <!-- archaic attribute: LANGUAGE="JavaScript" -->
// From: http://www.codingforum.net/showthread.php?p=1133055#post1133055

answer_list = [
  ["Red","Green"],
  ["New York Jets"],
  ['Square','Rectangle'],
  ['Auto','Automobile','Car','Truck','Van'],
  ['Plane','Jet','Glider','747','Helicopter','Space Shuttle']
// 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 ((resp == answ) || (answ.indexOf(resp) != -1)) { flag = true; }
    }
    if (flag) { correct++; }
  }
  alert("You got " + correct + " of " + answer_list.length + " questions correct!");
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR = #EEFFE8>
<FONT FACE="Arial" SIZE=6>Short Quiz</FONT><BR>
<HR SIZE=5 WIDTH=100%>
<FONT FACE="Arial" SIZE=3>
<FORM>
<B>1.  <INPUT TYPE=text NAME=question0 size=30
onChange="setAnswer(0, this.value)"> is my favorite color</B><P>
<BR><P>

<B>2. For what NFL team did Joe Namath play?</B><P>
 <label><INPUT TYPE=radio NAME=question1 VALUE="New York Giants"
 onClick="setAnswer(1,this.value)">New York Giants</label><BR>
 <label><INPUT TYPE=radio NAME=question1 VALUE="New England Patriots"
 onClick="setAnswer(1,this.value)">New England Patriots</label><BR>
 <label><INPUT TYPE=radio NAME=question1 VALUE="New York Jets"
 onClick="setAnswer(1,this.value)">New York Jets</label><BR>
 <label><INPUT TYPE=radio NAME=question1 VALUE="Buffalo Bills"
 onClick="setAnswer(1,this.value)">Buffalo Bills</label><BR><P>

<b>3. A shape with 4 sides is also know an a:
<input type="text" name="question2" size="30"
 onchange="setAnswer(2, this.value)"></b><p>

<b>4. Transportation with 4 wheels is known as:
<input type="text" name="question2" size="30"
 onchange="setAnswer(3, this.value)"></b><p>

<b>5. Something a person could fly in would be:
<input type="text" name="question2" size="30"
 onchange="setAnswer(4, this.value)"></b><p>

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

**lm111** · Sep 9, 2011, 10:51 AM

Hello,

I have one more question. Let's say the sentence is like this:

Something a person could fly in would be a _____, ______, and ______.
ANS: plane, jet glider

Now if I type in 'plan' instead of 'plane', it counts the answer as correct. It should be incorrect. any idea how to fix the code? thank you so much.

**lm111** · Sep 9, 2011, 10:56 AM

Hello,

I have one more question. Let's say the sentence is like this:

Something a person could fly in would be a _____, ______, and ______.
ANS: plane, jet glider

Now if I type in 'plan' instead of 'plane', it counts the answer as correct. It should be incorrect. any idea how to fix the code? thank you so much.

**jmrker** · Sep 9, 2011, 01:54 PM

Originally posted by lm111 View Post

Hello,

I have one more question. Let's say the sentence is like this:

Something a person could fly in would be a _____, ______, and ______.
ANS: plane, jet glider

Now if I type in 'plan' instead of 'plane', it counts the answer as correct. It should be incorrect. any idea how to fix the code? thank you so much.

Change one line in the "CheckAnswers" function:

Code:

// from:
//      if ((resp == answ) || (answ.indexOf(resp) != -1)) { flag = true; }
// to:
      if (resp == answ) { flag = true; }

**lm111** · Sep 9, 2011, 02:47 PM

Thank you so much. One other question, when the user clicks on 'Submit Answer' how can I highlight what the right answer was?

Thank you.

**jmrker** · Sep 9, 2011, 04:09 PM

Need more information and clarification...

Give us a sample of questions with correct answers that you are using.

If you want to highlight the correct answer that is already displayed, you will probably need to identify correct selection with and ID=xxx attribute in the display.

If you want to pop-up the correct answer, you could use an alert or other <div id='xxx' ...></div> with .innerHTML

Lots of ways, but at this point you need to make some decisions a to what it is that you want.
Otherwise, you get the simplest solution and it may not match your desires.

Note also that there are numerous other "quiz" programs on the internet and this forum with a search.
One might better fit your desires with or without further modification.

**lm111** · Sep 12, 2011, 10:33 AM

Let's say I have the following question:

What is 2+2
a. 4
b. 6
c. 2
d. 5

Let's say the user selects 'b' and after clicking on the submit button I want to somehow highlight what the correct answer was. How can I do that? Thanks.

**AdamWraith** · May 1, 2012, 04:10 AM

A simple "Correct" or "Incorrect" Alert

Hi! I like where this quiz is headed! Can you show me a way to have it an "all or nothing" fill in the blank quiz, that is, all answers need to be correct to play an alert "Correct!" or even if one question is wrong (misspelled word for example), the response will be "Incorrect. Please try again."? I am unsure of how the conditional statements should be constructed in Javascript to make this work.
Thanks!
-A

**Philip M** · May 1, 2012, 05:55 AM

Originally posted by AdamWraith View Post

Hi! I like where this quiz is headed! Can you show me a way to have it an "all or nothing" fill in the blank quiz, that is, all answers need to be correct to play an alert "Correct!" or even if one question is wrong (misspelled word for example), the response will be "Incorrect. Please try again."? I am unsure of how the conditional statements should be constructed in Javascript to make this work.
Thanks!
-A

You should be able to do this by yourself!

Taking jmrker's script in Post#5,

Code:

if (correct == answer_list.length) {
alert("You got " + correct + " of " + answer_list.length + " questions correct!");
}
else {
alert ("At least one of your answers was not correct");
}

The answers are case-insensitive but obviously mis-spelling will result in an incorrect answer.

I take it that you do understand that any Javascript-based quiz is hopelessly inscure as the user can look at the correct answers simply with View Source.

**AdamWraith** · May 1, 2012, 11:19 AM

Works great!

Originally posted by Philip M View Post

You should be able to do this by yourself!

You are RIGHT, I should have been able to do this myself, however, I am relatively new to Javascript and am learning "as needed" and "per project". I do hope to spend more time in studying and gaining a strong foundation and mastering the basics. I'm going to be using this quiz as a "self-check" of a student's knowledge in a course lesson, so the student is only cheating themselves if they look at the answers in the page source instead of referring to the textbook and memorizing the terms in preparation for class exams. The quiz is strict and requires precise spelling of medical terminology.
THANK YOU for your HELP!
-Adam

**jmrker** · Jul 11, 2012, 10:55 PM

Modified display.

Code:

<HTML>
<HEAD>
<TITLE>Short Quiz</TITLE>
<style type="text/css">
 .ques { width:50%; border:1px solid black; }
</style>

<SCRIPT type="text/javascript"> <!-- archaic attribute: LANGUAGE="JavaScript" -->
// From: http://www.codingforum.net/showthread.php?p=1133055#post1133055

answer_list = [
  ["Red","Green"],
  ["New York Jets"],
  ['Square','Rectangle'],
  ['Auto','Automobile','Car','Truck','Van'],
  ['Plane','Jet','Glider','747','Helicopter','Space Shuttle']
// 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 ((resp == answ) || (answ.indexOf(resp) != -1)) { flag = true; }
    }
    if (flag) {
      correct++;
      document.getElementById('ques'+i).style.backgroundColor = '#ffffff';
    } else {
      document.getElementById('ques'+i).style.backgroundColor = '#ff0000';
    }
  }
//  alert("You got " + correct + " of " + answer_list.length + " questions correct!");
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR = #EEFFE8>
<FONT FACE="Arial" SIZE=6>Short Quiz</FONT><BR>
<HR SIZE=5 WIDTH=100%>
<FONT FACE="Arial" SIZE=3>
<FORM>

<div id="ques0" class="ques">
<B>1.  <INPUT TYPE=text NAME=question0 size=30
onChange="setAnswer(0, this.value)"> is my favorite color</B>
</div>
<P><BR><P>

<div id="ques1" class="ques">
<B>2. For what NFL team did Joe Namath play?</B><P>
 <label><INPUT TYPE=radio NAME=question1 VALUE="New York Giants"
 onClick="setAnswer(1,this.value)">New York Giants</label><BR>
 <label><INPUT TYPE=radio NAME=question1 VALUE="New England Patriots"
 onClick="setAnswer(1,this.value)">New England Patriots</label><BR>
 <label><INPUT TYPE=radio NAME=question1 VALUE="New York Jets"
 onClick="setAnswer(1,this.value)">New York Jets</label><BR>
 <label><INPUT TYPE=radio NAME=question1 VALUE="Buffalo Bills"
 onClick="setAnswer(1,this.value)">Buffalo Bills</label>
</div>
<BR><P>

<div id="ques2" class="ques">
<b>3. A shape with 4 sides is also know an a:
<input type="text" name="question2" size="30"
 onchange="setAnswer(2, this.value)"></b>
</div>
<p>

<div id="ques3" class="ques">
<b>4. Transportation with 4 wheels is known as:
<input type="text" name="question2" size="30"
 onchange="setAnswer(3, this.value)"></b>
</div>
<p>

<div id="ques4" class="ques">
<b>5. Something a person could fly in would be:
<input type="text" name="question2" size="30"
 onchange="setAnswer(4, this.value)"></b>
</div>
<p>

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

Modify error color to what ever you desire.
Could also change correct answers to green (#00ff00) instead of white (#ffffff) if desired.

Announcement

quiz

quiz

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment