0

我有一系列乘法问题。我想通过每一个，显示问题，输入答案，并提供反馈。如果这是正确的回答，那么我想继续回答数组中的下一个问题。我意识到for-loop这里可能是错误的，但这是我能想到的。下面的代码不运行。我感谢所有帮助。提前致谢！

pracOnly = ['4*2=','3*3=','5*5=']
var pracAnswer = 0;


for (var i = 0; i < pracOnly.length; i++) {
  pracAnswer = pracOnly[i][0] * pracOnly[i][2];
  document.getElementById("prac").innerHTML = pracOnly[i];
  var userPracAns = document.getElementById("p").value;
  if(i == 0) {break;};
  if (userPracAns == pracAnswer) {
    alert('Correct!');
    i = i + 1;
  } else {
    alert('Not correct')
  }
};
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title>Multiplication</title>
  </head>
  <h1>Test</h1>
  <body>
  </section>

  <section>
  <span id='prac'></span>
  <input type="number" id='p'>
  <button type="button" onClick="practiceAnswer()">Answer</button>

  </section>
  </body>
  <script src="main.js" charset="utf-8"></script>
</html>

4

1 回答 1

4

首先，确保您声明pracOnly. 不要使用未声明的变量。还要考虑在 javascript 代码中添加事件侦听器，而不是onclick在 HTML 中使用属性。

就您的问题中所述的问题而言，您不需要循环。您只需要通过跟踪当前显示的问题的索引来一次显示一个问题。

一旦用户点击Answer按钮，检查答案是否正确。如果是，请清除输入并显示下一个问题。否则向用户显示提示答案不正确的警报。

在用户回答完所有问题后，您可能想通知用户他们已经回答了所有问题。

var pracOnly = ['4*2=', '3*3=', '5*5='];
var pracAnswer = 0;
var index = 0;

var input = document.getElementById('p');
var span = document.getElementById('prac');
var answerBtn = document.querySelector('button');

answerBtn.addEventListener('click', function practiceAnswer() {
  if (input.value == pracAnswer) {
    alert('Correct!');
    input.value = '';
    showNextQuestion();
  } else {
    alert('Not correct');
  }
});

function showNextQuestion() {
  if (index == pracOnly.length) {
    return endQuiz();
  };

  pracAnswer = pracOnly[index][0] * pracOnly[index][2];
  span.innerHTML = pracOnly[index];
  index++;
}

function endQuiz() {
  span.innerHTML = 'Quiz ended.';
  input.style.display = 'none';
  answerBtn.style.display = 'none';
}

showNextQuestion();
<section>
  <span id="prac"></span>
  <input type="number" id="p" />
  <button type="button">Answer</button>
</section>

使用生成器函数的替代解决方案

或者，您可以使用generator函数并使用循环来迭代数组并一次显示一个问题。这是有效的，因为即使使用循环，生成器函数的执行也可以暂停。

var pracOnly = ['4*2=', '3*3=', '5*5='];
var pracAnswer = 0;

var input = document.getElementById('p');
var span = document.getElementById('prac');
var answerBtn = document.querySelector('button');

function* showNextQuestion() {
  for (const question of pracOnly) {
    pracAnswer = question[0] * question[2];
    span.innerHTML = question;
    yield question;
  }

  endQuiz();
}

var questionGenerator = showNextQuestion();
questionGenerator.next();

answerBtn.addEventListener('click', function practiceAnswer() {
  if (input.value == pracAnswer) {
    alert('Correct!');
    input.value = '';
    questionGenerator.next();
  } else {
    alert('Not correct');
  }
});

function endQuiz() {
  span.innerHTML = 'Quiz ended.';
  input.style.display = 'none';
  answerBtn.style.display = 'none';
}
<section>
  <span id="prac"></span>
  <input type="number" id="p" />
  <button type="button">Answer</button>
</section>

于 2020-09-21T14:05:41.290 回答