0

インタラクティブなクイズに取り組んでいますが、1つの問題に遭遇しました。ある種の時間制限を追加する必要があります（テスト目的で5秒としましょう）。これにより、時間がなくなると、ユーザーがどの段階にいても、クイズは結果の部分にスキップして、すべての未回答の質問を次のようにカウントする必要があります。間違い。

これが私のコードです：

jQuery(function(){
    var tourismQuiz = {
        answers: { q1: 'd', q2: 'd', q3: 'a', q4: 'c', q5: 'a', q6: 'd', q7: 'd', q8: 'a', q9: 'c', q10: 'a' },
        questionLenght: 10,
        checkAnswers: function() {
            var arr = this.answers;
            var ans = this.userAnswers;
            var resultArr = []
            for (var p in ans) {
                var x = parseInt(p) + 1;
                var key = 'q' + x;
                var flag = false;
                if (ans[p] == 'q' + x + '-' + arr[key]) {
                    flag = true;
                }
                else {
                    flag = false;
                }
                resultArr.push(flag);
            }
            return resultArr;
        },
        init: function(){
            jQuery('.btnNext').click(function(){
                if (jQuery('input[type=radio]:checked:visible').length == 0) {

                    return false;
                }
                jQuery(this).parents('.questionContainer').fadeOut(500, function(){
                    jQuery(this).next().fadeIn(500);
                });
                var el = jQuery('#progress');
                el.width(el.width() + 60 + 'px');
            });
            jQuery('.btnPrev').click(function(){
                jQuery(this).parents('.questionContainer').fadeOut(500, function(){
                    jQuery(this).prev().fadeIn(500)
                });
                var el = jQuery('#progress');
                el.width(el.width() - 60 + 'px');
            })
            jQuery('.btnShowResult').click(function(){
                var arr = jQuery('input[type=radio]:checked');
                var ans = tourismQuiz.userAnswers = [];
                for (var i = 0, ii = arr.length; i < ii; i++) {
                    ans.push(arr[i].getAttribute('id'))
                }
            })
            jQuery('.btnShowResult').click(function(){
                jQuery('#progress').width(300);
                jQuery('#progressKeeper').hide();
                var results = tourismQuiz.checkAnswers();
                var resultSet = '';
                var trueCount = 0;
                for (var i = 0, ii = results.length; i < ii; i++){
                    if (results[i] == true) {
                        trueCount = trueCount + 2;
                    } else {
                        trueCount = trueCount - 1;
                    }
                    resultSet += '<div> Question ' + (i + 1) + ' is ' + results[i] + '</div>'

                    if (trueCount <= 5) {
                        jQuery("body").css("background-color", "red");
                    } else {
                        jQuery("body").css("background-color", "green");
                    }
                }

                resultSet += '<div class="totalScore">Your total score is ' + trueCount + ' / 20</div>'
                jQuery('#resultKeeper').html(resultSet).show();
            })
        }
    };
    tourismQuiz.init();
})

したがって、ユーザーが押すのを待っ.btnShowResultてテストを終了するのではなく、時間がなくなった場合は、このボタンを押して実行される機能を実行する必要があります。

4

3 に答える 3

1

window.setTimeoutをチェックアウトします。これで、開始できます。指定された遅延の後に、関数を呼び出すか、コードスニペットを実行します。

したがって、次の質問に転送する前に、ユーザーに質問に回答するための時間（5000ミリ秒）を与える必要があります。

//Psuedocode:

var askNextQuestion, timer ;

askNextQuestion = function(){
 // ... render the question or do whatever
 timer = setTimeout(askNextQuestion, 5000);
 // .. do any clean up and check to see if it's the last question etc.
};

askNextQuestion();

私はMozillaよりもうまく説明しようとはしません！ https://developer.mozilla.org/en/docs/DOM/window.setTimeout

于 2013-03-19T11:37:09.273 に答える
0

setTimeoutの最後のステートメントとして使用しinit function、バインドさjQuery('.btnShowResult').れた機能を別の関数に記述して追加しますsetTimeout

setTimeout("show_result", 20000);

また、たとえば.clearTimeout(timeoutVariable)、ユーザーが制限時間内にボタンを押した場合にタイムアウトをリセットするために使用します。

于 2013-03-19T11:34:09.677 に答える
0

質問が提示されたときのタイムスタンプを保存し、それをユーザーが回答をコミットしたときのタイムスタンプと比較します。比較された時間が制限を超えている場合、回答は遅れてコミットされています。

カウントダウンの表示は、たとえばグラフィカルなものにすることができます。バーの幅が100％から0％までのCSS3アニメーション。制限時間（秒単位）を「遅い」と交換します。

$("#bar").animate({ width:'0%' },'slow');

アニメーションの設定に関するヒントについては、http：//www.w3schools.com/css3/css3_animations.aspを確認してください。

于 2013-03-19T11:34:33.847 に答える