Implementering av JavaScript-nedräkningstimern i en online-frågesportapplikation

I det här inlägget utökar vi vår frågesportapplikation och lägger till en JavaScript-nedräkningstimefunktion i den. En annan sak vi ska implementera här är att lägga till kod så att varje frågesport kan ha olika antal frågor. Om du inte redan har läst den första delen kommer jag att rekommendera dig att gå igenom den. Det blir lättare för dig att följa det här inlägget och förstå det helt.

Du kan läsa den första delen här .Du kan också utöka dina karriärmöjligheter i Angular genom att börja .

JavaScript-nedräkningstimer

Tidsvaraktigheten för varje frågesport lagras i frågesportens XML-fil, vi hämtar frågan om frågesporten och sparar den i användarens session som attribut. När användaren skickar in en fråga skickar vi också tiden till styrenheten med hjälp av anpassad formulärsändning med JavaScript. Så när vi visar nästa fråga visar vi rätt återstående tid.

mvc-applikationsexempel i java

När frågesportens tidsvaraktighet är över visas användaren en varningsruta som säger ”Time Up” och frågesporten utvärderas och det slutliga resultatet visas.

Låt oss se vad vi behöver för att uppnå detta.

Vi har lagt till två nya rader i frågesportens XML-fil, innan frågesportfrågor.

Java Quiz (2015/01/18) 10 2 Vilken är rätt syntax? offentlig klass ABC utökar QWE utökar Student int i = 'A' Sträng s = 'Hej' privat klass ABC 2 Vilket av följande a är inte ett nyckelord i Java? klassgränssnitt förlänger abstraktion 3 Vad är sant om Java? Java är plattformsspecifikt Java stöder inte flera arv Java körs inte på Linux och Mac Java är inte ett flertrådigt språk 1 Vilket av följande är ett gränssnitt? Thread Runnable Date Calendar 1 Vilket företag släppte Java Version 8? Sun Oracle Adobe Google 1 Java kommer under vilken kategori av språk? Första generationens språk Andra generationens språk Tredje generationens språk Fjärde generationens språk 2 Vilket är standardpaketet som automatiskt syns för ditt program? java.net javax.swing java.io java.lang 3 Vilken post i WEB-INF används för att mappa en servlet? servlet-mapping servlet-registrering servlet-entry servlet-attachment 0 Vad är längden på Java-datatyp int? 32 bit 16 bit 64 bit Runtime specific 0 Vad är standardvärdet för Java datatyp boolean? true false 1 0 1

Ställa in timer när du startar en ny examen

När användaren startar en ny undersökning, ställer vi in ​​de totala frågorna och hur länge frågesporten i användarens session är som attribut.

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

Nedräkningstid

Vi måste minska timern efter varje sekund, för att göra det ska vi skapa en Javascript-funktion som kommer att ringas först när undersökningssidan laddas och sedan kommer vi att kalla den funktionen rekursivt efter varje sekund till nedräkningstiden.

hur man gör makter i java

Javascript-funktion till nedräkningstid

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 = 'Återstående tid:' + min + 'Minuter,' + sek + 'Sekunder' sek = parseInt (sek) - 1 tim = setTimeout ('examTimer ()', 1000)} annat {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Återstående tid:' + min + 'Minuter,' + sek + 'Sekunder' varning ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 dokument .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Återstående tid:' + min + 'Minuter,' + sek + 'Sekunder' min = parseInt (min ) - 1 sek = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Hur man ringer till Javascript-funktionen

För att kalla den Javascript-funktionen ska vi använda onload-attributet för body-taggen.

Inlämning av frågetiden till Exam Controller

Hittills skickade vi frågesportformuläret direkt till Exam Controller, men nu måste vi skicka timerparametrarna: minut och sekund så att när Exam Controller visar nästa fråga ska den också visa rätt återstående tid. För att uppnå detta har vi skickat formuläret manuellt med Javascript och skickat min- och sek-parametrarna till Exam Controller.

Skicka formulär med Javascript

Observera att när användaren klickar på nästa, föregående eller Slut-knappen kommer customSubmit () Javascript-funktionen att anropas.

$ {val} 
  
0} '>
Hantera Time Up
När frågesportens varaktighet är över, med andra ord när både minut och sekund blir noll. Vi visar en larmruta som säger ”Time Up” och ställer in värdet på minut och sekund till noll och skickar formuläret.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Återstående tid:' + min + 'Minuter,' + sek + 'Sekunder' varning ('Time Upp ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
Vi måste ändra koden så att tentan avslutas när tidsgränsen för examen är över.
annars om ('Avsluta examen'. motsvarar (åtgärd) || (minut == 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'). vidarebefordra (begäran, svar)}
Så en tentamen kan avslutas antingen genom att klicka på avslutningsknappen direkt eller när testgränsen är över (både minut och sekund blir noll).
Det är det för det här inlägget. I nästa inlägg utökar vi vår frågesportapplikation ytterligare och lägger till en ny funktion så att användaren kan granska sina svar och veta vilka frågor han fick fel och vad som var rätt svar.
Som alltid kan du ladda ner koden, ändra den som du vill. Det är det bästa sättet att förstå koden. Om du har några frågor eller önskar, vänligen kommentera nedan.
Klicka på nedladdningsknappen för att ladda ner koden.
 Har du en fråga till oss? Vänligen nämna det i kommentarfältet så återkommer vi till dig. 
 Relaterade inlägg: 
  
passera förbi värde kontra passera referens Java