Xin chào độc giả, Hôm nay trong blog này, bạn sẽ tìm hiểu cách Tạo Ứng dụng đố vui với Bộ đếm thời gian bằng HTML CSS & JavaScript. Trước đó, tôi đã chia sẻ một blog về cách tạo Trang web danh mục đầu tư cá nhân đáp ứng và bây giờ là lúc để tạo Ứng dụng web đố vui bằng JavaScript
Trong chương trình này [Ứng dụng đố vui có hẹn giờ], có ba lớp hoặc hộp và các hộp này được hiển thị lần lượt trên một nút cụ thể được nhấp. Lúc đầu, trên trang web hiển thị một nút có nhãn là “Bắt đầu Quiz” và khi bạn nhấp vào nút đó, thì hộp thông tin xuất hiện với hoạt ảnh bật lên. Trong hộp thông tin này, có một số quy tắc của bài kiểm tra và hai nút có nhãn là “Thoát” và “Tiếp tục”. Khi bạn bấm vào nút Thoát, hộp thông tin sẽ ẩn đi nhưng khi bạn bấm vào nút Tiếp tục, Hộp câu hỏi sẽ xuất hiện
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
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