Question

因此，我尝试做的是有一个大的空框，当用户键入特定字符串时会显示一个问题。然后，当用户回答问题时，先前的文本将变为下一个问题。老实说，我不知道从哪里开始。我知道这会很棘手，我为没有代码而道歉。非常感谢你的帮助。

Answer 1

这是一个使用jQuery构建的简单示例。您可以向questions对象添加您想要的任何问题，它会询问它们。这假设每个问题只有一个答案。

//define array of questions
var questions = [{
  "q": "What is 1 + 1",
  "a": "2"
}, {
  "q": "What is 3 + 1",
  "a": "4"
}];


//question function
askQuestion = function(index) {
  //set question text
  $('#question').text(questions[index].q);
  
  //set answer event listener
  $('#quiz').off().submit(function(e) {
    e.preventDefault();
    var answer = $('#answer').val();

    //check if answer is incorrect
    if (answer !== questions[index].a) {
      alert('try again!');
    } else {
      //rest form
      $('#answer').val('');
      //call next question if
      //current is not last
      if (questions.length > index + 1) {
        askQuestion(index + 1);
      } else{
        $('#quiz').hide();
        $('#finished').show();
      }
    }
  });
}

//start quiz
askQuestion(0);

//hide finished message
#finished{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- quiz -->
<form id='quiz'>
  <h1 id='question'><h1>
  <input id='answer' type='text'>
  <input type="submit">
</form>

<!-- text to be displayed after quiz -->
<h1 id='finished'>Great Job!<h1>

通过javascript显示和更改文本

1 个答案: