Question

我正在构建一个简单的琐事应用程序，到目前为止，它很不错，但是在进行下一个问题时遇到了问题。奇怪的是，当用户正确回答问题并按下“提交”按钮时，它确实会增加到下一个问题，但是如果他们再次正确回答，它什么也不会做。

这是我的代码：

  <div class="app">
      <h2 id="question"></h2>
          <button class="options" type="button" value="val"></button>
          <button class="options" type="button" value="val"></button>
          <button class="options" type="button" value="val"></button>
          <button class="options" type="button" value="val"></button>
        </br>
            <button id="submit" type="button" name="button">Submit</button>
            <button id="back" type="button" name="button">Back</button>
    </div>



var data = {
  currentQuestion: 0,
  questions:[
    {
      answers:[1,3,5,6],
      question:'how much is 3+3',
      correctAnswer:6
     },
    {
      answers:[1,3,5,2],
      question:'how much is 1+1',
      currectAnswer:2
    },
     {
       answers:[1,8,5,6],
       question:'how much is 4+4',
       correctAnswer:8
     },
     {
       answers:[1,8,10,6],
       question:'how much is 4+6',
       correctAnswer:8
     }
  ]
}


var options = document.querySelectorAll('.options');
var question = document.querySelector('#question');
var backBtn = document.querySelector('#back');
var submitBtn = document.querySelector('#submit');





function init() {
  newQuestion();
  optionClick();
  evaluate();
  back();

}


function newQuestion() {
  question.textContent = data.questions[data.currentQuestion].question;
  for(var i = 0; i< data.questions.length; i++) {
    options[i].textContent = data.questions[data.currentQuestion].answers[i]
  }
}



function optionClick() {
    options.forEach(function(elem) {
      elem.addEventListener('click', function() {
        this.classList.toggle('picked')
      })
    })

}


function evaluate() {
  submitBtn.addEventListener('click', function() {
    for(i = 0; i < options.length; i++) {
      if(options[i].classList.contains('picked') && options[i].textContent == data.questions[data.currentQuestion].correctAnswer && data.currentQuestion <= 6){
        options[i].classList.remove('picked')
        data.currentQuestion++
        newQuestion();
      }
    }
  })
}

Answer 1

正如评论中已经回答的那样，问题是错字currectAnswer而不是correctAnswer。现在还没有定论，但我也想提出其他改进建议。

我要做的第一件事不是使用一组按钮，而是使用一组单选按钮。您可以根据需要将它们设置为看起来像按钮的样式，并通过这样做获得免费功能。单选按钮仅强制选择一个答案，而无需检查代码中的多个答案。

与其使用命名函数（在调用时将匿名函数附加为事件处理程序），不如创建一个命名函数，然后将它们直接附加到元素上。

将其拉在一起看起来像这样：

'use strict';
var data = {
  currentQuestion: 0,
  questions:[
    {
      answers:[1,3,5,6],
      question:'how much is 3+3',
      correctAnswer:6
     },
    {
      answers:[1,3,5,2],
      question:'how much is 1+1',
      correctAnswer:2
    },
     {
       answers:[1,8,5,6],
       question:'how much is 4+4',
       correctAnswer:8
     },
     {
       answers:[1,8,10,6],
       question:'how much is 4+6',
       correctAnswer:10
     }
  ]
}


var options = document.querySelectorAll('#options input');
var question = document.querySelector('#question');
var backBtn = document.querySelector('#back');
var submitBtn = document.querySelector('#submit');

function nextQuestion () {
  if (data.currentQuestion < data.questions.length - 1) {
    data.currentQuestion += 1;
    displayQuestion();
  } else {
    data.currentQuestion = data.questions.length;
    submitBtn.removeEventListener('click', evaluate);
    backBtn.removeEventListener('click', prevQuestion);
    question.textContent = "Done!"
  }
}

function prevQuestion () {
  if (data.currentQuestion > 0) {
    data.currentQuestion -= 1;
    displayQuestion();
  }
}

function displayQuestion () {
  question.textContent = data.questions[data.currentQuestion].question;

  options.forEach(function (option, index) {
    let answer = data.questions[data.currentQuestion].answers[index];
    // set the value of the radio button
    option.value = answer;
    // set the text of the label next to it
    option.nextElementSibling.textContent = answer;
    // reset the selected value
    option.checked = false
  });
}

function evaluate () {
  let correctAnswer = data.questions[data.currentQuestion].correctAnswer;
  // get the value of the currently selected answer
  let selectedAnswer = document.querySelector('#options :checked');

  if(selectedAnswer && selectedAnswer.value == correctAnswer){
    nextQuestion();
  }
}

submitBtn.addEventListener('click', evaluate);
backBtn.addEventListener('click', prevQuestion);
displayQuestion();

  fieldset {
    border: none;
  }

  /* highlight the label immediately after the selected radio button */
  #options input:checked + label {
    border: 3px red solid;
  }

  /* hide the actual radio button 
     that the labels are controling. */
  #options input {
    display: none;
  }

  /* make the label look like a button */
  #options label {
    padding: .5em;
    background: #eee;
    border: outset 1px #eee;
  }

<div class="app">
  <h2 id="question"></h2>
  <fieldset id="options">
    <input id="answer1" type="radio" name="answers"> <label for="answer1"></label>
    <input id="answer2" type="radio" name="answers"> <label for="answer2"></label>
    <input id="answer3" type="radio" name="answers"> <label for="answer3"></label>
    <input id="answer4" type="radio" name="answers"> <label for="answer4"></label>
  </fieldset>

  <button id="submit" type="button" name="button">Submit</button>
  <button id="back" type="button" name="button">Back</button>
</div>

尝试设置增量控制器

1 个答案: