การใช้งานตัวจับเวลาการนับถอยหลังของ JavaScript ในแอปพลิเคชันแบบทดสอบออนไลน์

ในโพสต์นี้เราจะขยายแอปพลิเคชันแบบทดสอบของเราและเพิ่มฟังก์ชันจับเวลาถอยหลังของ JavaScript เข้าไป อีกสิ่งหนึ่งที่เราจะนำไปใช้ที่นี่คือการเพิ่มโค้ดเพื่อให้แบบทดสอบแต่ละข้อมีจำนวนคำถามที่แตกต่างกัน หากคุณยังไม่ได้อ่านส่วนแรกฉันจะแนะนำให้คุณอ่านตอนนี้ จะง่ายกว่าที่คุณจะติดตามโพสต์นี้และทำความเข้าใจอย่างถ่องแท้

วิธีแปลง double เป็น int

คุณสามารถอ่านส่วนแรกได้ที่นี่ .นอกจากนี้คุณยังสามารถขยายโอกาสในการทำงานของ Angular ได้ด้วยการรับ .

ตัวจับเวลาการนับถอยหลังของ JavaScript

ระยะเวลาของแบบทดสอบแต่ละข้อจะถูกเก็บไว้ในไฟล์ XML ของแบบทดสอบเราจะดึงระยะเวลาของแบบทดสอบและบันทึกไว้ในเซสชันของผู้ใช้เป็นแอตทริบิวต์ เมื่อผู้ใช้ส่งคำถามเราจะส่งเวลาไปยังผู้ควบคุมโดยใช้การส่งแบบฟอร์มที่กำหนดเองด้วย JavaScript ดังนั้นเมื่อเราแสดงคำถามถัดไปเราจะแสดงเวลาที่เหลือที่ถูกต้อง

เมื่อหมดระยะเวลาของแบบทดสอบผู้ใช้จะเห็นกล่องแจ้งเตือนว่า“ หมดเวลา” และแบบทดสอบจะได้รับการประเมินและผลลัพธ์สุดท้ายจะปรากฏขึ้น

มาดูกันว่าเราต้องการอะไรเพื่อให้บรรลุเป้าหมายนี้

เราได้เพิ่มบรรทัดใหม่สองบรรทัดในไฟล์ XML แบบทดสอบก่อนคำถามแบบทดสอบ

Java Quiz (2015/01/18) 10 2 ไวยากรณ์ที่ถูกต้องคือข้อใด? ABC คลาสสาธารณะขยาย QWE ขยาย Student int i = 'A' String s = 'Hello' private class ABC 2 ข้อใดต่อไปนี้ไม่ใช่คีย์เวิร์ดใน Java class interface ขยายสิ่งที่เป็นนามธรรม 3 จริงเกี่ยวกับ Java คืออะไร? Java เป็น Java เฉพาะแพลตฟอร์มไม่สนับสนุนการสืบทอดหลายรายการ Java ไม่ทำงานบน Linux และ Mac Java ไม่ใช่ภาษาแบบมัลติเธรด 1 ข้อใดต่อไปนี้เป็นอินเทอร์เฟซ Thread Runnable Date Calendar 1 บริษัท ไหนปล่อย Java Version 8? Sun Oracle Adobe Google 1 Java อยู่ภายใต้หมวดหมู่ของภาษาใด? ภาษารุ่นแรกภาษารุ่นที่สองภาษายุคที่สามภาษารุ่นที่สี่ 2 แพ็คเกจเริ่มต้นใดที่โปรแกรมของคุณมองเห็นได้โดยอัตโนมัติ java.net javax.swing java.io java.lang 3 รายการใดใน WEB-INF ที่ใช้ในการแมป servlet servlet-mapping servlet-register servlet-entry servlet-attachment 0 ความยาวของ Java datatype int คืออะไร? 32 บิต 16 บิต 64 บิตเฉพาะรันไทม์ 0 ค่าเริ่มต้นของบูลีนประเภทข้อมูล Java คืออะไร? จริงเท็จ 1 0 1

การตั้งเวลาเมื่อเริ่มการสอบใหม่

เมื่อผู้ใช้เริ่มการสอบใหม่เราจะตั้งคำถามและระยะเวลาทั้งหมดของแบบทดสอบในเซสชันของผู้ใช้เป็นแอตทริบิวต์

request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElerationByTagName ('quizDuration) .item (0) .getTextContent ()) request.getSession (). setAttribute ('min', document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('วินาที ', 0)

เวลานับถอยหลัง

เราต้องลดตัวจับเวลาทุกวินาทีเพื่อที่เราจะสร้างฟังก์ชัน Javascript ที่จะถูกเรียกครั้งแรกเมื่อโหลดหน้าข้อสอบจากนั้นเราจะเรียกฟังก์ชันนั้นซ้ำทุกวินาทีเพื่อนับถอยหลัง

ฟังก์ชัน Javascript เพื่อนับเวลาถอยหลัง

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = ฟังก์ชัน Date () ใหม่ 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,' + วินาที + 'วินาที' วินาที = parseInt (วินาที) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (นาที) == 0 && parseInt (วินาที) == 0) {document.getElementById ('showtime'). innerHTML = 'เวลาที่เหลือ:' + min + 'Minutes,' + วินาที + 'Seconds' alert ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit ()} if (parseInt (วินาที) == 0) {document.getElementById ('showtime'). innerHTML = 'เวลาที่เหลือ:' + นาที + 'นาที,' + วินาที + 'วินาที' นาที = parseInt (นาที ) - 1 วินาที = 59 tim = setTimeout ('examTimer ()', 1000)}}}

วิธีเรียกใช้ฟังก์ชัน Javascript

ตอนนี้ในการเรียกใช้ฟังก์ชัน Javascript เราจะใช้แอตทริบิวต์ onload ของ body tag

ส่งแบบทดสอบเวลาไปยังผู้ควบคุมการสอบ

จนถึงตอนนี้เรากำลังส่งแบบฟอร์มคำถามแบบทดสอบไปยังผู้ควบคุมการสอบโดยตรง แต่ตอนนี้เราต้องส่งพารามิเตอร์ตัวจับเวลา: นาทีและวินาทีด้วยเพื่อให้เมื่อผู้ควบคุมการสอบแสดงคำถามถัดไปก็ควรแสดงเวลาที่เหลือที่ถูกต้องด้วย เพื่อให้บรรลุเราได้ส่งแบบฟอร์มด้วยตนเองโดยใช้ Javascript และส่งพารามิเตอร์ min และ sec ไปยัง Exam Controller

การส่งแบบฟอร์มโดยใช้ Javascript

โปรดทราบว่าเมื่อผู้ใช้คลิกถัดไปปุ่มก่อนหน้าหรือปุ่มเสร็จสิ้น customSubmit () ฟังก์ชัน Javascript จะถูกเรียกใช้

$ {choice} 
  
0} '>
การจัดการเวลาขึ้น
เมื่อหมดระยะเวลาของแบบทดสอบกล่าวอีกนัยหนึ่งคือเมื่อทั้งนาทีและวินาทีกลายเป็นศูนย์เราจะแสดงกล่องแจ้งเตือนว่า“ หมดเวลา” และตั้งค่าของนาทีและวินาทีเป็นศูนย์และส่งแบบฟอร์ม
if (parseInt (นาที) == 0 && parseInt (วินาที) == 0) {document.getElementById ('showtime'). innerHTML = 'เวลาที่เหลือ:' + นาที + 'นาที,' + วินาที + 'วินาที' การแจ้งเตือน ('เวลา ขึ้น ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
เราต้องเปลี่ยนรหัสเพื่อให้การสอบเสร็จสิ้นเมื่อหมดเวลาที่กำหนดในการสอบ
else if ('Finish Exam'.equals (action) || (minute == 0 && second == 0)) คำขอ {finish = true int result = exam.calculateResult (exam) request.setAttribute (' result ', result) .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp') ส่งต่อ (การร้องขอการตอบกลับ)}
ดังนั้นการสอบสามารถทำได้โดยคลิกที่ปุ่มเสร็จสิ้นโดยตรงหรือเมื่อเวลาที่กำหนดของการสอบสิ้นสุดลง (ทั้งนาทีและวินาทีจะกลายเป็นศูนย์)
สำหรับโพสต์นี้ ในโพสต์ถัดไปเราจะขยายแอปพลิเคชันแบบทดสอบของเราเพิ่มเติมและเพิ่มคุณสมบัติใหม่เพื่อให้ผู้ใช้สามารถตรวจสอบคำตอบของเขาและรู้ว่าคำถามใดที่เขาตอบผิดและคำตอบที่ถูกต้อง
และเช่นเคยคุณสามารถดาวน์โหลดรหัสเปลี่ยนแปลงได้ตามต้องการ นั่นเป็นวิธีที่ดีที่สุดในการทำความเข้าใจโค้ด หากคุณมีคำถามหรือคำขอโปรดแสดงความคิดเห็นด้านล่าง
คลิกที่ปุ่มดาวน์โหลดเพื่อดาวน์โหลดรหัส
 มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นแล้วเราจะติดต่อกลับไป 
php ความแตกต่างระหว่าง echo และ print
 กระทู้ที่เกี่ยวข้อง: