Question

我目前正在学习数学并思考一个想法，具体取决于是否可能我想添加100个数学方程式，但是只有一个问题应该一次显示，直到你输入正确的答案并点击下一步。

这仅适用于HTML，还是需要其他语言？我将在本地运行它，因此隐藏源代码中的答案并不重要。

Answer 1

据我所知，这是不可能使用HTML的。理想情况下，您需要一个数据库，用于存储问题，用户，以前的答案，答案的正确性以及整体表现。您需要使用服务器端语言创建注册/登录屏幕。在服务器上，您需要两个与问题功能密切相关的核心功能。第一个是随机化一个尚未被问到的问题，另一个是处理用户的答案。用户将加载页面，问题随机化器将在服务器上运行，每当用户回答问题时，客户端应向服务器发送POST请求，并回答问题并处理服务器的响应（显示下一个随机问题）。

但是，在实现数据库之前，您可能需要一个非常快速的解决方案。在这种情况下，您可以将问题存储在Javascript数组中，在页面加载时随机化问题，将其显示给用户，当用户回答问题时，存储答案，显示是否正确，将问题添加到另一个存储的数组中回答问题并从问题数组中删除该项目，然后再次随机化并再次显示。这不是一个理想的解决方案，但在开始使用更长的解决方案之前，可以成为临时的快速解决方案。

Answer 2

如果你想要一个基本的方法，你可以这样做：

var questions = [];
var loadedQuestions = [];
var questionPosition = 0;
var score = 0;

var question = {
  "title": "This is the title",
  "answers": [{
    "title": "This is not Correct",
    "correct": 0
  }, {
    "title": "This is correct",
    "correct": 1
  }, {
    "title": "This is not",
    "correct": 0
  }, {
    "title": "This either",
    "correct": 0
  }]

}
questions.push(question);
var question = {
  "title": "This is the second question",
  "answers": [{
    "title": "This is not Correct",
    "correct": 0
  }, {
    "title": "This is correct",
    "correct": 1
  }, {
    "title": "This is not",
    "correct": 0
  }, {
    "title": "This either",
    "correct": 0
  }]

}
questions.push(question);

var question = {
  "title": "This is the third",
  "answers": [{
    "title": "This is not Correct",
    "correct": 0
  }, {
    "title": "This is correct",
    "correct": 1
  }, {
    "title": "This is not",
    "correct": 0
  }, {
    "title": "This either",
    "correct": 0
  }]

}
questions.push(question);

function updateScore(result) {
  if(result){
    score++;
  }else{
    score--;
  }
  $("#score").text(score);
}

function answering() {
  var correct = $(this).data("correct");
  $(this).addClass(correct ? "correct" : "wrong");

  updateScore(correct);
}

function loadQuestions() {
  $.each(questions, function() {
    var question = $("<div></div>");
    question.addClass("question");

    var title = $("<h2></h2>");
    title.addClass("title");
    title.text(this.title);

    var answers = $("<ul></ul>");
    answers.addClass("answers");

    $.each(this.answers, function() {
      answer = $("<li data-correct='" + this.correct + "'></li>");
      answer.addClass("answer");
      answer.text(this.title);
      answers.append(answer);
    });

    question.append(title);
    question.append(answers);

    loadedQuestions.push(question);
  });
}

function displayQuestion() {
  $("#questions").empty();
  $("#questions").append(loadedQuestions[questionPosition]);
  $("li.answer").click(answering);
}

$(document).ready(function() {
  loadQuestions();
  displayQuestion();

  $("#next").click(function() {
    if (questionPosition < (loadedQuestions.length - 1)) {
      questionPosition++;
      displayQuestion();
    }
  });

  $("#prev").click(function() {
    if (questionPosition > 0) {
      questionPosition--;
      displayQuestion();
    }
  });
});

.correct {
  background-color: #61e02b;
  color: #FFF;
}

.wrong {
  background-color: #e34d45;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
The ultimate quiz
</h1>
<p>
  This is a test. Please, click on the "next" o "prev" button to move across questions.
</p>
<div id="questions">

</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

<p>
  Your score is:
  <spam id="score">0</spam>
</p>

可以仅使用HTML / CSS进行测验吗？

2 个答案: