Hướng dẫn javascript quiz countdown timer - đồng hồ đếm ngược câu đố javascript
|
Trong bài đăng này, chúng tôi sẽ mở rộng ứng dụng Quiz của chúng tôi và thêm chức năng hẹn giờ đếm ngược của JavaScript & NBSP vào đó. Một điều khác mà chúng tôi sẽ thực hiện ở đâ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 đã đọc phần đầu tiên, tôi sẽ khuyên bạn nên trải qua nó. Nó sẽ dễ dàng hơn để bạn 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 tiên ở đây để tạo một ứng dụng đố trực tuyến bằng cách sử dụng JSP Servlet. & NBSP; Bạn cũng có thể mở rộng cơ hội nghề nghiệp Angular của mình bằng cách thực hiện đào tạo chứng nhận Angular.Creating an Online Quiz Application using JSP Servlet. You could also expand your Angular career opportunities by taking up Angular Certification Training. Bộ đếm thời gian đếm ngược JavaScriptThời gian thời gian của mỗi bài kiểm tra được lưu trữ trong tệp QUIZ XML, chúng tôi lấy 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 một câu hỏi, chúng tôi cũng gửi thời gian cho bộ điều khiển bằng cách sử dụng Trình 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ị đúng thời gian còn lại. Khi thời gian của bài kiểm tra kết thúc, người dùng sẽ được hiển thị một hộp cảnh báo nói rằng thời gian lên trên và câu đố 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 Quiz XML, trước khi câu hỏi đố. < 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 bộ hẹn giờ khi bắt đầu một kỳ thi 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);Thời gian đếm ngượcChúng tôi phải giảm bộ đếm thời gian sau mỗi giây, để thực hiện rằng chúng tôi sẽ tạo chức năng JavaScript sẽ được gọi đầu tiên khi trang thi được tải và sau đó chúng tôi sẽ gọi hàm đó theo đệ 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 chức năng JavaScriptBây giờ, để gọi rằng chức năng JavaScript, chúng ta sẽ sử dụng thuộc tính onload của thẻ cơ thể. < body onload=”examTimer”> Gửi thời gian đố cho bộ điều khiển kỳ thiCho đến bây giờ chúng tôi đã gửi trực tiếp các câu hỏi câu hỏi trực tiếp đến bộ điều khiển bài kiểm tra, nhưng bây giờ chúng tôi phải gửi các tham số hẹn giờ: Phút và thứ hai cũng để khi bộ điều khiển bài kiểm tra hiển thị câu hỏi tiếp theo, nó cũng sẽ hiển thị đúng thời gian còn lại. Để đạt được điều đó, chúng tôi đã gửi biểu mẫu bằng cách sử dụng JavaScript và gửi các tham số Min và SEC cho Trình điều khiển bài kiểm tra. & NBSP; Gửi biểu mẫu bằng JavaScriptLưu ý rằng khi người dùng nhấp vào chức năng JavaScript tiếp theo, nút trước hoặc kết thúc 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 hải kết () Đó là hàm CustomSubmit () gửi các tham số phút và thứ hai cho ExecControll. function customSubmit(someValue){
document.questionForm.minute.value = min;
document.questionForm.second.value = sec;
document.questionForm.submit();
}Cập nhật bộ đếm thời gian đếm ngược trong phiên của người dùngChúng tôi lấy các giá trị của các tham số phút và thứ hai được gửi đến Trình điều khiển kiểm tra 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ý thời gian lênKhi thời lượng của bài kiểm tra kết thúc, nói cách khác, khi cả phút và thứ hai trở thành 0. Chúng tôi hiển thị một hộp cảnh báo nói & nbsp; Thời gian lên và đặt giá trị của phút và thứ hai thành 0 và 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ã để bài kiểm tra sẽ kết thúc khi giới hạn thời gian cho kỳ thi kết thúc. else if("Finish Exam".equals(action)||( minute==0 && second==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);
}Vì vậy, một bài kiểm tra có thể được hoàn thành bằng cách nhấp vào nút Kết thúc trực tiếp hoặc khi giới hạn thời gian của bài kiểm tra kết thúc (cả phút và thứ hai đều trở thành 0). Đó là nó cho bài viết này. & NBSP; Trong bài đăng tiếp theo, chúng tôi sẽ mở rộng ứng dụng Quiz 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 anh ta hiểu sai và câu trả lời chính xác là gì. Để tìm hiểu thêm, hãy xem khóa học phát triển Stack Full này ngày hôm nay. Như mọi khi, bạn có thể tải xuống mã, thay đổi nó như bạn 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. Nhấp vào nút Tải xuống để tải về 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. Bài viết liên quan: Bắt đầu với Java/J2EE Tạo một ứng dụng đố trực tuyến bằng cách sử dụng jsp servlet |
