Cara Menambahkan Timer Pertanyaan Kuis di LearnDash

Setiap Sistem Manajemen Pembelajaran yang baik menyediakan opsi untuk menambahkan pengatur waktu ke kuis/tes. Dan LearnDash tidak berbeda.

Jika Anda melangkah ke pengaturan LearnDash Quiz di panel admin Anda, Anda akan melihat opsi untuk menambahkan 'Batas Waktu' di tingkat kuis.

Timer adalah cara yang bagus bagi penguji/instruktur/guru untuk mengontrol kuis yang sebenarnya.

• Ini menantang setiap siswa, dengan bermain di jiwa mereka,
• siswa tidak punya waktu untuk menyontek,
• dan itu menambah tingkat persaingan di antara mereka juga

Tetapi pengatur waktu kuis bekerja dengan baik ketika semua pertanyaan berbobot sama atau memiliki jenis yang sama. Seperti kuis matematika misalnya. Tetapi bagaimana jika beberapa pertanyaan matematika hanyalah bagian dari kuis, dan hanya pertanyaan tertentu yang perlu diberi waktu.

Nah, dalam hal ini, Anda memerlukan timer per pertanyaan, bukan timer kuis.

Sekarang, LearnDash tidak menyediakan timer per pertanyaan.

Kamu tahu itu.

Dan itulah mengapa kau di sini kan?!

Jadi, untuk skenario di mana Anda perlu menambahkan pertanyaan berwaktu, saya akan menjelaskan kepada Anda bagaimana tepatnya Anda dapat menambahkan batas waktu untuk setiap pertanyaan kuis di LearnDash.

Inilah yang akan kami coba capai:

1. Kami akan menambahkan bidang opsional untuk setiap pertanyaan, di mana Anda dapat menentukan batas waktu untuk setiap pertanyaan kuis.
2. Batas waktu kemudian akan ditampilkan di bagian depan untuk pertanyaan kuis, dan tombol pertanyaan 'Berikutnya' akan disembunyikan.
3. Jika siswa kehabisan waktu, pertanyaan berikutnya akan ditampilkan secara otomatis.

Sekarang, saya harus memperingatkan Anda; Anda memerlukan cukup banyak pengetahuan pengembangan PHP dan JavaScript untuk mengimplementasikan solusi ini. Jika tidak, Anda perlu menghubungi pengembang LearnDash , yang dapat membantu Anda di sini.

Oke. Mari kita mulai bekerja.

Langkah #1: Tambahkan Pengaturan Batas Waktu Pertanyaan

Anda harus mulai dengan menambahkan pengaturan sederhana, untuk setiap kuis. Tentu saja, itu tidak sesederhana kelihatannya.

Jika Anda seorang pengembang yang pernah mengerjakan kuis LearnDash sebelumnya, Anda akan tahu bahwa tidak ada pengait yang dapat Anda gunakan. Tidak ada pengait yang dapat Anda gunakan untuk menambahkan bidang ke pengaturan pertanyaan kuis.

Tapi jangan khawatir. Kami tidak akan menyesuaikan inti di sini. Apa yang akan kita lakukan, menggunakan beberapa keajaiban JavaScript.

Menggunakan JavaScript, kami akan menempatkan bidang di atas tombol 'Simpan' pada halaman pengaturan pertanyaan. Alasan menggunakan tombol 'Simpan' sebagai referensi kolom, karena tombol 'Simpan' ada di setiap halaman pengaturan pertanyaan kuis.

Kami akan menggunakan id tombol 'Simpan' sebagai referensi, untuk menambahkan bidang pengatur waktu pertanyaan.

Potongan kode JavaScript di bawah ini menampilkan bidang 'Batas Waktu Pertanyaan' di atas tombol 'Simpan'.

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

$ konten = '<div class="postbox">
<h3 class="hndle">' + 'Batas Waktu Pertanyaan (dalam detik)' + '</h3>
<div class="di dalam">
<input type="number" min="0" class="small-text" value="' + input_content + '" name="qtn_time_limit">
</div>
</div>' ;
$ save_button_div .before ( $ konten);

Di sini, input_content adalah nilai bidang 'Batas Waktu Pertanyaan'. Secara default, nilai harus disetel ke 0. Setiap kali Anda (atau pengguna) menyetel nilai ini, nilai tersebut harus diperbarui dan disimpan dalam database (ditangani melalui PHP). Demikian pula, itu harus dibaca dari database dan ditampilkan kepada pengguna ketika pengguna melihat bidang ini.

Kode JavaScript ini ketika di-enqueued akan menampilkan field seperti di bawah ini:

Langkah #2: Tambahkan Batas Waktu untuk Pertanyaan Kuis LearnDash

Setelah nilai bidang disimpan untuk sebuah pertanyaan, pengatur waktu harus ditampilkan saat pertanyaan kuis dicoba. Ini dapat dilakukan dengan menggunakan langkah-langkah di bawah ini:

• Dapatkan Nilai Pengatur Waktu
• Mulai pengatur waktu
• Periksa secara berkala apakah batas waktu telah tercapai
• Picu tombol pertanyaan kuis berikutnya

Kode untuk hal yang sama adalah seperti di bawah ini:

 jQuery( '[name="startQuiz"],[name="next"]' ) .click ( function (){
jQuery( '.wpProQuiz_listItem' ) .each ( function (){
if (jQuery(this). is (':visible')){
$ current_question_id = jQuery(ini). temukan (" .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];
}
lain {
counter_nilai = 0 ;
}
var wdm_globalElements = {
           selanjutnya: jQuery (ini). temukan ("[nama='berikutnya']"),
           wdm_timelimit: jQuery(ini). temukan (' .wpProQuiz_question_time_limit '),
current_counter: counter_value
};
wdm_globalElements. selanjutnya .sembunyikan ();
var wdm_timelimit = ( fungsi () {
           var _counter = wdm_globalElements.current_counter;
           var _intervalId = 0 ;
           var contoh = {};
           contoh . berhenti = fungsi () {
           jika (_penghitung) {
               jendela . clearInterval (_intervalId);
               wdm_globalElements.wdm_timelimit .css ( "tampilan" , "tidak ada" );
           }
         };
         contoh . mulai = fungsi () {
         jika ( ! _penghitung){
wdm_globalElements. berikutnya .tampilkan ();
kembali ;
         }
         var x = _penghitung * 1000 ;
         var $ timeText = wdm_globalElements.wdm_timelimit. find (' span ') .text (parseTime(_counter));
         var $ timeDiv = wdm_globalElements.wdm_timelimit. temukan (' .wpProQuiz_question_progress ');
         wdm_globalElements.wdm_timelimit .css ( "tampilan" , "" );
         var beforeTime = + Tanggal baru ();
         _intervalId = jendela . setInterval ( fungsi () {
                 var diff = ( + new Date() - beforeTime);
                 var elapsedTime = x - diff;
                 jika (perbedaan >= 500 ) {
                    $ timeText .text (parseTime( Math . ceil (elapsedTime / 1000 )));
                 }
                 $ timeDiv .css ( 'width' , (elapsedTime / x * 100 ) + '%' );
                 if (waktu berlalu <= 0 ) {
                    contoh .stop ();
                    wdm_globalElements. next .trigger ( "klik" );
                 }
          }, 16 );
        };
        kembali contoh;
        })();
wdm_batas waktu. mulai ();
}
});
}

Kode di atas menyembunyikan tombol pertanyaan 'Berikutnya' saat pengatur waktu berjalan, dan kemudian mengkliknya setelah batas waktu tercapai.

https://wisdmlabs.com/learndash-quiz-customization/?utm_source=blog&utm_medium=post&utm_campaign=quiz_cusomization_timer&utm_content=DropshippingDan hasilnya sama seperti di bawah ini:

Timer pertanyaan per kuis berfungsi saat Anda ingin memberi bobot pada pertanyaan tertentu dibandingkan dengan pertanyaan lain dalam kuis. Kode ini dapat berguna ketika Anda ingin menambahkan fungsionalitas tersebut ke LearnDash.

Jika Anda mencoba ini, dan Anda punya pertanyaan untuk saya, tembak!

Gambar oleh freepik