Search code examples
javascripttextfieldradiobuttonlist

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


I am creating a test where the results are calculated and given a percentage. It displays the correct answers at the bottom. The results can then be emailed back to me. The below code worked.Excuse the layout, I'm very new to this.

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

Then I needed to add the text fields as below to enter test users details, which I have added to the submitable form. Now the script tries to calculate the score using the text fields aswell, which gives an incorrect result.Any idea how to alter the script to only look at the radio button inputs?

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

Solution

  • set type property radio and get them using

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