如何在 LearnDash 中添加測驗問題計時器

每個好的學習管理系統都提供了一個選項來為測驗/測試添加計時器。 LearnDash 也不例外。

如果您進入管理面板中的 LearnDash 測驗設置，您應該注意到在測驗級別添加“時間限制”的選項。

計時器是考官/講師/老師控制實際測驗的好方法。

• 它通過玩弄他們的心理來挑戰每個學生，
• 學生只是沒有時間作弊，
• 它也增加了他們之間的競爭程度

但是，當所有問題的權重相同或屬於同一類型時，測驗計時器會很好地工作。 例如數學測驗。 但是，如果一些數學問題只是測驗的一部分，並且只有那些特定的問題需要計時。

好吧，在這種情況下，您需要一個按問題計時器，而不是測驗計時器。

現在，LearnDash 不提供每個問題的計時器。

你知道的。

這就是為什麼你在這裡對吧？！

因此，對於那些需要添加定時問題的場景，我將向您解釋如何在 LearnDash 中為每個測驗問題添加時間限制。

以下是我們將努力實現的目標：

1. 我們將為每個問題添加一個可選字段，您可以在其中指定每個測驗問題的時間限制。
2. 然後，測驗問題的時間限制將顯示在前端，並且“下一步”問題按鈕將被隱藏。
3. 如果學生時間用完，將自動顯示下一個問題。

現在，我必須警告你； 你需要大量的 PHP 和 JavaScript 開發知識來實現這個解決方案。 如果沒有，您需要聯繫LearnDash 開發人員，他們可以在這里為您提供幫助。

好的。 讓我們開始工作吧。

步驟 #1：添加問題時間限制設置

您需要首先為每個測驗添加一個簡單的設置。 當然，這並不像看起來那麼簡單。

如果您是之前參與過 LearnDash 測驗的開發人員，您就會知道沒有任何鉤子可以使用。 沒有可用於將字段添加到測驗問題設置的掛鉤。

但別擔心。 我們不會在這裡定制核心。 我們將要做的是使用一些 JavaScript 魔法。

使用 JavaScript，我們將在問題設置頁面的“保存”按鈕上方放置一個字段。 使用“保存”按鈕作為字段參考的原因是因為“保存”按鈕出現在每個測驗問題設置頁面上。

我們將使用“保存”按鈕的 ID 作為參考，以添加問題計時器字段。

下面這段 JavaScript 代碼在“保存”按鈕上方顯示了一個“問題時間限制”字段。

 $ save_button = jQuery( "#saveQuestion" );
$ save_button_div = $ save_button.closest( "div" );

$內容= '<div class="郵箱">
<h3 class="hndle">' + '提問時間限制（秒）' + '</h3>
<div class="inside">
<input type="number" min="0" class="small-text" value="' + input_content + '" name="qtn_time_limit">
</div>
</div>' ;
$ save_button_div .before ( $內容);

這裡，input_content 是“問題時間限制”字段的值。 默認情況下，該值必須設置為 0。每次您（或用戶）設置此值時，都必須更新並保存在數據庫中（通過 PHP 處理）。 同樣，當用戶查看該字段時，它必須從數據庫中讀取並顯示給用戶。

此 JavaScript 代碼在入隊時將顯示如下字段：

步驟 #2：為 LearnDash 測驗問題添加時間限制

保存問題的字段值後，必須在嘗試測驗問題時顯示計時器。 這可以使用以下步驟完成：

• 獲取定時器值
• 啟動計時器
• 定期檢查是否已達到時間限制
• 觸發下一個測驗問題按鈕

相同的代碼如下：

 jQuery( '[name="startQuiz"],[name="next"]' ) .click (函數(){
jQuery（'. wpProQuiz_listItem ' ）.each（函數（）{
if (jQuery(this) .is (':visible')){
$ current_question_id = jQuery(這個)。 查找（“ .wpProQuiz_questionList ”）；
$ current_question_id = $ current_question_id .attr ( "data-question_id" );
如果（wdmAjaxData.post_meta[ $ current_question_id] ！ ==未定義）{
counter_value = wdmAjaxData.post_meta[ $ current_question_id];
}
否則{
計數器值= 0 ;
}
var wdm_globalElements = {
           下一個：jQuery（這個）。 查找（“[名稱='下一個']”），
           wdm_timelimit：jQuery（這個）。 查找（' .wpProQuiz_question_time_limit '），
當前計數器：計數器值
};
wdm_globalElements。 下一個.hide ();
var wdm_timelimit = (函數() {
           var _counter = wdm_globalElements.current_counter;
           var _intervalId = 0 ;
           變量實例= {};
           實例。 停止=函數（）{
           如果（_counter）{
               窗口。 清除間隔（ _intervalId ）；
               wdm_globalElements.wdm_timelimit .css （ “顯示” ， “無” ）；
           }
         };
         實例。 開始=函數（）{
         如果（ ！ _counter）{
wdm_globalElements。 下一個.show ();
返回；
         }
         變量x = _counter * 1000 ;
         var $ timeText = wdm_globalElements.wdm_timelimit。 find (' span ') .text (parseTime(_counter));
         var $ timeDiv = wdm_globalElements.wdm_timelimit。 查找（' .wpProQuiz_question_progress '）；
         wdm_globalElements.wdm_timelimit .css （ “顯示” ， “” ）；
         var beforeTime = + new Date();
         _intervalId =窗口。 設置間隔（函數（）{
                 var diff = ( + new Date() - beforeTime);
                 var elapsedTime = x -差異；
                 如果（差異> = 500 ）{
                    $ timeText .text (parseTime( Math . ceil (elapsedTime / 1000 )));
                 }
                 $ timeDiv .css ( '寬度' , (elapsedTime / x * 100 ) + '%' );
                 如果(elapsedTime <= 0 ) {
                    實例.stop ();
                    wdm_globalElements。 下一個.trigger （ “點擊” ）；
                 }
          }, 16 );
        };
        返回實例；
        })();
wdm_timelimit。 開始（）；
}
});
}

上面的代碼在計時器運行時隱藏了“下一步”問題按鈕，然後在達到時間限制後單擊它。

https://wisdmlabs.com/learndash-quiz-customization/?utm_source=blog&utm_medium=post&utm_campaign=quiz_cusomization_timer&utm_content=Dropshipping同樣的結果應該如下：

與測驗中的其他問題相比，當您想為特定問題分配權重時，每個測驗問題計時器就會起作用。 當您想將此類功能添加到 LearnDash 時，此代碼可以派上用場。

如果你正在嘗試這個，並且你有任何問題要問我，那就開火吧！

圖片由 freepik 提供