2013-03-19 87 views
0

我正在進行互動測驗,並且遇到了一個問題。我需要添加一些時間限制(例如,爲了測試目的,可以說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完成測試,即通過按下這個按鈕,如果時間用完,應執行的處理功能。

回答

0

使用setTimeoutinit function作爲最後一條語句,寫在一個單獨的功能與jQuery('.btnShowResult').綁定的功能添加進來setTimeout

setTimeout("show_result", 20000); 

此外,使用例如.clearTimeout(timeoutVariable)如果用戶按下按鈕,復位超時在時限內。

0

保存問題呈現時間的時間戳,然後將其與用戶提交答案時的時間戳進行比較。如果比較的時間超過了限制,答案已經延遲。

倒計時的介紹可能只是圖形化的,例如。一個條從100%到0%的寬度的CSS3動畫。在幾秒鐘內交換「緩慢」的時間限制。

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

檢查http://www.w3schools.com/css3/css3_animations.asp關於設置動畫的提示!

1

Checkout 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