Multiple choice quiz using javascript

Question

I have created a multiple choice quiz that gives a percentage result that works but the percentage is consistently incorrect. Not sure how to correct this exactly, as I've tried various approaches and nothing seems to work.

Script:
var numQues = 5;
var numChoi = 3;
var answers = new Array(5);
answers[0] = "David Bowie";
answers[1] = "AM";
answers[2] = "Australia";
answers[3] = "Boneface";
answers[4] = "Sound City";
function getScore(form) {
  var score = 0;
  var currElt;
  var currSelection;
  for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    for (j=0; j<numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        if (currSelection.value == answers[i]) {
          score++;
          break;
        }
      }
    }
  }

  score = Math.round(score/numQues*100);
  form.percentage.value = score + "%";
  var correctAnswers = "";
  for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
  }
  form.solutions.value = correctAnswers;
}

HTML:

<center>
<h1>Test your music knowledge!</h1>
<p>
<form name="quiz">
<p>
<b>1. Who supplied a cameo vocal for the Arcade Fire song, "Reflektor"?<br></b>
<blockquote>
<input type="radio" name="q1" value="Elton John">Elton John<br>
<input type="radio" name="q1" value="David Bowie">David Bowie<br>
<input type="radio" name="q1" value="Leonard Cohen">Leonard Cohen<br>
</blockquote>
<p><b>
2. What is the title of Arctic Monkeys 2013 album?<br></b>
<blockquote>
<input type="radio" name="q2" value="AM">AM<br>
<input type="radio" name="q2" value="AM I?">AM I?<br>
<input type="radio" name="q2" value="SAM I AM">SAM I AM<br>
</blockquote>
<p><b>
3. Where do psychedelic rockers Tame Impala hail from?<br></b>
<blockquote>
<input type="radio" name="q3" value="Australia">Australia<br>
<input type="radio" name="q3" value="New Zealand">New Zealand<br>
<input type="radio" name="q3" value="America">America<br>
</blockquote>
<p><b>
4. Which artist designed Queens Of The Stone Ages "...Like Clockwork" album artwork?<br></b>
<blockquote>
<input type="radio" name="q4" value="Banksy">Banksy<br>
<input type="radio" name="q4" value="Bono">Bono<br>
<input type="radio" name="q4" value="Boneface">Boneface<br>
</blockquote>
<p><b>
5. What was the name of Dave Grohls 2013 rockumentary?<br></b>
<blockquote>
<input type="radio" name="q5" value="Sin City">Sin City<br>
<input type="radio" name="q5" value="Sound City">Sound City<br>
<input type="radio" name="q5" value="Oh, I'm just so PRETTY.">Oh, I'm just so PRETTY<br>
</blockquote>
<p><b>

<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear"><p>
Score = <input type=text size=15 name="percentage"><br>
Correct answers:<br></font>
<textarea name="solutions" wrap="virtual" rows="4" cols="25"></textarea>
</form>
<p>

Any help appreciated!

OK, so there is nothing wrong with the order of operation. Try removing Math.round, it might be a rounding inaccuracy — imulsion
– imulsion, Commented Nov 23, 2013 at 20:56
The percentage seems consistently correct (see jsfiddle.net/C2Bqh). What is the problem you are having? Can you give a case where the percentage is incorrect? — pete
– pete, Commented Nov 24, 2013 at 5:00
If you try it using the link above you can see the issue @pete — user3014211
– user3014211, Commented Nov 24, 2013 at 13:59
I would love to visit that link, but it's a file local to your system. :) Can you post it on a public website or recreate the issue at jsFiddle.net? — pete
– pete, Commented Nov 24, 2013 at 15:43

php_nub_qq · Accepted Answer · 2013-11-23 21:08:53Z

1

All you need to do is get the number of correct answers and multiply by 20.

Percentage = ( 100 / Number of questions ) * Number of right answers

EDIT:

I just tested your code and it works?

edited Nov 23, 2013 at 21:08

answered Nov 23, 2013 at 21:01

php_nub_qq

16.1k25 gold badges84 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3014211 Over a year ago

It produces a percentage but not for the correct answers and I don't know why this is?

php_nub_qq Over a year ago

@user3014211 it does exactly what you say it doesn't

user3014211 Over a year ago

Apologies to disagree but I've completed the quiz myself about 20 times and when I input all of the correct answers using the radio buttons it returns me with a score of 40% instead of 100% but the answers listed in the "Correct Answer" box are all in order.

user3014211 Over a year ago

I've tested it again using @pete link on jsfiddle.net/C2Bqh and it works perfectly. No idea why I'm having the problem on my own browser but thanks for taking the time to help out. Really appreciate it. I'll return to pulling my hair out now at my own laptops inaccuracies.

php_nub_qq Over a year ago

@user3014211 Here's a tip to possibly make your life easier. Debug everything in the end of the script. That way you'll see what holds stuff that's not supposed to hold and track back to the causer. Good luck!

pete · Accepted Answer · 2013-11-24 18:55:04Z

Given your posted fiddle...

There are technically two problems (but one's a real simple fix).

The JavaScript in the fiddle is set to run onload. This leaves your functions undefined in a global scope as jsFiddle wraps this in an anonymous function window.onload=function(){... your code ...}. The real simple fix for this is to either:

Not use the var keyword to define your global variables (not recommended).
Set the jsFiddle to run the JavaScript either in No wrap - in <head> or No wrap - in <body> (recommended).

The real problem is how you're accessing the form elements via the double loop:

for (i = 0; i < numQues; i++) { // where numQues = 5
  currElt = i * numChoi;        // where numChoi = 3
  for (j = 0; j < numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
          if (currSelection.value == answers[i]) {
              score++;
              break;
          }
      }
  }
}

when combined with how you've defined the form elements (see inline comments):

<input type="text" name="numbers" ...>                  // currSelection = 0,  numQues = 0, numChoi = 0, answer[i] = "David Bowie"
<button type="button" onclick="">Off you go!</button>   // currSelection = 1,  numQues = 0, numChoi = 1, answer[i] = "David Bowie"
<input type="radio" name="q1" value="Elton John">       // currSelection = 2,  numQues = 0, numChoi = 2, answer[i] = "David Bowie"
<input type="radio" name="q1" value="David Bowie">      // currSelection = 3,  numQues = 1, numChoi = 0, answer[i] = "AM"
<input type="radio" name="q1" value="Leonard Cohen">    // currSelection = 4,  numQues = 1, numChoi = 1, answer[i] = "AM"
<input type="radio" name="q2" value="AM">               // currSelection = 5,  numQues = 1, numChoi = 2, answer[i] = "AM"
<input type="radio" name="q2" value="AM I?">            // currSelection = 6,  numQues = 2, numChoi = 0, answer[i] = "Australia"
<input type="radio" name="q2" value="SAM I AM">         // currSelection = 7,  numQues = 2, numChoi = 1, answer[i] = "Australia"
<input type="radio" name="q3" value="Australia">        // currSelection = 8,  numQues = 2, numChoi = 2, answer[i] = "Australia"
<input type="radio" name="q3" value="New Zealand">      // currSelection = 9,  numQues = 3, numChoi = 0, answer[i] = "Boneface"
<input type="radio" name="q3" value="America">          // currSelection = 11, numQues = 3, numChoi = 1, answer[i] = "Boneface"
<input type="radio" name="q4" value="Banksy">           // currSelection = 12, numQues = 3, numChoi = 2, answer[i] = "Boneface"
<input type="radio" name="q4" value="Bono">             // currSelection = 13, numQues = 4, numChoi = 0, answer[i] = "Sound City"
<input type="radio" name="q4" value="Boneface">         // currSelection = 14, numQues = 4, numChoi = 1, answer[i] = "Sound City"
<input type="radio" name="q5" value="Sin City">         // currSelection = 14, numQues = 4, numChoi = 2, answer[i] = "Sound City"; Looping ends
<input type="radio" name="q5" value="Sound City">
<input type="radio" name="q5" value="Oh, I'm just so PRETTY.">
<input type="button" value="Get score" onclick="getScore(this.form)">
<input type="reset" value="Clear">
<input type="text" size="15" name="percentage">
<textarea name="solutions" wrap="virtual" rows="4" cols="25"></textarea>

This causes the first question to be effectively skipped and the last question to never be correct, so the user can only obtain a maximum score of 60%. There are multiple solutions to this problem.

Change your markup so that only your "answer" inputs are in the form. This way the double-loop will work.
Don't use a double-loop where a single-loop will do:

for (i = 0; i < form.elements.length; i++) { // this is work regardless of how many elements are in the form. currSelection = form.elements[i]; if (currSelection.checked) { if (answers.indexOf(currSelection.value) > -1) { score++; } } }

As for other solutions, they all boil down to "change both your markup and your JavaScript so that they play more nicely together (and are perhaps more readable)". I would go on, but then this answer go well outside the scope of your initial question.

I put together some examples of how to "change both your markup and your JavaScript so that they play more nicely together (and are perhaps more readable)" at http://jsfiddle.net/C2Bqh/1/ and http://jsfiddle.net/C2Bqh/2/.

Collectives™ on Stack Overflow

Multiple choice quiz using javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related