Implementering av JavaScript-nedtellingstimer i et online quiz-program

I dette innlegget vil vi utvide quiz-applikasjonen vår og legge til en funksjon for JavaScript-nedtellingstimer i den. En annen ting vi skal implementere her er å legge til kode slik at hver quiz kan ha forskjellige antall spørsmål. Hvis du ikke allerede har lest den første delen, vil jeg anbefale deg å gå gjennom den. Det blir lettere for deg å følge dette innlegget og forstå det fullstendig.

Du kan lese den første delen her .Du kan også utvide dine Angular karrieremuligheter ved å ta opp .

JavaScript-nedtellingstimer

Varigheten av hver quiz er lagret i quiz-XML-filen, vi henter quizens varighet og lagrer den i brukerens økt som et attributt. Når brukeren sender inn et spørsmål, sender vi også tiden til kontrolleren ved hjelp av tilpasset skjemainnsending med JavaScript. Så når vi viser neste spørsmål, viser vi riktig gjenværende tid.

Når quizens varighet er over, vises brukeren en varslingsboks som sier 'Time Up', og quizen vil bli evaluert og det endelige resultatet vil vises.

La oss se hva vi trenger for å oppnå dette.

Vi har lagt til to nye linjer i quiz-XML-filen, før spørsmål til spørsmål.

Java Quiz (2015/01/18) 10 2 Hva er riktig syntaks? offentlig klasse ABC utvider QWE utvider Student int i = 'A' String s = 'Hei' privat klasse ABC 2 Hvilket av følgende a er ikke et nøkkelord i Java? klasse grensesnitt utvider abstraksjon 3 Hva er sant om Java? Java er plattformsspesifikt Java støtter ikke flere arv Java kjører ikke på Linux og Mac Java er ikke et flertrådet språk 1 Hvilket av følgende er et grensesnitt? Thread Runnable Date Calendar 1 Hvilket selskap ga ut Java versjon 8? Sun Oracle Adobe Google 1 Java kommer inn under hvilken kategori av språk? Første generasjons språk Andre generasjons språk Tredje generasjons språk Fjerde generasjons språk 2 Hvilken er standardpakken som automatisk blir synlig for programmet ditt? java.net javax.swing java.io java.lang 3 Hvilken oppføring i WEB-INF brukes til å kartlegge en servlet? servlet-mapping servlet-registrering servlet-entry servlet-attachment 0 Hva er lengden på Java datatype int? 32 bit 16 bit 64 bit Runtime spesifikk 0 Hva er standardverdien for Java datatype boolsk? true false 1 0 1

Stille inn tidtaker når du starter en ny eksamen

Når brukeren starter en ny eksamen, setter vi det totale spørsmålet og varigheten av quizen i brukerens økt som attributt.

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

Nedtellingstid

Vi må redusere timeren etter hvert sekund, for å gjøre det skal vi lage en Javascript-funksjon som først blir ringt når eksamenssiden er lastet, og så vil vi kalle den funksjonen rekursivt etter hvert sekund til nedtellingstid.

Javascript-funksjon til nedtellingstid

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () -funksjon customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sek document.questionForm.submit ()} function examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Resterende tid:' + min + 'Minutter,' + sek + 'Sekunder' sek = parseInt (sek) - 1 tim = setTimeout ('examTimer ()', 1000)} annet {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Gjenværende tid:' + min + 'Minutter,' + sek + 'Sekunder' varsel ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 dokument .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Gjenværende tid:' + min + 'Minutter,' + sek + 'Sekunder' min = parseInt (min ) - 1 sek = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Hvordan ringe Javascript-funksjonen

Nå, for å kalle den Javascript-funksjonen, skal vi bruke onload-attributtet til body tag.

Sende quiztid til eksamensansvarlig

Inntil nå sendte vi quizspørsmålsskjemaet direkte til eksamenskontrolleren, men nå må vi sende tidsparameterne: minutt og sekund også, slik at når eksamenskontrolleren viser neste spørsmål, skal den også vise riktig gjenværende tid. For å oppnå det har vi sendt skjemaet manuelt ved hjelp av Javascript og sender min og sek parametrene til eksamenskontrolleren.

Send inn skjema ved hjelp av Javascript

Vær oppmerksom på at når brukeren klikker på neste, forrige eller avslutningsknapp, blir customSubmit () Javascript-funksjonen kalt.

$ {valg} 
  
0} '>
Håndtere Time Up
Når varigheten på quizen er over, med andre ord når både minutt og sekund blir null. Vi viser en varslingsboks som sier 'Time Up' og setter verdien til minutt og sekund til null og sender inn skjemaet.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Resterende tid:' + min + 'Minutter,' + sek + 'Sekunder' varsel ('Tid Opp ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
Vi må endre koden slik at eksamen er ferdig når fristen for eksamen er over.
annet hvis ('Finish Exam'. ekvivalenter (handling) || (minutt == 0 && sekund == 0)) {finish = true int result = exam.calculateResult (exam) request.setAttribute ('result', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). videresend (forespørsel, svar)}
Så en eksamen kan avsluttes enten ved å klikke på avslutningsknappen direkte eller når tidsgrensen for eksamen er over (både minutt og sekund blir null).
Det er det for dette innlegget. I neste innlegg utvider vi quiz-applikasjonen vår ytterligere og legger til en ny funksjon slik at brukeren kan se gjennom svarene sine og vite hvilke spørsmål han fikk feil og hva som var de riktige svarene.
Som alltid kan du laste ned koden, endre den som du vil. Det er den beste måten å forstå koden på. Hvis du har spørsmål eller forespørsler, kan du kommentere nedenfor.
Klikk på nedlastingsknappen for å laste ned koden.
 Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet, så kommer vi tilbake til deg. 
 Relaterte innlegg: