2

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
  • 3,185
  • 2
  • 31
  • 52

2 Answers2

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++;
    }
  }
}
pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • So do I just have this script once? And then call it when the user selects submit? Or do I have 45 scripts? – technogeek1995 Dec 18 '12 at 15:27
  • 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). – jezzipin Dec 18 '12 at 15:29
  • 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? – technogeek1995 Dec 18 '12 at 15:35
2

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/

jezzipin
  • 4,110
  • 14
  • 50
  • 94
  • I'm not sure why `===` wouldn't work here. What type conversion is done with `==` in this case? – pimvdb Dec 18 '12 at 17:02
  • http://stackoverflow.com/questions/359494/javascript-vs-does-it-matter-which-equal-operator-i-use – jezzipin Dec 18 '12 at 17:25
  • 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 – jezzipin Dec 18 '12 at 17:28
  • Is `.value` not a string? If so, what value is it that converts to the string `correct`? – pimvdb Dec 19 '12 at 06:17
  • 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". – jezzipin Dec 19 '12 at 09:20
  • Thank you so much! Everything seems to be functioning correctly! I appreciate it. – technogeek1995 Dec 19 '12 at 12:36
  • @AbramStamper you may wish to accept my solution as the correct answer as mine is in working order. – jezzipin Dec 19 '12 at 13:24
  • Ah, I apparently used `...ByClassName` instead of `...ByName`. Others rejected the edit already, but I've edited. Thanks! – pimvdb Dec 19 '12 at 17:06