एक ऑनलाइन क्विज़ एप्लीकेशन में जावास्क्रिप्ट काउंटडाउन टाइमर को लागू करना

इस पोस्ट में हम अपने क्विज़ एप्लिकेशन का विस्तार करेंगे और इसमें एक जावास्क्रिप्ट काउंटडाउन टाइमर कार्यक्षमता जोड़ेंगे। एक और चीज़ जो हम यहां लागू कर रहे हैं, वह है कोड जोड़ना ताकि प्रत्येक क्विज़ में अलग-अलग संख्या में प्रश्न हो सकें। यदि आप पहले भाग को पहले से ही नहीं पढ़ते हैं, तो मैं आपको इसके माध्यम से जाने की सलाह दूंगा। इस पोस्ट को फॉलो करना और इसे पूरी तरह से समझना आपके लिए आसान होगा।

आप यहां पहला भाग पढ़ सकते हैं ।आप अपने कोणीय कैरियर के अवसरों का विस्तार कर सकते हैं ।

जावास्क्रिप्ट उलटी गिनती घड़ी

प्रत्येक क्विज़ की समय अवधि क्विज़ एक्सएमएल फ़ाइल में संग्रहीत की जाती है, हम क्विज़ की अवधि को पुनः प्राप्त करते हैं और इसे एक विशेषता के रूप में उपयोगकर्ता के सत्र में सहेजते हैं। जब उपयोगकर्ता एक प्रश्न प्रस्तुत करता है, तो हम जावास्क्रिप्ट के साथ कस्टम फॉर्म जमा करने के लिए नियंत्रक को भी समय देते हैं। इसलिए, जब हम अगला प्रश्न दिखाते हैं तो हम सही शेष समय प्रदर्शित करते हैं।

जब क्विज़ की समय अवधि समाप्त हो जाती है, तो उपयोगकर्ता को 'टाइम अप' कहते हुए एक अलर्ट बॉक्स दिखाया जाएगा और क्विज़ का मूल्यांकन किया जाएगा और अंतिम परिणाम प्रदर्शित किया जाएगा।

आइए देखें कि हमें इसे हासिल करने की क्या जरूरत है।

हमने क्विज़ प्रश्नों से पहले क्विज़ एक्सएमएल फ़ाइल में दो नई लाइनें जोड़ी हैं।

जावा क्विज़ (2015/01/18) 10 2 कौन सा वाक्यविन्यास सही है? सार्वजनिक वर्ग एबीसी का विस्तार होता है क्यूडब्ल्यूई छात्र int का विस्तार करता है i = 'A' स्ट्रिंग s = 'हैलो' निजी वर्ग ABC 2 निम्न में से कौन जावा में एक कीवर्ड नहीं है? क्लास इंटरफ़ेस अमूर्तता को बढ़ाता है 3 जावा के बारे में क्या सच है? जावा प्लेटफ़ॉर्म विशिष्ट है जावा कई विरासत का समर्थन नहीं करता है जावा लिनक्स पर नहीं चलता है और मैक जावा एक बहु-थ्रेडेड भाषा नहीं है 1 निम्न में से कौन सा एक इंटरफ़ेस है? थ्रेड रन करने योग्य दिनांक कैलेंडर 1 किस कंपनी ने जावा संस्करण 8 जारी किया? सन ओरेकल एडोब गूगल 1 जावा किस श्रेणी की भाषाओं में आता है? पहली पीढ़ी की भाषाएँ दूसरी पीढ़ी की भाषाएँ तीसरी पीढ़ी की भाषाएँ चौथी पीढ़ी की भाषाएँ 2 वह डिफ़ॉल्ट पैकेज है जो स्वचालित रूप से आपके कार्यक्रम के लिए दिखाई देता है? java.net javax.swing java.io java.lang 3 WEB-INF में किस प्रविष्टि का उपयोग एक सर्वलेट को मैप करने के लिए किया जाता है? सर्वलेट-मैपिंग सर्वलेट-पंजीकरण सर्वलेट-एंट्री सर्वलेट-अटैचमेंट 0 जावा डेटापाइप इंट की लंबाई कितनी है? 32 बिट 16 बिट 64 बिट रनटाइम विशिष्ट 0 जावा डेटाटाइप बूलियन का डिफ़ॉल्ट मान क्या है? सच्चा झूठा १ ० १

एक नई परीक्षा शुरू करते समय टाइमर सेट करना

जब उपयोगकर्ता एक नई परीक्षा शुरू करता है, तो हम एक विशेषता के रूप में उपयोगकर्ता के सत्र में प्रश्नोत्तरी के कुल प्रश्न और अवधि निर्धारित करते हैं।

अनुरोध। .item (0) .getTextContent ()) request.getSession ()। setAttribute ('मिनट', document.getElementsByTagName ('QuizDuration')। आइटम। (0) .getTextContent ()) request.getSession () सेकंड सेट करें। ', 0)

उलटी गिनती का समय

हमें प्रत्येक सेकंड के बाद टाइमर को घटाना होगा, यह करने के लिए कि हम एक जावास्क्रिप्ट फ़ंक्शन बनाने जा रहे हैं, जिसे पहले परीक्षा पृष्ठ लोड होने पर बुलाया जाएगा और फिर हम उस फ़ंक्शन को प्रत्येक सेकंड के बाद उलटी गिनती समय के बाद पुन: कॉल करेंगे।

जावास्क्रिप्ट कार्य उलटी गिनती समय के लिए

गहरी सीखने बनाम मशीन सीखने बनाम पैटर्न मान्यता

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () फ़ंक्शन customSubmit (someValue) {document.questionFormute.minute.value = min document.questionForm। second.value = sec document.questionForm.submit ()} function examTimer () {if (parseInt (sec)> 0) {document.getElementById ('शोटाइम')। innerHTML = 'समय शेष:' + मिनट + 'मिनट,'। + sec + 'Seconds' sec = parseInt (सेकंड) - 1 tim = setTimeout ('examTimer ()', 1000)} और {{(parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementByIdId ('शोटाइम')। इनर HTML = 'समय शेष:' + मिनट + 'मिनट,' + सेकंड + 'सेकंड्स चेतावनी (' टाइम अप ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 दस्तावेज़ .questionForm.submit ()} अगर (parseInt (sec) == 0) {document.getElementById (time शोटाइम ’)। भीतर का HTML =’ समय शेष: ’+ मिनट + मिनट, '+ सेकंड +’ सेकंड्स मिनट = parseInt (मिनट)। ) - १ सेकंड = ५ ९ टिम = सेटटाइमआउट ('एग्जामिनर ()', 1000)}}}

जावास्क्रिप्ट फ़ंक्शन को कैसे कॉल करें

अब, उस जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए हम शरीर टैग के ऑनलोड विशेषता का उपयोग करने जा रहे हैं।

परीक्षा नियंत्रक को प्रश्नोत्तरी समय जमा करना

अब तक हम क्विज़ प्रश्नों को सीधे परीक्षा नियंत्रक को सौंप रहे थे, लेकिन अब हमें टाइमर पैरामीटर: मिनट और दूसरा भी भेजना होगा ताकि जब परीक्षा नियंत्रक अगला प्रश्न प्रदर्शित करे तो उसे शेष बचे समय को भी प्रदर्शित किया जाए। यह प्राप्त करने के लिए कि हमने मैन्युअल रूप से जावास्क्रिप्ट का उपयोग करके फॉर्म जमा किया है और परीक्षा नियंत्रक को न्यूनतम और सेकेंड पैरामीटर भेजें।

जावास्क्रिप्ट का उपयोग करके फॉर्म जमा करना

ध्यान दें कि जब उपयोगकर्ता अगले, पिछले या फिनिश बटन पर क्लिक करता है तो कस्टमस्मिट () जावास्क्रिप्ट फ़ंक्शन को कॉल किया जाएगा।

$ {पसंद} 
  
0} '>
समय को संभालना
जब क्विज़ की अवधि समाप्त हो जाती है, तो दूसरे शब्दों में जब मिनट और सेकंड दोनों शून्य हो जाते हैं। हम 'टाइम अप' कहते हुए एक अलर्ट बॉक्स दिखाते हैं और मिनट और सेकंड के मूल्य को शून्य पर सेट करते हैं और फॉर्म सबमिट करते हैं।
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('शोटाइम')। भीतर का HTML = 'समय शेष:' + मिनट + 'मिनट,' + सेकंड + 'सेकंड्स अलर्ट (' समय)। ऊपर ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
हमें कोड बदलना होगा ताकि परीक्षा की समय सीमा खत्म होने पर परीक्षा समाप्त हो जाए।
और यदि ('समाप्त परीक्षा' असमान (क्रिया) || (मिनट == 0 और& दूसरा == 0)) {समाप्त = सही int परिणाम = exam.calculateResult (परीक्षा) request.setAttribute ('परिणाम'), परिणाम: अनुरोध .getSession ()। setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp')। फॉरवर्ड (अनुरोध, प्रतिक्रिया)।
तो, किसी परीक्षा को सीधे फिनिश बटन पर क्लिक करके या परीक्षा की समय सीमा समाप्त होने पर समाप्त किया जा सकता है (मिनट और सेकंड दोनों शून्य हो जाता है)।
यह इस पोस्ट के लिए है अगली पोस्ट में हम अपने क्विज़ एप्लिकेशन को और बढ़ाएंगे और नई सुविधा जोड़ेंगे ताकि उपयोगकर्ता अपने उत्तरों की समीक्षा करने में सक्षम हो सके और यह जान सके कि उसे कौन से प्रश्न गलत मिले और क्या सही उत्तर थे।
हमेशा की तरह आप कोड को डाउनलोड कर सकते हैं, जैसे चाहें उसे बदल सकते हैं। कोड को समझने का यह सबसे अच्छा तरीका है। यदि आपके पास कोई प्रश्न या अनुरोध है तो कृपया नीचे टिप्पणी करें।
कोड डाउनलोड करने के लिए डाउनलोड बटन पर क्लिक करें।
 क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे। 
 संबंधित पोस्ट: