JavaScript-ajastimen käyttöönotto tietokilpailusovelluksessa

Tässä viestissä laajennamme tietokilpailusovellustamme ja lisätään siihen JavaScript-ajastimen toiminto. Toinen asia, jonka toteutamme tässä, on koodin lisääminen, jotta jokaisella tietokilpailulla voi olla erilainen määrä kysymyksiä. Jos et ole vielä lukenut ensimmäistä osaa, suosittelen sinua käymään se läpi. Sinulla on helpompaa seurata tätä viestiä ja ymmärtää se kokonaan.

Voit lukea ensimmäisen osan täältä .Voit myös laajentaa kulma-uramahdollisuuksiasi aloittamalla .

JavaScript-ajastin

Kunkin tietokilpailun kesto on tallennettu tietokilpailun XML-tiedostoon, haemme tietokilpailun keston ja tallennamme sen käyttäjän istuntoon attribuuttina. Kun käyttäjä lähettää kysymyksen, lähetämme myös ajan rekisterinpitäjälle käyttämällä mukautettua lomakkeen lähetystä JavaScriptillä. Joten kun näytämme seuraavan kysymyksen, näytämme oikean jäljellä olevan ajan.

Kun tietokilpailun kesto on ohi, käyttäjälle näytetään hälytysruutu, jossa lukee 'Aikaa loppuun'. Tietokilpailu arvioidaan ja lopputulos näytetään.

Katsotaanpa, mitä tarvitsemme tämän saavuttamiseksi.

Olemme lisänneet kaksi uutta riviä tietokilpailun XML-tiedostoon ennen tietokilpailukysymyksiä.

Java-tietokilpailu (2015/01/18) 10 2 Mikä on oikea syntaksi? julkinen luokka ABC laajentaa QWE laajentaa opiskelija int i = 'A' Merkkijono s = 'Hei' yksityisluokka ABC 2 Mikä seuraavista a ei ole Java-avainsana? luokan käyttöliittymä laajentaa abstraktiota 3 Mikä on totta Java? Java on alustakohtainen Java ei tue useita perintöjä Java ei toimi Linuxissa ja Macissa Java ei ole monisäikeinen kieli 1 Mikä seuraavista on käyttöliittymä? Kierteen juokseva päivämääräkalenteri 1 Mikä yritys julkaisi Java-version 8? Mihin kieliluokkaan kuuluu Sun Oracle Adobe Google 1 Java? Ensimmäisen sukupolven kielet toisen sukupolven kielet kolmannen sukupolven kielet neljännen sukupolven kielet 2 Mikä on oletuspaketti, joka näkyy automaattisesti ohjelmallesi? java.net javax.swing java.io java.lang 3 Mitä WEB-INF-merkintää käytetään servletin kartoittamiseen? servlet-kartoitus servlet-rekisteröinti servlet-entry servlet-liite 0 Mikä on Java-tietotyypin pituus int? 32-bittinen 16-bittinen 64-bittinen Suorituksen aikainen 0 Mikä on Java-tietotyypin looginen oletusarvo? tosi väärä 1 0 1

Ajastimen asettaminen aloitettaessa uutta tenttiä

Kun käyttäjä aloittaa uuden kokeen, asetamme käyttäjän istunnon kysymysten kokonaiskysymykset ja keston määritteeksi.

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

Lähtöaika

Meidän on vähennettävä ajastinta sekunnin jälkeen, jotta voimme luoda Javascript-toiminnon, joka kutsutaan ensin, kun tenttisivu ladataan, ja sitten kutsumme tätä funktiota rekursiivisesti sekunnin jälkeen laskenta-aikaan.

Javascript-toiminto lähtöajan laskemiseen

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = uusi päivämäärä () -toiminto 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 = 'Jäljellä oleva aika:' + min + 'Minuutit' + sec + 'Sekunnit' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Jäljellä oleva aika:' + min + 'Minuutit', + sek + 'Sekunnit' hälytys ('Aikakatkaisu') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 asiakirja .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Jäljellä oleva aika:' + min + 'Minuutit', + sek + 'Sekunnit' min = parseInt (min ) - 1 s = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Kuinka kutsua Javascript-toimintoa

Soittaaksemme Javascript-funktiota aiomme käyttää body tag -määritettä.

Tietokilpailuajan lähettäminen tenttiohjaimelle

Tähän asti lähetimme tietokilpailulomakkeen suoraan tenttiohjaimelle, mutta nyt meidän on lähetettävä ajastinparametrit: minuutti ja sekunti myös niin, että kun tenttiohjain näyttää seuraavan kysymyksen, sen pitäisi näyttää myös oikea jäljellä oleva aika. Tämän saavuttamiseksi olemme lähettäneet lomakkeen manuaalisesti Javascriptin avulla ja lähettäneet min- ja sec-parametrit tenttiohjaimelle.

Lomakkeen lähettäminen Javascriptin avulla

Huomaa, että kun käyttäjä napsauttaa seuraavaa, edellistä tai viimeistä painiketta customSubmit () Javascript-toiminto kutsutaan.

$ {choice} 
  
0} '>
Ajan loppuminen
Kun tietokilpailun kesto on ohi, toisin sanoen kun sekä minuutista että sekunnista tulee nolla. Näytämme hälytysruudun, jossa sanotaan 'Aikaa loppuun', asetamme minuuttien ja sekuntien arvon nollaksi ja lähetämme lomakkeen.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). internalHTML = 'Jäljellä oleva aika:' + min + 'Minuutit', + sek + 'Sekunnit' -hälytys ('Aika Ylös ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
Meidän on vaihdettava koodi niin, että tentti valmistuu, kun kokeen aikaraja on ohi.
mitä ovat kontekstisuodattimet taulussa
muuten jos ('Suorita tentti'. on yhtä suuri (toiminto) || (minuutti == 0 && sekunti == 0)) {maali = tosi int tulos = tentti. .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). eteenpäin (pyyntö, vastaus)}
Joten tentti voidaan suorittaa joko napsauttamalla suoraan lopetuspainiketta tai kun kokeen aikaraja on ohi (sekä minuutista että sekunnista tulee nolla).
Se on tässä viestissä. Seuraavassa viestissä laajennamme tietokilpailusovellustamme ja lisäämme uuden ominaisuuden, jotta käyttäjä voi tarkistaa vastauksensa ja tietää, mitkä kysymykset tekivät sen väärin ja mitkä olivat oikeat vastaukset.
Kuten aina, voit ladata koodin, muuttaa sitä haluamallasi tavalla. Se on paras tapa ymmärtää koodi. Jos sinulla on kysyttävää tai pyyntöä, kommentoi alla.
Lataa koodi napsauttamalla latauspainiketta.
 Onko sinulla kysymys meille? Mainitse se kommenttiosassa ja palaamme sinuun. 
 Aiheeseen liittyvät julkaisut: