Реализация таймера обратного отсчета JavaScript в приложении онлайн-викторины

В этом посте мы расширим нашу викторину и добавим в нее функцию таймера обратного отсчета JavaScript. Еще одна вещь, которую мы реализуем здесь, - это добавление кода, чтобы в каждой викторине могло быть разное количество вопросов. Если вы еще не прочитали первую часть, я рекомендую вам пройти ее. Вам будет легче следить за этим постом и полностью его понимать.

Вы можете прочитать первую часть здесь .Вы также можете расширить свои карьерные возможности в Angular, взяв .

структуры данных и алгоритмы Java

Таймер обратного отсчета JavaScript

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

Когда время викторины истечет, пользователю будет показано окно предупреждения с надписью «Время истекло», и тест будет оценен, и будет отображен окончательный результат.

Посмотрим, что нам нужно для этого.

Мы добавили две новые строки в XML-файл викторины перед вопросами викторины.

Тест по Java (18.01.2015) 10 2 Какой синтаксис правильный? открытый класс ABC extends QWE extends Student int i = 'A' String s = 'Hello' частный класс ABC 2 Что из следующего a не является ключевым словом в Java? Интерфейс класса расширяет абстракцию 3 Что верно в отношении Java? Java зависит от платформы Java не поддерживает множественное наследование Java не работает в Linux и Mac Java не является многопоточным языком 1 Что из следующего является интерфейсом? Thread Runnable Date Calendar 1 Какая компания выпустила версию Java 8? Sun Oracle Adobe Google 1 К какой категории языков относится Java? Языки первого поколения Языки второго поколения Языки третьего поколения Языки четвертого поколения 2 Какой пакет по умолчанию автоматически отображается для вашей программы? java.net javax.swing java.io java.lang 3 Какая запись в WEB-INF используется для отображения сервлета? отображение сервлета регистрация сервлета запись сервлета вложение сервлета 0 Какова длина типа данных Java int? 32-разрядный 16-разрядный 64-разрядный Зависит от среды выполнения 0 Какое значение по умолчанию для типа данных Java boolean? правда ложь 1 0 1

Установка таймера при запуске нового экзамена

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

request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElementsByTizDuration) .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 () function customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm. second.value = sec document.questionForm.submit ()} function excTimer () {if (parseInt (sec)> 0) {document.getElementById ('showtime'). innerHTML = 'Оставшееся время:' + min + 'Минуты,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('excTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Оставшееся время:' + min + 'Минуты,' + секунды + Предупреждение 'Секунды' ('Время истекло') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Оставшееся время:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 секунда = 59 tim = setTimeout ('excTimer ()', 1000)}}}

Как вызвать функцию Javascript

Теперь, чтобы вызвать эту функцию Javascript, мы собираемся использовать атрибут onload тега body.

Отправка времени опроса контролеру экзамена

До сих пор мы отправляли форму вопросов викторины непосредственно в Exam Controller, но теперь мы должны отправить параметры таймера: минуту и ​​секунду, чтобы, когда Exam Controller отображал следующий вопрос, он также должен был отображать правильное оставшееся время. Для этого мы отправили форму вручную с помощью Javascript и отправили параметры min и sec в Exam Controller.

Отправка формы с использованием Javascript

Обратите внимание, что когда пользователь нажимает кнопку «Далее», «Назад» или «Завершить», будет вызвана функция customSubmit () Javascript.

$ {choice} 
  
0} '>
Работа со временем
Когда продолжительность викторины закончится, другими словами, когда минуты и секунды станут равными нулю. Мы показываем окно предупреждения с надписью «Время истекло», устанавливаем значение минуты и секунды на ноль и отправляем форму.
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 = exc.calculateResult (экзамен) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (запрос, ответ)}
Таким образом, экзамен можно завершить, щелкнув непосредственно кнопку завершения или по истечении срока экзамена (минуты и секунды становятся равными нулю).
Это все для этого поста. В следующем посте мы продолжим расширять нашу викторину и добавим новую функцию, чтобы пользователь мог просматривать свои ответы и знать, на какие вопросы он ошибся и каковы были правильные ответы.
Как всегда вы можете скачать код, изменить его как хотите. Это лучший способ понять код. Если у вас есть вопросы или пожелания, пожалуйста, оставьте комментарий ниже.
Нажмите кнопку загрузки, чтобы загрузить код.
как установить hadoop в ubuntu
 Есть вопрос к нам? Пожалуйста, отметьте это в разделе комментариев, и мы свяжемся с вами. 
 Похожие сообщения: