Implementarea temporizatorului JavaScript Countdown într-o aplicație de test online

În această postare, vom extinde aplicația de testare și vom adăuga funcționalitatea temporizatorului JavaScript invers. Un alt lucru pe care îl vom implementa aici este adăugarea de cod, astfel încât fiecare test să poată avea un număr diferit de întrebări. Dacă nu ați citit deja prima parte, vă recomand să o parcurgeți. Vă va fi mai ușor să urmați această postare și să o înțelegeți complet.

Puteți citi prima parte aici .De asemenea, ați putea să vă extindeți oportunitățile de carieră angulară prin preluarea .

Temporizator cu numărătoare inversă JavaScript

Durata fiecărui test este stocată în fișierul XML test, preluăm durata testului și îl salvăm în sesiunea utilizatorului ca atribut. Atunci când utilizatorul trimite o întrebare, trimitem și ora către controler utilizând trimiterea formularului personalizat cu JavaScript. Deci, când afișăm următoarea întrebare, afișăm timpul rămas corect.

Când durata testului s-a încheiat, utilizatorului i se va afișa o casetă de alertă care spune „Time Up” și testul va fi evaluat și va fi afișat rezultatul final.

Să vedem de ce avem nevoie pentru a realiza acest lucru.

Am adăugat două linii noi în fișierul XML test, înainte de întrebările testului.

Java Quiz (2015/01/18) 10 2 Care este sintaxa corectă? clasa publica ABC extinde QWE extinde Student int i = 'A' String s = 'Hello' private class ABC 2 Care dintre următoarele a nu este un cuvânt cheie în Java? interfața de clasă extinde abstractizarea 3 Ce este adevărat despre Java? Java este specific platformei Java nu acceptă moștenirea multiplă Java nu rulează pe Linux și Mac Java nu este un limbaj cu mai multe fire 1 Care dintre următoarele este o interfață? Thread Runnable Date Calendar 1 Care companie a lansat versiunea Java 8? Sun Oracle Adobe Google 1 Java se încadrează în ce categorie de limbi? Limbi din prima generație Limbi din a doua generație Limbi din a treia generație Limbi din a patra generație 2 Care este pachetul implicit care este vizibil automat pentru programul dvs.? java.net javax.swing java.io java.lang 3 Ce intrare din WEB-INF este utilizată pentru a mapa un servlet? servlet-mapping servlet-înregistrare servlet-entry servlet-attachment 0 Care este lungimea tipului de date Java int? 32 biți 16 biți 64 biți Runtime specific 0 Care este valoarea implicită a tipului de date Java boolean? adevărat fals 1 0 1

Setarea temporizatorului la începerea unui nou examen

Când utilizatorul începe un nou examen, setăm întrebările totale și durata testului în sesiunea utilizatorului ca atribut.

ce sunt evenimente în javascript

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

Timp de numărătoare inversă

Trebuie să decrementăm cronometrul după fiecare secundă, pentru a face acest lucru, vom crea o funcție Javascript care va fi apelată mai întâi când pagina de examen este încărcată și apoi vom apela acea funcție recursiv după fiecare secundă până la numărătoarea inversă.

Funcția Javascript până la numărătoarea inversă

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = funcția new Date () customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} funcție examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Timp rămas:' + min + 'Minute,' + sec + 'Secunde' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Timp rămas:' + min + 'Minute,' + sec + alertă 'Secunde' ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Timp rămas:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 sec = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Cum să apelați funcția Javascript

Acum, pentru a apela acea funcție Javascript, vom folosi atributul onload al etichetei de corp.

Trimiterea timpului testului către controlorul examenului

Până acum trimiteam formularul de întrebări pentru test direct la controlerul de examinare, dar acum trebuie să trimitem parametrii temporizatorului: minut și secundă, de asemenea, pentru ca atunci când controlerul de examen afișează următoarea întrebare să afișeze și timpul rămas corect. Pentru a realiza acest lucru, am trimis formularul manual folosind Javascript și am trimis parametrii min și sec la controlerul de examinare.

convertiți șirul în matricea php

Trimiterea formularului utilizând Javascript

Rețineți că, atunci când utilizatorul face clic pe butonul următor, anterior sau de finalizare, se va apela funcția Javascript customSubmit () Javascript.

$ {choice} 
  
0} '>
Manipularea timpului
Când durata testului s-a încheiat, cu alte cuvinte când atât minutul, cât și secunda devin zero. Afișăm o casetă de alertă care spune „Time Up” și setăm valoarea de minut și secundă la zero și trimitem formularul.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Timp rămas:' + min + 'Minute,' + sec + alertă 'Secunde' ('Time Sus ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
Trebuie să schimbăm codul, astfel încât examenul să fie terminat la expirarea termenului limită pentru examen.
else if („Finalizați examenul”. egale (acțiune) || (minut == 0 && secundă == 0)) {finish = true int result = exam.calculateResult (examen) request.setAttribute („result”, result) request .getSession (). setAttribute ('currentExam', nul) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (cerere, răspuns)}
Deci, un examen poate fi terminat fie făcând clic direct pe butonul de finalizare, fie când termenul limită al examenului a trecut (atât minutul, cât și secunda devin zero).
Asta este pentru această postare. În următoarea postare, vom extinde în continuare aplicația noastră pentru test și vom adăuga o funcție nouă, astfel încât utilizatorul să poată să își revizuiască răspunsurile și să știe ce întrebări a greșit și care au fost răspunsurile corecte.
Ca întotdeauna, puteți descărca codul, modificați-l după cum doriți. Acesta este cel mai bun mod de a înțelege codul. Dacă aveți întrebări sau cereri, vă rugăm să comentați mai jos.
Faceți clic pe butonul de descărcare pentru a descărca codul.
 Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii și vă vom răspunde. 
 Postări asemănatoare: 
  
este ușor de învățat