質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

setIntervalの条件によるクリア方法

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 191

tory1317

score 0

 前提・実現したいこと

HTMLとJavaScriptを使って2択クイズを作成しているのですが、問題1問ごとに制限時間(ここでは3秒)を設けてその設定時間が経過すると自動で次の問題へ進むような仕様にしたいと考えています。しかし、3秒ごとで自動でボタンを押したことにしようとsetIntervalを定義したものの、ユーザが回答を選択して次の問題へ進んでもカウントがclearIntervalを使用してもリセットされないことがわかりました。これだと、全ての問題に対して3秒の回答時間が確保できないので、ユーザがボタンを選択した場合はsetIntervalをリセットしたいと考えています。どのようにclearIntervalを書けばいいか教えていただきたいです。

 発生している問題・エラーメッセージ

ユーザが回答を選択しようがしまいが必ず3秒ごとに不正解の処理がされてしまう。

エラーメッセージ

 該当のソースコード

// 問題
var qa = [
  ['私は毎晩自分の部屋でラジオを聞きます。', 2],
  ['私はその時二十歳でした。', 1],
  ['あれは京都の写真ですか。', 1],
  ['多くの人が日曜日ごとに教会へ行きます。', 2],
  ['私は友達と放課後公園でサッカーをします。', 2],
  ['父は毎日朝食の前に新聞を読みます。', 2],
  ['メアリーとナンシーは仲良しです。', 1],
  ['その質問は私にとっては難しかった。', 1],
  ['両親は先週日本にいませんでした。', 1],
  ['私はボブと毎日この公園を走ります。', 2],
  ['ジェーンの姉は英語の先生ですか。', 1],
  ['兄と私は毎朝自転車で学校へ行きます。', 2],
  ['私は毎日午前7時に起きます。', 2],
  ['あなたは先週金曜日に職場にいましたか。', 1],
  ['私はサッカーが好きです。', 2],
  ['ボブのおじいさんは昔、野球の名選手だった。', 1],
  ['弟は自分の部屋で毎日テレビで野球の試合を見ます。', 2],
  ['その若い夫婦はクリスマスイブの夜、とても幸福でした。', 1],
  ['ケンと私は今日公園でアヤとミドリとテニスをします。', 2],
  ['デービッドは去年の7月ニューヨークにいましたか。', 1],
];
// 初期化
var count = 0;
var correctNum = 0;

window.onload = function() {
  // 最初の問題を表示
  var question = document.getElementById('question');
  question.innerHTML = (count + 1) + '問目:' + qa[count][0];
  disp();  // タイマー表示
  step();  // 制限時間
};


// クリック時の答え判定
function judge(btnNo) {
  if (qa[count][1] == btnNo) {  // 正解の場合
    correctNum++;
    var answer = document.getElementById('wrapper');
    answer.style.backgroundColor = '#58ACFA';
    document.getElementById('Good').play();
} else {  // 不正解の場合
    var answer = document.getElementById('wrapper');
    answer.style.backgroundColor = '#FA5858';
    document.getElementById('Bad').play();
}

  // 全問終了後
  if (count == 19) {
      if ( count+1 == correctNum ) { //全問正解の場合
          document.getElementById('Allclear').play();
      }
      if ( min == 0 ) { // クリア時間が1分未満の場合
          alert('正解数は' + correctNum + '問です!\nクリア時間は' + sec + '秒です');
      } else {
          alert('正解数は' + correctNum + '問です!\nクリア時間は' + min + '分' + sec + '秒です');
      }
  }

  // 次の問題表示
  count++;
  var question = document.getElementById('question');
  question.innerHTML = (count + 1) + '問目:' + qa[count][0];
}

  // ここで1問ごとに制限時間3秒を設けたいです
function step() {
    var Handler = setInterval('judge(3)', 3000);
    if ( document.getElementById('buttons').class == 'button') { clearInterval(Handler); } // この条件文がうまく機能しない
}

var start = new Date();

// 初期化
var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;
var hour1, min1, sec1;

function disp(){

    now = new Date();

    datet = parseInt((now.getTime() - start.getTime()) / 1000);

    hour = parseInt(datet / 3600);
    min = parseInt((datet / 60) % 60);
    sec = datet % 60;

    // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
    if(hour < 10) { hour = "0" + hour; }
    if(min < 10) { min = "0" + min; }
    if(sec < 10) { sec = "0" + sec; }

    // フォーマットを指定(不要な行を削除する)
    var timer1 = hour + ':' + min + ':' + sec; // パターン1

    // テキストフィールドにデータを渡す処理(不要な行を削除する)
    document.form1.field1.value = timer1; // パターン1

    setTimeout("disp()", 1000);
}

 試したこと

関数step()内の条件分岐でボタンを押された場合はsetIntervalをキャンセルさせるようclearIntervalを記述したが、機能しない。

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/09 06:24

    clearIntervalは条件付きで使用しているのですが、なぜかうまく動いてくれないのでその理由を知りたいです…。

    キャンセル

  • 2018/07/09 06:32

    今書かれているstep関数の内容は、
    HandlerにsetIntervalのIDを受ける(一行目)
    if条件によりclearIntervalをコールする(二行目)
    理解してます?
    回答した時点でclearIntervalをコールしてください。

    キャンセル

  • 2018/07/09 07:16

    知識不足で申し訳ありません。私としてはif条件で回答した時点を判定させられるかと思っていました。judge関数でも書いてみたのですがダメでした…。もう少しヒントをいただけないでしょうか?

    キャンセル

  • 2018/07/09 15:41

    step関数内でvarした変数はローカル変数になるので他の関数内では使用できません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。