In questo post estenderemo la nostra applicazione per i quiz e aggiungeremo una funzionalità di timer per il conto alla rovescia JavaScript. Un'altra cosa che implementeremo qui è l'aggiunta di codice in modo che ogni quiz possa avere un numero diverso di domande. Se non hai già letto la prima parte, ti consiglio di esaminarla. Sarà più facile per te seguire questo post e comprenderlo completamente.
Puoi leggere la prima parte qui .Potresti anche espandere le tue opportunità di carriera in Angular accettando .
Timer conto alla rovescia JavaScript
La durata di ogni quiz viene memorizzata nel file XML del quiz, recuperiamo la durata del quiz e la salviamo nella sessione dell'utente come attributo. Quando l'utente invia una domanda, inviamo anche l'ora al controller utilizzando l'invio del modulo personalizzato con JavaScript. Quindi, quando mostriamo la domanda successiva, mostriamo il tempo rimanente corretto.
Quando la durata del quiz è terminata, all'utente verrà mostrata una casella di avviso che dice 'Time Up' e il quiz verrà valutato e verrà visualizzato il risultato finale.
Vediamo di cosa abbiamo bisogno per raggiungere questo obiettivo.
Abbiamo aggiunto due nuove righe nel file XML del quiz, prima delle domande del quiz.
Java Quiz (2015/01/18) 10 2 Qual è la sintassi corretta? la classe pubblica ABC estende QWE estende Student int i = 'A' String s = 'Ciao' classe privata ABC 2 Quale delle seguenti a non è una parola chiave in Java? l'interfaccia di classe estende l'astrazione 3 Cosa c'è di vero in Java? Java è specifico della piattaforma Java non supporta l'ereditarietà multipla Java non viene eseguito su Linux e Mac Java non è un linguaggio multi-thread 1 Quale delle seguenti è un'interfaccia? Data eseguibile thread Calendario 1 Quale azienda ha rilasciato Java versione 8? Sun Oracle Adobe Google 1 Java rientra in quale categoria di linguaggi? Linguaggi di prima generazione Linguaggi di seconda generazione Linguaggi di terza generazione Linguaggi di quarta generazione 2 Qual è il pacchetto predefinito che è automaticamente visibile al programma? java.net javax.swing java.io java.lang 3 Quale voce in WEB-INF viene utilizzata per mappare un servlet? servlet-mapping registrazione-servlet immissione-servlet allegato-servlet 0 Qual è la lunghezza del tipo di dati Java int? 32 bit 16 bit 64 bit Specifico per il runtime 0 Qual è il valore predefinito del tipo di dati Java booleano? vero falso 1 0 1
Impostazione del timer all'avvio di un nuovo esame
Quando l'utente inizia un nuovo esame, impostiamo come attributo il numero totale di domande e la durata del quiz nella sessione dell'utente.
request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElementsByTagName ',' quizDuration ' .item (0) .getTextContent ()) request.getSession (). setAttribute ('min', document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec ', 0)Conto alla rovescia
Dobbiamo diminuire il timer dopo ogni secondo, per fare ciò creeremo una funzione Javascript che verrà prima chiamata quando viene caricata la pagina dell'esame e poi chiameremo quella funzione ricorsivamente dopo ogni secondo per il conto alla rovescia.
Funzione Javascript per il conto alla rovescia
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 sec = 59 tim = setTimeout ('examTimer ()', 1000)}}}Come chiamare la funzione Javascript
Ora, per chiamare quella funzione Javascript useremo l'attributo onload del tag body.
Invio del tempo del quiz al responsabile dell'esame
Fino ad ora stavamo inviando il modulo delle domande del quiz direttamente all'Exam Controller, ma ora dobbiamo inviare i parametri del timer: minuto e secondo anche in modo che quando Exam Controller visualizza la domanda successiva dovrebbe anche visualizzare il tempo rimanente corretto. Per ottenere ciò, abbiamo inviato il modulo manualmente utilizzando Javascript e inviato i parametri min e sec all'Exam Controller.
Invio del modulo utilizzando Javascript
Si noti che quando l'utente fa clic sul pulsante successivo, precedente o finale customSubmit () verrà chiamata la funzione Javascript.
$ {choice}
0} '>
function customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm.second.value = sec document.questionForm.submit ()}Aggiornamento del timer per il conto alla rovescia nella sessione dell'utente
Recuperiamo i valori dei parametri dei minuti e dei secondi inviati all'ExamController e li aggiorniamo nella sessione dell'utente.
if (request.getParameter ('minute')! = null) {minute = Integer.parseInt (request.getParameter ('minute')) second = Integer.parseInt (request.getParameter ('second')) request.getSession () .setAttribute ('min', request.getParameter ('minute')) request.getSession (). setAttribute ('sec', request.getParameter ('second'))}Gestire il tempo scaduto
Quando la durata del quiz è terminata, in altre parole quando sia i minuti che i secondi diventano zero. Mostriamo una finestra di avviso che dice 'Time Up' e impostiamo il valore di minuti e secondi a zero e inviamo il modulo.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Time Remaining:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Su ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}Dobbiamo cambiare il codice in modo che l'esame finisca quando il limite di tempo per l'esame è scaduto.
altrimenti 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'). forward (request, response)}Quindi, un esame può essere terminato facendo clic direttamente sul pulsante Fine o quando il limite di tempo dell'esame è scaduto (sia i minuti che i secondi diventano zero).
Questo è tutto per questo post. Nel prossimo post estenderemo ulteriormente la nostra applicazione per i quiz e aggiungeremo nuove funzionalità in modo che l'utente possa rivedere le sue risposte e sapere quali domande ha sbagliato e quali erano le risposte corrette.
Come sempre puoi scaricare il codice, modificarlo come preferisci. Questo è il modo migliore per comprendere il codice. Se hai domande o richieste, commenta qui sotto.
Fare clic sul pulsante di download per scaricare il codice.
Hai domande per noi? Per favore menzionalo nella sezione commenti e ti risponderemo.
Post correlati: