Implementieren des JavaScript-Countdown-Timers in einer Online-Quizanwendung

In diesem Beitrag erweitern wir unsere Quizanwendung und fügen eine JavaScript-Countdown-Timer-Funktion hinzu. Eine andere Sache, die wir hier implementieren werden, ist das Hinzufügen von Code, damit jedes Quiz eine andere Anzahl von Fragen haben kann. Wenn Sie den ersten Teil noch nicht gelesen haben, empfehle ich Ihnen, ihn durchzugehen. Es wird für Sie einfacher sein, diesem Beitrag zu folgen und ihn vollständig zu verstehen.

Den ersten Teil können Sie hier lesen .Sie können Ihre Angular-Karrieremöglichkeiten auch durch Aufnahme erweitern .

JavaScript Countdown Timer

Die Zeitdauer jedes Quiz wird in der Quiz-XML-Datei gespeichert. Wir rufen die Dauer des Quiz ab und speichern sie in der Sitzung des Benutzers als Attribut. Wenn der Benutzer eine Frage stellt, senden wir die Zeit auch mithilfe einer benutzerdefinierten Formularübermittlung mit JavaScript an den Controller. Wenn wir also die nächste Frage anzeigen, zeigen wir die korrekte verbleibende Zeit an.

Wenn die Zeitdauer des Quiz abgelaufen ist, wird dem Benutzer ein Warnfeld mit der Aufschrift „Time Up“ angezeigt. Das Quiz wird ausgewertet und das Endergebnis angezeigt.

Mal sehen, was wir brauchen, um dies zu erreichen.

Wie schreibe ich einen Scanner in Java?

Wir haben der Quiz-XML-Datei vor den Quizfragen zwei neue Zeilen hinzugefügt.

Java Quiz (18.01.2015) 10 2 Welche Syntax ist richtig? öffentliche Klasse ABC erweitert QWE erweitert Student int i = 'A' String s = 'Hallo' private Klasse ABC 2 Welches der folgenden a ist in Java kein Schlüsselwort? Klassenschnittstelle erweitert Abstraktion 3 Was ist wahr an Java? Java ist plattformspezifisch Java unterstützt keine Mehrfachvererbung Java läuft nicht unter Linux und Mac Java ist keine Multithread-Sprache 1 Welche der folgenden Schnittstellen ist eine Schnittstelle? Thread Runnable Date Calendar 1 Welches Unternehmen hat Java Version 8 veröffentlicht? Sun Oracle Adobe Google 1 Java fällt unter welche Kategorie von Sprachen? Sprachen der ersten Generation Sprachen der zweiten Generation Sprachen der dritten Generation Sprachen der vierten Generation 2 Welches ist das Standardpaket, das für Ihr Programm automatisch sichtbar ist? java.net javax.swing java.io java.lang 3 Mit welchem ​​Eintrag in WEB-INF wird ein Servlet zugeordnet? Servlet-Mapping Servlet-Registrierung Servlet-Eintrag Servlet-Anhang 0 Wie lang ist der Java-Datentyp int? 32 Bit 16 Bit 64 Bit Laufzeitspezifisch 0 Was ist der Standardwert des booleschen Java-Datentyps? wahr falsch 1 0 1

Einstellen des Timers beim Starten einer neuen Prüfung

Wenn der Benutzer eine neue Prüfung startet, legen wir die Gesamtzahl der Fragen und die Dauer des Quiz in der Sitzung des Benutzers als Attribut fest.

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

Countdown-Zeit

Wir müssen den Timer nach jeder Sekunde dekrementieren. Dazu erstellen wir eine Javascript-Funktion, die beim Laden der Prüfungsseite zuerst aufgerufen wird, und rufen diese Funktion nach jeder Sekunde rekursiv auf, um die Countdown-Zeit zu verlängern.

Javascript-Funktion zur Countdown-Zeit

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = neue Date () -Funktion 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 = 'Verbleibende Zeit:' + min + 'Minutes,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Verbleibende Zeit:' + min + 'Minuten' + sec + 'Sekunden' Warnung ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Verbleibende Zeit:' + min + 'Minutes' + sec + 'Seconds' min = parseInt (min ) - 1 Sek. = 59 tim = setTimeout ('examTimer ()', 1000)}}}

So rufen Sie die Javascript-Funktion auf

Um diese Javascript-Funktion aufzurufen, verwenden wir das Onload-Attribut des Body-Tags.

Senden der Quizzeit an den Prüfungsleiter

Bisher haben wir das Quizfragenformular direkt an den Prüfungscontroller gesendet, aber jetzt müssen wir auch die Timer-Parameter Minute und Sekunde senden, damit beim Anzeigen der nächsten Frage durch den Prüfungscontroller auch die korrekte verbleibende Zeit angezeigt wird. Um dies zu erreichen, haben wir das Formular manuell mit Javascript gesendet und die Parameter min und sec an Exam Controller gesendet.

Senden des Formulars mit Javascript

Beachten Sie, dass beim Klicken des Benutzers auf die Schaltfläche 'Weiter', 'Zurück' oder 'Fertig stellen' die Funktion 'customSubmit ()' aufgerufen wird.

$ {choice} 
  
0} '>
Umgang mit der Zeit
Wenn die Dauer des Quiz vorbei ist, dh wenn sowohl Minute als auch Sekunde Null werden. Wir zeigen ein Warnfeld mit der Aufschrift „Time Up“ an und setzen den Wert von Minute und Sekunde auf Null und senden das Formular ab.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Verbleibende Zeit:' + min + 'Minuten', + sec + 'Sekunden' Warnung ('Zeit' Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
Wir müssen den Code ändern, damit die Prüfung beendet ist, wenn das Zeitlimit für die Prüfung abgelaufen ist.
sonst wenn ('Prüfung beenden'. Gleichungen (Aktion) || (Minute == 0 && Sekunde == 0)) {Ende = wahr int Ergebnis = Prüfung.calculateResult (Prüfung) request.setAttribute ('Ergebnis', Ergebnis) Anfrage .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (Anfrage, Antwort)}
Eine Prüfung kann also entweder durch direktes Klicken auf die Schaltfläche 'Beenden' oder nach Ablauf des Zeitlimits der Prüfung beendet werden (sowohl Minute als auch Sekunde werden Null).
Das war's für diesen Beitrag. Im nächsten Beitrag werden wir unsere Quizanwendung weiter erweitern und neue Funktionen hinzufügen, damit der Benutzer seine Antworten überprüfen und wissen kann, welche Fragen er falsch gestellt hat und welche die richtigen Antworten waren.
Wie immer können Sie den Code herunterladen und nach Belieben ändern. Dies ist der beste Weg, um den Code zu verstehen. Wenn Sie Fragen oder Wünsche haben, kommentieren Sie diese bitte unten.
Klicken Sie auf den Download-Button, um den Code herunterzuladen.
 Hast du eine Frage an uns? Bitte erwähnen Sie es in den Kommentaren und wir werden uns bei Ihnen melden. 
 Zusammenhängende Posts: