Εφαρμογή χρονοδιακόπτη αντίστροφης μέτρησης JavaScript σε μια εφαρμογή διαδικτυακού κουίζ

Αυτός ο αναλυτικός οδηγός για την εφαρμογή χρονοδιακόπτη αντίστροφης μέτρησης JavaScript για μια διαδικτυακή εφαρμογή κουίζ θα σας βοηθήσει να εκτελέσετε το χρονόμετρο αντίστροφης μέτρησης JavaScript που είναι η γλώσσα

Σε αυτήν την ανάρτηση θα επεκτείνουμε την εφαρμογή κουίζ και θα προσθέσουμε μια λειτουργία χρονομέτρησης αντίστροφης μέτρησης JavaScript σε αυτήν. Ένα άλλο πράγμα που θα εφαρμόσουμε εδώ είναι η προσθήκη κώδικα, ώστε κάθε κουίζ να μπορεί να έχει διαφορετικό αριθμό ερωτήσεων. Εάν δεν έχετε διαβάσει ήδη το πρώτο μέρος, σας προτείνω να το διαβάσετε. Θα είναι ευκολότερο για εσάς να ακολουθήσετε αυτήν την ανάρτηση και να την κατανοήσετε πλήρως.

Μπορείτε να διαβάσετε το πρώτο μέρος εδώ .Θα μπορούσατε επίσης να επεκτείνετε τις γωνιακές σας ευκαιρίες σταδιοδρομίας αναλαμβάνοντας .





Χρονόμετρο αντίστροφης μέτρησης JavaScript

Η χρονική διάρκεια κάθε κουίζ αποθηκεύεται στο αρχείο XML κουίζ, ανακτούμε τη διάρκεια του κουίζ και το αποθηκεύουμε στη συνεδρία του χρήστη ως χαρακτηριστικό. Όταν ο χρήστης υποβάλλει μια ερώτηση, υποβάλλουμε επίσης τον χρόνο στον ελεγκτή χρησιμοποιώντας προσαρμοσμένη υποβολή φόρμας με JavaScript. Έτσι, όταν δείξουμε την επόμενη ερώτηση, εμφανίζεται ο σωστός χρόνος που απομένει.

javascript-countdown-timer-online-quiz-application



Όταν τελειώσει η διάρκεια του κουίζ, θα εμφανιστεί στο χρήστη ένα πλαίσιο ειδοποίησης που θα λέει 'Time Up' και το κουίζ θα αξιολογηθεί και θα εμφανιστεί το τελικό αποτέλεσμα.

Ας δούμε τι χρειαζόμαστε για να το επιτύχουμε.



Έχουμε προσθέσει δύο νέες γραμμές στο αρχείο κουίζ XML, πριν από ερωτήσεις κουίζ.

Java Quiz (2015/01/18) 10 2 Ποια είναι η σωστή σύνταξη; δημόσια τάξη ABC επεκτείνει QWE επεκτείνει Student int i = 'A' String s = 'Hello' private class ABC 2 Ποιο από τα παρακάτω α δεν είναι λέξη-κλειδί στην Java; διεπαφή κλάσης επεκτείνει την αφαίρεση 3 Τι ισχύει για την Java; Η Java είναι συγκεκριμένη για πλατφόρμα Η Java δεν υποστηρίζει πολλαπλή κληρονομιά Η Java δεν εκτελείται σε Linux και το Mac Java δεν είναι μια πολυ-νήμα γλώσσα 1 Ποιο από τα παρακάτω είναι μια διεπαφή; Ημερολόγιο ημερολογίου με δυνατότητα εκτέλεσης νήματος 1 Ποια εταιρεία κυκλοφόρησε την έκδοση Java 8; Το Sun Oracle Adobe Google 1 Java υπάγεται σε ποια κατηγορία γλωσσών; Γλώσσες πρώτης γενιάς Γλώσσες δεύτερης γενιάς Γλώσσες τρίτης γενιάς Γλώσσες τέταρτης γενιάς 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 bit 16 bit 64 bit συγκεκριμένα Χρόνος εκτέλεσης 0 Ποια είναι η προεπιλεγμένη τιμή Java τύπου boolean; true false 1 0 1

Ρύθμιση χρονοδιακόπτη κατά την έναρξη μιας νέας εξέτασης

Όταν ο χρήστης ξεκινά μια νέα εξέταση, ορίζουμε τις συνολικές ερωτήσεις και τη διάρκεια του κουίζ στη συνεδρία του χρήστη ως χαρακτηριστικό.

c ++ πρόγραμμα για ταξινόμηση ενός πίνακα σε αύξουσα σειρά
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 ('δευτ. ', 0)

Ώρα αντίστροφης μέτρησης

Πρέπει να μειώσουμε το χρονόμετρο μετά από κάθε δευτερόλεπτο, για να το κάνουμε αυτό θα δημιουργήσουμε μια συνάρτηση Javascript που θα κληθεί αρχικά όταν φορτωθεί η σελίδα των εξετάσεων και στη συνέχεια θα καλέσουμε αυτήν τη λειτουργία αναδρομικά μετά από κάθε δευτερόλεπτο σε χρόνο αντίστροφης μέτρησης.

Λειτουργία 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 = 'Χρόνος που απομένει:' + min + 'Minutes,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} other {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 έγγραφο .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Υπόλοιπο χρόνου:' + min + 'Minutes, + + sec +' Seconds 'min = parseInt (min ) - 1 δευτερόλεπτο = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Πώς να καλέσετε τη συνάρτηση Javascript

Τώρα, για να ονομάσουμε τη συνάρτηση Javascript πρόκειται να χρησιμοποιήσουμε το χαρακτηριστικό onload της ετικέτας σώματος.

Υποβολή του Χρόνου Κουίζ στον Ελεγκτή Εξετάσεων

Μέχρι τώρα υποβάλαμε τη φόρμα ερωτήσεων κουίζ απευθείας στον Ελεγκτή Εξετάσεων, αλλά τώρα πρέπει να στείλουμε τις παραμέτρους του χρονοδιακόπτη: λεπτό και δεύτερο, έτσι ώστε όταν ο Ελεγκτής Εξετάσεων εμφανίζει την επόμενη ερώτηση θα πρέπει επίσης να εμφανίζει τον σωστό υπόλοιπο χρόνο. Για να το πετύχουμε, υποβάλαμε τη φόρμα χειροκίνητα χρησιμοποιώντας Javascript και στείλαμε τις παραμέτρους min και sec στον Ελεγκτή Εξετάσεων.

Υποβολή φόρμας με Javascript

Σημειώστε ότι όταν ο χρήστης κάνει κλικ στο επόμενο, προηγούμενο ή τελικό κουμπί customSubmit () θα κληθεί η συνάρτηση Javascript.

$ {επιλογή} 

0} '>

Χειρισμός του Time Up

Όταν τελειώσει η διάρκεια του κουίζ, με άλλα λόγια όταν τόσο το λεπτό όσο και το δευτερόλεπτο γίνονται μηδέν. Εμφανίζουμε ένα πλαίσιο ειδοποίησης που λέει 'Time Up' και ορίζουμε την τιμή του λεπτού και του δευτέρου στο μηδέν και υποβάλλουμε τη φόρμα

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Χρόνος που απομένει:' + min + 'Minutes, + + sec +' Seconds 'alert (' Time Πάνω ») document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Πρέπει να αλλάξουμε τον κωδικό έτσι ώστε η εξέταση να ολοκληρωθεί όταν τελειώσει το χρονικό όριο για την εξέταση.

αλλιώς εάν ('Finish Exam'.equals (action) || (minute == 0 && second == 0)) {finish = true int result = exam.calculateResult (exam) request.setAttribute (' αποτέλεσμα ', αποτέλεσμα) αίτημα .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). προώθηση (αίτημα, απόκριση)}

Έτσι, μια εξέταση μπορεί να ολοκληρωθεί είτε κάνοντας κλικ στο κουμπί τερματισμού απευθείας ή όταν το χρονικό όριο της εξέτασης έχει τελειώσει (τόσο το λεπτό όσο και το δεύτερο γίνεται μηδέν).

java parse string μέχρι σήμερα

Αυτό είναι για αυτήν την ανάρτηση. Στην επόμενη ανάρτηση θα επεκτείνουμε περαιτέρω την εφαρμογή κουίζ και θα προσθέσουμε νέα δυνατότητα, ώστε ο χρήστης να μπορεί να ελέγξει τις απαντήσεις του και να γνωρίζει ποιες ερωτήσεις το έκανε λάθος και ποιες ήταν οι σωστές απαντήσεις.

Όπως πάντα μπορείτε να κατεβάσετε τον κωδικό, αλλάξτε τον όπως θέλετε. Αυτός είναι ο καλύτερος τρόπος για να κατανοήσετε τον κώδικα. Εάν έχετε οποιαδήποτε ερώτηση ή αίτημα παρακαλώ σχολιάστε παρακάτω.

Κάντε κλικ στο κουμπί λήψης για να κατεβάσετε τον κωδικό.

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων και θα επικοινωνήσουμε μαζί σας.

Σχετικές αναρτήσεις: