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" ）;

$ content = '<div class = "postbox">
<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 （ $ content）;

ここで、input_contentは「QuestionTimeLimit」フィールドの値です。 デフォルトでは、値は0に設定する必要があります。ユーザー（またはユーザー）がこの値を設定するたびに、値を更新してデータベースに保存する必要があります（PHPを介して処理されます）。 同様に、データベースから読み取って、ユーザーがこのフィールドを表示したときにユーザーに表示する必要があります。

このJavaScriptコードをキューに入れると、次のようにフィールドが表示されます。

ステップ2：LearnDashクイズの質問に時間制限を追加する

質問のフィールド値が保存されると、クイズの質問が試行されたときにタイマーが表示される必要があります。 これは、以下の手順を使用して実行できます。

• タイマー値を取得する
• タイマーを開始します
• 制限時間に達しているかどうかを定期的に確認してください
• 次のクイズの質問ボタンをトリガーする

同じコードは次のとおりです。

 jQuery（ '[name = "startQuiz"]、[name = "next"]' ） 。click （ function （）{
jQuery（ '。wpProQuiz_listItem' ）。each （ function （）{
if （jQuery（this） 。is （ '：visible'））{
$ current_question_id = jQuery（this）。 検索（ " .wpProQuiz_questionList "）;
$ current_question_id = $ current_question_id .attr （ "data-question_id" ）;
if （wdmAjaxData.post_meta [ $ current_question_id] ！ == undefined ）{
counter_value = wdmAjaxData.post_meta [ $ current_question_id];
}
else {
counter_value = 0 ;
}
var wdm_globalElements = {
           次へ：jQuery（this）。 検索（ "[name = 'next']"）、
           wdm_timelimit：jQuery（this）。 検索（ ' .wpProQuiz_question_time_limit '）、
current_counter：counter_value
};
wdm_globalElements。 次の.hide （）;
var wdm_timelimit = （ function （）{
           var _counter = wdm_globalElements.current_counter;
           var _intervalId = 0 ;
           var instance = {};
           インスタンス。 stop = function （）{
           if （_counter）{
               ウィンドウ。 clearInterval （_intervalId）;
               wdm_globalElements.wdm_timelimit .css （ "display" 、 "none" ）;
           }
         };
         インスタンス。 start = function （）{
         if （ ！ _ counter）{
wdm_globalElements。 next .show （）;
戻る;
         }
         var 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 （ "display" 、 "" ）;
         var beforeTime = + new Date（）;
         _intervalId = window 。 setInterval （ function （）{
                 var diff = （ + new Date（） - beforeTime）;
                 varlapsedTime = x - diff;
                 if （diff > = 500 ）{
                    $ timeText .text （parseTime（ Math .ceil （elapsedTime / 1000 ）））;
                 }
                 $ timeDiv .css （ 'width' 、（elapsedTime / x * 100 ） + '％' ）;
                 if （elapsedTime <= 0 ）{
                    インスタンス.stop （）;
                    wdm_globalElements。 next .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による画像