En esta publicación, ampliaremos nuestra aplicación de cuestionarios y agregaremos una funcionalidad de temporizador de cuenta regresiva de JavaScript. Otra cosa que implementaremos aquí es agregar código para que cada cuestionario pueda tener un número diferente de preguntas. Si aún no ha leído la primera parte, le recomendaré que la lea. Te resultará más fácil seguir esta publicación y comprenderla por completo.
leer y escribir un archivo de Excel en Java
Puedes leer la primera parte aquí .También puede ampliar sus oportunidades profesionales en Angular si acepta .
Temporizador de cuenta regresiva de JavaScript
La duración de cada prueba se almacena en el archivo XML de prueba, recuperamos la duración de la prueba y la guardamos en la sesión del usuario como un atributo. Cuando el usuario envía una pregunta, también enviamos la hora al controlador mediante el envío de formularios personalizados con JavaScript. Entonces, cuando mostramos la siguiente pregunta, mostramos el tiempo restante correcto.
Cuando finalice el tiempo de duración de la prueba, se le mostrará al usuario un cuadro de alerta que dice 'Tiempo de espera' y la prueba será evaluada y se mostrará el resultado final.
Veamos qué necesitamos para lograrlo.
Hemos agregado dos nuevas líneas en el archivo XML del cuestionario, antes de las preguntas del cuestionario.
Prueba de Java (18/01/2015) 10 2 ¿Cuál es la sintaxis correcta? clase pública ABC amplía QWE amplía Estudiante int i = 'A' Cadena s = 'Hola' clase privada ABC 2 ¿Cuál de las siguientes a no es una palabra clave en Java? la interfaz de clase extiende la abstracción 3 ¿Qué es cierto acerca de Java? Java es una plataforma específica Java no admite herencia múltiple Java no se ejecuta en Linux y Mac Java no es un lenguaje de múltiples subprocesos 1 ¿Cuál de las siguientes es una interfaz? Thread Runnable Date Calendar 1 ¿Qué empresa lanzó la versión 8 de Java? ¿En qué categoría de idiomas se incluye Sun Oracle Adobe Google 1 Java? Idiomas de primera generación Idiomas de segunda generación Idiomas de tercera generación Idiomas de cuarta generación 2 ¿Cuál es el paquete predeterminado que es visible automáticamente para su programa? java.net javax.swing java.io java.lang 3 ¿Qué entrada en WEB-INF se usa para mapear un servlet? servlet-mapeo registro-servlet entrada-servlet adjunto-servlet 0 ¿Cuál es la longitud del tipo de datos Java int? 32 bits 16 bits 64 bits Específico del tiempo de ejecución 0 ¿Cuál es el valor predeterminado del tipo de datos Java booleano? verdadero falso 1 0 1
Configuración del temporizador al iniciar un nuevo examen
Cuando el usuario inicia un nuevo examen, establecemos el total de preguntas y la duración del cuestionario en la sesión del usuario como un atributo.
request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElements '() .item (0) .getTextContent ()) request.getSession (). setAttribute ('min', document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec ', 0)Tiempo de cuenta regresiva
Tenemos que disminuir el temporizador después de cada segundo, para ello vamos a crear una función de Javascript que se llamará primero cuando se cargue la página del examen y luego llamaremos a esa función de forma recursiva después de cada segundo para el tiempo de cuenta atrás.
Función de Javascript para el tiempo de cuenta regresiva
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 = 'Tiempo restante:' + min + 'Minutos,' + seg + 'Segundos' alerta ('Tiempo de espera') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 documento .questionForm.submit ()} if (parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 seg = 59 tim = setTimeout ('examTimer ()', 1000)}}}Cómo llamar a la función Javascript
Ahora, para llamar a esa función de Javascript, usaremos el atributo onload de la etiqueta del cuerpo.
Envío del cuestionario al controlador del examen
Hasta ahora, enviábamos el formulario de preguntas del cuestionario directamente al Exam Controller, pero ahora tenemos que enviar los parámetros del temporizador: minuto y segundo también para que cuando Exam Controller muestre la siguiente pregunta, también debería mostrar el tiempo restante correcto. Para lograrlo, hemos enviado el formulario manualmente usando Javascript y enviamos los parámetros min y sec al Exam Controller.
Envío de formulario con JavaScript
Tenga en cuenta que cuando el usuario haga clic en el botón siguiente, anterior o finalizar, se llamará a la función de JavaScript customSubmit ().
$ {elección}
0}'>Manejando el tiempo hasta
Cuando finaliza la duración del cuestionario, en otras palabras, cuando el minuto y el segundo se vuelven cero. Mostramos un cuadro de alerta que dice 'Time Up' y establecemos el valor de minuto y segundo en cero y enviamos el formulario.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Arriba ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}Tenemos que cambiar el código para que el examen finalice cuando finalice el tiempo límite para el examen.
else if ('Finalizar examen'.equals (acción) || (minuto == 0 && segundo == 0)) {finalizar = verdadero resultado int = exam.calculateResult (examen) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (request, response)}Por lo tanto, un examen se puede terminar haciendo clic directamente en el botón Finalizar o cuando el límite de tiempo del examen finaliza (tanto el minuto como el segundo se vuelven cero).
Eso es todo por esta publicación. En la próxima publicación, ampliaremos aún más nuestra aplicación de cuestionarios y agregaremos una nueva función para que el usuario pueda revisar sus respuestas y saber qué preguntas se equivocaron y cuáles fueron las respuestas correctas.
Como siempre puedes descargar el código, cámbialo como quieras. Esa es la mejor forma de comprender el código. Si tiene alguna pregunta o solicitud, comente a continuación.
Haga clic en el botón de descarga para descargar el código.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios y nos pondremos en contacto con usted.
Artículos Relacionados: