Javascript-Test mit Radio-Tasten und Array

Question

Ich lerne Javascript und ich habe Probleme herauszufinden, wie man einen Test mit reinem Javascript (keine jQuery) erstellen.

Ideale Lage:

1. Benutzer wird mit einer Frage vorgestellt und die Möglichkeit, Optionsfelder gegeben.
2. Benutzer wählt Radioknöpfe abhängig von der Frage
3. Am Senden werden die Auswahlmöglichkeiten mit einem Array mit Antworten verglichen.
4. Optionsfelder können nicht leer gelassen werden. Wenn eine Auswahl nicht der Antwort entspricht, warnen Sie den Benutzer.

Bisher habe ich verschachtelt for Schleifen versucht und getrennt if/else Aussagen vergebens.

Vielen Dank im Voraus!

var answers = [ 
 
\t 0, // Answer for question0 
 
    1, // Answer for question1 
 
    2 // Answer for question2 
 
]; 
 

 
var question = []; 
 

 
function grade(){ 
 
    for(var i = 0; i < 10; i++){ 
 
    question[i] = document.querySelector("input[name='question" + i + "']"); 
 
    if(question[i].checked){ 
 
     if(question[i].value = answers[i]){ 
 
     alert("question " + i + " is correct!"); 
 
     } 
 
     else{ 
 
     alert("Incorrect! Try again."); 
 
     } 
 
    } 
 
    else{ 
 
     alert("Select a valid choice!"); 
 
    } 
 
    } 
 
}

<form> 
 
    <input type="radio" name="question0" value="0">Option A<br> 
 
    <input type="radio" name="question0" value="1">Option B<br> 
 
    <input type="radio" name="question0" value="2">Option C 
 
    
 
    <hr> 
 
    
 
    <input type="radio" name="question1" value="0">Option A<br> 
 
    <input type="radio" name="question1" value="0">Option B<br> 
 
    <input type="radio" name="question1" value="0">Option C 
 
    
 
    <hr> 
 
    
 
    <input type="radio" name="question2" value="0">Option A<br> 
 
    <input type="radio" name="question2" value="1">Option B<br> 
 
    <input type="radio" name="question2" value="2">Option C<br> 
 
    <input type="radio" name="question2" value="3">Option D 
 
    
 
    <hr> 
 
    
 
    <input type="submit" onClick="grade();" value="Grade"> 
 
</form>

Answer 1

unten Code versuche ich hoffe, es wird Ihnen helfen.

Ich habe ein verstecktes Feld für vollständige Fragen hinzufügen.

HTML

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="question_form"> 
    <input type="radio" name="question0" value="0">Option A<br> 
    <input type="radio" name="question0" value="1">Option B<br> 
    <input type="radio" name="question0" value="2">Option C 

    <hr> 

    <input type="radio" name="question1" value="0">Option A<br> 
    <input type="radio" name="question1" value="1">Option B<br> 
    <input type="radio" name="question1" value="0">Option C 

    <hr> 

    <input type="radio" name="question2" value="0">Option A<br> 
    <input type="radio" name="question2" value="1">Option B<br> 
    <input type="radio" name="question2" value="2">Option C<br> 
    <input type="radio" name="question2" value="3">Option D 

    <hr> 
    <input type="hidden" id="hidden_total_questions" value="3" /> 
    <input type="submit" onClick="return grade();" value="Grade"> 
</form> 

Javascript

<script type="text/javascript"> 
    function grade(){ 
     var answers = [ 
      0, // Answer for question0 
      1, // Answer for question1 
      2 // Answer for question2 
     ]; 
     var flag_ = []; 

     var hidden_total_questions = document.getElementById('hidden_total_questions'); 

     for(i=0;i<hidden_total_questions.value;i++){ 
      var questions_ = document.getElementsByName('question'+i); 
      for(que in questions_){ 
       if(questions_[que].checked == true){ 
        if(answers[i]==questions_[que].value){ 
         flag_[i]=1; 
         break; 
        } 
        else{ 
         flag_[i]=2; 
         break; 
        } 
       } 
       else{ 
        flag_[i]=0; 
       } 
      } 
      if(flag_[i]==0){ 
       alert("Please select answer for "+i+" question."); 
      } 
      else if(flag_[i]==2){ 
       alert("Incorrect answer for "+i+" question."); 
      } 
      if(flag_[i]==1){ 
       alert("Correct answer for "+i+" question."); 
      } 
     } 

     return false; 
    } 
</script> 

Answer 2

finden Sie bearbeitet Arbeitscode. Es kann dir helfen.

var answers = [ 
 
    0, // Answer for question0 
 
    1, // Answer for question1 
 
    2 // Answer for question2 
 
]; 
 

 
var question = []; 
 

 
function grade(){ 
 

 
    for (var i = 0, ques = 3; i < ques; i++) { 
 
    var radios = document.getElementsByName('question'+ i +'[]'); 
 

 
    for (var j = 0, length = radios.length; j < length; j++) { 
 
     if (radios[j].checked) { 
 

 
      if(radios[j].value == answers[i]){ 
 
       alert("question " + i + " is correct!"); 
 
      } 
 
      else{ 
 
       alert("Incorrect! Try again."); 
 
      } 
 

 
      break; 
 
     } 
 
    } 
 
    } 
 

 
}

<form> 
 
    <input type="radio" name="question0[]" value="0">Option A<br> 
 
    <input type="radio" name="question0[]" value="1">Option B<br> 
 
    <input type="radio" name="question0[]" value="2">Option C 
 

 
    <hr> 
 

 
    <input type="radio" name="question1[]" value="0">Option A<br> 
 
    <input type="radio" name="question1[]" value="1">Option B<br> 
 
    <input type="radio" name="question1[]" value="2">Option C 
 

 
    <hr> 
 

 
    <input type="radio" name="question2[]" value="0">Option A<br> 
 
    <input type="radio" name="question2[]" value="1">Option B<br> 
 
    <input type="radio" name="question2[]" value="2">Option C<br> 
 
    <input type="radio" name="question2[]" value="3">Option D 
 

 
    <hr> 
 

 
    <input type="button" onClick="grade();" value="Grade"> 
 
</form>