Implementering af JavaScript-nedtællingstimer i en online quiz-applikation

I dette indlæg udvider vi vores quizapplikation og tilføjer en JavaScript-nedtællingstimefunktionalitet til den. En anden ting, vi implementerer her, er at tilføje kode, så hver quiz kan have forskellige antal spørgsmål. Hvis du ikke allerede har læst den første del, vil jeg anbefale dig at gennemgå den. Det bliver lettere for dig at følge dette indlæg og forstå det fuldstændigt.

Du kan læse den første del her .Du kan også udvide dine vinklede karrieremuligheder ved at tage op .

JavaScript-nedtællingstimer

Tidsvarigheden for hver quiz er gemt i quiz-XML-filen, vi henter quizens varighed og gemmer den i brugerens session som en attribut. Når brugeren sender et spørgsmål, sender vi også tiden til controlleren ved hjælp af tilpasset formularindsendelse med JavaScript. Så når vi viser det næste spørgsmål, viser vi den korrekte resterende tid.

Når quizens varighed er forbi, vises brugeren en advarselsboks, der siger 'Time Up', og quizzen evalueres, og det endelige resultat vises.

Lad os se, hvad vi har brug for for at opnå dette.

Vi har tilføjet to nye linjer i quiz-XML-filen inden spørgsmål til quiz.

Java Quiz (2015/01/18) 10 2 Hvilken er den korrekte syntaks? offentlig klasse ABC udvider QWE udvider Student int i = 'A' String s = 'Hej' privat klasse ABC 2 Hvilket af følgende a er ikke et nøgleord i Java? klasse interface udvider abstraktion 3 Hvad er sandt ved Java? Java er platformsspecifikt Java understøtter ikke flere arv Java kører ikke på Linux, og Mac Java er ikke et multitrådet sprog 1 Hvilket af følgende er en grænseflade? Trådkørbar datakalender 1 Hvilket firma udgav Java version 8? Sun Oracle Adobe Google 1 Java kommer under hvilken sprogkategori? Første generations sprog Anden generations sprog Tredje generationssprog Fjerde generationssprog 2 Hvilken er standardpakken, der automatisk vises i dit program? java.net javax.swing java.io java.lang 3 Hvilken post i WEB-INF bruges til at kortlægge en servlet? servlet-mapping servlet-registrering servlet-entry servlet-attachment 0 Hvad er længden af ​​Java-datatype int? 32 bit 16 bit 64 bit Runtime-specifik 0 Hvad er standardværdien af ​​Java-datatype boolsk? sandt falsk 1 0 1

Indstilling af timer, når du starter en ny eksamen

Når brugeren starter en ny eksamen, indstiller vi de samlede spørgsmål og varigheden af ​​quizzen i brugerens session som attribut.

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'). element (0) .getTextContent ()) request.getSession (). setAttribute ('sek ', 0)

Nedtællingstid

Vi er nødt til at nedtage timeren efter hvert sekund for at gøre det skal vi oprette en Javascript-funktion, der først kaldes, når eksamenssiden indlæses, og så kalder vi den funktion rekursivt efter hvert sekund til nedtællingstid.

Javascript-funktion til nedtællingstid

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

Sådan kaldes Javascript-funktionen

For at kalde den Javascript-funktion skal vi bruge onload-attributten til body tag.

sorter bibliotek c ++

Aflevering af quiztid til eksamenscontroller

Indtil nu sendte vi quizspørgsmålsformularen direkte til eksamenscontrolleren, men nu skal vi sende timerparametrene: minut og sekund også, så når eksamenscontroller viser det næste spørgsmål, skal det også vise den korrekte resterende tid. For at opnå dette har vi indsendt formularen manuelt ved hjælp af Javascript og sendt min og sek parametrene til eksamenscontroller.

Indsend formular ved hjælp af Javascript

Bemærk, at når brugeren klikker på den næste, forrige eller sidste knap, kaldes customSubmit () Javascript-funktionen.

$ {valg} 
  
0} '>
Håndtering af Time Up
Når quizens varighed er forbi, med andre ord når både minut og sekund bliver nul. Vi viser en advarselsboks, der siger 'Time Up' og indstiller værdien på minut og sekund til nul og indsender formularen.
hvis (parseInt (min) == 0 && parseInt (sek) == 0) {document.getElementById ('showtime'). innerHTML = 'Resterende tid:' + min + 'Minutter,' + sek + 'Sekunder' alarm ('Tid Op ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
Vi er nødt til at ændre koden, så eksamen er afsluttet, når fristen for eksamen er overstået.
overbelastning vs overordnet c ++
ellers hvis ('Afslut eksamen'. ligestilling (handling) || (minut == 0 && sekund == 0)) {finish = sandt int resultat = eksamen.beregnResultat (eksamen) anmodning.setAttribute ('resultat', resultat) anmodning .getSession (). setAttribute ('currentExam', null) anmodning.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). videresend (anmodning, svar)}
Så en eksamen kan afsluttes enten ved at klikke på afslutningsknappen direkte, eller når tidsfristen for eksamen er overstået (både minut og sekund bliver nul).
Det er det til dette indlæg. I det næste indlæg udvider vi vores quizapplikation yderligere og tilføjer en ny funktion, så brugeren kan gennemgå sine svar og vide, hvilke spørgsmål han fik det forkert, og hvad der var de rigtige svar.
Som altid kan du downloade koden, ændre den som du vil. Det er den bedste måde at forstå koden på. Hvis du har spørgsmål eller anmodning, bedes du kommentere nedenfor.
Klik på download-knappen for at downloade koden.
 Har du et spørgsmål til os? Nævn det i kommentarfeltet, og vi vender tilbage til dig. 
 Relaterede indlæg: