Dans cet article, nous allons étendre notre application de quiz et y ajouter une fonctionnalité de compte à rebours JavaScript. Une autre chose que nous allons mettre en œuvre ici est l'ajout de code afin que chaque quiz puisse avoir un nombre différent de questions. Si vous n'avez pas encore lu la première partie, je vous recommanderai de la parcourir. Il vous sera plus facile de suivre ce post et de le comprendre complètement.
Vous pouvez lire la première partie ici .Vous pouvez également élargir vos opportunités de carrière Angular en prenant .
Compte à rebours JavaScript
La durée de chaque quiz est stockée dans le fichier XML du quiz, nous récupérons la durée du quiz et l'enregistrons dans la session de l'utilisateur en tant qu'attribut. Lorsque l'utilisateur soumet une question, nous soumettons également l'heure au contrôleur en utilisant la soumission de formulaire personnalisé avec JavaScript. Ainsi, lorsque nous montrons la question suivante, nous affichons le temps restant correct.
Lorsque la durée du quiz est terminée, l'utilisateur verra une boîte d'alerte disant «Time Up» et le quiz sera évalué et le résultat final sera affiché.
java qu'est-ce qu'une instance
Voyons ce dont nous avons besoin pour y parvenir.
Nous avons ajouté deux nouvelles lignes dans le fichier XML du quiz, avant les questions du quiz.
Java Quiz (2015/01/18) 10 2 Quelle est la syntaxe correcte? classe publique ABC étend QWE étend Student int i = 'A' String s = 'Bonjour' classe privée ABC 2 Lequel des éléments suivants a n'est pas un mot-clé en Java? l'interface de classe étend l'abstraction 3 Qu'est-ce qui est vrai à propos de Java? Java est spécifique à la plate-forme Java ne prend pas en charge l'héritage multiple Java ne fonctionne pas sous Linux et Mac Java n'est pas un langage multithread 1 Lequel des éléments suivants est une interface? Thread Runnable Date Calendar 1 Quelle société a publié la version 8 de Java? Sun Oracle Adobe Google 1 Java appartient à quelle catégorie de langues? Langages de première génération Langages de deuxième génération Langages de troisième génération Langages de quatrième génération 2 Quel est le package par défaut qui est automatiquement visible par votre programme? java.net javax.swing java.io java.lang 3 Quelle entrée de WEB-INF est utilisée pour mapper un servlet? servlet-mapping servlet-registration servlet-entry servlet-attachment 0 Quelle est la longueur du type de données Java int? 32 bits 16 bits 64 bits Spécifique à l'exécution 0 Quelle est la valeur par défaut du type de données Java booléen? vrai faux 1 0 1
Réglage de la minuterie lors du démarrage d'un nouvel examen
Lorsque l'utilisateur commence un nouvel examen, nous définissons le total des questions et la durée du quiz dans la session de l'utilisateur comme un attribut.
request.getSession (). setAttribute ('totalNumberOfQuizQuestions', document.getElementsByTagName ('totalQuizQuestions'). item (0) .getTextContent ()) request.getSession (). setAttribute ('quizDuration', document.getElementsByTagName ') .item (0) .getTextContent ()) request.getSession (). setAttribute ('min', document.getElementsByTagName ('quizDuration'). item (0) .getTextContent ()) request.getSession (). setAttribute ('sec ', 0)Compte à rebours
Nous devons décrémenter le minuteur après chaque seconde, pour ce faire, nous allons créer une fonction Javascript qui sera d'abord appelée lorsque la page d'examen est chargée, puis nous appellerons cette fonction récursivement après chaque seconde jusqu'au compte à rebours.
Fonction Javascript pour le compte à rebours
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 = 'Temps restant:' + min + 'Minutes,' + sec + 'Seconds' sec = parseInt (sec) - 1 tim = setTimeout ('examTimer ()', 1000)} else {if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Temps restant:' + 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 = 'Temps restant:' + min + 'Minutes,' + sec + 'Seconds' min = parseInt (min ) - 1 sec = 59 tim = setTimeout ('examTimer ()', 1000)}}}Comment appeler la fonction Javascript
Maintenant, pour appeler cette fonction Javascript, nous allons utiliser l'attribut onload de la balise body.
Soumettre l'heure du quiz au contrôleur d'examen
Jusqu'à présent, nous soumettions le formulaire de questions du quiz directement au contrôleur d'examen, mais nous devons maintenant envoyer les paramètres du minuteur: minutes et secondes également afin que, lorsque le contrôleur d'examen affiche la question suivante, il affiche également le temps restant correct. Pour y parvenir, nous avons soumis le formulaire manuellement en utilisant Javascript et envoyons les paramètres min et sec à Exam Controller.
Soumettre un formulaire en utilisant Javascript
Notez que lorsque l'utilisateur clique sur le bouton suivant, précédent ou terminer, la fonction Javascript customSubmit () sera appelée.
$ {choice}
0} '>function customSubmit (someValue) {document.questionForm.minute.value = min document.questionForm.second.value = sec document.questionForm.submit ()}Mise à jour du compte à rebours dans la session utilisateur
Nous récupérons les valeurs des paramètres minute et seconde envoyées à ExamController et le mettons à jour dans la session de l'utilisateur.
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'))}Gérer le temps écoulé
Lorsque la durée du quiz est terminée, c'est-à-dire lorsque la minute et la seconde deviennent nulles. Nous montrons une boîte d'alerte indiquant «Time Up» et définissons la valeur des minutes et des secondes sur zéro et soumettons le formulaire.
if (parseInt (min) == 0 && parseInt (sec) == 0) {document.getElementById ('showtime'). innerHTML = 'Temps restant:' + min + 'Minutes,' + sec + 'Seconds' alert ('Time Up ') document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document.questionForm.submit ()}Nous devons changer le code pour que l'examen soit terminé lorsque la limite de temps pour l'examen est terminée.
python convertit le décimal en binaire
else if ('Terminer l'examen'.equals (action) || (minute == 0 && seconde == 0)) {finish = true int result = exam.calculateResult (examen) request.setAttribute (' result ', result) request .getSession (). setAttribute ('currentExam', null) request.getRequestDispatcher ('/ WEB-INF / jsps / result.jsp'). forward (demande, réponse)}Ainsi, un examen peut être terminé soit en cliquant directement sur le bouton Terminer, soit lorsque la limite de temps de l'examen est terminée (les minutes et les secondes deviennent nulles).
C’est tout pour ce post. Dans le prochain article, nous allons étendre notre application de quiz et ajouter une nouvelle fonctionnalité afin que l'utilisateur puisse revoir ses réponses et savoir quelles questions il s'est trompé et quelles étaient les bonnes réponses.
Comme toujours, vous pouvez télécharger le code, le modifier comme vous le souhaitez. C’est la meilleure façon de comprendre le code. Si vous avez des questions ou des demandes, veuillez commenter ci-dessous.
Cliquez sur le bouton de téléchargement pour télécharger le code.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires et nous vous recontacterons.
Articles Similaires: