Question

我试图在我做的这个小测验中添加验证，但我似乎无法使其正常工作。这就是我想要的......如果没有选中单选按钮并且用户正在尝试继续下一个问题，则提示用户在继续下一个问题之前选择一个答案。我尝试在checkAnswer函数中添加一个If语句，但由于某种原因它只适用于第一个问题，并且在用户选择答案后不想进入下一个问题。 PS我是JavaScript的新手，所以请对我很轻松：） Codepen

这是我的代码。

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

您可以使用下面回答的标记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 - ＆gt;

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

Answer 2

您的条件只检查答案是否正确，然后写入控制台。无论提供（或省略）答案，您的代码都会将用户推进到下一个问题。

每次choice运行时都需要重置checkAnswer，并且需要添加检查有效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

您只检查checked，如果没有选中单选按钮，则需要return;。已更新codepen

使用javascript

3 个答案: