„JavaScript Countdown Timer“ įgyvendinimas internetinėje viktorinos programoje



Šis nuoseklus „JavaScript“ skaičiavimo laikmačio įdiegimo internetinės viktorinos programoje vadovas padės jums atlikti atskaitos laikmatį „JavaScript“ kaip kalbą

Šiame įraše mes išplėsime savo viktorinos programą ir pridėsime „JavaScript“ atgalinio laikmačio funkciją. Kitas dalykas, kurį mes įgyvendinsime čia, yra kodo pridėjimas, kad kiekvienoje viktorinoje gali būti skirtingas klausimų skaičius. Jei dar neskaitėte pirmosios dalies, rekomenduosiu ją perskaityti. Jums bus lengviau sekti šį įrašą ir jį visiškai suprasti.

Pirmąją dalį galite perskaityti čia .Taip pat galėtumėte išplėsti savo kampinės karjeros galimybes .





„JavaScript“ atgalinis laikmatis

Kiekvienos viktorinos trukmė saugoma viktorinos XML faile, mes gauname viktorinos trukmę ir išsaugome ją vartotojo sesijoje kaip atributą. Kai vartotojas pateikia klausimą, mes taip pat pateikiame laiką valdikliui, naudodami pasirinktinę formos pateikimą su „JavaScript“. Taigi, rodydami kitą klausimą, rodome teisingą likusį laiką.

javascript-countdown-timer-online-quiz-application



Pasibaigus viktorinos trukmei, vartotojui bus parodytas įspėjimo langelis su užrašu „Laikas baigtas“, viktorina bus įvertinta ir parodytas galutinis rezultatas.

Pažiūrėkime, ko mums reikia, kad tai pasiektume.



Prieš klausimus apie viktoriną pridėjome dvi naujas eilutes į viktorinos XML failą.

„Java“ viktorina (2015/01/18) 10 2 Kuri yra teisinga sintaksė? ABC pratęs viešąją klasę QWE pratęsė Studentų int i = 'A' String s = 'Sveiki' privačią ABC 2 klasę. Kuris iš šių dalykų nėra „Java“ raktinis žodis? klasės sąsaja išplečia abstrakciją 3 Kas yra tiesa apie „Java“? „Java“ yra specifinė platforma „Java“ nepalaiko kelių paveldėjimų „Java“ neveikia „Linux“ ir „Mac“. „Java“ nėra daugialypė kalba 1 Kuris iš šių yra sąsaja? Siūlų paleidžiamų datų kalendorius 1 Kuri įmonė išleido „Java“ versiją 8? Kuriai kalbų kategorijai priklauso „Sun Oracle“ „Adobe Google 1 Java“? Pirmos kartos kalbos Antros kartos kalbos Trečios kartos kalbos Ketvirtos kartos kalbos 2 Kuris numatytasis paketas yra automatiškai matomas jūsų programai? java.net javax.swing java.io java.lang 3 Kuris WEB-INF įrašas naudojamas servletui susieti? servleto atvaizdavimas servleto registravimas servleto įvedimas servleto priedas 0 Koks yra „Java“ duomenų tipo int ilgis? 32 bitai 16 bitų 64 bitai Konkretus vykdymo laikas 0 Kokia yra numatytoji „Java“ duomenų tipo loginės reikšmė? tiesa klaidinga 1 0 1

Laikmačio nustatymas pradedant naują egzaminą

Kai vartotojas pradeda naują egzaminą, bendrą seanso klausimų ir viktorinos trukmę nustatome kaip atributą.

request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). elementas (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)

Atgalinis laikas

Po kiekvienos sekundės turime sumažinti laikmatį. Norėdami tai padaryti, sukursime „Javascript“ funkciją, kuri pirmiausia bus iškviečiama įkėlus egzaminų puslapį, o po kiekvienos sekundės šią funkciją iškviesime rekursyviai.

„Javascript“ funkcija skaičiuojant laiką

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'). internalHTML = 'Likęs laikas:' + min + 'Minutės' + sek + „Sekundės“ sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Likęs laikas:' + min + 'Minutės, + sek + įspėjimas apie sekundes (' Time Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 dokumentas .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Likęs laikas:' + min + 'Minutės', + sek + 'Sekundės' min = parseInt (min ) - 1 sek = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Kaip paskambinti „Javascript“ funkcijai

Norėdami paskambinti ta „Javascript“ funkcija, naudosime „body tag“ atributą.

lentos pamoka žingsnis po žingsnio

Viktorinos laiko pateikimas egzaminų kontrolieriui

Iki šiol viktorinos klausimų formą mes teikėme tiesiogiai egzaminų kontrolieriui, tačiau dabar mes turime siųsti laikmačio parametrus: minutę ir sekundę taip pat, kad kai egzamino kontrolierius parodys kitą klausimą, jis taip pat turėtų rodyti teisingą likusį laiką. Norėdami tai pasiekti, mes pateikėme formą rankiniu būdu, naudodami „Javascript“, ir siunčiame min ir sec parametrus egzaminų valdikliui.

Formos pateikimas naudojant „Javascript“

Atminkite, kad kai vartotojas spustelės kitą, ankstesnį arba baigimo mygtuką, bus iškviesta „Javascript“ funkcija „customSubmit ()“.

$ {pasirinkimas} 

0} '>

Laiko pabaigos tvarkymas

Pasibaigus viktorinos trukmei, kitaip tariant, kai minutė ir sekundė tampa nulinės. Parodome įspėjimo langelį, kuriame sakoma „Laikas iki“, nustatome minutės ir sekundės reikšmę iki nulio ir pateikiame formą.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Likęs laikas:' + min + 'Minutės', + sek + 'Sekundės' įspėjimas ('Laikas Aukštyn ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Turime pakeisti kodą, kad egzaminas būtų baigtas, kai pasibaigs egzamino terminas.

else if ('Baigti egzaminą' yra lygu (veiksmas) || (minutė == 0 && sekundė == 0)) {baigti = tikrasis int rezultatas = egzaminas.kalkuluotiRezultatas (egzaminas) request.setAttribute ('rezultatas', rezultatas) užklausa .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). perduoti (užklausa, atsakymas)}

Egzaminas gali būti baigtas arba spustelėjus mygtuką „Baigti“, arba pasibaigus egzamino terminui (minutė ir sekundė tampa nulinės).

Tai šiam įrašui. Kitame įraše mes dar išplėsime savo viktorinos programą ir pridėsime naują funkciją, kad vartotojas galėtų peržiūrėti savo atsakymus ir žinoti, kuriuos klausimus jis suklydo ir kokie buvo teisingi atsakymai.

Kaip visada, galite atsisiųsti kodą, pakeisti jį taip, kaip jums patinka. Tai geriausias būdas suprasti kodą. Jei turite klausimų ar prašymų, prašome pakomentuoti žemiau.

Norėdami atsisiųsti kodą, spustelėkite atsisiuntimo mygtuką.

Turite mums klausimą? Prašau paminėti tai komentarų skiltyje ir mes su jumis susisieksime.

Susijusios žinutės:

kaip konvertuoti dvejetainę eilutę į dešimtainę Java