0

私がやろうとしていることは何であるかを説明することから始めましょう:)

私のアプリケーションは、PHP（Zendフレームワーク）とJavascriptを使用して実装されています。アプリケーションのアンケートを作成したいのですが、これまでに次のことを行いました。

私のページは一連の<div class='question #'>要素で構成されており、＃は特定の質問のインデックスを示します。たとえば、私のHTMLは次のようになります。

<div class="question 1 active">
</div>
<div class="question 2">
</div>
<div class="question 3">
</div>
.
.
.
etc.

これで、ユーザーは、質問が可能な回答に変わるまで、事前に選択された特定の時間、各質問を表示する必要があります。ユーザーは、回答が正しいと思うかどうかに応じて、[はい]または[いいえ]をクリックする必要があります。一度にアクティブになる要素は1つだけ<div class="question #">で、他の要素はアクティブdisplay:none;です。質問が次の質問に変更された後、active-属性は現在の質問から削除され、次の質問に設定されるため、ユーザーはすべての質問をループします。

各question/possible answerペアには、ユーザーが質問を表示する時間とユーザーが質問に回答する時間を指定する2つの整数を関連付けました。例を挙げましょう：

ユーザーにはこれが表示されます（多かれ少なかれ）：

QUESTION 1/10

The name of the President of U.S.? -------------- 5 sec 
..
The name of the President of U.S.? -------------- 4 sec
..
The name of the President of U.S.? -------------- 3 sec
..
etc. THE TIME ENDS and the question changes to answer mode(buttons YES/NO appear also in this part):

Bruce Wayne? ------------------------------7 sec 
 [YES] [NO]  
...
Bruce Wayne? ------------------------------6 sec 
 [YES] [NO]  
...
Bruce Wayne? ------------------------------5 sec 
 [YES] [NO]  
...
etc.

ANSWERフェーズで時間がなくなるか、ユーザーが[はい] / [いいえ]ボタンのいずれかをクリックすると、jQueryはACTIVE現在の質問から削除し、次の質問に設定します。ユーザーがクリックした値もhidden-elementに保存されます。このプロセスは、質問票全体を通して繰り返す必要があります。

次に、質問フェーズと回答フェーズの両方のタイマーについて説明します。それらは固定されていませんが、質問ごとに特定されています。たとえば、question1質問/回答時間（秒単位）5/10などがあります。

今私の質問は...javascript側でこれを実装する方法ですか？question/answer私の問題は、質問に関するすべての情報（PHPがサーバーに設定する）を含む配列をJavaScriptでループするときに発生します...クライアント側ですべてのペアを反復処理し、各反復停止で反復できるはずです。ユーザーが回答をクリックするか、時間がなくなるまで、次の質問（次の質問）に移動するまでの反復。しかし、問題は、forループまたはjQueryの.eachでスリープできないことを理解したとおりです...私の問題がわかりますか？:)

実装に関する提案はありがたいです:)

4

3 に答える 3

5

forループをsetTimeoutを介して呼び出される再帰関数に変更します

var timeLeft = 10,
    countdown = function(){
        $('#mySpan').html('The name of the President of U.S.? -------------- ' + timeLeft + ' sec');
        timeLeft -= 1;

        if (timeLeft) {
            setTimeout(countdown, 1000);
        }
    };

countdown();

そのロジックを使用すると、X秒後に質問を変更するように拡張できます。次に、、などのパラメータを取り込んでスケーリングしmaxTimeたり、入力フィールドquestionTextやquestionTypeラジオボタンのセットを表示したりできます。

クイックデモ： http： //jsfiddle.net/AlienWebguy/aW9mH/

于 2012-09-12T22:50:58.493 に答える
1

これは、私が最近実験している、ちょっと変わった方法です。自信を持って理解せずにこのようなことをすることを提案する必要はありませんが、いじってみるのはいいことです。

function countdown(loops, pause, id) {
    (function setup(timer, el, text) {
        (function loop(invalid) {
            (function check(stop) {
                return stop || !loops-- || timer(loop, pause);
            })(invalid || !loops, el[text] = loops);
        })(!loops || !pause);
    })(setTimeout, document.getElementById(id) || {}, 'innerHTML');
}​

countdown(10, 1000, 'timer');

http://jsfiddle.net/userdude/ghN3m/1

少し変な見た目ですが、実験するのは楽しかったです。

于 2012-09-13T05:56:04.573 に答える
1

Javascriptは、Webサイトをプロアクティブではなくリアクティブにするためにあります。

だからそれはただ死んではいけません。

それがちょうど死んでしまうなら、あなたの顧客は戸外にいます

于 2012-09-14T23:27:13.077 に答える