Java 用于计算单选按钮测验结果并忽略文本字段的脚本

Question

我正在创建一个测试，其中计算结果并给出一个百分比。它在底部显示正确答案。结果可以通过电子邮件发回给我。下面的代码 worked.Excuse 布局，我对此很陌生。

<html><head><title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="testpageCSS.css" rel="stylesheet" type="text/css">

<script language="JavaScript">
<!--

var numQues = 4;
var numChoi = 4;

var answers = new Array(4);
answers[0] = "33v 1A";
answers[1] = "Climbs from between 8 -12v up to battery Voltage";
answers[2] = "Main power relay stuck open";
answers[3] = "2 Meters";

function getScore(form) {
var score = 0;
var currElt;
var currSelection;

for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
  currSelection = form.elements[currElt + j];
  if (currSelection.checked) {
    if (currSelection.value == answers[i]) {
      score++;
      break;
    }
  }
}
}

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

var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;

}

// -->
</script>

</head>

<body>

<div id="centerTOP">

<h1>  HCA001</h1>

</div>



<div id="center">



<form name="quiz" method="post" action="mailto:myemail"enctype="text/plain">    

<h2>First name:</h2>
<input type="text" name="Firstname" value="" style="color: #000000;"  
background-color: #d9d9d9;">
<h2>Last name:</h2>

<input type="text" name="Lastname" value="" style="color: #000000;    background-color: #d9d9d9;">
<h2>Trade Partner:</h2>

<input type="text" name="Trade Partner" value="" style="color: #000000; background-color: #d9d9d9;">
<br><br><br>




<p>

<h2>1. What is the output Voltage and Current of the  Charger?</h2><br>
<input type="radio" name="q1" value="24v 1A">24v 1A<br>
<input type="radio" name="q1" value="33v 5A">33v 5A<br>
<input type="radio" name="q1" value="24v 5A">24v 5A<br>
<input type="radio" name="q1" value="33v 1A">33v 1A<br><br><br>
<p>

<h2>2. If you were checking the communications voltage for any of the   powered options (Auto Hinge, Powered Footplate or Powered Swivel)what would you expect to see?</h2><br>
<input type="radio" name="q2" value="Climbs from between 8 -12v up to battery Voltage">Climbs from between 8 -12v up to battery Voltage<br>
<input type="radio" name="q2" value="Climbs from 4v to Battery Voltage">Climbs from 4v to Battery Voltage<br>
<input type="radio" name="q2" value="24v">24v<br>
<input type="radio" name="q2" value="33v">33v<br><br><br>
<p>

<h2>3. What does it mean if fault code 'E' is displayed on the diagnostic display?</h2><br>
<input type="radio" name="q3" value="Main power relay stuck open">Main power relay stuck open<br>
<input type="radio" name="q3" value="Main power relay welded closed">Main power relay welded closed<br>
<input type="radio" name="q3" value="The main power relay closed early">The main power relay closed early<br>
<input type="radio" name="q3" value="Error">Error<br><br><br>
<p>

<h2>4. What is the minimum length of a Slidetrack rail?</h2><br>
<input type="radio" name="q4" value="2 Meters">2 Meters<br>
<input type="radio" name="q4" value="2.1 Meters">2.1 Meters<br>
<input type="radio" name="q4" value="2.2 Meters">2.2 Meters<br>
<input type="radio" name="q4" value="2.5 Meters">2.5 Meters<br><br><br>
<p>

<input type="button" value="Get score" onClick="getScore(this.form)"><br>     <br><br>

<font face="arial" color="#5f5f5f">Score = <input type=text size=15 name="percentage" style="color: #000000; background-color: #d9d9d9;"><br><br>
Correct answers:</font><br>
<textarea name="solutions" wrap="virtual" rows="10" cols="40" style="color: #000000; background-color: #d9d9d9;"></textarea>
<br><br>

<input type="submit" value="Send Form">

<input type="reset" value="Clear Form">


</form>

</div>

</body></html>

然后我需要添加如下文本字段以输入测试用户详细信息，我已将其添加到可提交表单中。现在脚本也尝试使用文本字段来计算分数，这给出了一个不正确的 result.Any 如何更改脚本以仅查看单选按钮输入的想法？

<h2>First name:</h2>
<input type="text" name="Firstname" value="" style="color: #000000; background-color: #d9d9d9;">

<h2>Last name:</h2>

<input type="text" name="Lastname" value="" style="color: #000000; background-color: #d9d9d9;">
<h2>Trade Partner:</h2>

<input type="text" name="Trade Partner" value="" style="color: #000000; background-color: #d9d9d9;">

Answer 1

设置类型属性收音机并使用

获取它们

var inputs = form1.elements;
 for (var i = 0; i < inputs.length; ++i) {
        if (inputs[i].type == 'radio') {

        }
    }

Answer 2

您可以将 class 分配给应该评分的元素，然后迭代这些元素。

这是一个演示：https://jsfiddle.net/zephyr_hex/1o9u19be/

JS

var myBtn = document.getElementById('getScore');
myBtn.addEventListener('click', function() {
  var elems = document.getElementsByClassName('quiz');
  for (var i = 0; i < elems.length; i++) {
    if (elems[i].checked) {
      console.log(elems[i].value);
      //add your scoring logic here.  elems[i].value is the selected value
    }
  }
});

HTML

<form name="quiz" method="post" action="mailto:myemail" enctype="text/plain">
  <h2>First name:</h2>
  <input type="text" name="Firstname" value="" style="color: #000000; background-color: #d9d9d9;">
  <h2>Last name:</h2>
  <input type="text" name="Lastname" value="" style="color: #000000;    background-color: #d9d9d9;">
  <h2>Trade Partner:</h2>
  <input type="text" name="Trade Partner" value="" style="color: #000000; background-color: #d9d9d9;">
  <br>
  <br>
  <br>
  <p>
    <h2>1. What is the output Voltage and Current of the  Charger?</h2>
    <br>
    <input class="quiz" type="radio" name="q1" value="24v 1A">24v 1A
    <br>
    <input class="quiz" type="radio" name="q1" value="33v 5A">33v 5A
    <br>
    <input class="quiz" type="radio" name="q1" value="24v 5A">24v 5A
    <br>
    <input class="quiz" type="radio" name="q1" value="33v 1A">33v 1A
    <br>
    <br>
    <br>
    <p>

      <h2>2. If you were checking the communications voltage for any of the   powered options (Auto Hinge, Powered Footplate or Powered Swivel)what would you expect to see?</h2>
      <br>
      <input class="quiz" type="radio" name="q2" value="Climbs from between 8 -12v up to battery Voltage">Climbs from between 8 -12v up to battery Voltage
      <br>
      <input class="quiz" type="radio" name="q2" value="Climbs from 4v to Battery Voltage">Climbs from 4v to Battery Voltage
      <br>
      <input class="quiz" type="radio" name="q2" value="24v">24v
      <br>
      <input class="quiz" type="radio" name="q2" value="33v">33v
      <br>
      <br>
      <br>
      <p>
        <h2>3. What does it mean if fault code 'E' is displayed on the diagnostic display?</h2>
        <br>
        <input class="quiz" type="radio" name="q3" value="Main power relay stuck open">Main power relay stuck open
        <br>
        <input class="quiz" type="radio" name="q3" value="Main power relay welded closed">Main power relay welded closed
        <br>
        <input class="quiz" type="radio" name="q3" value="The main power relay closed early">The main power relay closed early
        <br>
        <input class="quiz" type="radio" name="q3" value="Error">Error
        <br>
        <br>
        <br>
        <p>

          <h2>4. What is the minimum length of a Slidetrack rail?</h2>
          <br>
          <input class="quiz" type="radio" name="q4" value="2 Meters">2 Meters
          <br>
          <input class="quiz" class="quiz" type="radio" name="q4" value="2.1 Meters">2.1 Meters
          <br>
          <input class="quiz" type="radio" name="q4" value="2.2 Meters">2.2 Meters
          <br>
          <input class="quiz" type="radio" name="q4" value="2.5 Meters">2.5 Meters
          <br>
          <br>
          <br>
          <p>

            <input id="getScore" type="button" value="Get score">
            <br>
            <br>
            <br>

            <font face="arial" color="#5f5f5f">Score = <input type=text size=15 name="percentage" style="color: #000000; background-color: #d9d9d9;"><br><br>
Correct answers:</font>
            <br>
            <textarea name="solutions" wrap="virtual" rows="10" cols="40" style="color: #000000; background-color: #d9d9d9;"></textarea>
            <br>
            <br>

            <input type="submit" value="Send Form">
            <input type="reset" value="Clear Form">
</form>

Java 用于计算单选按钮测验结果并忽略文本字段的脚本

Java script to calculate quiz result from radio buttons and ignore text fields

javascript

textfield

radiobuttonlist