javascriptでタイマーを使ってクイズ回答時間の計測
ページ表示時間の計測
今回はeラーニングの中身の話です。
資格試験等をクイズ形式で攻略できたらいいなと思って、
1ブラウザに クイズを選択式で表示
2時間の計測を開始
3選択後 正誤の表示を行い、回答に要した時間を表示する。
実際に下記サイトにて使用中
行政書士試験過去問クイズ
https://ukaras.com/kakomon/quiz.html?year=18&num=3
時間計測については、下記コードで簡単に実装できます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> /*タイマー更新スクリプト */ var PassSec; // 秒数カウント用変数 startShowing(); function startShowing() { PassSec = 0; // カウンタのリセット PassageID = setInterval('showPassage()',1000); // タイマーをセット(1000ms間隔) } // 繰り返し処理の中身 function showPassage() { PassSec++; // カウントアップ var msg = PassSec + "秒"; // 表示文作成 document.getElementById("PassageArea").innerHTML = msg; // 表示更新 } </script> |
解説＊＊
javascript内で変数のデータをカウントアップしていくコードです。
最終的に
|
1 |
document.getElementById("PassageArea").innerHTML = msg; // 表示更新 |
で、ページ内の PassageArea id内のテキストを書き換えていく形になります。
ですので、ページ内に下記を入れます。
<p id=”PassageArea”>1</p>
1は初期値になります。
なお、 出題ページを表示してからのカウントアップになりますので、
回答ボタンを押して、リンク先にて
リザルトを表示する場合は、 出題ページからリンクをクリックした場合に回答時間のクエリを埋め込む形で渡します。
リンク方法については、次回紹介します。
追記→値の受け渡しについて
ではまた！
最近のコメント