0

我必须编写一个简单的测验应用程序。当我在某人之后挑选它时，这就是我所拥有的。有 10 个问题，每个问题有 3 个答案。所有问题一次加载，只有一个可见。单击答案后，会出现下一个问题等。但是，由于 javascript 对我来说有点神奇，我不知道如何获取所有答案并将其发送到 php 以检查用户是否选择正确。代码看起来像这样：

<form action="result.php">

<div class=“quiz>
    <div class=“question”&gt; Some question ?
        <ul>
            <li><a href=“#”&gt;Answer A</a></li>
            <li><a href=“#”&gt;Answer B</a></li>
            <li><a href=“#”&gt;Answer C</a></li>
        </ul>
   </div>

[… more question here …]

<div class="question">Last question ?
        <ul>
            <li><a href=“#” onClick=“[some submit magic]">Answer A</a></li>
            <li><a href=“#” onClick=“[some submit magic]">Answer B</a></li>
            <li><a href=“#” onClick=“[some submit magic]">Answer C</a></li>
        </ul>
</div>

</div>
<input type=“hidden” name=“answers” value=“answers[]>
</form>

所以基本上用户点击答案，下一个问题弹出，最后我需要填充所有答案并将其发送到 result.php 在那里我会以某种方式在数组中得到结果，选择答案如 {1,3,2,1,2 ,3,1,2,3,1} 或类似的东西。

4

3 回答 3

1

有很多方法可以做到这一点。这是一个简单的：

  • 添加一个

    <input type="hidden" name="questions[]" value="" />

    每个.questionDIV内部

  • 单击其中一个链接时更新此输入的值：

    $('.question a').on('click', function(){
  var answer = $(this).text();
  $(this).parents('.question').find('input').val(answer);
});

  • 在您的表单上放置一个请求方法，比方说POST

然后在您的 PHP 脚本中，您将获得一个数字索引数组，其中包含每个问题的选定答案，$_POST['questions'].

我不知道您的设计是什么样子，但可以在没有任何 javascript 的情况下使用隐藏的无线电输入和标签来实现这一点（我假设您在这里使用链接，因为输入字段的样式限制）。

于 2013-11-09T19:32:39.880 回答
0

通常，您会向验证后端创建 HTTP 请求。 jQuery之一，使这很容易。此外，我会尝试生成问题 HTML，以便您准备好生成带有其他问题集的测验，而无需重新键入您的 html。

目前，我正在尝试自己创建一个类似测验的应用程序，并且很高兴听到您的反馈。我的意思是这个小提琴的简短片段：http: //jsfiddle.net/xtofl/2SMPd/

基本上是这样的：

function verify(answers) {
  jQuery.ajax("http://yoursite/verify.php?answers="+answers,
     { async: true,
       complete: function(response, status){
          // e.g.
          alert(response.text);
       }
     };
  };

此请求将在所有答案完成后发送。我会尝试使用 javascript 和 DOM 即时创建问题，例如：

function retrieveQuestions() {
  //TODO: get them from a json-request like http://yourquizz/quizz1/questions
  return [{ text: "what if Zoo went to Blohom in a Flurk?",
           options: { a: "he frunts and vloghses", 
                      b: "the Blohom doesn't snorf anymore" }
          },
          { text: "how many this and that",
            options: { a: "1", b: "2", c: "14" }
          }
  ];
};

// retrieve and create the questions elements
var questions = retrieveQuestions();
questions.forEach(function(question, index){
  jQuery("#questions").append(createQuestionElement(question));
});

// what does a question element look like:
function createQuestionElement(question){
   var li=document.createElement("li");
   var options = [];
   Object.keys(question.options).forEach(function(key){
      var o = document.createElement("div");
      jQuery(o).on('click', function(){question.answer=jQuery(o).val();});
      li.appendChild(o);
   });
   return li;
}

您的 php 后端verify.php脚本将检查参数并以 json 格式返回结果，例如：

$correct = ($answers[ $_GET["question"] ] == $_GET["answer"]);
print("{ 'correct': '$correct' }");

（前提是您的答案存储在数组中$answers。

于 2013-11-09T19:30:05.303 回答
0

该问题的另一个解决方案： jsFiddle

我们使用事件处理程序来检查是否单击了答案，然后将答案的索引添加到数组中。提交最后一个答案后，我们将数据发送到一个 php 页面，您可以在其中使用$_POST数组对其进行处理。

$('.question a').on('click', function (e) {
    e.preventDefault();
    var self = $(this);
    var ans = self.parent().index() + 1;
    answers.push(ans);
    var hasNext = nextQuestion();
    if (!hasNext) {
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            data: {
                "answers": answers
            }
        }).done(function (response) {
            response = 'Stuff you output with PHP';
            $('body').append('<p> Result: ' + response + '</p>');
        });
    }
});
于 2013-11-09T20:25:03.497 回答