html - Multiple choice quiz using javascript

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!

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!

Share Improve this question asked Nov 23, 2013 at 20:43 user3014211 32 gold badges2 silver badges3 bronze badges

1 OK, so there is nothing wrong with the order of operation. Try removing Math.round, it might be a rounding inaccuracy – imulsion Commented Nov 23, 2013 at 20:56
The percentage seems consistently correct (see jsfiddle/C2Bqh). What is the problem you are having? Can you give a case where the percentage is incorrect? – pete Commented Nov 24, 2013 at 5:00
file:///C:/Users/Lesleyanne/Desktop/musicQuiz.html – user3014211 Commented Nov 24, 2013 at 13:58
If you try it using the link above you can see the issue @pete – 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? – pete Commented Nov 24, 2013 at 15:43

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 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?

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 remended).
Set the jsFiddle to run the JavaScript either in No wrap - in <head> or No wrap - in <body> (remended).

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 bined with how you've defined the form elements (see inline ments):

<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/C2Bqh/1/ and http://jsfiddle/C2Bqh/2/.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Multiple choice quiz using javascript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)