온라인 퀴즈 애플리케이션에서 JavaScript 카운트 다운 타이머 구현

이 게시물에서는 퀴즈 애플리케이션을 확장하고 여기에 JavaScript 카운트 다운 타이머 기능을 추가합니다. 여기에서 구현할 또 다른 사항은 각 퀴즈가 서로 다른 수의 질문을 가질 수 있도록 코드를 추가하는 것입니다. 아직 첫 부분을 읽지 않았다면 읽어 보시길 권합니다. 이 게시물을 따르고 완전히 이해하는 것이 더 쉬울 것입니다.

여기에서 첫 번째 부분을 읽을 수 있습니다. .당신은 또한 당신의 Angular 경력 기회를 .

스냅 샷에서 ec2 인스턴스 생성

자바 스크립트 카운트 다운 타이머

각 퀴즈의 지속 시간은 퀴즈 XML 파일에 저장되며 퀴즈 지속 시간을 검색하여 사용자 세션에 속성으로 저장합니다. 사용자가 질문을 제출하면 JavaScript로 사용자 지정 양식 제출을 사용하여 컨트롤러에 시간도 제출합니다. 따라서 다음 질문을 표시 할 때 정확한 남은 시간을 표시합니다.

퀴즈 시간이 끝나면 'Time Up'이라는 경고 상자가 표시되고 퀴즈가 평가되고 최종 결과가 표시됩니다.

이것을 달성하기 위해 필요한 것이 무엇인지 봅시다.

퀴즈 질문 전에 퀴즈 XML 파일에 두 개의 새 줄을 추가했습니다.

Java Quiz (2015/01/18) 10 2 올바른 구문은 무엇입니까? Public class ABC extends QWE extends Student int i = 'A'String s = 'Hello'private class ABC 2 다음 중 a가 Java의 키워드가 아닌 것은 무엇입니까? 클래스 인터페이스는 추상화를 확장합니다. 3 Java에 대한 진실은 무엇입니까? Java는 플랫폼에 따라 다릅니다. Java는 다중 상속을 지원하지 않습니다. Java는 Linux 및 Mac에서 실행되지 않습니다. Java는 다중 스레드 언어가 아닙니다. 1 다음 중 인터페이스는 무엇입니까? Thread Runnable Date Calendar 1 Java 버전 8을 출시 한 회사는 어디입니까? Sun Oracle Adobe Google 1 Java는 어떤 언어 범주에 속합니까? 1 세대 언어 2 세대 언어 3 세대 언어 4 세대 언어 2 프로그램에 자동으로 표시되는 기본 패키지는 무엇입니까? java.net javax.swing java.io java.lang 3 WEB-INF에서 서블릿 매핑에 사용되는 항목은 무엇입니까? servlet-mapping servlet-registration servlet-entry servlet-attachment 0 Java 데이터 유형 int의 길이는 얼마입니까? 32 비트 16 비트 64 비트 런타임 특정 0 Java 데이터 유형 부울의 기본값은 무엇입니까? 참 거짓 10 1

새 시험 시작시 타이머 설정

사용자가 새 시험을 시작할 때 사용자 세션의 총 질문과 퀴즈 기간을 속성으로 설정합니다.

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)

카운트 다운 시간

매초마다 타이머를 줄여야합니다. 이렇게하려면 시험 페이지가로드 될 때 먼저 호출되는 자바 스크립트 함수를 생성 한 다음 카운트 다운 시간까지 매초마다 해당 함수를 재귀 적으로 호출합니다.

카운트 다운 시간에 대한 자바 스크립트 기능

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 = '남은 시간 :'+ min + '분,' + sec + 'Seconds'sec = parseInt (sec)-1 tim = setTimeout ( 'examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ( 'showtime'). innerHTML = '남은 시간 :'+ 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 = '남은 시간 :'+ min + 'Minutes,'+ sec + 'Seconds'min = parseInt (min )-1 초 = 59 tim = setTimeout ( 'examTimer ()', 1000)}}}

자바 스크립트 함수를 호출하는 방법

이제이 자바 스크립트 함수를 호출하기 위해 body 태그의 onload 속성을 사용할 것입니다.

시험 컨트롤러에 퀴즈 시간 제출

지금까지 퀴즈 문제 양식을 시험 컨트롤러에 직접 제출했지만 이제는 타이머 매개 변수 (분 및 초)를 보내야합니다. 그래야 시험 컨트롤러가 다음 문제를 표시 할 때 올바른 남은 시간도 표시되어야합니다. 이를 위해 Javascript를 사용하여 양식을 수동으로 제출하고 최소 및 초 매개 변수를 Exam Controller로 전송했습니다.

자바 스크립트를 사용하여 양식 제출

사용자가 다음, 이전 또는 완료 버튼을 클릭하면 customSubmit () Javascript 함수가 호출됩니다.

$ {choice} 
  
0} '>
시간 처리
퀴즈 시간이 끝나면, 즉 분과 초가 모두 0이 될 때“Time Up”이라는 알림 상자를 표시하고 분과 초 값을 0으로 설정하고 양식을 제출합니다.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ( 'showtime'). innerHTML = '남은 시간 :'+ min + 'Minutes,'+ sec + 'Seconds'alert ( 'Time Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
시험 시간 제한이 끝나면 시험이 종료되도록 코드를 변경해야합니다.
else if ( 'Finish Exam'.equals (action) || (minutes == 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)}
따라서 완료 버튼을 직접 클릭하거나 시험 시간 제한이 끝나면 (분과 초가 모두 0이 됨) 시험을 완료 할 수 있습니다.
이게이 게시물입니다. 다음 게시물에서는 퀴즈 응용 프로그램을 더욱 확장하고 새로운 기능을 추가하여 사용자가 자신의 답변을 검토하고 잘못된 질문과 정답이 무엇인지 알 수 있도록 할 것입니다.
언제나처럼 코드를 다운로드 할 수 있으며 원하는대로 변경할 수 있습니다. 이것이 코드를 이해하는 가장 좋은 방법입니다. 질문이나 요청이 있으시면 아래에 의견을 남겨주세요.
다운로드 버튼을 클릭하여 코드를 다운로드하십시오.
자바의 기본 데이터 구조
 질문이 있으십니까? 의견란에 언급 해 주시면 연락 드리겠습니다. 
 관련 게시물: