0

次のテスト アプリがあります: http://dev.driz.co.uk/quiztest/

一連の Web ページにはそれぞれ、クイズ ページのセクション番号 (例: 1) を持つ div があり、そのセクションの JSON ファイルから質問を引き出すという考え方です。

この部分は、SOコミュニティの助けを借りて取り組んでいるので、明確にするために、これらの問題に対処するための新しい質問を作成しました。

私が抱えている問題は、ページの読み込みに関するセクションから最初の質問のみを表示したいということです。ユーザーが A または B ボタンをクリックすると、次の質問を読み込む必要があるため、質問 2 を表示し、それから 3 など...

一度に 1 つの質問のみが#questions、ユーザーが回答する ul に表示されます。

セクションのすべての質問が表示されたら、追加のロジックを実行できるように、完成した関数へのコールバックを実行する必要があります。

これを行うにはどうすればよいですか？最初にセクション内の質問の数を数えてから、最後を見つけるためにインクリメントを行う必要があると考えています。誰でも助けることができますか？

編集:私は次のようなことを計画しています:Question 3 / 10その数を取得することは非常に重要です。しかし、セクションの終わりまで、最初の質問の後に次の質問を取得することについて混乱しています...

ありがとう

4

2 に答える 2

2

私はそのウェブサイトがフィドルにあるものを嘲笑しました。これがまさにあなたが探しているものかどうかはわかりません。たぶん、もっと説明があれば、もっと近づくことができます。フィドル

于 2012-09-12T13:10:27.853 に答える
1

質問を含む配列があると仮定しましょう。question各質問は、キーとキーを持つオブジェクトanswersです。はquestion常に、質問のテキストを含む文字列になります。はanswers、質問に対する選択可能な回答を表す任意のタイプの 0 個以上の要素を持つ配列になります。

var questions = [
    {question : 'What is 2 + 2?', answers : [4, 5, 6]}, 
    {question : 'What is 6 * 4?', answers : [20, 24, 28]}
];

それでは、質問を表示する関数を書きましょう。表示する質問のインデックスを格納するグローバル変数を使用します (最初の質問を表示するために 0 に初期化されます)。

var currentQuestion = 0;

function displayQuestion() {
    if(currentQuestion < questions.length) { // if there's still questions to display
        var question = questions[currentQuestion]; // get the question to display
        var questionHtml = ...; // generate the HTML for the question here
        $('#questions').html(questionHtml);
        currentQuestion += 1; // increase tracking index
    }
    else {
        finished();
    }
}

clickあとは、イベント ハンドラーをボタンにバインドしてそのdisplayQuestion()関数を呼び出すだけです。

于 2012-09-12T12:58:40.363 に答える