In dit bericht breiden we onze quiz-applicatie uit en voegen we een JavaScript-afteltimer-functionaliteit toe. Een ander ding dat we hier zullen implementeren, is het toevoegen van code zodat elke quiz een ander aantal vragen kan hebben. Als je het eerste deel nog niet hebt gelezen, raad ik je aan het door te nemen. Het zal voor u gemakkelijker zijn om dit bericht te volgen en het volledig te begrijpen.
Je kunt het eerste deel hier lezen .U kunt ook uw Angular-carrièremogelijkheden uitbreiden door gebruik te maken van .
JavaScript afteltimer
De tijdsduur van elke quiz wordt opgeslagen in het XML-bestand van de quiz. We halen de duur van de quiz op en slaan deze op in de sessie van de gebruiker als een attribuut. Wanneer de gebruiker een vraag indient, sturen we de tijd ook door naar de controller met behulp van aangepaste formulieren met JavaScript. Dus als we de volgende vraag laten zien, geven we de juiste resterende tijd weer.
Wanneer de duur van de quiz voorbij is, krijgt de gebruiker een waarschuwingsvenster te zien met de tekst 'Time Up' en wordt de quiz geëvalueerd en wordt het eindresultaat weergegeven.
Laten we eens kijken wat we nodig hebben om dit te bereiken.
We hebben twee nieuwe regels toegevoegd aan het XML-bestand van de quiz, vóór de quizvragen.
Java Quiz (2015/01/18) 10 2 Wat is de juiste syntaxis? openbare klasse ABC breidt uit QWE breidt uit Student int i = 'A' String s = 'Hallo' privéklasse ABC 2 Welke van de volgende a is geen trefwoord in Java? class interface breidt abstractie uit 3 Wat is waar met Java? Java is platformspecifiek Java ondersteunt geen meervoudige overerving Java werkt niet op Linux en Mac Java is geen multi-threaded taal 1 Welke van de volgende is een interface? Thread Runnable Date Calendar 1 Welk bedrijf heeft Java versie 8 uitgebracht? Sun Oracle Adobe Google 1 Java valt onder welke categorie talen? Talen van de eerste generatie Talen van de tweede generatie Talen van de derde generatie Talen van de vierde generatie 2 Wat is het standaardpakket dat automatisch zichtbaar is voor uw programma? java.net javax.swing java.io java.lang 3 Welk item in WEB-INF wordt gebruikt om een servlet in kaart te brengen? servlet-mapping servlet-registration servlet-entry servlet-attachment 0 Wat is de lengte van het Java-datatype int? 32 bit 16 bit 64 bit Runtime-specifiek 0 Wat is de standaardwaarde van het Java-datatype boolean? waar niet waar 1 0 1
Timer instellen bij het starten van een nieuw onderzoek
Wanneer de gebruiker een nieuw examen start, stellen we de totale vragen en de duur van de quiz in de sessie van de gebruiker als attribuut in.
request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElementsByTagation (') quizDuration (') quizDuration (') .item (0) .getTextContent ()) request.getSession (). setAttribute ('min', document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec ', 0)Afteltijd
We moeten de timer na elke seconde verlagen, daarvoor gaan we een Javascript-functie maken die eerst wordt aangeroepen wanneer de onderzoekspagina wordt geladen en daarna zullen we die functie na elke seconde recursief aanroepen tot de afteltijd.
waar wordt sas-programmering voor gebruikt
Javascript-functie om de tijd af te tellen
var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = nieuwe Date () functie customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} functie examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Resterende tijd:' + min + 'Minuten,' + sec + 'Seconden' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Resterende tijd:' + min + 'Minuten,' + sec + 'Seconden' waarschuwing ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Resterende tijd:' + min + 'Minuten,' + sec + 'Seconden' min = parseInt (min ) - 1 sec = 59 tim = setTimeout ('examTimer ()', 1000)}}}Hoe de Javascript-functie te bellen
Om die Javascript-functie te noemen, gaan we het onload-kenmerk van de body-tag gebruiken.
De quiztijd indienen bij de examencontroller
Tot nu toe dienden we het quizvragenformulier rechtstreeks in bij de examencontroller, maar nu moeten we de timerparameters verzenden: minuut en seconde, zodat wanneer examencontroller de volgende vraag weergeeft, deze ook de juiste resterende tijd moet weergeven. Om dat te bereiken hebben we het formulier handmatig met Javascript ingediend en de min en sec parameters naar Exam Controller gestuurd.
Formulier indienen met Javascript
Merk op dat wanneer de gebruiker op de volgende, vorige of voltooiingsknop klikt, customSubmit () Javascript-functie wordt aangeroepen.
$ {keuze}
0} '>Omgaan met de time-up
Wanneer de duur van de quiz voorbij is, met andere woorden wanneer zowel minuut als seconde nul worden. We tonen een waarschuwingsvenster met de tekst 'Time Up' en stellen de waarde van minuut en seconde in op nul en verzenden het formulier.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Resterende tijd:' + min + 'Minuten,' + sec + 'Seconden' waarschuwing ('Tijd Omhoog ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}We moeten de code wijzigen zodat het examen klaar is als de tijdslimiet voor het examen voorbij is.
else if ('Finish Exam'.equals (action) || (minute == 0 && second == 0)) {finish = true int result = exam.calculateResult (examen) request.setAttribute (' resultaat ', resultaat) verzoek .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (verzoek, antwoord)}Een examen kan dus worden beëindigd door direct op de knop Voltooien te klikken of wanneer de tijdslimiet van het examen is verstreken (zowel minuut als seconde worden nul).
Dat is het voor dit bericht. In de volgende post zullen we onze quiz-applicatie verder uitbreiden en een nieuwe functie toevoegen, zodat de gebruiker zijn antwoorden kan bekijken en weet welke vragen hij verkeerd heeft gesteld en wat de juiste antwoorden waren.
Zoals altijd kunt u de code downloaden en deze naar wens wijzigen. Dat is de beste manier om de code te begrijpen. Als u een vraag of verzoek heeft, kunt u hieronder reageren.
Klik op de downloadknop om de code te downloaden.
Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte en we nemen contact met u op.
welke scannerklassenmethode leest een string?
Gerelateerde berichten: