Triển khai bộ đếm ngược thời gian JavaScript trong ứng dụng câu đố trực tuyến



Hướng dẫn từng bước này để triển khai đồng hồ đếm ngược JavaScript cho ứng dụng câu đố trực tuyến sẽ giúp bạn thực thi đồng hồ đếm ngược JavaScript là ngôn ngữ

Trong bài đăng này, chúng tôi sẽ mở rộng ứng dụng bài kiểm tra của mình và thêm chức năng đồng hồ đếm ngược JavaScript vào đó. Một điều khác mà chúng tôi sẽ triển khai ở đây là thêm mã để mỗi bài kiểm tra có thể có số lượng câu hỏi khác nhau. Nếu bạn chưa đọc phần đầu tiên, tôi sẽ khuyên bạn nên xem qua. Bạn sẽ dễ dàng hơn khi theo dõi bài đăng này và hiểu nó hoàn toàn.

khung điều khiển từ khóa trong selen

Bạn có thể đọc phần đầu tiên tại đây .Bạn cũng có thể mở rộng cơ hội nghề nghiệp Angular của mình bằng cách .





Bộ hẹn giờ đếm ngược JavaScript

Thời lượng của mỗi bài kiểm tra được lưu trữ trong tệp XML bài kiểm tra, chúng tôi truy xuất thời lượng của bài kiểm tra và lưu nó trong phiên của người dùng dưới dạng thuộc tính. Khi người dùng gửi câu hỏi, chúng tôi cũng gửi thời gian cho người kiểm soát bằng cách sử dụng gửi biểu mẫu tùy chỉnh với JavaScript. Vì vậy, khi chúng tôi hiển thị câu hỏi tiếp theo, chúng tôi hiển thị thời gian còn lại chính xác.

javascript-countdown-timer-online-quiz-application



Khi hết thời gian của bài kiểm tra, người dùng sẽ được hiển thị một hộp cảnh báo cho biết “Hết thời gian” và bài kiểm tra sẽ được đánh giá và kết quả cuối cùng sẽ được hiển thị.

Hãy xem những gì chúng ta cần để đạt được điều này.



Chúng tôi đã thêm hai dòng mới trong tệp XML bài kiểm tra, trước các câu hỏi bài kiểm tra.

Java Quiz (2015/01/18) 10 2 Cú pháp nào là đúng? public class ABC expand QWE expand Sinh viên int i = 'A' String s = 'Hello' private class ABC 2 Từ nào sau đây a không phải là từ khóa trong Java? giao diện lớp mở rộng tính trừu tượng 3 Điều gì đúng về Java? Java là nền tảng cụ thể Java không hỗ trợ đa kế thừa Java không chạy trên Linux và Mac Java không phải là ngôn ngữ đa luồng 1 Giao diện nào sau đây là giao diện? Chủ đề Runnable Date Calendar 1 Công ty nào đã phát hành phiên bản Java 8? Sun Oracle Adobe Google 1 Java thuộc loại ngôn ngữ nào? Ngôn ngữ thế hệ thứ nhất Ngôn ngữ thế hệ thứ hai Ngôn ngữ thế hệ thứ ba Ngôn ngữ thế hệ thứ tư 2 Gói mặc định nào được tự động hiển thị cho chương trình của bạn? java.net javax.swing java.io java.lang 3 Mục nào trong WEB-INF được sử dụng để ánh xạ một servlet? servlet-mapping servlet-register servlet-entry servlet-attachment 0 Độ dài của kiểu dữ liệu Java int là gì? 32 bit 16 bit 64 bit Thời gian chạy cụ thể 0 Giá trị mặc định của boolean kiểu dữ liệu Java là gì? đúng sai 1 0 1

Đặt hẹn giờ khi bắt đầu một kỳ thi mới

Khi người dùng bắt đầu một bài kiểm tra mới, chúng tôi đặt tổng số câu hỏi và thời lượng của bài kiểm tra trong phiên của người dùng làm thuộc tính.

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

Thời gian đếm ngược

Chúng ta phải giảm bộ đếm thời gian sau mỗi giây, để làm điều đó chúng ta sẽ tạo một hàm Javascript sẽ được gọi đầu tiên khi tải trang bài thi và sau đó chúng ta sẽ gọi hàm đó một cách đệ quy sau mỗi giây để đếm ngược thời gian.

Hàm Javascript để đếm ngược thời gian

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () function 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 = 'Thời gian còn lại:' + min + 'Minutes,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Thời gian còn lại:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Thời gian còn lại:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 giây = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Cách gọi hàm Javascript

Bây giờ, để gọi hàm Javascript đó, chúng ta sẽ sử dụng thuộc tính onload của thẻ body.

Nộp Thời gian Trắc nghiệm cho Kiểm soát viên Kỳ thi

Từ trước đến nay, chúng tôi gửi biểu mẫu câu hỏi trắc nghiệm trực tiếp đến Bộ điều khiển kỳ thi, nhưng bây giờ chúng tôi phải gửi thông số hẹn giờ: phút và giây để khi Bộ điều khiển kỳ thi hiển thị câu hỏi tiếp theo, nó cũng sẽ hiển thị thời gian còn lại chính xác. Để đạt được điều đó, chúng tôi đã gửi biểu mẫu theo cách thủ công bằng Javascript và gửi các tham số min và sec tới Bộ điều khiển kỳ thi.

Gửi biểu mẫu bằng Javascript

Lưu ý rằng khi người dùng nhấp vào tiếp theo, hàm Javascript customSubmit () trước đó hoặc kết thúc sẽ được gọi.

$ {choice} 

0} '>

Xử lý hết thời gian

Khi thời lượng của bài kiểm tra kết thúc, hay nói cách khác là khi cả phút và giây đều trở thành 0. Chúng tôi hiển thị hộp cảnh báo có nội dung “Hết giờ” và đặt giá trị của phút và giây thành 0 và gửi biểu mẫu.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Thời gian còn lại:' + min + 'Minutes,' + sec + 'Seconds' alert ('Thời gian Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Chúng tôi phải đổi mã đề để khi hết thời gian quy định môn thi sẽ kết thúc môn thi.

else if ('Kết thúc kỳ thi'.equals (hành động) || (phút == 0 && giây == 0)) {finish = true int result = exam.calculateResult (exam) request.setAttribute (' result ', result) yêu cầu .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (request, response)}

Vì vậy, một kỳ thi có thể được kết thúc bằng cách nhấp trực tiếp vào nút kết thúc hoặc khi thời hạn của kỳ thi kết thúc (cả phút và giây đều trở thành 0).

Đó là nó cho bài đăng này. Trong bài đăng tiếp theo, chúng tôi sẽ mở rộng thêm ứng dụng bài kiểm tra và thêm tính năng mới để người dùng có thể xem lại câu trả lời của mình và biết câu hỏi nào mình đã sai và đâu là câu trả lời đúng.

Như mọi khi, bạn có thể tải xuống mã, thay đổi mã theo ý muốn. Đó là cách tốt nhất để hiểu mã. Nếu bạn có bất kỳ câu hỏi hoặc yêu cầu vui lòng bình luận bên dưới.

Bấm vào nút tải xuống để tải mã.

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần bình luận và chúng tôi sẽ liên hệ lại với bạn.

chuỗi có thể thay đổi hoặc bất biến trong java

Bài viết liên quan: