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="내부">
<입력 유형="숫자" 최소="0" 클래스="작은 텍스트" 값="' + input_content + '" 이름="qtn_time_limit">
</div>
</div>' ;
$ save_button_div .before ( $ 내용);

여기서 input_content는 'Question Time Limit' 필드의 값이다. 기본적으로 값은 0으로 설정되어야 합니다. 사용자(또는 사용자)가 이 값을 설정할 때마다 업데이트하고 데이터베이스에 저장해야 합니다(PHP를 통해 처리됨). 마찬가지로 데이터베이스에서 읽어야 하며 사용자가 이 필드를 볼 때 사용자에게 표시되어야 합니다.

대기열에 추가되면 이 JavaScript 코드는 다음과 같이 필드를 표시합니다.

2단계: LearnDash 퀴즈 질문에 시간 제한 추가

질문에 대한 필드 값이 저장되면 퀴즈 질문을 시도할 때 타이머가 표시되어야 합니다. 이것은 아래 단계를 사용하여 수행할 수 있습니다.

• 타이머 값 가져오기
• 타이머 시작
• 시간 제한에 도달했는지 주기적으로 확인
• 다음 퀴즈 질문 버튼 실행

동일한 코드는 아래와 같습니다.

 jQuery( '[name="startQuiz"],[name="next"]' ) .click ( 함수 (){
jQuery( '.wpProQuiz_listItem' ) .each ( 함수 (){
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] ! == 정의되지 않음 ){
counter_value = wdmAjaxData.post_meta[ $ current_question_id];
}
다른 {
카운터 값 = 0 ;
}
var wdm_globalElements = {
           다음: jQuery(이). 찾기 ("[이름='다음']"),
           wdm_timelimit: jQuery(이것). (' .wpProQuiz_question_time_limit ') 찾기 ,
current_counter: counter_value
};
wdm_globalElements. 다음 .hide ();
var wdm_timelimit = ( 함수 () {
           var _counter = wdm_globalElements.current_counter;
           var _intervalId = 0 ;
           var 인스턴스 = {};
           인스턴스 . 정지 = 함수 () {
           if (_counter) {
               창 . clearInterval (_intervalId);
               wdm_globalElements.wdm_timelimit .css ( "디스플레이" , "없음" );
           }
         };
         인스턴스 . 시작 = 함수 () {
         만약 ( ! _카운터){
wdm_globalElements. 다음 .show ();
반환 ;
         }
         변수 x = _ 카운터 * 1000 ;
         var $ timeText = wdm_globalElements.wdm_timelimit. 찾기 (' 범위 ') .text (parseTime(_counter));
         var $ timeDiv = wdm_globalElements.wdm_timelimit. 찾기 (' .wpProQuiz_question_progress ');
         wdm_globalElements.wdm_timelimit .css ( "디스플레이" , "" );
         var beforeTime = + new Date();
         _intervalId = 창 . setInterval ( 함수 () {
                 var diff = ( + new Date() - beforeTime);
                 var 경과 시간 = x - 차이;
                 if (차이 >= 500 ) {
                    $ timeText .text (parseTime( 수학 . ceil (elapsedTime / 1000 )));
                 }
                 $ timeDiv .css ( '너비' , (elapsedTime / x * 100 ) + '%' );
                 if (경과시간 <= 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의 이미지