Внедряване на таймера за обратно отброяване на JavaScript в онлайн приложение за тест



Това поетапно ръководство за внедряване на таймера за обратно отброяване на JavaScript за онлайн приложение за викторина ще ви помогне да изпълните таймера за обратно отброяване JavaScript, който е езикът

В тази публикация ще разширим приложението си за тест и ще добавим в него функционалността на таймера за обратно отброяване на JavaScript. Друго нещо, което ще приложим тук, е добавянето на код, така че всеки тест може да има различен брой въпроси. Ако още не сте прочели първата част, ще ви препоръчам да преминете през нея. Ще ви бъде по-лесно да следите тази публикация и да я разберете напълно.

Можете да прочетете първата част тук .Можете също така да разширите възможностите си за ъглова кариера, като започнете .





Таймер за обратно отброяване на JavaScript

Продължителността на времето на всяка викторина се съхранява в XML файла на викторината, извличаме продължителността на викторината и я запазваме в сесията на потребителя като атрибут. Когато потребителят изпрати въпрос, ние също подаваме времето на контролера, използвайки подаване на персонализиран формуляр с JavaScript. И така, когато показваме следващия въпрос, ние показваме правилното оставащо време.

javascript-countdown-timer-online-quiz-application



Когато продължителността на времето на викторината приключи, на потребителя ще се покаже предупредително поле с надпис “Time Up” и тестът ще бъде оценен и ще бъде показан крайният резултат.

Нека видим какво ни е необходимо, за да постигнем това.



длъжностна характеристика на разработчик на големи данни

Добавихме два нови реда в XML файла на теста, преди да зададем въпроси.

Викторина за Java (18.01.2015 г.) 10 2 Кой е правилният синтаксис? публичен клас ABC разширява QWE разширява Student int i = 'A' String s = 'Hello' частен клас ABC 2 Кое от следните a не е ключова дума в Java? клас интерфейс разширява абстракция 3 Какво е вярно за Java? Java е специфична за платформата Java не поддържа множествено наследяване Java не работи на Linux и Mac Java не е език с много нишки 1 Кое от следните е интерфейс? Календар за дата на изпълнение на нишка 1 Коя компания пусна Java версия 8? Sun Oracle Adobe Google 1 Java попада под коя категория езици? Езици от първо поколение Езици от второ поколение Езици от трето поколение Езици от четвърто поколение 2 Кой е пакетът по подразбиране, който автоматично се вижда от вашата програма? java.net javax.swing java.io java.lang 3 Кой запис в WEB-INF се използва за картографиране на сървлет? servlet-mapping servlet-registration servlet-entry servlet-attachment 0 Каква е дължината на Java тип данни int? 32-битова 16-битова 64-битова Времетраене специфично 0 Каква е стойността по подразбиране на логически тип данни на Java? true false 1 0 1

Задаване на таймер при стартиране на нов изпит

Когато потребителят започне нов изпит, ние задаваме общите въпроси и продължителността на теста в сесията на потребителя като атрибут.

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

Време за обратно броене

Трябва да декрементираме таймера след всяка секунда, за да направим това, ще създадем функция на Javascript, която първо ще бъде извикана при зареждане на страницата за изпит и след това ще извикаме тази функция рекурсивно след всяка секунда до времето за обратно отброяване.

Javascript функция за отброяване на времето

var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date () функция customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} функция examTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Оставащо време:' + min + 'Minutes,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Оставащо време:' + мин + 'Минути,' + сек + 'Секунди' предупреждение ('Време изтече') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 документ .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Оставащо време:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 сек = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Как да се обадя на Javascript функцията

Сега, за да извикаме тази функция на Javascript, ще използваме атрибута onload на body tag.

Изпращане на времето за теста на контролер за изпит

Досега изпращахме формуляра за въпроси на теста директно на контролера за изпит, но сега трябва да изпратим параметрите на таймера: минута и секунда, така че когато контролерът на изпит показва следващия въпрос, той също трябва да показва правилното оставащо време. За да постигнем това, ние изпратихме формуляра ръчно с помощта на Javascript и изпратихме min и sec параметрите на Exam Controller.

Изпращане на формуляр с помощта на Javascript

Имайте предвид, че когато потребителят щракне върху следващия, предишния или бутона за завършване ще бъде извикана функцията Javascript customSubmit ()

$ {избор} 

0} '>

Справяне с времето

Когато продължителността на теста приключи, с други думи, когато и минута, и секунда станат нула. Показваме предупредително поле с надпис “Time Up” и задаваме стойността на минута и секунда на нула и изпращаме формуляра.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Оставащо време:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Нагоре ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Трябва да променим кода, така че изпитът да приключи, когато изтече ограничението за изпита.

else if ('Finish Exam'.equals (action) || (minute == 0 && second == 0)) {finish = true int result = exam.calculateResult (exam) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). напред (заявка, отговор)}

И така, изпит може да бъде завършен или чрез щракване директно върху бутона за завършване, или когато ограничението на изпита изтече (и минута, и секунда стават нула).

Това е всичко за тази публикация. В следващата публикация ще разширим допълнително нашето приложение за тест и ще добавим нова функция, така че потребителят да може да прегледа отговорите си и да разбере кои въпроси е сбъркал и кои са правилните отговори.

Както винаги можете да изтеглите кода, променете го, както искате. Това е най-добрият начин да разберете кода. Ако имате някакъв въпрос или искане, моля коментирайте по-долу.

Щракнете върху бутона за изтегляне, за да изтеглите кода.

Имате въпрос към нас? Моля, споменете го в раздела за коментари и ние ще се свържем с вас.

Подобни публикации: