测验 - 计算单选按钮值

Question

我正在尝试为西班牙语课程创建测验。我对 JavaScript 几乎没有经验，但对 html 和 CSS 相当精通。我有一个问题，然后是三个带有答案的单选按钮。有两个错误答案和一个正确答案。我总共有 45 个问题。

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

我想使用一些基本的 Javascript 来计算所有“正确”的单选按钮值并输出到用户单击提交后显示的新页面或警报框。

我在研究中发现了这一点。在我的谷歌搜索中，我无法找到计算“正确”值的代码 sn-p。上面的链接是我得到的最接近的。我附上了我根据其他帖子的建议更改的 JavaScript 以适应我的情况。

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);
        }
    }
}

非常感谢任何帮助，因为我正处于时间紧迫的状态！谢谢！

Answer 1

这应该是让它与警报框一起工作所需的代码：

        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 在检查不允许类型转换并因此失败的“正确”字符串时使用了 === 运算符。他还使用了 getElementsByClassName，但元素没有应用类，所以这是不正确的。

工作版本可以在下面的小提琴中找到。如您所见，表单的 onsubmit 已设置为“return false”以阻止表单发布。

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

Answer 2

您可以遍历每个单选组，然后遍历每个单选按钮以检查是否选中了正确的单选按钮。

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++;
    }
  }
}