Implementace časovače odpočítávání JavaScriptu v online kvízové ​​aplikaci



Tento podrobný průvodce implementací odpočítávacího JavaScriptu pro online kvízovou aplikaci vám pomůže spustit odpočítávací JavaScript, který je jazykem

V tomto příspěvku rozšíříme naši kvízovou aplikaci a přidáme do ní funkci časovače odpočítávání JavaScriptu. Další věc, kterou zde implementujeme, je přidání kódu, aby každý kvíz mohl mít jiný počet otázek. Pokud jste ještě nečetli první část, doporučím vám ji projít. Bude pro vás snazší sledovat tento příspěvek a plně mu porozumět.

První část si můžete přečíst zde .Přijetím byste také mohli rozšířit své úhlové kariérní příležitosti .





Časovač odpočítávání JavaScriptu

Doba trvání každého kvízu je uložena v souboru XML kvízu, načteme dobu trvání kvízu a uložíme jej v relaci uživatele jako atribut. Když uživatel zadá otázku, odešleme čas také správci pomocí vlastního odeslání formuláře s JavaScriptem. Když tedy ukážeme další otázku, zobrazíme správný zbývající čas.

def __init__ python

javascript-countdown-timer-online-quiz-application



Po uplynutí doby trvání kvízu se uživateli zobrazí výstražné pole s nápisem „Čas vypršel“ a kvíz se vyhodnotí a zobrazí se konečný výsledek.

Podívejme se, co potřebujeme k dosažení tohoto cíle.



Do kvízového souboru XML jsme přidali dva nové řádky před kvízové ​​otázky.

Java Quiz (2015/01/18) 10 2 Jaká je správná syntaxe? public class ABC extends QWE extends Student int i = 'A' String s = 'Hello' private class ABC 2 which of the following a is a a keyword in Java? rozhraní třídy rozšiřuje abstrakci 3 Co je na Javě pravdivé? Java je specifická pro platformu Java nepodporuje vícenásobnou dědičnost Java nefunguje na Linuxu a Macu Java není vícevláknový jazyk 1 Kterým z následujících je rozhraní? Vlákno Spustitelný kalendář dne 1 Která společnost vydala verzi Java 8? Sun Oracle Adobe Google 1 Java spadá do které kategorie jazyků? Jazyky první generace Jazyky druhé generace Jazyky třetí generace Jazyky čtvrté generace 2 Který je výchozí balíček, který je automaticky viditelný pro váš program? java.net javax.swing java.io java.lang 3 Která položka v WEB-INF se používá k mapování servletu? servlet-mapping servlet-registration servlet-entry servlet-attachment 0 Jaká je délka datového typu Java int? 32 bitů 16 bitů 64 bitů Specifické pro běh 0 Jaká je výchozí hodnota datového typu Java boolean? true false 1 0 1

Nastavení časovače při zahájení nové zkoušky

Když uživatel zahájí novou zkoušku, nastavíme jako atribut celkový počet otázek a dobu trvání testu v relaci uživatele.

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

Čas odpočítávání

Musíme každou sekundu snížit časovač, abychom vytvořili funkci Javascript, která bude nejprve vyvolána, když je načtena stránka zkoušky, a potom budeme tuto funkci rekurzivně volat po každé sekundě na čas odpočítávání.

Funkce Javascript pro odpočítávání času

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = nová funkce Date () customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} funkce examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Zbývající čas:' + min + 'Minuty,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Zbývající čas:' + min. ' .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Zbývající čas:' + min + 'Minuty,' + sec + 'Sekundy' min = parseInt (min ) - 1 s = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Jak volat funkci Javascript

Nyní k volání této funkce Javascript použijeme atribut onload značky těla.

Zadání času kvízu kontrolorovi zkoušky

Doposud jsme odesílali formulář kvízových otázek přímo zkoušce Controller, ale nyní musíme poslat parametry časovače: minutu a sekundu také tak, aby když zkouška Controller zobrazí další otázku, měla by také zobrazit správný zbývající čas. Abychom toho dosáhli, odeslali jsme formulář ručně pomocí Javascriptu a poslali parametry min a sec zkoušce Controller.

Odeslání formuláře pomocí Javascript

Všimněte si, že když uživatel klikne na další, předchozí nebo dokončení tlačítka, bude volána funkce Javascript customSubmit ().

$ {choice} 

0} '>

Zpracování času

Když skončí doba kvízu, jinými slovy, když se minuta i sekunda stanou nulami. Zobrazíme výstražné pole s nápisem „Čas vypršel“ a nastavíme hodnotu minuty a sekundy na nulu a odešlete formulář.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Nahoru ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Musíme změnit kód tak, aby zkouška byla dokončena, jakmile vyprší časový limit pro zkoušku.

else if ('Finish Exam'.equals (action) || (minute == 0 && second == 0)) {finish = true int result = exam.calculateResult (exam) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (požadavek, odpověď)}

Zkoušku lze tedy ukončit buď přímým kliknutím na tlačítko Dokončit, nebo po uplynutí časového limitu zkoušky (minuta i sekunda se stanou nuly).

To je pro tento příspěvek vše. V příštím příspěvku dále rozšíříme naši kvízovou aplikaci a přidáme novou funkci, aby uživatel mohl zkontrolovat své odpovědi a vědět, které otázky pokazil a jaké byly správné odpovědi.

Jako vždy si můžete stáhnout kód, změnit jej, jak chcete. To je nejlepší způsob, jak porozumět kódu. Pokud máte jakýkoli dotaz nebo požadavek, prosím, komentujte níže.

co je volná vazba v Javě

Kliknutím na tlačítko stažení stáhněte kód.

Máte na nás dotaz? Uveďte to prosím v sekci komentáře a my se vám ozveme.

Související příspěvky: