JavaScript visszaszámláló időzítő megvalósítása online kvíz alkalmazásban



Ez a lépésről lépésre bemutatott útmutató a JavaScript visszaszámlálójának megvalósításához egy online kvízalkalmazáshoz segít végrehajtani a visszaszámláló időzítőjét.

Ebben a bejegyzésben kibővítjük a kvíz alkalmazásunkat, és hozzáadunk egy JavaScript visszaszámláló funkciót. Egy másik dolog, amit itt megvalósítunk, az az, hogy kódot adunk hozzá, hogy minden kvíznek különböző számú kérdése legyen. Ha még nem olvasta el az első részt, akkor azt javaslom, hogy nézze át. Könnyebb lesz követni ezt a bejegyzést és teljesen megérteni.

Az első részt itt olvashatja el .Bővítheti szögletes karrierlehetőségeit azzal is, hogy felveszi .





JavaScript visszaszámláló

Az egyes vetélkedők időtartamát a kvíz XML fájlja tárolja, lekérdezzük a teszt időtartamát, és attribútumként elmentjük a felhasználó munkamenetébe. Amikor a felhasználó feltesz egy kérdést, az időt is elküldjük a vezérlőnek, egyedi űrlapküldéssel, JavaScript-szel. Tehát, amikor megmutatjuk a következő kérdést, megjelenítjük a helyes hátralévő időt.

javascript-countdown-timer-online-quiz-application



Amikor a vetélkedő időtartama lejárt, a felhasználó figyelmeztető mezőben megjelenik a „Time Up” felirat, és a teszt kiértékelődik, és megjelenik a végeredmény.

Lássuk, mire van szükségünk ennek eléréséhez.



big data fejlesztő munkaköri leírás

Két új sort felvettünk a kvíz XML fájljába a kvízkérdések előtt.

Java kvíz (2015/01/18) 10 2 Melyik a helyes szintaxis? az ABC nyilvános osztály kiterjeszti a QWE-t kiterjeszti Student int i = 'A' Karakterlánc s = 'Hello' ABC 2 privát osztály Az alábbiak közül melyik nem kulcsszó a Java-ban? osztály interfész kiterjeszti az absztrakciót 3 Mi igaz a Java-ra? A Java platformspecifikus A Java nem támogatja a többszörös öröklődést A Java nem fut Linux rendszeren és a Mac a Java nem egy több szálon futó nyelv 1 Az alábbiak közül melyik az interfész? Szál futható dátumnaptár 1 Melyik vállalat adta ki a Java 8-as verziót? A Sun Oracle Adobe Google 1 Java melyik nyelvkategóriába tartozik? Első generációs nyelvek Második generációs nyelvek Harmadik generációs nyelvek Negyedik generációs nyelvek 2 Melyik az alapértelmezett csomag, amely automatikusan látható a program számára? java.net javax.swing java.io java.lang 3 A WEB-INF melyik bejegyzésével lehet kiszolgálni egy szervletet? servlet-leképezés servlet-regisztráció servlet-bejegyzés szervlet-melléklet 0 Mi a Java adattípus int hossza? 32 bites 16 bites 64 bites futásidejű specifikus 0 Mi a Java adattípus logikai alapértelmezett értéke? igaz hamis 1 0 1

Időzítő beállítása új vizsga indításakor

Amikor a felhasználó új vizsgálatot indít, a felhasználó munkamenetében a kvíz teljes kérdését és időtartamát attribútumként állítjuk be.

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

Visszaszámlálás ideje

Minden másodperc után csökkentenünk kell az időzítőt, ehhez létre kell hoznunk egy Javascript függvényt, amelyet először a vizsgaoldal betöltésekor hívunk meg, majd ezt a függvényt másodpercenként rekurzívan hívjuk meg a visszaszámlálás idejére.

Javascript funkció az idő visszaszámlálásához

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () function customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). internalHTML = 'Hátralévő idő:' + perc + 'Percek' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Hátralévő idő:' + perc + 'Percek', + sec + 'Másodpercek' figyelmeztetés ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 dokumentum .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Hátralévő idő:' + perc + 'Percek', + sec + 'Másodpercek' min = parseInt (perc ) - 1 mp = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Hogyan hívjuk meg a Javascript függvényt

Most, hogy meghívjuk ezt a Javascript függvényt, a body tag onload attribútumát fogjuk használni.

A kvízidő beküldése a vizsgaellenőrnek

Eddig a kvízkérdőíveket küldtük el közvetlenül a vizsgaellenőrnek, de most el kell küldenünk az időzítő paramétereit: perc és másodperc is, hogy amikor a vizsgafelügyelő megjeleníti a következő kérdést, akkor a helyes hátralévő időt is meg kell jelenítenie. Ennek elérése érdekében kézzel küldtük el az űrlapot a Javascript segítségével, és elküldjük a min és sec paramétereket a Exam Controller-nek.

Űrlap beküldése Javascript használatával

Ne feledje, hogy amikor a felhasználó a következő, az előző vagy a befejezés gombra kattint, a customSubmit () Javascript függvény lesz meghívva.

$ {choice} 

0} '>

Az idő lejárt kezelése

Amikor a vetélkedő időtartama lejárt, más szóval, amikor mind a perc, mind a másodperc nulla lesz. Megjelenítünk egy „Time Up” feliratú riasztó mezőt, és a perc és a másodperc értékét nullára állítjuk, és elküldjük az űrlapot.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Fennmaradó idő:' + min + 'Percek', + sec + 'Seconds' riasztás ('Time Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Meg kell változtatnunk a kódot, hogy a vizsga befejeződjön, amikor a vizsga határideje lejárt.

else if ('Vizsga befejezése'. egyenlő (cselekvés) || (perc == 0 && másodperc == 0)) {befejezés = igaz int eredmény = vizsga.kalkulálás eredménye (vizsga) request.setAttribute ('eredmény', eredmény) kérés .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). továbbítás (kérés, válasz)}

Tehát a vizsga befejezhető közvetlenül a Befejezés gombra kattintva, vagy ha a vizsga időkorlátja lejárt (a perc és a másodperc egyaránt nulla lesz).

Ennyi erre a bejegyzésre. A következő bejegyzésben tovább bővítjük a kvíz alkalmazásunkat, és új funkcióval bővítjük, hogy a felhasználó át tudja nézni a válaszait, és tudja, mely kérdésekre tévedett, és melyek voltak a helyes válaszok.

Mint mindig, letöltheti a kódot, tetszés szerint módosíthatja. Ez a legjobb módja a kód megértésének. Ha bármilyen kérdése vagy kérdése van, kérjük, tegye meg észrevételeit alább.

Kattintson a letöltés gombra a kód letöltéséhez.

Van egy kérdésünk? Kérjük, említse meg a megjegyzések részben, és mi kapcsolatba lépünk Önnel.

Kapcsolódó hozzászólások: