使用javascript验证单选按钮测验

Question

I'm trying to add validation to this small quiz I made but I can't seem to make it work correctly. This is what I want... If none of the radio buttons are checked and user is trying to proceed to the next question then alert the user to choose an answer before proceeding to the next question. I tried adding an If statement to checkAnswer function but for some reason it only works for the first question and doesn't want to go to the next question after user has chosen an answer. PS I'm new to JavaScript so please be easy on me :) Codepen

Here is my code.

HTML

<h1 id="test_status"></h1>
<div id="test"></div>

JavaScript

var test = document.getElementById('test');
var test_status = document.getElementById('test_status');
var pos = 0;
var correct = 0;
var question;
var choices;
var choice;
var chA, chB, chC, chD;

var questions = [
  ['What is 1+1?', '4', '7', '2', '9', 'C'],
  ['What is 1+2?', '2', '3', '4', '6', 'B'],
  ['What is 1+3?', '4', '2', '6', '7', 'A'],
  ['What is 1+4?', '9', '7', '2', '5', 'D']
];

function renderQuestion(){
  test_status.innerHTML = 'Question ' + (pos+1) + ' of ' + questions.length;

  if(pos >= questions.length){
     test_status.innerHTML = 'Test Completed';
     test.innerHTML = '<h2>You got ' + correct + ' out of ' + questions.length + ' questions correct </h2>';
    return false;
   }

  question = questions[pos][0];
  chA = questions[pos][1];
  chB = questions[pos][2];
  chC = questions[pos][3];
  chD = questions[pos][4];

  test.innerHTML = '<h2>' + question + '</h2>';
  test.innerHTML += '<input type="radio" name="choices" value="A">' + chA + '<br>';
  test.innerHTML += '<input type="radio" name="choices" value="B">' + chB + '<br>';
  test.innerHTML += '<input type="radio" name="choices" value="C">' + chC + '<br>';
  test.innerHTML += '<input type="radio" name="choices" value="D">' + chD + '<br>';
  test.innerHTML += '<button onclick="checkAnswer()"> Check Answer </button>';
}

function checkAnswer(){
  choices = document.getElementsByName('choices');
  for(var i = 0; i < choices.length; i++){
    if(choices[i].checked){
       choice = choices[i].value;
    }
  }

  if(choice === questions[pos][5]){
     correct++;  
    console.log(correct);
  }

  pos++;
  renderQuestion();
}

window.addEventListener('load', renderQuestion, false);

Answer 1

You can check if user has selected a choice using a flag answered like below, codepen

var test = document.getElementById('test');
    var test_status = document.getElementById('test_status');
    var pos = 0;
    var correct = 0;
    var question;
    var choices;
    var choice;
    var chA, chB, chC, chD;


    var questions = [
      ['What is 1+1?', '4', '7', '2', '9', 'C'],
      ['What is 1+2?', '2', '3', '4', '6', 'B'],
      ['What is 1+3?', '4', '2', '6', '7', 'A'],
      ['What is 1+4?', '9', '7', '2', '5', 'D']
    ];

    function renderQuestion(){
      document.getElementById('error').style.display = 'none';
      test_status.innerHTML = 'Question ' + (pos+1) + ' of ' + questions.length;

      if(pos >= questions.length){
         test_status.innerHTML = 'Test Completed';
         test.innerHTML = '<h2>You got ' + correct + ' out of ' + questions.length + ' questions correct </h2>';
        return false;
       }

      question = questions[pos][0];
      chA = questions[pos][1];
      chB = questions[pos][2];
      chC = questions[pos][3];
      chD = questions[pos][4];

      test.innerHTML = '<h2>' + question + '</h2>';
      test.innerHTML += '<input type="radio" name="choices" value="A">' + chA + '<br>';
      test.innerHTML += '<input type="radio" name="choices" value="B">' + chB + '<br>';
      test.innerHTML += '<input type="radio" name="choices" value="C">' + chC + '<br>';
      test.innerHTML += '<input type="radio" name="choices" value="D">' + chD + '<br>';
      test.innerHTML += '<button onclick="checkAnswer()"> Check Answer </button>';
    }

    function checkAnswer(){
      var answered = false;
      choices = document.getElementsByName('choices');
      for(var i = 0; i < choices.length; i++){
        if(choices[i].checked){
           answered = true;
           choice = choices[i].value;
        }
      }
      if(!answered) {
        document.getElementById('error').style.display = 'block';

    }
      else {
        if(choice === questions[pos][5]){
         correct++;  
        console.log(correct);
      }

      pos++;
      renderQuestion();
      }
      }


    window.addEventListener('load', renderQuestion, false);

html -->

<h1 id="test_status"></h1>
<div id="test"></div>
<p id="error">Please select an ans to continue</p>

Answer 2

your condition only checks to see if the answer is correct, then writes to the console. your code that advances the user to the next question runs regardless of the answer provided (or omitted).

you need to reset choice each time checkAnswer runs, and you need to add a condition that checks for a valid choice

function checkAnswer(){
  choice = null;
  choices = document.getElementsByName('choices');
  for(var i = 0; i < choices.length; i++){
    if(choices[i].checked){
       choice = choices[i].value;
    }
  }

  if( !choice ){
    return console.error('select an answer.');
  }


  if(choice === questions[pos][5]){
     correct++;  
    console.log(correct);
  }

  pos++;
  renderQuestion();
}

Answer 3

you are checking only checked , you need to return; if no radio button is checked. updated codepen