0

簡単なクイズ アプリを作成する必要があります。私が誰かの後にそれを選んだので、これは私が持っているものです. それぞれ3つの答えを持つ10の質問があります。すべての質問が一度に読み込まれ、表示されるのは 1 つだけです。回答をクリックすると、次の質問が表示されます。ただし、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内

  • リンクの 1 つがクリックされたときに、この入力の値を更新します。

    $('.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

イベント ハンドラーを使用して、回答がクリックされたかどうかを確認し、回答のインデックスを配列に追加します。$_POST最後の回答が送信されると、配列を使用してデータを処理できる PHP ページにデータが送信されます。

$('.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 に答える