この投稿では、クイズアプリケーションを拡張し、JavaScriptカウントダウンタイマー機能を追加します。ここで実装するもう1つのことは、各クイズに異なる数の質問を含めることができるようにコードを追加することです。最初の部分をまだ読んでいない場合は、それを読むことをお勧めします。この投稿をフォローして完全に理解する方が簡単です。
ここで最初の部分を読むことができます 。また、Angularのキャリアの機会を拡大することもできます 。
JavaScriptカウントダウンタイマー
各クイズの期間はクイズXMLファイルに保存され、クイズの期間を取得して、ユーザーのセッションに属性として保存します。ユーザーが質問を送信すると、JavaScriptを使用したカスタムフォーム送信を使用して時間もコントローラーに送信されます。したがって、次の質問を表示すると、正しい残り時間が表示されます。
クイズの期間が終了すると、ユーザーに「タイムアップ」という警告ボックスが表示され、クイズが評価され、最終結果が表示されます。
これを達成するために何が必要か見てみましょう。
クイズの質問の前に、クイズXMLファイルに2つの新しい行を追加しました。
jqueryとjavascriptの違いは何ですか
Javaクイズ（2015/01/18）10 2正しい構文はどれですか？ public class ABC extends QWE extends Student int i = 'A' String s = 'Hello' private class ABC 2次のaのうち、Javaのキーワードではないものはどれですか。クラスインターフェイスは抽象化を拡張します3Javaについて何が真実ですか？ Javaはプラットフォーム固有ですJavaは多重継承をサポートしていませんJavaはLinux上で実行されずMacJavaはマルチスレッド言語ではありません1次のうちどれがインターフェースですか？スレッド実行可能日付カレンダー1Javaバージョン8をリリースしたのはどの会社ですか？ Sun Oracle Adobe Google 1 Javaは、どの言語カテゴリに分類されますか？第1世代の言語第2世代の言語第3世代の言語第4世代の言語2プログラムに自動的に表示されるデフォルトのパッケージはどれですか。 java.net javax.swing java.io java.lang 3WEB-INFのどのエントリがサーブレットのマッピングに使用されますか。サーブレットマッピングサーブレット登録サーブレットエントリサーブレットアタッチメント0Javaデータ型intの長さはどれくらいですか。 32ビット16ビット64ビットランタイム固有0Javaデータ型ブール値のデフォルト値は何ですか。真偽101
新しい試験を開始するときのタイマーの設定
ユーザーが新しい試験を開始すると、ユーザーのセッションでの質問の総数とクイズの期間が属性として設定されます。
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）
カウントダウン時間
1秒ごとにタイマーをデクリメントする必要があります。これを行うには、試験ページが読み込まれたときに最初に呼び出されるJavascript関数を作成し、次にカウントダウン時間まで1秒ごとにその関数を再帰的に呼び出します。
カウントダウン時間へのJavascript関数
var tim var min = '$ {sessionScope.min}' var sec = '$ {sessionScope.sec}' var f = new Date（）function customSubmit（someValue）{document.questionForm.minute.value = mindocument.questionForm。 second.value = sec document.questionForm.submit（）} function ExamTimer（）{if（parseInt（sec）> 0）{document.getElementById（ 'showtime'）。innerHTML = '残り時間：' + min + '分、' +秒+ '秒'秒= parseInt（sec）-1 tim = setTimeout（ 'examTimer（）'、1000）} else {if（parseInt（min）== 0 && parseInt（sec）== 0）{document.getElementById （ 'showtime'）。innerHTML = '残り時間：' + min + '分、' +秒+ '秒' alert（ 'Time Up'）document.questionForm.minute.value = 0 document.questionForm.second.value = 0 document .questionForm.submit（）} if（parseInt（sec）== 0）{document.getElementById（ 'showtime'）。innerHTML = '残り時間：' + min + '分、' +秒+ '秒' min = parseInt（min ）-1秒= 59 tim = setTimeout（ 'examTimer（）'、1000）}}}Javascript関数を呼び出す方法
ここで、そのJavascript関数を呼び出すために、bodyタグのonload属性を使用します。
試験コントローラーへのクイズ時間の提出
これまで、クイズの質問フォームをExam Controllerに直接送信していましたが、Exam Controllerが次の質問を表示するときに正しい残り時間も表示するように、タイマーパラメータ（分と秒）も送信する必要があります。これを実現するために、Javascriptを使用してフォームを手動で送信し、minパラメーターとsecパラメーターをExamControllerに送信しました。
Javascriptを使用してフォームを送信する
ユーザーが[次へ]、[前へ]、または[完了]ボタンをクリックすると、customSubmit（）Javascript関数が呼び出されることに注意してください。
$ {choice}
0} '>タイムアップの処理
クイズの期間が終了したとき、つまり分と秒の両方がゼロになったとき。「タイムアップ」という警告ボックスを表示し、分と秒の値をゼロに設定してフォームを送信します。
if（parseInt（min）== 0 && parseInt（sec）== 0）{document.getElementById（ 'showtime'）。innerHTML = '残り時間：' + min + '分、' +秒+ '秒' alert（ '時間Up '）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 = Exam.calculateResult（exam）request.setAttribute（' result '、result）request .getSession（）。setAttribute（ 'currentExam'、null）request.getRequestDispatcher（ '/ WEB-INF / jsps / result.jsp'）。forward（request、response）}そのため、終了ボタンを直接クリックするか、試験の制限時間が過ぎたとき（分と秒の両方がゼロになる）に試験を終了できます。
この投稿は以上です。次の投稿では、クイズアプリケーションをさらに拡張し、新しい機能を追加して、ユーザーが自分の回答を確認し、間違った質問と正解を確認できるようにします。
いつものように、コードをダウンロードして、好きなように変更できます。これがコードを理解するための最良の方法です。ご質問やご要望がございましたら、以下にコメントしてください。
ダウンロードボタンをクリックして、コードをダウンロードします。
質問がありますか？コメント欄にご記入ください。折り返しご連絡いたします。
関連記事：