Implementacja licznika czasu JavaScript w aplikacji quizu online

W tym poście rozszerzymy naszą aplikację quizową i dodamy do niej funkcję licznika czasu JavaScript. Kolejną rzeczą, którą tutaj zaimplementujemy, jest dodanie kodu, aby każdy quiz mógł mieć inną liczbę pytań. Jeśli nie przeczytałeś jeszcze pierwszej części, polecę Ci ją przeczytać. Będzie ci łatwiej śledzić ten post i całkowicie go zrozumieć.

Możesz przeczytać pierwszą część tutaj .Możesz również poszerzyć swoje możliwości kariery w Angular, podejmując .

Zegar odliczający JavaScript

Czas trwania każdego quizu jest przechowywany w pliku XML quizu, pobieramy czas trwania quizu i zapisujemy go w sesji użytkownika jako atrybut. Kiedy użytkownik przesyła pytanie, przesyłamy również czas do kontrolera za pomocą niestandardowego formularza z JavaScriptem. Kiedy więc pokażemy następne pytanie, wyświetlimy prawidłowy pozostały czas.

Kiedy czas trwania quizu dobiegnie końca, użytkownikowi zostanie wyświetlone okno z ostrzeżeniem „Time Up”, a quiz zostanie oceniony, a ostateczny wynik zostanie wyświetlony.

Zobaczmy, czego potrzebujemy, aby to osiągnąć.

Dodaliśmy dwa nowe wiersze w pliku XML quizu przed pytaniami quizowymi.

różnica między html i xml

Quiz Java (18.01.2015) 10 2 Jaka jest poprawna składnia? public class ABC extends QWE extends Student int i = 'A' String s = 'Hello' klasa prywatna ABC 2 Które z następujących a nie jest słowem kluczowym w Javie? interfejs klasy rozszerza abstrakcję 3 Co jest prawdą o Javie? Java jest specyficzna dla platformy Java nie obsługuje dziedziczenia wielokrotnego Java nie działa w systemach Linux i Mac Java nie jest językiem wielowątkowym 1 Który z poniższych elementów jest interfejsem? Wątek Runnable Date Calendar 1 Która firma wydała Javę w wersji 8? Do jakiej kategorii języków należy Sun Oracle Adobe Google 1 Java? Języki pierwszej generacji Języki drugiej generacji Języki trzeciej generacji Języki czwartej generacji 2 Który pakiet domyślny jest automatycznie widoczny w Twoim programie? java.net javax.swing java.io java.lang 3 Który wpis w WEB-INF jest używany do mapowania serwletu? mapowanie serwletów rejestracja serwletów wpis-serwletu załącznik-serwletu 0 Jaka jest długość typu danych Java int? 32-bitowy 16-bitowy 64-bitowy Specyficzne dla środowiska wykonawczego 0 Jaka jest domyślna wartość logicznego typu danych Java? prawda fałsz 1 0 1

Ustawianie licznika czasu podczas rozpoczynania nowego egzaminu

Gdy użytkownik rozpoczyna nowy egzamin, jako atrybut ustawiamy sumę pytań i czas trwania quizu w sesji użytkownika.

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

Czas odliczania

Musimy zmniejszać licznik czasu po każdej sekundzie, w tym celu utworzymy funkcję Javascript, która będzie wywoływana jako pierwsza po załadowaniu strony egzaminacyjnej, a następnie będziemy wywoływać tę funkcję rekurencyjnie po każdej sekundzie do czasu odliczania.

Funkcja JavaScript do odliczania czasu

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 Remaining:' + min + 'Minutes,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Up') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 s = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Jak wywołać funkcję JavaScript

Teraz, aby wywołać tę funkcję Javascript, użyjemy atrybutu onload tagu body.

Przesłanie czasu quizu do kontrolera egzaminów

Do tej pory składaliśmy formularz pytań quizowych bezpośrednio do Kontrolera Egzaminów, ale teraz musimy przesłać parametry timera: minutę i sekundę, aby podczas wyświetlania kolejnego pytania Kontroler egzaminów wyświetlał również prawidłowy pozostały czas. W tym celu przesłaliśmy formularz ręcznie za pomocą JavaScript i wysłaliśmy parametry min i sec do Exam Controller.

Przesyłanie formularza za pomocą JavaScript

Zwróć uwagę, że gdy użytkownik kliknie przycisk następny, poprzedni lub zakończ, zostanie wywołana funkcja JavaScript customSubmit ().

$ {choice} 
  
0} '>
Obsługa czasu
Kiedy czas trwania quizu dobiegnie końca, innymi słowy, gdy minuty i sekundy osiągną zero. Pokazujemy okienko ostrzegawcze z napisem „Time Up”, ustawiamy minuty i sekundy na zero i wysyłamy formularz.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}
Musimy zmienić kod, aby egzamin zakończył się po upływie limitu czasu na egzamin.
else if ('Zakończ egzamin'.equals (akcja) || (minuta == 0 && sekunda == 0)) {finish = true int wynik = egzamin.calculateResult (egzamin) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (żądanie, odpowiedź)}
Tak więc egzamin można zakończyć, klikając bezpośrednio przycisk zakończenia lub po upływie limitu czasu egzaminu (zarówno minuta, jak i sekunda wynoszą zero).
To wszystko w tym poście. W następnym poście dalej rozszerzymy naszą aplikację quizową i dodamy nową funkcję, tak aby użytkownik mógł przejrzeć swoje odpowiedzi i wiedzieć, które pytania pomylił, a jakie były poprawne.
Jak zawsze możesz pobrać kod, zmień go tak, jak chcesz. To najlepszy sposób na zrozumienie kodu. Jeśli masz jakieś pytanie lub prośbę, skomentuj poniżej.
Kliknij przycisk pobierania, aby pobrać kod.
 Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy, a my skontaktujemy się z Tobą. 
 Powiązane posty: