V tomto príspevku rozšírime našu kvízovú aplikáciu a pridáme do nej funkciu časovača odpočítavania JavaScriptu. Ďalšou vecou, ktorú tu implementujeme, je pridanie kódu, aby mohol mať každý kvíz iný počet otázok. Pokiaľ ste ešte nečítali prvý diel, odporučím vám si ho prejsť. Bude pre vás jednoduchšie sledovať tento príspevok a úplne mu porozumieť.
Prvú časť si môžete prečítať tu .Svojím nástupom do zamestnania by ste si tiež mohli rozšíriť svoje uhlové kariérne príležitosti .
Časovač odpočítavania JavaScriptu
Časové trvanie každého kvízu je uložené v súbore XML kvízu, načítame trvanie kvízu a uložíme ho v relácii používateľa ako atribút. Keď používateľ zadá otázku, zadáme čas aj kontrolórovi pomocou zadania vlastného formulára s JavaScriptom. Keď teda ukážeme ďalšiu otázku, zobrazí sa správny zostávajúci čas.
ako používať atóm pre python
Po uplynutí doby trvania kvízu sa používateľovi zobrazí výstražné okno s výzvou „Čas vypršel“, kvíz sa vyhodnotí a zobrazí sa konečný výsledok.
Pozrime sa, čo potrebujeme na dosiahnutie tohto cieľa.
Pred kvízové otázky sme do kvízového súboru XML pridali dva nové riadky.
Java Quiz (2015/01/18) 10 2 Aká je správna syntax? public class ABC extends QWE extends Student int i = 'A' String s = 'Hello' private class ABC 2 which of the a is not a keyword in Java? rozhranie triedy rozširuje abstrakciu 3 Čo je na Jave pravdivé? Java je špecifická pre platformu Java nepodporuje viacnásobné dedenie Java nefunguje na systémoch Linux a Mac Java nie je jazyk s viacerými vláknami 1 Čo z toho je rozhranie? Vlákno Spustiteľný dátumový kalendár 1 Ktorá spoločnosť vydala verziu Java 8? Do ktorej kategórie jazykov patrí Sun Oracle Adobe Google 1 Java? Jazyky prvej generácie Jazyky druhej generácie Jazyky tretej generácie Jazyky štvrtej generácie 2 Aký je predvolený balík, ktorý je automaticky viditeľný pre váš program? java.net javax.swing java.io java.lang 3 Ktorá položka v WEB-INF sa používa na mapovanie servletu? servlet-mapping servlet-registration servlet-entry servlet-attachment 0 Aká je dĺžka dátového typu Java int? 32 bit 16 bit 64 bit Runtime specific 0 Aká je predvolená hodnota boolovského dátového typu Java? pravda nepravda 1 0 1
Nastavenie časovača pri začatí novej skúšky
Keď používateľ začne novú skúšku, ako atribút sme nastavili celkový počet otázok a trvanie kvízu v relácii používateľa.
request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (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)Čas odpočítavania
Po každej sekunde musíme zmenšiť časovač, aby sme vytvorili funkciu Javascript, ktorá sa najskôr vyvolá pri načítaní stránky skúšky, a potom túto funkciu rekurzívne zavoláme po každej sekunde na čas odpočítavania.
Funkcia Javascript na odpočítavanie času
var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = nová funkcia Date () customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} function examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Zostávajúci čas:' + min + 'minúty,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Zostávajúci čas:' + min + 'minúty,' + s + 'výstraha' sekúnd '(' Time Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 dokumentu .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Zostávajúci čas:' + min + 'minúty,' + sec + 'sekundy' min = parseInt (min.) ) - 1 s = 59 tim = setTimeout ('examTimer ()', 1000)}}}Ako volať funkciu Javascript
Teraz, aby sme zavolali túto funkciu Javascript, použijeme atribút onload značky tela.
Zadanie času kvízu kontrolórovi skúšky
Doteraz sme formulár kvízových otázok odosielali priamo kontrolórovi skúšky, teraz však musíme poslať parametre časovača: minútu a sekundu, takže keď kontrolór skúšok zobrazí ďalšiu otázku, mal by tiež zobraziť správny zostávajúci čas. Aby sme to dosiahli, formulár sme zadali manuálne pomocou Javascriptu a parametre min a sec sme odoslali kontrolórovi skúšky.
Odoslanie formulára pomocou Javascriptu
Upozorňujeme, že keď používateľ klikne na ďalšie, predchádzajúce alebo dokončiť tlačidlo, bude vyvolaná funkcia Javascript customSubmit ().
$ {choice}
0} '>Zaobchádzanie s časom
Keď uplynie doba trvania kvízu, inými slovami, keď sa minúta aj sekunda stanú nulovými. Zobrazíme výstražné okno s výzvou „Čas vypršal“ a nastavíme hodnotu minúty a sekundy na nulu a odošlete formulár.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Zostávajúci čas:' + min + 'minúty,' + sec + 'Sekundové' upozornenie ('Čas Hore ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}Musíme zmeniť kód tak, aby sa skúška skončila, keď uplynie časový limit na skúš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 (žiadosť, odpoveď)}Skúšku je teda možné ukončiť buď priamym kliknutím na tlačidlo Dokončiť, alebo po uplynutí časového limitu skúšky (minúta aj sekunda sa stanú nulovými).
To je pre tento príspevok všetko. V nasledujúcom príspevku ďalej rozšírime našu kvízovú aplikáciu a pridáme nové funkcie, aby si používateľ mohol skontrolovať svoje odpovede a vedieť, ktoré otázky mu vyšli nesprávne a aké boli správne odpovede.
Ako vždy si môžete stiahnuť kód, zmeňte ho podľa seba. To je najlepší spôsob, ako porozumieť kódu. Ak máte akékoľvek otázky alebo požiadavky, prosím, komentujte nižšie.
kuchár vs bábka vs soľ
Kliknutím na tlačidlo sťahovania stiahnete kód.
Máte na nás otázku? Uveďte to prosím v sekcii komentárov a my sa vám ozveme.
Súvisiace príspevky: