1

divの表示/非表示を使用して、jQueryを介して一度に1つの質問を画面に表示する、単純なプリロードされたHtmlモバイルクイズが必要でした

問題は、ユーザーが質問を1つまたは2つスキップする必要がある場合に発生します。ユーザーの選択/オプション値/回答に基づいてそのdivを表示するかどうかをフラグを設定することでこれを行いたいと思いました

ここで解決策を見つけましたが、本当に必要なのは、フラグを使用して次の div を表示するかどうかを知る簡単な方法です q2skipped=true 。 q2skipped=false

表示されていない場合は、テストq3skippedフラグに移動します

ここでjsfiddleで例を作成しました：

<div class="question" id="question1">Q.1 Do you like Milk 
    <select name="1" onchange="displayElements(this.value);" >
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option >Goto Next Question</option>
        <option value="q2skipped=true">Skip Next Question</option>
        <option value="q2skipped=true;q3skipped=true">Skip Next 2 Questions</option>
    </select><br>
    <div> 
        <input type="submit" id="button" value="Submit" onclick='doSubmit(this)'>
    </div>
</div>
4

2 に答える 2

2

より反復可能なアプローチが保証されているようです。すべての質問のすべての値をハードコーディングするのは面倒な作業であり、新しいクイズを作成する必要がある場合は、これを繰り返さなければなりません。

あなたのアプリケーションの全範囲を理解していませんが、よりクリーンなソリューションへの道を歩むのに役立つ一般的なヒントをいくつか紹介します.

(1) クラスを使用して質問のスタイルを設定します。たとえば、次の CSS を使用できます。

 .answered { background-color: green;  }
 .skipped  { background-color: yellow; }

回答後に質問を非表示にする場合、CSS は関係ありませんが、私の主張を示すのに役立ちます。

(2) HTML でハードコーディングされた値を使用しないでください (もちろん質問番号は除きます)。

<div class="question" id="question1">Q.1 Do you like Milk 
    <select class="answer">
        <option value="yes">Yes</option>
        <option value="no">No</option>
        <option value="skip">Goto Next Question</option>
        <option value="skip_one">Skip Next Question</option>
        <option value="skip_two">Skip Next 2 Questions</option>
    </select><br>
    <div> 
        <input type="submit" value="Submit" onclick='doSubmit(1)'>
    </div>
</div>

id="button"送信ボタンを使用しているのを見ます。ID は一意でなければならないため、これはかなり悪い考えです。必要がない場合は、ボタンに ID を記載しないことをお勧めします。

また、ボタンの onclick イベントが質問の ID を渡すようになったことにも注意してください。それは後で明らかになるでしょう。

後でユーザーの回答を簡単に取得できるように、選択に「回答」クラスを追加しました。

また、選択ボタンの onclick 属性と name 属性も省略しました。onclickイベントが何をすべきかわかりません（この質問とは関係ありませんか？）そして、 name 属性はここでは実際には必要ないようです（繰り返しますが、この質問で言及されていないもので必要な場合は、追加できますまた）。

(3) javascript/jQuery を使用して、何が起こるべきかを定義します。

$(document).ready(function() {
    //These things should occur on page load:

    $(".question").hide(); //Hides all questions
    $("#question1").show(); //Bring back the first question.
});

//The rest will be done in the doSubmit() function:

function doSubmit (questionID) {
    //get the value from the <select> in the div
    var question = $("#question"+questionID);
    var answer = question.find(".answer").val();

    var nextquestionID = 0; //will be set in the switch case.

    switch(answer) {

        case "yes":
            question.addClass("answered");
            nextquestionID = questionID + 1;
            break;

        case "no":
            question.addClass("answered");
            nextquestionID = questionID + 1;
            break;

        case "skip":
            question.addClass("skipped");
            nextquestionID = questionID + 1;
            break;

        case "skip_one":
            question.addClass("skipped");
            var skippedquestionID = questionID + 1; //the next one will be marked as skipped
            $("#question" + skippedquestionID ).addClass("skipped");

            nextquestionID = questionID + 2;

            break;

        case "skip_two":
            question.addClass("skipped");
            var skippedquestionID = questionID + 1; //the next one will be marked as skipped
            $("#question" + skippedquestionID ).addClass("skipped");
            var skippedquestionID_2 = questionID + 2; //also the next one will be marked as skipped
            $("#question" + skippedquestionID_2 ).addClass("skipped");

            nextquestionID = questionID + 3;
            break;

    }

    //Whatever was selected, now the original question must be hidden, and the new question (ID is contained in nextquestionID ) should be shown:
    question.hide();
    $("#question" + nextquestionID).show();
}

これにより、ユーザーの回答を処理するための反復可能なプロセスをさらに構築できるようになります。あなたが理解できるように、私はそれを十分に明確にすることができたと思います。そうでない場合は、お気軽にお問い合わせください:-)

于 2012-11-12T15:11:16.897 に答える
1

jquery .addClass()、.removeClass()、および .hasClass() 関数を使用して、必要に応じて div を装飾できます。

すなわち

  $('#q1').addClass('skipped')    //when they skip a question
  $('#q1').removeClass('skipped') //when they finally answer it

  if ($('#q1').hasClass('skipped')===true) //test if a question was skipped.
  {

  }  .... etc
于 2012-11-12T13:42:12.083 に答える