Pagpapatupad ng JavaScript Countdown Timer Sa Isang Online Quiz Application



Ang sunud-sunod na gabay na ito sa pagpapatupad ng JavaScript countdown timer para sa isang online na pagsusulit na application ay makakatulong sa iyo na magpatupad ng countdown timer na JavaScript na ang wika

Sa post na ito, palawakin namin ang aming application ng pagsusulit at magdagdag ng isang pag-andar ng countdown timer ng JavaScript dito. Ang isa pang bagay na ipapatupad namin dito ay, pagdaragdag ng code upang ang bawat pagsusulit ay maaaring magkaroon ng magkakaibang bilang ng mga katanungan. Kung hindi mo pa nababasa ang unang bahagi, inirerekumenda ko sa iyo na dumaan ito. Mas madali para sa iyo na sundin ang post na ito at maunawaan ito nang buo.

Maaari mong basahin ang unang bahagi dito .Maaari mo ring mapalawak ang iyong Angular career opportunity sa pamamagitan ng pag-upo .





ay isang masters degree postgraduate

Timer ng Countdown ng JavaScript

Ang tagal ng oras ng bawat pagsusulit ay nakaimbak sa quiz XML file, kukunin namin ang tagal ng pagsusulit at i-save ito sa session ng gumagamit bilang isang katangian. Kapag ang gumagamit ay nagsumite ng isang katanungan isinumite rin namin ang oras sa controller gamit ang pagsumite ng pasadyang form na may JavaScript. Kaya, kapag ipinakita namin ang susunod na tanong ipinapakita namin ang tamang natitirang oras.

javascript-countdown-timer-online-quiz-application



Kapag natapos na ang tagal ng oras ng pagsusulit, ipapakita sa gumagamit ang isang kahon ng alerto na nagsasabing 'Oras ng Pag-upo' at susuriin ang pagsusulit at ipapakita ang panghuling resulta.

Tingnan natin kung ano ang kailangan natin upang makamit ito.



Nagdagdag kami ng dalawang bagong linya sa quiz XML file, bago ang mga katanungan sa pagsusulit.

Java Quiz (2015/01/18) 10 2 Alin ang tamang syntax? pampubliko na klase ng ABC pinahaba ang QWE nagpapalawak ng Student int i = 'A' String s = 'Hello' pribadong klase ng ABC 2 Alin sa mga sumusunod na a ay hindi isang keyword sa Java? pinalawak ng interface ng klase ang abstraction 3 Ano ang totoo tungkol sa Java? Ang Java ay tiyak na platform Hindi sinusuportahan ng Java ang maraming pamana Ang Java ay hindi tumatakbo sa Linux at ang Mac Java ay hindi isang multi-threaded na wika 1 Alin sa mga sumusunod ang isang interface? Thread Runnable Date Date 1 Aling kumpanya ang naglabas ng Java Bersyon 8? Ang Sun Oracle Adobe Google 1 Java ay nasa ilalim ng aling kategorya ng mga wika? Mga Wika ng Unang Henerasyon Pangalawang Henerasyon ng Mga Wika Ikatlong Henerasyon na Mga Wika Pang-apat na Henerasyon na Mga Wika 2 Alin ang default na package na awtomatikong nakikita ng iyong programa? java.net javax.swing java.io java.lang 3 Aling entry sa WEB-INF ang ginagamit upang mapa ang isang servlet? servlet-mapping servlet-registration servlet-entry servlet-attachment 0 Ano ang haba ng Java datatype int? 32 bit 16 bit 64 bit Runtime tukoy 0 Ano ang default na halaga ng Java datatype boolean? totoong maling 1 0 1

Pagtatakda ng Timer Kapag Nagsisimula ng Isang Bagong Exam

Kapag nagsimula ang gumagamit ng isang bagong pagsusulit, itinakda namin ang kabuuang mga katanungan at tagal ng pagsusulit sa sesyon ng gumagamit bilang isang katangian.

request.getSession (). setAttribut ('totalNumberOfQuizQuestions', document.getE ElementByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribut ('quizDursyon', document.getElements ') .item (0) .getTextContent ()) request.getSession (). setAttribut ('min', document.getE ElementByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec ', 0)

Oras ng Countdown

Kailangan nating bawasan ang timer pagkatapos ng bawat segundo, upang gawin iyon ay lilikha kami ng isang function na Javascript na unang tatawagan kapag na-load ang pahina ng pagsusulit at pagkatapos ay tatawagin namin ang pagpapaandar na iyon nang paulit-ulit pagkatapos ng bawat segundo sa countdown na oras.

Pag-andar ng Javascript sa oras ng countdown

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 ()} function examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Time Rementing:' + min + 'Minutes,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} iba pa {kung (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). panloobHTML = 'Natitirang Oras:' + min + 'Minuto,' + sec + 'Segundo' alerto ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 dokumento .questionForm.submit ()} kung (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 sec = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Paano Tawagin ang Javascript Function

Ngayon, upang tawagan ang pagpapaandar ng Javascript na iyon gagamitin namin ang katangian na onload ng body tag.

Ang pagsusumite ng Oras ng Pagsusulit sa Exam Controller

Hanggang ngayon nagsusumite kami ng form ng mga pagsusulit na form nang direkta sa Exam Controller, ngunit ngayon kailangan naming ipadala ang mga parameter ng timer: minuto at pangalawa din upang kapag ipinakita ng Exam Controller ang susunod na katanungan dapat ding ipakita ang tamang natitirang oras. Upang makamit na isinumite namin ang form nang manu-mano gamit ang Javascript at ipadala ang mga min at sec na parameter sa Exam Controller.

Pagsusumite ng Form Gamit ang Javascript

Tandaan na kapag nag-click ang gumagamit sa susunod, ang dating o tapusin ang pindutan na customSubmit () Javascript function ay tatawagin.

$ {choice} 

0} '>

Paghawak ng Oras Up

Kapag natapos na ang tagal ng pagsusulit, sa madaling salita kapag ang parehong minuto at pangalawa ay naging zero. Nagpapakita kami ng isang kahon ng alerto na nagsasabing 'Time Up' at itatakda ang halaga ng minuto at pangalawa sa zero at isumite ang form.

sawa __init__
kung (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Nananatiling:' + min + 'Minuto,' + sec + 'Segundo' alerto ('Oras Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Kailangan nating baguhin ang code upang matapos ang pagsusulit kapag natapos na ang limitasyon sa oras para sa pagsusulit.

kung hindi man kung ('Tapusin ang Pagsusulit'.equals (aksyon) || (minuto == 0 && segundo == 0)) {finish = true int resulta = exam.calculateResult (exam) request.setAttribut (' resulta ', resulta) na hiling .getSession (). setAttribut ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). pasulong (hiling, tugon)}

Kaya, ang isang pagsusulit ay maaaring matapos alinman sa pamamagitan ng pag-click sa pindutan ng tapusin nang direkta o kapag ang oras ng limitasyon ng pagsusulit ay tapos na (parehong minuto at pangalawa ay magiging zero).

Iyon lang para sa post na ito. Sa susunod na post ay palawakin pa namin ang aming application ng pagsusulit at magdagdag ng bagong tampok upang masuri ng gumagamit ang kanyang mga sagot at malaman kung aling mga katanungan ang nagkamali nito at kung ano ang mga tamang sagot.

Tulad ng dati maaari mong i-download ang code, baguhin ito ayon sa gusto mo. Iyon ang pinakamahusay na paraan upang maunawaan ang code. Kung mayroon kang anumang katanungan o kahilingan mangyaring magkomento sa ibaba.

Mag-click sa pindutan ng pag-download upang ma-download ang code.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento at babalikan ka namin.

Mga Kaugnay na Post: