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 ứng dụng đó. 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 khuyên bạn nên xem qua nó. Bạn sẽ dễ dàng theo dõi bài đăng này và hiểu nó hoàn toàn
Bạn có thể đọc phần đầu tại đây Tạo Ứng dụng Trắc nghiệm Trực tuyến bằng JSP Servlet. Bạn cũng có thể mở rộng cơ hội nghề nghiệp Angular của mình bằng cách tham gia Khóa đào tạo chứng chỉ Angular
Thời lượng của mỗi bài kiểm tra được lưu trữ trong tệp XML của 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 tới bộ điều khiển bằng cách gửi biểu mẫu tùy chỉnh bằng 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
Khi hết thời gian của bài kiểm tra, người dùng sẽ thấy một hộp cảnh báo có nội dung “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
< quiz> < title>Java Quiz [2015/01/18]< /title> < totalquizquestions>10< /totalquizquestions> < quizduration>2< /quizduration> < questions> < question> < quizquestion>Which is the correct syntax ?< /quizquestion> < answer> public class ABC extends QWE extends Student< /answer> < answer> int i="A";< /answer> < answer>String s="Hello";< /answer> < answer> private class ABC< /answer> < correct>2< /correct> < /question> < question> < quizquestion> Which of the following a is not a keyword in Java ?< /quizquestion> < answer>class< /answer> < answer>interface< /answer> < answer>extends< /answer> < answer>abstraction< /answer> < correct>3< /correct> < /question> < question> < quizquestion>What is true about Java ?< /quizquestion> < answer>Java is platform specific< /answer> < answer>Java does not support multiple inheritance< /answer> < answer>Java does not run on Linux and Mac< /answer> < answer>Java is not a multi-threaded language < /answer> < correct>1< /correct> < /question> < question> < quizquestion>Which of the following is an interface ?< /quizquestion> < answer>Thread< /answer> < answer>Runnable< /answer> < answer>Date< /answer> < answer>Calendar< /answer> < correct>1< /correct> < /question> < question> < quizquestion>Which company released Java Version 8 ?< /quizquestion> < answer>Sun< /answer> < answer>Oracle< /answer> < answer>Adobe< /answer> < answer>Google< /answer> < correct>1< /correct> < /question> < question> < quizquestion>Java comes under which category of languages ?< /quizquestion> < answer>First Generation Languages< /answer> < answer>Second Generation Languages< /answer> < answer>Third Generation Languages< /answer> < answer>Fourth Generation Languages< /answer> < correct>2< /correct> < /question> < question> < quizquestion>Which is the default package that is automatically visible to your program ?< /quizquestion> < answer>java.net< /answer> < answer>javax.swing< /answer> < answer>java.io< /answer> < answer>java.lang< /answer> < correct>3< /correct> < /question> < question> < quizquestion>Which entry in WEB-INF is used to map a servlet ?< /quizquestion> < answer>servlet-mapping< /answer> < answer>servlet-registration< /answer> < answer>servlet-entry< /answer> < answer>servlet-attachment< /answer> < correct>0< /correct> < /question> < question> < quizquestion>What is the length of Java datatype int ?< /quizquestion> < answer>32 bit< /answer> < answer>16 bit< /answer> < answer>64 bit< /answer> < answer>Runtime specific< /answer> < correct>0< /correct> < /question> < question> < quizquestion>What is the default value of Java datatype boolean?< /quizquestion> < answer>true< /answer> < answer>false< /answer> < answer>1< /answer> < answer>0< /answer> < correct>1< /correct> < /question> < /questions> < /quiz>
Đặt hẹn giờ khi bắt đầu một bài kiểm tra 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["quizDuration"].item[0].getTextContent[]]; request.getSession[].setAttribute["min",document.getElementsByTagName["quizDuration"].item[0].getTextContent[]]; request.getSession[].setAttribute["sec",0];
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 trang bài kiểm tra được tải và sau đó chúng ta sẽ gọi hàm đó theo cách đệ quy sau mỗi giây để đếm ngược thời gian
Chức năng Javascript để đếm ngược thời gian
< script language ="javascript" > 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 = "Time Remaining :"+min+" Minutes ," + sec+" Seconds"; sec = parseInt[sec] - 1; tim = setTimeout["examTimer[]", 1000]; } else { if [parseInt[min]==0 && parseInt[sec]==0]{ document.getElementById["showtime"].innerHTML = "Time Remaining :"+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 = "Time Remaining :"+min+" Minutes ," + sec+" Seconds"; min = parseInt[min] - 1; sec=59; tim = setTimeout["examTimer[]", 1000]; } } } < /script>
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
< body onload=”examTimer”>
Gửi thời gian làm bài kiểm tra cho người điều khiển kỳ thi
Cho đến bây giờ, chúng tôi đã gửi biểu mẫu câu hỏi kiểm tra trực tiếp tới Bộ điều khiển kỳ thi, nhưng bây giờ chúng tôi phải gửi các tham số của bộ đếm thời gian. phút và giây để khi Trình điều khiển kiểm tra 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ố tối thiểu và giây tới Trình điều khiển bài kiểm tra.
Gửi biểu mẫu bằng Javascript
Lưu ý rằng khi người dùng nhấp vào nút tiếp theo, trước đó hoặc kết thúc, chức năng Javascript customSubmit[] sẽ được gọi
< form action="exam" method="post" name="questionForm" > < c:forEach var="choice" items="${sessionScope.quest.questionOptions}" varStatus="counter"> < input type="radio" name="answer" value="${counter.count}" >${choice} < br/> < /c:forEach> < br/> < c:if test="${sessionScope.quest.questionNumber > 0}"> < input type="submit" name="action" value="Previous" title="customSubmit[]" /> < /c:if> < c:if test="${sessionScope.quest.questionNumber < sessionScope.totalNumberOfQuizQuestions-1}"> < input type="submit" name="action" value="Next" title="customSubmit[]" /> < /c:if> < input type="submit" name="action" value="Finish Exam" title="customSubmit[]" /> < input type="hidden" name="minute"/> < input type="hidden" name="second"/> < /form>
hàm customSubmit[]
Hàm customSubmit[] gửi tham số phút và giây tới ExamController
function customSubmit[someValue]{ document.questionForm.minute.value = min; document.questionForm.second.value = sec; document.questionForm.submit[]; }
Cập nhật Đồng hồ đếm ngược trong Phiên của người dùng
Chúng tôi truy xuất các giá trị của tham số phút và giây được gửi đến ExamController và cập nhật nó trong phiên của người dùng
if[request.getParameter["minute"]!=null] { minute=Integer.parseInt[request.getParameter["minute"]]; second=Integer.parseInt[request.getParameter["second"]]; request.getSession[].setAttribute["min",request.getParameter["minute"] ]; request.getSession[].setAttribute["sec",request.getParameter["second"] ]; }
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 khi cả phút và giây đều bằng không. Chúng tôi hiển thị một hộp cảnh báo có nội dung “Hết thời gian” và đặt giá trị của phút và giây thành 0 rồi gửi biểu mẫu
if [parseInt[min]==0 && parseInt[sec]==0]{ document.getElementById["showtime"].innerHTML = "Time Remaining :"+min+" Minutes ," + sec+" Seconds"; alert["Time Up"]; document.questionForm.minute.value=0; document.questionForm.second.value=0; document.questionForm.submit[]; }
Chúng tôi phải thay đổi mã để kỳ thi kết thúc khi thời hạn cho kỳ thi kết thúc
________số 8_______Vì vậy, một bài kiểm tra 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 hết thời gian giới hạn của bài kiểm tra [cả phút và giây đều bằng 0]
Đó là nó cho bài viết này. Trong bài đăng tiếp theo, chúng tôi sẽ tiếp tục mở rộng ứng dụng câu đố của mình 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 đã trả lời sai và câu trả lời nào là đúng. Để tìm hiểu thêm, hãy xem khóa học dành cho nhà phát triển Full Stack này ngay hôm nay
Như mọi khi, bạn có thể tải xuống mã, thay đổi nó 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 xin vui lòng bình luận dưới đây