Joey van Breukelen Joey van Breukelen - 1 year ago 60
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">
$(document).ready(function(){

//click button
$("#submitTest").click(function(){

//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");
break}};

console.log(score);

//return level of English

}
)
//setFunction
function checkFields(Q){
console.log(
$("[name='[Q]']:checked").val())
}
//Set score 0
var score = 0;
//Answers
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";
}
)
</script>


HTML code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- liberaries -->
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<!-- 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

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


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;
   //Answers
   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");
         break;
       } else if (tAnswer == cAnswer) {
         console.log("#"+i+": correct")
         score++
       } 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