تنفيذ JavaScript Countdown Timer في تطبيق اختبار عبر الإنترنت

في هذا المنشور ، سنقوم بتوسيع تطبيق الاختبار الخاص بنا وإضافة وظيفة مؤقت للعد التنازلي لـ JavaScript. هناك شيء آخر سنطبقه هنا وهو إضافة رمز بحيث يمكن أن يحتوي كل اختبار على عدد مختلف من الأسئلة. إذا لم تكن قد قرأت الجزء الأول بالفعل ، فسوف أوصيك بمراجعته. سيكون من الأسهل عليك متابعة هذا المنشور وفهمه تمامًا.

يمكنك قراءة الجزء الأول هنا .يمكنك أيضًا توسيع فرصك الوظيفية في Angular من خلال المشاركة .

جافا سكريبت للعد التنازلي

يتم تخزين المدة الزمنية لكل اختبار في ملف XML للاختبار ، ونسترجع مدة الاختبار ونحفظها في جلسة المستخدم كسمة. عندما يرسل المستخدم سؤالاً ، نرسل أيضًا الوقت إلى وحدة التحكم باستخدام إرسال نموذج مخصص باستخدام JavaScript. لذلك ، عندما نعرض السؤال التالي ، نعرض الوقت المتبقي الصحيح.

عندما تنتهي المدة الزمنية للاختبار ، سيظهر للمستخدم مربع تنبيه يقول 'انتهى الوقت' وسيتم تقييم الاختبار وسيتم عرض النتيجة النهائية.

دعونا نرى ما نحتاجه لتحقيق ذلك.

لقد أضفنا سطرين جديدين في ملف XML للاختبار قبل أسئلة الاختبار.

اختبار Java Quiz (2015/01/18) 10 2 ما هي الصيغة الصحيحة؟ يمتد الفصل العام ABC يمتد QWE للطالب int i = 'A' String s = 'Hello' فئة خاصة ABC 2 أي مما يلي ليس كلمة أساسية في Java؟ واجهة الفصل تمدد التجريد 3 ما هو صحيح في Java؟ Java عبارة عن نظام أساسي خاص بـ Java لا يدعم التوريث المتعدد لا يعمل Java على Linux و Mac Java ليست لغة متعددة الخيوط 1 أي مما يلي عبارة عن واجهة؟ تاريخ التشغيل التقويم 1 ما هي الشركة التي أصدرت Java الإصدار 8؟ أي فئة من اللغات تندرج تحت أي فئة من اللغات؟ لغات الجيل الأول لغات الجيل الثاني لغات الجيل الثالث لغات الجيل الرابع 2 ما هي الحزمة الافتراضية التي تظهر تلقائيًا لبرنامجك؟ java.net javax.swing java.io java.lang 3 أي إدخال في WEB-INF يُستخدم لتعيين servlet؟ servlet-mapping-servlet-registration servlet-entry servlet-attachment 0 ما هو طول نوع بيانات Java int؟ 32 بت 16 بت 64 بت محدد وقت التشغيل 0 ما هي القيمة الافتراضية لنوع بيانات Java المنطقي؟ صح خطأ 1 0 1

ضبط المؤقت عند بدء اختبار جديد

عندما يبدأ المستخدم اختبارًا جديدًا ، نحدد إجمالي الأسئلة ومدة الاختبار في جلسة المستخدم كسمة.

request.getSession (). setAttribute ('totalNumberOfQuizQuestions'، document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration'، document.getElementsByTaguration ') .item (0) .getTextContent ()) request.getSession (). setAttribute ('min'، document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec '، 0)

وقت العد التنازلي

يتعين علينا إنقاص المؤقت بعد كل ثانية ، للقيام بذلك ، سنقوم بإنشاء وظيفة جافا سكريبت التي سيتم استدعاؤها أولاً عند تحميل صفحة الاختبار ثم سنسمي هذه الوظيفة بشكل متكرر بعد كل ثانية لوقت العد التنازلي.

وظيفة جافا سكريبت لوقت العد التنازلي

مساحة الاسم في c ++

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () وظيفة مخصصة تقديم (بعض القيمة) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} function examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'الوقت المتبقي:' + min + 'Minutes،' + 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 + تنبيه 'ثانية' ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 مستند .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'الوقت المتبقي:' + min + 'Minutes،' + sec + 'Seconds' min = parseInt (min ) - 1 ثانية = 59 توقيت = setTimeout ('examTimer ()'، 1000)}}}

كيفية استدعاء وظيفة جافا سكريبت

الآن ، لاستدعاء وظيفة Javascript ، سنستخدم سمة onload لعلامة الجسم.

إرسال وقت الاختبار إلى مراقب الاختبارات

حتى الآن ، كنا نرسل نموذج أسئلة الاختبار مباشرةً إلى وحدة تحكم الاختبارات ، ولكن يتعين علينا الآن إرسال معلمات المؤقت: الدقيقة والثانية أيضًا بحيث عندما تعرض وحدة التحكم في الاختبار السؤال التالي ، يجب أن تعرض أيضًا الوقت المتبقي الصحيح. لتحقيق ذلك ، قمنا بإرسال النموذج يدويًا باستخدام Javascript وإرسال معلمات min و sec إلى Exam Controller.

إرسال النموذج باستخدام جافا سكريبت

لاحظ أنه عند قيام المستخدم بالنقر فوق الزر التالي أو السابق أو زر الانتهاء ، سيتم استدعاء وظيفة جافا سكريبت () المخصصة.

الفرق بين c # و c ++

$ {خيار} 
  
0} '>
التعامل مع الوقت
عندما تنتهي مدة الاختبار ، أي عندما تصبح الدقيقة والثانية صفراً. نعرض مربع تنبيه يقول 'Time Up' ونضبط قيمة الدقيقة والثانية على الصفر ونرسل النموذج.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'الوقت المتبقي:' + min + 'Minutes،' + sec + 'Seconds' تنبيه ('الوقت 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 نتيجة = exam.calculateResult (exam) request.setAttribute (' نتيجة '، نتيجة) طلب .getSession (). setAttribute ('currentExam' ، فارغة) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (request، response)}
لذلك ، يمكن إنهاء الاختبار إما عن طريق النقر على زر الإنهاء مباشرةً أو عند انتهاء المهلة الزمنية للاختبار (تصبح الدقيقة والثانية صفراً).
هذا كل ما في هذا المنشور. في المنشور التالي ، سنعمل على تمديد تطبيق الاختبار لدينا وإضافة ميزة جديدة حتى يتمكن المستخدم من مراجعة إجاباته ومعرفة الأسئلة التي أخطأ فيها وما هي الإجابات الصحيحة.
كما هو الحال دائمًا ، يمكنك تنزيل الكود وتغييره كما تريد. هذه هي أفضل طريقة لفهم الكود. إذا كان لديك أي سؤال أو طلب الرجاء التعليق أدناه.
انقر فوق زر التنزيل لتنزيل الكود.
 لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات وسنعاود الاتصال بك. 
 المنشورات ذات الصلة: