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!

Answer 3

<!DOCTYPE HTML>

<html>
<head>

    <title>Quiz Questions And Answers</title>
</head>

<body>
    <center><h1>Quiz Questions</h1></center>
    <p>
    <form name="quiz">
    <p>
        <b>Question 1.
        <br>He -------------------- it.<br></b>
        <blockquote>
    <input type="radio" name="q1" value="don't like">don't like<br>
    <input type="radio" name="q1" value="doesn't like">doesn't like<br>
    <input type="radio" name="q1" value="doesn't likes">doesn't likes<br>
    </blockquote>

<p><b>
<hr>
Question 2.
<br>They -------------------- here very often.<br></b>
<blockquote>
<input type="radio" name="q2" value="don't come">don't come<br>
<input type="radio" name="q2" value="doesn't come">doesn't come<br>
<input type="radio" name="q2" value="doesn't comes">doesn't comes<br>
</blockquote>
<p><b>
<hr>
Question 3.
<br>John and Mary -------------------- twice a week.<br></b>
<blockquote>
<input type="radio" name="q3" value="come">come<br>
<input type="radio" name="q3" value="comes">comes<br>
<input type="radio" name="q3" value="coming">coming<br>
</blockquote>
<p><b>
<hr>
Question 4.
<br>I -------------------- mind at all.<br></b>
<blockquote>
<input type="radio" name="q4" value="not">not<br>
<input type="radio" name="q4" value="isn't">isn't<br>
<input type="radio" name="q4" value="don't">don't<br>
</blockquote>
<p><b>
<hr>
Question 5.
<br>It -------------------- sense.<br></b>
<blockquote>
<input type="radio" name="q5" value="don't make">don't make<br>
<input type="radio" name="q5" value="doesn't makes">doesn't makes<br>
<input type="radio" name="q5" value="doesn't make">doesn't make<br>
</blockquote>
<p><b>
<hr>
Question 6.
<br>They -------------------- happy.<br></b>
<blockquote>
<input type="radio" name="q6" value="seem">seem<br>
<input type="radio" name="q6" value="seems">seems<br>
<input type="radio" name="q6" value="seeming">seeming<br>
</blockquote>
<p><b>
Question 7.
<br>You -------------------- to do it.<br></b>
<blockquote>
<input type="radio" name="q7" value="don't have">don't have<br>
<input type="radio" name="q7" value="doesn't have">doesn't have<br>
<input type="radio" name="q7" value="doesn't has">doesn't has<br>
</blockquote>
<p><b>
<hr>
Question 8.
<br>She -------------------- a brother.<br></b>
<blockquote>
<input type="radio" name="q8" value="doesn't has">doesn't has<br>
<input type="radio" name="q8" value="don't has">don't has<br>
<input type="radio" name="q8" value="doesn't have">doesn't have<br>
</blockquote>
<p><b>
<hr>
Question 9.
<br>The journey -------------------- an hour.<br></b>
<blockquote>
<input type="radio" name="q9" value="take">take<br>
<input type="radio" name="q9" value="takes">takes<br>
<input type="radio" name="q9" value="taking">taking<br>
</blockquote>
<p><b>
<hr>
Question 10.
<br>I -------------------- it now.<br></b>
<blockquote>
<input type="radio" name="q10" value="want">want<br>
<input type="radio" name="q10" value="wants">wants<br>
<input type="radio" name="q10" value="wanting">wanting<br>
</blockquote>
<p><b>
<hr>
Question 11.
<br>Peggy -------------------- by bus.<br></b>
<blockquote>
<input type="radio" name="q11" value="come">come<br>
<input type="radio" name="q11" value="comes">comes<br>
<input type="radio" name="q11" value="coming">coming<br>
</blockquote>
<p><b>
<hr>
Question 12.
<br>She --------------------.<br></b>
<blockquote>
<input type="radio" name="q12" value="don't know">don't know<br>
<input type="radio" name="q12" value="doesn't knows">doesn't knows<br>
<input type="radio" name="q12" value="doesn't know">doesn't know<br>
</blockquote>
<p><b>
<hr>
Question 13.
<br>She -------------------- hard.<br></b>
<blockquote>
<input type="radio" name="q13" value="try">try<br>
<input type="radio" name="q13" value="trys">trys<br>
<input type="radio" name="q13" value="tries">tries<br>
</blockquote>
<p><b>
<hr>
Question 14.
<br>They -------------------- football every weekend.<br></b>
<blockquote>
<input type="radio" name="q14" value="play">play<br>
<input type="radio" name="q14" value="plays">plays<br>
<input type="radio" name="q14" value="playing">playing<br>
</blockquote>
<p><b>
<hr>
Question 15.
<br>The exam -------------------- two hours.<br></b>
<blockquote>
<input type="radio" name="q15" value="last">last<br>
<input type="radio" name="q15" value="lastes">lastes<br>
<input type="radio" name="q15" value="lasts">lasts<br>
</blockquote>
<p><b>


<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>

</form>
<p>

    <form method="post" name="Form" onsubmit="" action="">
</form>

</body>


<script>
    var numQues = 15;
var numChoi = 3;
var answers = new Array(15);
    answers[0] = "doesn't like";
    answers[1] = "don't come";
    answers[2] = "come";
    answers[3] = "don't";
    answers[4] = "doesn't make";
    answers[5] = "seem";
    answers[6] = "don't have";
    answers[7] = "doesn't have";
    answers[8] = "takes";
    answers[9] = "want";
    answers[10] = "comes";
    answers[11] = "doesn't know";
    answers[12] = "tries";
    answers[13] = "play";
    answers[14] = "lasts";
      function getScore(form) {

   var score = 0;
  var currElt;
  var currSelection;
  for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    answered=false; 
    for (j=0; j<numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        answered=true;
        if (currSelection.value == answers[i]) {
          score++;
          break;
        }
      }
    }
    if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
  }

  var scoreper = Math.round(score/numQues*100);
  form.percentage.value = scoreper + "%";
  form.mark.value=score;


}
    </script>
</html>

Answer 4

Just a few syntax errors -- plus you forgot to define what userInput[] actually is before comparing it

 < html >  < body >

 < script >
function returnScore() {
    alert("Your score is " + getScore() + "/10");
}
 <  / script >
 < form id = "form1" >

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

     < 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 >

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

     < script type = "text/javascript" >
         var userInput = [];
var answers = []
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;
     var form = document.getElementById('form1');

     userInput[8] = form1.question8.value;
     userInput[9] = form1.question9.value;


     for (var i = 0; i < numQuestions; i++) {

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

     }
     return score;
} 

<  / script >

<  / body >  <  / html >

Answer 5

 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>