带有单选按钮和数组的 Javascript 测试

Question

我正在学习 Javascript，但无法弄清楚如何使用纯 Javascript（非 jQuery）创建测试。

理想情况：

1. 向用户显示一个问题并提供单选按钮选项。
2. 用户根据问题选择单选按钮
3. 提交时，会将选项与包含答案的数组进行比较。
4. 单选按钮不能留空。如果选择不等于答案，则提醒用户。

到目前为止，我已经尝试过嵌套 for 循环和分隔 if/else 语句，但无济于事。

提前致谢！

var answers = [
	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

试试下面的代码，希望对你有帮助。

我添加了一个隐藏字段来获取总问题。

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

请找到已编辑的工作代码。它可能会帮助你。

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>