Joey van Breukelen Joey van Breukelen - 1 year ago 68
jQuery Question

Grading a test - Loop checking radio input values (JS)

I am working on an online test where you get your output directly. I get stuck at checking the values of the radio input with a loop. Why gives the checkFields function output undefined?

Javascript Code:

<script type="text/javascript">

//click button

//check if all answers are given
for (i = 1; i <= 10; i++) {
if (checkFields([i].toString())) {

//calculate total score
if ($("input[name=[i]]").val() == aq[i]) {score = score + 1};

else{alert("Please answer all questions");


//return level of English

function checkFields(Q){
//Set score 0
var score = 0;
var aq1 = "a1";
var aq2 = "a1";
var aq3 = "a3";
var aq4 = "a2";
var aq5 = "a1";
var aq6 = "a2";
var aq7 = "a3";
var aq8 = "a3";
var aq9 = "a1";
var aq10 = "a1";

HTML code:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<!-- liberaries -->
<script src="jquery-3.1.1.js"></script>
<!-- Form -->
<form id="testEnglish">
<!-- Q1 -->
<p class="question">1. Can I park here?</p>
<input type="radio" id="1" name="1" value="a1">a1<br>
<input type="radio" id="1" name="1" value="a2">a2<br>
<input type="radio" id="1" name="1" value="a3">a3
<!-- Q2 -->
<p class="question">2. Can I park here?</p>
<input type="radio" name="2" value="a1">a1<br>
<input type="radio" name="2" value="a2">a2<br>
<input type="radio" name="2" value="a3">a3
<!-- Q3 -->
<p class="question">3. Can I park here?</p>
<input type="radio" name="3" value="a1">a1<br>
<input type="radio" name="3" value="a2">a2<br>
<input type="radio" name="3" value="a3">a3
<!-- Q4 -->
<p class="question">4. Can I park here?</p>
<input type="radio" name="4" value="a1">a1<br>
<input type="radio" name="4" value="a2">a2<br>
<input type="radio" name="4" value="a3">a3
<!-- Q5 -->
<p class="question">5. Can I park here?</p>
<input type="radio" name="5" value="a1">a1<br>
<input type="radio" name="5" value="a2">a2<br>
<input type="radio" name="5" value="a3">a3
<!-- Q6 -->
<p class="question">6. Can I park here?</p>
<input type="radio" name="6" value="a1">a1<br>
<input type="radio" name="6" value="a2">a2<br>
<input type="radio" name="6" value="a3">a3
<!-- Q7 -->
<p class="question">7. Can I park here?</p>
<input type="radio" name="7" value="a1">a1<br>
<input type="radio" name="7" value="a2">a2<br>
<input type="radio" name="7" value="a3">a3
<!-- Q8 -->
<p class="question">8. Can I park here?</p>
<input type="radio" name="8" value="a1">a1<br>
<input type="radio" name="8" value="a2">a2<br>
<input type="radio" name="8" value="a3">a3
<!-- Q9 -->
<p class="question">9. Can I park here?</p>
<input type="radio" name="9" value="a1">a1<br>
<input type="radio" name="9" value="a2">a2<br>
<input type="radio" name="9" value="a3">a3
<!-- Q10 -->
<p class="question">10. Can I park here?</p>
<input type="radio" name="10" value="a1">a1<br>
<input type="radio" name="10" value="a2">a2<br>
<input type="radio" name="10" value="a3">a3

<!-- Submit -->
<button id="submitTest">Submit Test!</button>

This code might not be the way to do it. I tried various ways but did not manage.

Answer Source

I tweaked your code to make it more compact and effecient

Here's a codepen

 $(document).ready(function() {
   //Set score 0
   var score = 0;
   aq1 = "a1";
   aq2 = "a1";
   aq3 = "a3";
   aq4 = "a2";
   aq5 = "a1";
   aq6 = "a2";
   aq7 = "a3";
   aq8 = "a3";
   aq9 = "a1";
   aq10 = "a1";

   $("#submitTest").click(function() {
     score = 0
     for (i = 1; i <= 10; i++) {
       tAnswer = $("input:radio[name ='" + i + "']:checked").val()
       cAnswer = window["aq"+i]
       if (!tAnswer) {
         alert("Please answer all questions");
       } else if (tAnswer == cAnswer) {
         console.log("#"+i+": correct")
       } else if (tAnswer != cAnswer) {
         console.log("#"+i+" incorrect")
    alert("Your score is "+ score +"/10");

tAnswer is the answer and cAnswer is the correct answer, you can also check if(!cAnswer) then you didn't define the correct answer.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download