Multiple Choice Quiz - getting score?

Question

I'm trying to create a simple multiple choice program in HTML but I'm having trouble with getting the user input and showing their score at the end. Could someone help me out?

There are 10 questions to my multiple choice quiz and 4 choices per question.

Here is one question for example:

<li>
<h3>How many letters are there in "JS"?</h3>
<input type="radio" name="question9" value="A">2<br>
<input type="radio" name="question9" value="B">1<br>
<input type="radio" name="question9" value="C">3<br>
<input type="radio" name="question9" value="D">4<br>
</li>

Here is the button I am using to show the user's results:

 <button onclick="returnScore()">View Results</button>

And here is my current script:

var userInput = new Array();
var answers = new Array(10);
answers[0] = "B";
answers[1] = "C";
answers[2] = "A";
answers[3] = "C";
answers[4] = "D";
answers[5] = "D";
answers[6] = "D";
answers[7] = "D";
answers[8] = "C";
answers[9] = "A";

function getScore(){
var score=0;
var numQuestions=10;

for (var i=0;i<numQuestions;i++){
if (userInput[i]==answers[i]){
score += 1;
}
else{
score += 0;
}

}
return score;
}
function returnScore(){
alert("Your score is "+getScore()+"/10");
}

Thanks.

Answer 1

Make sure your names start from 0 (question0) cause i inside the for loop is 0 indexed.

You forgot to loop your radio elements (by the current index name) to get the value of the checked one:

var answers = ["A","C","B"], 
    tot = answers.length;

function getCheckedValue( radioName ){
    var radios = document.getElementsByName( radioName ); // Get radio group by-name
    for(var y=0; y<radios.length; y++)
      if(radios[y].checked) return radios[y].value; // return the checked value
}

function getScore(){
  var score = 0;
  for (var i=0; i<tot; i++)
    if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
  return score;
}

function returnScore(){
  alert("Your score is "+ getScore() +"/"+ tot);
}

<ul>
  <li>
    <h3>How many letters are there in "JS"?</h3>
    <input type="radio" name="question0" value="A">2<br>
    <input type="radio" name="question0" value="B">1<br>
    <input type="radio" name="question0" value="C">3<br>
    <input type="radio" name="question0" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "BMX"?</h3>
    <input type="radio" name="question1" value="A">2<br>
    <input type="radio" name="question1" value="B">1<br>
    <input type="radio" name="question1" value="C">3<br>
    <input type="radio" name="question1" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "A"?</h3>
    <input type="radio" name="question2" value="A">2<br>
    <input type="radio" name="question2" value="B">1<br>
    <input type="radio" name="question2" value="C">3<br>
    <input type="radio" name="question2" value="D">4<br>
  </li>
</ul>

<button onclick="returnScore()">View Results</button>

You don't need to return a += 0 for your score. Simply increase it only, if you have a positive match.

When instantiating new Arrays use the shorthand [] instead of new Array().

Answer 2

Accessing Form Values for Radio Buttons

You have to access the DOM and get the associated values for the corresponding form elements you're checking. Radio elements happen to require the most work, which is probably what's giving you trouble.

Inside your getScore() function, you can cycle through each of the question elements to determine which answer is checked (this could be refactored to handle all of the questions and be more efficient, but I kept this basic form so you could see what's going on):

var question0s = document.getElementsByName("question0");

for (var i = 0; i < question0s.length; i++) {
    if (question0s[i].checked) {
        userInput[0] = question0s[i].value;
    }
}

Or, you could use the querySelector function for a more elegant approach:

userInput[0] = document.querySelector('input[name="question0"]:checked').value;

Here is a refactored version (which just means the code updated with improvements) of your getScore() function to handle all of the questions:

function getScore(){
    for (var i = 0; i < answers.length; i++) {
        var currentQuestion = "question" + i;
        var questionAnswers = document.getElementsByName(currentQuestion);
        for (var j = 0; j < questionResponses.length; j++) {
            if (questionResponses[i].checked) {
                userInput[i] = question0s[i].value;
            }
        }
    }
    // after this completes, you'll have the user input values
    // the rest of your code should now work
    for (var i=0;i<numQuestions;i++){
        if (userInput[i]==answers[i]){
            score += 1;
        } else {
            score += 0;
        }
    }

    return score;
}

Improving (Refactoring) Your Code

Now, what I've shown you should work, but it still has much room for improvement. Maybe you'll see some ways you save some steps and make it even better :) Have fun!