Quiz - Counts Radio Button Values

19,120

Solution 1

This should be the code you require to get it working with an alert box:

        function handleClick()
          {         
        var amountCorrect = 0;          
        for(var i = 1; i <= 45; i++) {
          var radios = document.getElementsByName('group'+i);
          for(var j = 0; j < radios.length; j++) {
            var radio = radios[j];
            if(radio.value == "correct" && radio.checked) {
              amountCorrect++;
            }
          }
         }                   
            alert("Correct Responses: " + amountCorrect);
          }
        <form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">

        <li><div class="question">¿Quién detestan la nueva casa?</div></li>
        <input id="answer" type="radio" name="group1" value="wrong"> Josh<br>
        <input id="answer" type="radio" name="group1" value="wrong"> Amanda<br>
        <input id="answer" type="radio" name="group1" value="correct"> Josh y Amanda<hr>

        <li><div class="question">¿Quién es señor Dawes?</div></li>
        <input id="answer" type="radio" name="group2" value="wrong">Un familia amigo<br>
        <input id="answer" type="radio" name="group2" value="wrong">Un gato<br>
        <input id="answer" type="radio" name="group2" value="correct">Un amable joven de la agencia de bienes raíces<hr>

        <li><div class="question">¿Quién qué sus buscan?</div></li>
        <input id="answer" type="radio" name="group3" value="wrong">Josh<br>
        <input id="answer" type="radio" name="group3" value="wrong"> Petey<br>
        <input id="answer" type="radio" name="group3" value="correct" >Josh y Petey<hr>

        <button class="submit" onclick="return handleClick();" type="submit">Submit</button>
        
        </form>

@pimvdb had used the === operator when checking for the "correct" string which does not allow type conversion and was therefore failing. He also used getElementsByClassName but the elements do not have a class applied to them so this was incorrect.

The working version can be found in the fiddle below. As you can see the onsubmit of the form has been set to "return false" to stop the form from posting.

http://jsfiddle.net/g45nG/1/

Solution 2

You can loop over each radio group, then loop over each radio button to check whether the correct one is checked.

var amountCorrect = 0;
for(var i = 1; i <= 45; i++) {
  var radios = document.getElementsByName("group" + i);
  for(var j = 0; j < radios.length; j++) {
    var radio = radios[j];
    if(radio.value === "correct" && radio.checked) {
      amountCorrect++;
    }
  }
}
Share:
19,120
technogeek1995
Author by

technogeek1995

Updated on July 15, 2022

Comments

  • technogeek1995
    technogeek1995 over 1 year

    I'm trying to create a Quiz for a Spanish class. I have little experience with JavaScript, but am fairly proficient with html and CSS. I have a question and followed by three radio buttons with answers. There are two incorrect answers and a correct answer. I have 45 questions total.

    <form name="quiz" method="post" name="buttons" id="form" onsubmit="return totalVal()">
    
    <li><div class="question">¿Quién detestan la nueva casa?</div></li>
    <input id="answer" type="radio" name="group1" value="wrong"> Josh<br>
    <input id="answer" type="radio" name="group1" value="wrong"> Amanda<br>
    <input id="answer" type="radio" name="group1" value="correct"> Josh y Amanda<hr>
    
    <li><div class="question">¿Quién es señor Dawes?</div></li>
    <input id="answer" type="radio" name="group2" value="wrong">Un familia amigo<br>
    <input id="answer" type="radio" name="group2" value="wrong">Un gato<br>
    <input id="answer" type="radio" name="group2" value="correct">Un amable joven de la agencia de bienes raíces<hr>
    
    <li><div class="question">¿Quién qué sus buscan?</div></li>
    <input id="answer" type="radio" name="group3" value="wrong">Josh<br>
    <input id="answer" type="radio" name="group3" value="wrong"> Petey<br>
    <input id="answer" type="radio" name="group3" value="correct" >Josh y Petey<hr>
    
    <button class="submit" onclick="showTotalvalue();" type="submit">Submit</button></div>
    

    I want to use some basic Javascript to count all the "correct" radio button values and output to a new page or alert box that displays after the user clicks submit.

    I found this in my research. In my googling, I haven't been able to find a snippet of code that counts the "correct" values. The link above is the closest I've gotten. I attached the JavaScript that I changed to fit my situation from the suggestion on the other post.

    totalVal = 0;
    
    // calculate the total number of corrects clicked
    
    for (y = 0; y = incorrectOfQuestion; y++) {
        var questionNo = document.getElementsByName("questions" + y);
        for (i = 0; i < questionNo.length; i++) {
            if (document.myform.questions[i].checked == true) {
                totalVal = totalVal + parseInt(document.myform.questions[i].value, 45);
            }
        }
    }
    

    Any assistance is greatly appreciated as I am in a time crunch! Thank you!

  • technogeek1995
    technogeek1995 almost 11 years
    So do I just have this script once? And then call it when the user selects submit? Or do I have 45 scripts?
  • jezzipin
    jezzipin almost 11 years
    This will handle all of the radio buttons as long as you keep the conventions of your current code (e.g. 45 separate radio button groups and a value of correct on one of the radio buttons in the group).
  • technogeek1995
    technogeek1995 almost 11 years
    I have separate groups for the radio buttons and the values are all specified. How do I call up the script when the submit button is selected? I think my submit button and form declarations double calling up the script. I basically want to either have a a separate page load with the correct that the user selected or an alert box pop up? How do I give the user feedback on their answers?
  • pimvdb
    pimvdb almost 11 years
    I'm not sure why === wouldn't work here. What type conversion is done with == in this case?
  • jezzipin
    jezzipin almost 11 years
  • jezzipin
    jezzipin almost 11 years
    That should answer your question. In the case above, one is of type string and the other is obviously not so it is best to use == rather than === as this will always fail unless you convert the value of radio.value
  • pimvdb
    pimvdb almost 11 years
    Is .value not a string? If so, what value is it that converts to the string correct?
  • jezzipin
    jezzipin almost 11 years
    I think in this case it's returning it as an object from the array and not a string. To make your code work you would first have to change .getElementsByClassName to .getElementsByName and change the radio.value === "correct" to radio.value.toString() === "correct".
  • technogeek1995
    technogeek1995 almost 11 years
    Thank you so much! Everything seems to be functioning correctly! I appreciate it.
  • jezzipin
    jezzipin almost 11 years
    @AbramStamper you may wish to accept my solution as the correct answer as mine is in working order.
  • pimvdb
    pimvdb almost 11 years
    Ah, I apparently used ...ByClassName instead of ...ByName. Others rejected the edit already, but I've edited. Thanks!