0

アンケート開始時のHTMLは次のとおりです。

<form id="questionnaire">
  Question 1: Do you like dogs?<br>
  <input type="radio" name="answer" value="yes">Yes<br>
  <input type-"radio" name="answer" value="no">No<br>
  <input type="submit" value="Next Question" />
</form>

これまでの私のJavascriptは次のとおりです。

$(document).ready(function(){

    var q2 = 
      'Question 2: Do you like cats?
       <input type="radio" name="answer" value="yes">Yes<br>
       <input type-"radio" name="answer" value="no">No<br>
       <input type="submit" value="Next Question" />'

      $('#questionnaire').submit(function(){
        $('#questionnaire').html(q2); // This puts the Question 2 HTML into the form
        return false;
      });


    var q3 = 
      'Question 3: Do you like bunnies?
       <input type="radio" name="answer" value="yes">Yes<br>
       <input type-"radio" name="answer" value="no">No<br>
       <input type="submit" value="Next Question" />'
});

質問2が読み込まれた後、[次の質問]ボタンをクリックすると質問3が表示されるように、どのような関数を記述しますか？

4

4 に答える 4

1

これを行う1つの方法は次のとおりです。http：//jsfiddle.net/zXM74/2/

var questions = {
    2: 'Question 2: Do you like cats?' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>',
    3: 'Question 3: Do you like bunnies?' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>'
    };

var current_question = 1;

$('#questionnaire').submit(function(){
    current_question++;
    $('#questionnaire #question').html(questions[current_question]);
    return false;
});​

現在の質問を格納する変数を保持し、その変数を使用してオブジェクトまたは配列にインデックスを付け、表示する適切な質問をフェッチし、ボタンが押されるたびに変数をインクリメントします。

また、送信ボタンとは別に、実際の質問を独自のdivで囲むために、HTMLに小さな変更を加える必要があります。

<form id="questionnaire">
  <div id="question">
      Question 1: Do you like dogs?<br>
      <input type="radio" name="answer" value="yes">Yes<br>
      <input type="radio" name="answer" value="no">No<br>
  </div>
  <input type="submit" value="Next Question" />
</form>​
于 2012-12-14T04:49:06.890 に答える
1

フィドル

Javascript：

    var questions = ['Question 1: Do you like dogs?<br><input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />', 'Question 2: Do you like cats?<input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />','Question 3: Do you like bunnies?<input type="radio" name="answer" value="yes">Yes<br><input type-"radio" name="answer" value="no">No<br><input type="submit" value="Next Question" />'];

$('#questionnaire').html(questions[0]);
var currIdx = 0;

$(document).ready(function(){


      $('#questionnaire').submit(function(){
        currIdx++;
        $('#questionnaire').html(questions[currIdx]); // This puts the Question 2 HTML into the form
        return false;
      });

});​

HTML：

<form id="questionnaire">

</form>​
于 2012-12-14T04:50:12.170 に答える
0

私はあなたの質問のすべてを異なるDIVに分けられたHTMLに入れます。各DIVには一意のIDが必要です。最初の質問のみが表示され、残りは非表示になります。

次の質問のIDを前の質問の送信入力に入れることができます...

<input id="2" type="submit" value="Next Question" />

送信ボタンがクリックされたときにキャッチするデリゲートを作成し、IDをキャプチャし、質問を非表示にし、質問id-1を表示しますid。

于 2012-12-14T04:50:12.710 に答える
0 
<script>
    var mark = 0;
    var currIdx = -1;
    var result = "1/";


    var quest = [
        {
            ID: 1,
            question: "Who is CEO?",
            options: [
                {
                    optionID: 1,
                    optionText: "Bill Gate"
                },
                {
                    optionID: 2,
                    optionText: "Thomas"
                },
                {
                    optionID: 3,
                    optionText: "Lexthur"
                }
            ],
            ans: 3
        },
        {
            ID: 2,
            question: "Hardest language in programming",
            options: [
                {
                    optionID: 1,
                    optionText: "C++"
                },
                {
                    optionID: 2,
                    optionText: "Java"
                },
                {
                    optionID: 3,
                    optionText: "PHP"
                },
                {
                    optionID: 4,
                    optionText: "C#"
                }
            ],
            ans: 2
        },
        {
            ID: 3,
            question: "Who is Cutest in the world",
            options: [
                {
                    optionID: 1,
                    optionText: "Davika"
                },
                {
                    optionID: 2,
                    optionText: "TTHZ"
                },
                {
                    optionID: 3,
                    optionText: "Su Su"
                },
                {
                    optionID: 4,
                    optionText: "Aye Kaung"
                }
            ],
            ans: 2
        },
        {
            ID: 4,
            question: "What is the meaining of GG",
            options: [
                {
                    optionID: 1,
                    optionText: "Good Game!"
                },
                {
                    optionID: 2,
                    optionText: "Gammer Gain"
                },
                {
                    optionID: 3,
                    optionText: "Noob Gamer"
                },
                {
                    optionID: 4,
                    optionText: "Well played"
                }
            ],
            ans: 1
        },
    ]

    // $('#questionnaire').html(quest[0]);

    $(document).ready(function () {

        $('#submit').click(function () {
            currIdx++;
            $('#questionnaire').html(quest[currIdx].question);

            var optionhtml = "";

            for (var i = 0; i < quest[currIdx].options.length; i++) {
                optionhtml += "<input type='radio' name='option'" + quest[currIdx].options[i].optionID + "'/>" + quest[currIdx].options[i].optionText + "<br/>";
                $('.form-check').html(optionhtml);


            }

            return false;
        });

    });







</script>
于 2018-11-21T05:34:33.033 に答える