前提・実現したいこと
HTMLとJavaScriptを使って2択クイズを作成しているのですが、問題1問ごとに制限時間(ここでは3秒)を設けてその設定時間が経過すると自動で次の問題へ進むような仕様にしたいと考えています。しかし、3秒ごとで自動でボタンを押したことにしようとsetIntervalを定義したものの、ユーザが回答を選択して次の問題へ進んでもカウントがclearIntervalを使用してもリセットされないことがわかりました。これだと、全ての問題に対して3秒の回答時間が確保できないので、ユーザがボタンを選択した場合はsetIntervalをリセットしたいと考えています。どのようにclearIntervalを書けばいいか教えていただきたいです。
発生している問題・エラーメッセージ
ユーザが回答を選択しようがしまいが必ず3秒ごとに不正解の処理がされてしまう。
エラーメッセージ
該当のソースコード
Javascript
1// 問題 2var qa = [ 3 ['私は毎晩自分の部屋でラジオを聞きます。', 2], 4 ['私はその時二十歳でした。', 1], 5 ['あれは京都の写真ですか。', 1], 6 ['多くの人が日曜日ごとに教会へ行きます。', 2], 7 ['私は友達と放課後公園でサッカーをします。', 2], 8 ['父は毎日朝食の前に新聞を読みます。', 2], 9 ['メアリーとナンシーは仲良しです。', 1], 10 ['その質問は私にとっては難しかった。', 1], 11 ['両親は先週日本にいませんでした。', 1], 12 ['私はボブと毎日この公園を走ります。', 2], 13 ['ジェーンの姉は英語の先生ですか。', 1], 14 ['兄と私は毎朝自転車で学校へ行きます。', 2], 15 ['私は毎日午前7時に起きます。', 2], 16 ['あなたは先週金曜日に職場にいましたか。', 1], 17 ['私はサッカーが好きです。', 2], 18 ['ボブのおじいさんは昔、野球の名選手だった。', 1], 19 ['弟は自分の部屋で毎日テレビで野球の試合を見ます。', 2], 20 ['その若い夫婦はクリスマスイブの夜、とても幸福でした。', 1], 21 ['ケンと私は今日公園でアヤとミドリとテニスをします。', 2], 22 ['デービッドは去年の7月ニューヨークにいましたか。', 1], 23]; 24// 初期化 25var count = 0; 26var correctNum = 0; 27 28window.onload = function() { 29 // 最初の問題を表示 30 var question = document.getElementById('question'); 31 question.innerHTML = (count + 1) + '問目:' + qa[count][0]; 32 disp(); // タイマー表示 33 step(); // 制限時間 34}; 35 36 37// クリック時の答え判定 38function judge(btnNo) { 39 if (qa[count][1] == btnNo) { // 正解の場合 40 correctNum++; 41 var answer = document.getElementById('wrapper'); 42 answer.style.backgroundColor = '#58ACFA'; 43 document.getElementById('Good').play(); 44} else { // 不正解の場合 45 var answer = document.getElementById('wrapper'); 46 answer.style.backgroundColor = '#FA5858'; 47 document.getElementById('Bad').play(); 48} 49 50 // 全問終了後 51 if (count == 19) { 52 if ( count+1 == correctNum ) { //全問正解の場合 53 document.getElementById('Allclear').play(); 54 } 55 if ( min == 0 ) { // クリア時間が1分未満の場合 56 alert('正解数は' + correctNum + '問です!\nクリア時間は' + sec + '秒です'); 57 } else { 58 alert('正解数は' + correctNum + '問です!\nクリア時間は' + min + '分' + sec + '秒です'); 59 } 60 } 61 62 // 次の問題表示 63 count++; 64 var question = document.getElementById('question'); 65 question.innerHTML = (count + 1) + '問目:' + qa[count][0]; 66} 67 68 // ここで1問ごとに制限時間3秒を設けたいです 69function step() { 70 var Handler = setInterval('judge(3)', 3000); 71 if ( document.getElementById('buttons').class == 'button') { clearInterval(Handler); } // この条件文がうまく機能しない 72} 73 74var start = new Date(); 75 76// 初期化 77var hour = 0; 78var min = 0; 79var sec = 0; 80var now = 0; 81var datet = 0; 82var hour1, min1, sec1; 83 84function disp(){ 85 86 now = new Date(); 87 88 datet = parseInt((now.getTime() - start.getTime()) / 1000); 89 90 hour = parseInt(datet / 3600); 91 min = parseInt((datet / 60) % 60); 92 sec = datet % 60; 93 94 // 数値が1桁の場合、頭に0を付けて2桁で表示する指定 95 if(hour < 10) { hour = "0" + hour; } 96 if(min < 10) { min = "0" + min; } 97 if(sec < 10) { sec = "0" + sec; } 98 99 // フォーマットを指定(不要な行を削除する) 100 var timer1 = hour + ':' + min + ':' + sec; // パターン1 101 102 // テキストフィールドにデータを渡す処理(不要な行を削除する) 103 document.form1.field1.value = timer1; // パターン1 104 105 setTimeout("disp()", 1000); 106} 107
試したこと
関数step()内の条件分岐でボタンを押された場合はsetIntervalをキャンセルさせるようclearIntervalを記述したが、機能しない。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/08 21:24
2018/07/08 21:32
2018/07/08 22:16
2018/07/09 06:41