【javascript】カウントが0になったときの条件分岐の書き方がわからない

Question

前提・実現したいこと

時間制限ありのクイズ問題を作成しているのですが、知識不足のため思ったように書くことができないので助けて欲しいです。

【大まかな流れ】

・ボタンクリックでクイズ画面に移動。
↓
・画面の切り替わり後に、タイマーが起動してクイズに答えることができる。
↓
・リザルトウィンドウを表示。

【教えて欲しい所】

クイズの問題に全て答えるか、
カウントダウンタイマーが０になるか、
のどちらかでリザルト画面を表示させたいのですが、書き方がわかりません。

main.js44行目のif(timeLeft < 0){}の中に書くのかな？と思い試していたのですが、解決できませんでした。

よろしくお願いします。

発生している問題

クイズの問題に全て答えるか、カウントダウンタイマーが0になるか、のどちらかでリザルト画面を表示させたいのですが、書き方がわからない

該当のソースコード

{
  const btn = document.getElementById('btn');
  const timer = document.getElementById('timer');    //1
  const sbtn = document.getElementById('sbtn');      //2 

  let startTime;                                   //STARTボタンを押したときの時刻(宣言)
  let timeLeft;                                    //残り時間
  const timeToCountDown = 3 * 1000;                //1000 = 1秒
  let timerId;                                    //clearTimeoutの引数に渡す


  function countDown() {                              // countDownの宣言
    timerId = setTimeout (function() {
      //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ)

      // const elapsedTime = Date.now() - startTime;     経過時間 = 現在時刻 - スタートした時間
      // timeLeft = timeToCountDown - elapsedTime;       残り時間 = カウントダウン時間 - 経過時間
      timeLeft = timeToCountDown - (Date.now() - startTime);  
      //elapsedTimeは、1度しか使わないので直接代入した↑

      if(timeLeft < 0){              //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止)
        clearTimeout(timerId);
        timeLeft = 0;                //timeLeftを0にして、updateTimerで更新する
        updateTimer(timeLeft);
        return;                      //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
      }

      updateTimer(timeLeft);                                  // 呼び出し(渡すミリ秒はtimerLeft)
      countDown();                                     //countDownを再帰的に呼び出したいため、ここで呼ぶ。
    }, 10);
  }

    sbtn.addEventListener('click', function() {      //STARTボタンがクリックされたらタイマーON
    startTime = Date.now();                          // 押したときの時刻を取得
    countDown();                                     /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/
  });


  
  function setQuiz() {
    isAnswered = false;

    question.textContent = quizSet[currentNum].q;

    while (choices.firstChild) {
      choices.removeChild(choices.firstChild);
    }

    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
    shuffledChoices.forEach(choice => {
      const li = document.createElement('li');
      li.textContent = choice;
      li.addEventListener('click', () => {
        checkAnswer(li);
      });
      choices.appendChild(li);
    });

    if (currentNum === quizSet.length - 1) {
      btn.textContent = 'Show Score';
    }

  }

  setQuiz();

  btn.addEventListener('click', () => {
    if (btn.classList.contains('disabled')) {
      return;
    }
    btn.classList.add('disabled');

    if (currentNum === quizSet.length - 1) {
      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
      result.classList.remove('hidden');
    } else {
      currentNum++;
      setQuiz();
    }
  });
}

試したこと

自分なりに試して書いていたのですが、解決できませんでした。

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

記述していただいたコードで解決できました。

Answer 1

参考にどうぞ。（★が変更箇所です）

'use strict';

{
  const question = document.getElementById('question');
  const choices = document.getElementById('choices');
  const btn = document.getElementById('btn');
  const result = document.getElementById('result');
  const scoreLabel = document.querySelector('#result > p');
  const timer = document.getElementById('timer');    //1
  const sbtn = document.getElementById('sbtn');      //2 

  let startTime;                                   //STARTボタンを押したときの時刻(宣言)
  let timeLeft;                                    //残り時間
  const timeToCountDown = 3 * 1000;                //1000 = 1秒
  let timerId;                                    //clearTimeoutの引数に渡す

  /*constは初期化が必要 const X = 数値、もしくは初期化しない場合は let x; */

  function updateTimer(t) {                       //ミリ秒を渡すと、分や秒に直す。t でミリ秒を渡す。
    const d = new Date(t);                        //渡されたtで、Dateオブジェクトを作る。
    let m = d.getMinutes();                    //このDateオブジェクトから「分や秒」を取り出す。
    let s = d.getSeconds();
    let ms = d.getMilliseconds();
    m = ('0' + m).slice(-2);                  //文字列と数値を連結させると文字列になる。
    s = ('0' + s).slice(-2);                  //文字列と数値を連結させると文字列になる。
    ms = ('00' + ms).slice(-3);                  //文字列と数値を連結させると文字列になる。
    timer.textContent = m + ':' + s + '.' + ms;  //timerの中身を書き換え。
  }

  document.addEventListener('DOMContentLoaded', function() {
    startTime = Date.now();
    countDown();
  });

  function countDown() {                              // countDownの宣言
    timerId = setTimeout (function() {
      //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ)

      // const elapsedTime = Date.now() - startTime;     経過時間 = 現在時刻 - スタートした時間
      // timeLeft = timeToCountDown - elapsedTime;       残り時間 = カウントダウン時間 - 経過時間
      timeLeft = timeToCountDown - (Date.now() - startTime);  
      //elapsedTimeは、1度しか使わないので直接代入した↑

      if(timeLeft < 0){              //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止)
        clearTimeout(timerId);
        timeLeft = 0;                //timeLeftを0にして、updateTimerで更新する
        updateTimer(timeLeft);

        // ★時間切れになったら
        btn.classList.remove('disabled'); // Nextボタンのdisabledを解除する
        btn.textContent = 'Show Score';   // Nextボタンの表示は「Show Score」にする
        currentNum = quizSet.length - 1;  // 最終問題まで終わったテイにする
        isAnswered = true;                // 今表示されている問題は回答したテイにする(そうしないと時間切れなのに回答できてしまう)

        return;                      //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
      }

      updateTimer(timeLeft);                                  // 呼び出し(渡すミリ秒はtimerLeft)
      countDown();                                     //countDownを再帰的に呼び出したいため、ここで呼ぶ。
    }, 10);
  }

    sbtn.addEventListener('click', function() {      //STARTボタンがクリックされたらタイマーON
    startTime = Date.now();                          // 押したときの時刻を取得
    countDown();                                     /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/
  });


  const quizSet = shuffle([
    {q: '世界で一番大きな湖は？', c: ['カスピ海', 'カリブ海', '琵琶湖']},
    {q: '2の8乗は？', c: ['256', '64', '1024']},
    {q: '次のうち、最初にリリースされた言語は？', c: ['Python', 'JavaScript', 'HTML']},
  ]);
  let currentNum = 0;
  let isAnswered;
  let score = 0;

  function shuffle(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[j], arr[i]] = [arr[i], arr[j]];
    }
    return arr;
  }

  function checkAnswer(li) {
    if (isAnswered) {
      return;
    }
    isAnswered = true;

    if (li.textContent === quizSet[currentNum].c[0]) {
      li.classList.add('correct');
      score++;
    } else {
      li.classList.add('wrong');
    }

    btn.classList.remove('disabled');
  }

  function setQuiz() {
    isAnswered = false;

    question.textContent = quizSet[currentNum].q;

    while (choices.firstChild) {
      choices.removeChild(choices.firstChild);
    }

    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
    shuffledChoices.forEach(choice => {
      const li = document.createElement('li');
      li.textContent = choice;
      li.addEventListener('click', () => {
        checkAnswer(li);
        if (currentNum === quizSet.length - 1) clearTimeout(timerId); // ★最終問題に回答したらタイマー止める
      });
      choices.appendChild(li);
    });

    if (currentNum === quizSet.length - 1) {
      btn.textContent = 'Show Score';
    }

  }

  setQuiz();

  btn.addEventListener('click', () => {
    if (btn.classList.contains('disabled')) {
      return;
    }
    btn.classList.add('disabled');

    if (currentNum === quizSet.length - 1) {
      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
      result.classList.remove('hidden');
    } else {
      currentNum++;
      setQuiz();
    }
  });
}

Comments

[begine]

参考にさせていただきます。