Implementando cronômetro de contagem regressiva de JavaScript em um aplicativo de teste online



Este guia passo a passo para implementar o cronômetro de contagem regressiva em JavaScript para um aplicativo de teste online ajudará você a executar o cronômetro de contagem regressiva em que o JavaScript é a linguagem

Nesta postagem, vamos estender nosso aplicativo de teste e adicionar uma funcionalidade de cronômetro de contagem regressiva em JavaScript a ele. Outra coisa que implementaremos aqui é adicionar código para que cada teste possa ter um número diferente de perguntas. Se você ainda não leu a primeira parte, recomendo que a leia. Será mais fácil para você seguir esta postagem e entendê-la completamente.

Você pode ler a primeira parte aqui .Você também pode expandir suas oportunidades de carreira na Angular, aproveitando .





Temporizador de contagem regressiva de JavaScript

O tempo de duração de cada questionário é armazenado no arquivo XML do questionário, recuperamos a duração do questionário e salvamos na sessão do usuário como um atributo. Quando o usuário envia uma pergunta, também enviamos o tempo para o controlador usando o envio de formulário personalizado com JavaScript. Assim, quando mostramos a próxima questão, mostramos o tempo restante correto.

javascript-countdown-timer-online-quiz-application



sort () em c ++

Quando o tempo de duração do questionário terminar, o usuário verá uma caixa de alerta dizendo “Tempo esgotado” e o questionário será avaliado e o resultado final será exibido.

Vamos ver o que precisamos para conseguir isso.



Adicionamos duas novas linhas no arquivo XML do questionário, antes das perguntas do questionário.

Java Quiz (2015/01/18) 10 2 Qual é a sintaxe correta? classe pública ABC extends QWE extends Student int i = 'A' String s = 'Hello' classe privada ABC 2 Qual das alternativas a não é uma palavra-chave em Java? interface de classe estende a abstração 3 O que é verdade sobre Java? Java é específico da plataforma Java não oferece suporte a herança múltipla Java não é executado em Linux e Mac Java não é uma linguagem multithread 1 Qual das alternativas a seguir é uma interface? Thread executável Calendário 1 Qual empresa lançou o Java versão 8? Sun Oracle Adobe Google 1 Java está incluído em qual categoria de linguagens? Idiomas de primeira geração Idiomas de segunda geração Idiomas de terceira geração Idiomas de quarta geração 2 Qual é o pacote padrão que é automaticamente visível para o seu programa? java.net javax.swing java.io java.lang 3 Qual entrada em WEB-INF é usada para mapear um servlet? servlet-mapeamento servlet-registro servlet-entrada servlet-anexo 0 Qual é o comprimento do tipo de dados Java int? 32 bits 16 bits 64 bits Específico de tempo de execução 0 Qual é o valor padrão do tipo de dados Java booleano? verdadeiro falso 1 0 1

Configurando o cronômetro ao iniciar um novo exame

Quando o usuário inicia um novo exame, definimos o total de perguntas e a duração do questionário na sessão do usuário como um atributo.

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

Tempo de contagem regressiva

Temos que diminuir o cronômetro a cada segundo, para fazer isso vamos criar uma função Javascript que será chamada primeiro quando a página de exame for carregada e então chamaremos essa função recursivamente a cada segundo para o tempo de contagem regressiva.

Função Javascript para contagem regressiva

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 = 'Tempo restante:' + min + 'Minutos,' + sec + 'Segundos' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Tempo restante:' + min + 'Minutos,' + seg + 'Segundos' alert ('Tempo esgotado') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 documento .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Tempo restante:' + min + 'Minutos,' + seg + 'Segundos' min = parseInt (min ) - 1 seg = 59 tim = setTimeout ('examTimer ()', 1000)}}}

Como chamar a função Javascript

Agora, para chamar essa função Javascript, vamos usar o atributo onload da tag body.

Envio do questionário para o Controlador de exames

Até agora, estávamos enviando o formulário de perguntas do questionário diretamente para o Controlador de exame, mas agora temos que enviar os parâmetros do cronômetro: minuto e segundo também para que, quando o Controlador de exame exibir a próxima pergunta, ele também exiba o tempo restante correto. Para isso, submetemos o formulário manualmente em Javascript e enviamos os parâmetros min e sec ao Exam Controller.

Envio de formulário usando Javascript

Observe que quando o usuário clicar em Avançar, a função Javascript customSubmit () do botão anterior ou finalizar será chamada.

$ {choice} 

0} '>

Lidando com o tempo esgotado

Quando a duração do questionário terminar, ou seja, quando o minuto e o segundo forem zerados. Mostramos uma caixa de alerta dizendo “Tempo esgotado” e definimos o valor do minuto e do segundo para zero e enviamos o formulário.

if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Acima ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}

Temos que alterar o código para que o exame seja concluído quando o tempo limite para o exame terminar.

else if ('Concluir exame'.equals (ação) || (minuto == 0 && segundo == 0)) {terminar = true int result = exam.calculateResult (exam) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (solicitação, resposta)}

Portanto, um exame pode ser concluído clicando diretamente no botão Concluir ou quando o tempo limite do exame terminar (o minuto e o segundo tornam-se zero).

É isso para este post. Na próxima postagem, estenderemos ainda mais nosso aplicativo de teste e adicionaremos um novo recurso para que o usuário possa revisar suas respostas e saber quais perguntas ele errou e quais foram as respostas corretas.

Como sempre, você pode baixar o código, alterá-lo como quiser. Essa é a melhor maneira de entender o código. Se você tiver alguma dúvida ou solicitação, comente abaixo.

Clique no botão de download para baixar o código.

Tem alguma questão para nós? Mencione isso na seção de comentários e entraremos em contato com você.

Postagens relacionadas: