Đồng hồ đếm ngược trong php cho bài kiểm tra
|
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 Show
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ớiKhi 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 JavascriptBâ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ỳ thiCho đế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 JavascriptLư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" onclick="customSubmit()" />
< /c:if>
< c:if test="${sessionScope.quest.questionNumber < sessionScope.totalNumberOfQuizQuestions-1}">
< input type="submit" name="action" value="Next" onclick="customSubmit()" />
< /c:if>
< input type="submit" name="action" value="Finish Exam" onclick="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ùngChú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 gianKhi 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 Làm cách nào để thêm bộ đếm thời gian trong PHP cho bài kiểm tra?getElementById("thời gian kết thúc"). innerHTML='Bài kiểm tra sẽ kết thúc lúc. '+date_quiz_end; . getElementById("thời gian chiếu"). innerHTML = 'Thời gian còn lại. '+ngày + "d " + giờ + "h" + phút + "m" + giây + "s";
Làm cách nào để tạo đồng hồ đếm ngược trong PHP?Làm cách nào để tạo một bài kiểm tra trắc nghiệm trong PHP và MySQL?php bao gồm 'câu đố. php';
Làm cách nào để đặt hẹn giờ cho bài kiểm tra trực tuyến bằng JavaScript?Thông tin cơ bản về đồng hồ đếm ngược là. . Đặt ngày kết thúc hợp lệ Tính thời gian còn lại Chuyển đổi thời gian sang định dạng có thể sử dụng Xuất dữ liệu đồng hồ dưới dạng đối tượng có thể tái sử dụng Hiển thị đồng hồ trên trang và dừng đồng hồ khi nó về 0 |
