Menerapkan Timer Hitung Mundur JavaScript Dalam Aplikasi Kuis Online



Panduan langkah demi langkah untuk menerapkan penghitung waktu mundur JavaScript untuk aplikasi kuis online akan membantu Anda menjalankan penghitung waktu mundur JavaScript menjadi bahasanya

Dalam posting ini kami akan memperluas aplikasi kuis kami dan menambahkan fungsi penghitung waktu mundur JavaScript ke dalamnya. Hal lain yang akan kami terapkan di sini adalah, menambahkan kode sehingga setiap kuis dapat memiliki jumlah pertanyaan yang berbeda. Jika Anda belum membaca bagian pertama, saya akan merekomendasikan Anda untuk membacanya. Akan lebih mudah bagi Anda untuk mengikuti posting ini dan memahaminya sepenuhnya.

Anda dapat membaca bagian pertama di sini .Anda juga dapat memperluas peluang karir Angular Anda dengan mengambil .





Timer Hitung Mundur JavaScript

Durasi waktu setiap kuis disimpan di file XML kuis, kami mengambil durasi kuis dan menyimpannya di sesi pengguna sebagai atribut. Saat pengguna mengirimkan pertanyaan, kami juga mengirimkan waktu ke pengontrol menggunakan pengiriman formulir kustom dengan JavaScript. Jadi, saat kami menampilkan pertanyaan berikutnya, kami menampilkan sisa waktu yang benar.

javascript-countdown-timer-online-quiz-application



Ketika durasi waktu kuis selesai, pengguna akan diperlihatkan kotak peringatan bertuliskan 'Waktu Habis' dan kuis akan dievaluasi dan hasil akhirnya akan ditampilkan.

Mari kita lihat apa yang kita butuhkan untuk mencapai ini.



Kami telah menambahkan dua baris baru dalam file XML kuis, sebelum pertanyaan kuis.

cara menggunakan kelas pemindai di java
Java Quiz (2015/01/18) 10 2 Manakah sintaks yang benar? public class ABC extends QWE extends Student int i = 'A' String s = 'Hello' private class ABC 2 Manakah dari berikut ini yang bukan merupakan kata kunci di Java? class interface extends abstraction 3 Apa yang benar tentang Java? Java adalah platform khusus Java tidak mendukung multiple inheritance Java tidak berjalan di Linux dan Mac Java bukan bahasa multi-threaded 1 Manakah dari berikut ini yang merupakan antarmuka? Thread Runnable Date Calendar 1 Perusahaan mana yang merilis Java Version 8? Sun Oracle Adobe Google 1 Java termasuk dalam kategori bahasa apa? Bahasa Generasi Pertama Bahasa Generasi Kedua Bahasa Generasi Ketiga Bahasa Generasi Keempat 2 Manakah paket default yang secara otomatis terlihat oleh program Anda? java.net javax.swing java.io java.lang 3 Entri mana di WEB-INF yang digunakan untuk memetakan servlet? servlet-mapping servlet-Registration servlet-entry servlet-attachment 0 Berapa panjang tipe data Java int? 32 bit 16 bit 64 bit Runtime specific 0 Apa nilai default dari datatype Java boolean? benar salah 1 0 1

Mengatur Timer Saat Memulai Ujian Baru

Saat pengguna memulai ujian baru, kami menetapkan total pertanyaan dan durasi kuis di sesi pengguna sebagai atribut.

request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElementsByTagName (') quizDuration (') quizDuration (') quizDuration .item (0) .getTextContent ()) request.getSession (). setAttribute ('min', document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec ', 0)

Waktu Hitung Mundur

Kita harus mengurangi pengatur waktu setelah setiap detik, untuk melakukan itu kita akan membuat fungsi Javascript yang akan dipanggil pertama kali saat halaman ujian dimuat dan kemudian kita akan memanggil fungsi itu secara rekursif setelah setiap detik ke waktu hitung mundur.

Fungsi javascript untuk menghitung waktu mundur

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () fungsi customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} function examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Sisa Waktu:' + menit + 'Menit,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Sisa Waktu:' + menit + 'Menit,' + detik + 'Detik' alert ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 dokumen .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Sisa Waktu:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 detik = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Bagaimana Memanggil Fungsi Javascript

Sekarang, untuk memanggil fungsi Javascript kita akan menggunakan atribut onload dari tag body.

Mengirimkan Waktu Kuis ke Pengontrol Ujian

Sampai saat ini kami mengirimkan formulir pertanyaan kuis langsung ke Pengontrol Ujian, tetapi sekarang kami harus mengirimkan parameter pengatur waktu: menit dan detik juga sehingga ketika Pengontrol Ujian menampilkan pertanyaan berikutnya juga harus menampilkan waktu yang tersisa dengan benar. Untuk mencapai itu kami telah mengirimkan formulir secara manual menggunakan Javascript dan mengirimkan parameter min dan sec ke Exam Controller.

Mengirimkan Formulir Menggunakan Javascript

Perhatikan bahwa ketika pengguna mengklik tombol berikutnya, sebelum atau selesai, fungsi Javascript customSubmit () akan dipanggil.

$ {choice} 

0} '>

Menangani Time Up

Saat durasi kuis selesai, dengan kata lain menit dan detik menjadi nol. Kami menampilkan kotak peringatan bertuliskan 'Waktu Habis' dan mengatur nilai menit dan detik menjadi nol dan mengirimkan formulir.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Sisa Waktu:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Atas ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Kami harus mengubah kodenya agar ujian selesai ketika batas waktu ujian selesai.

else if ('Selesaikan Ujian'.equals (aksi) || (menit == 0 && detik == 0)) {finish = true int result = exam.calculateResult (exam) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (request, response)}

Jadi, ujian dapat diselesaikan baik dengan mengklik tombol selesai secara langsung atau ketika batas waktu ujian selesai (menit dan detik menjadi nol).

Sekian untuk postingan ini. Di posting berikutnya kami akan memperluas aplikasi kuis kami dan menambahkan fitur baru sehingga pengguna dapat meninjau jawabannya dan mengetahui pertanyaan mana yang salah dan mana jawaban yang benar.

Seperti biasa, Anda dapat mengunduh kode, mengubahnya sesuka Anda. Itulah cara terbaik untuk memahami kode tersebut. Jika Anda memiliki pertanyaan atau permintaan, silakan beri komentar di bawah ini.

Klik tombol unduh untuk mengunduh kode.

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar dan kami akan menghubungi Anda kembali.

Posting terkait: