質問編集履歴

修正

2020/07/01 05:34

投稿

begine

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -182,7 +182,7 @@
-ブロックスコープ内で以下のように記述したら解決できました。
+ブロック内で以下のように記述したら解決できました。

修正

2020/07/01 05:34

投稿

begine

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -72,13 +72,13 @@
-  function countDown() {
+   function countDown() {
-    timerId = setTimeout (function() {
+      timerId = setTimeout (function() {
       timeLeft = timeToCountDown - (Date.now() - startTime);
@@ -92,7 +92,7 @@
         updateTimer(timeLeft);
         btn.classList.remove('disabled');
@@ -130,212 +130,94 @@
-    sbtn.addEventListener('click', function() {
+  btn.addEventListener('click', () => {
+    if (btn.classList.contains('disabled')) {
+      return;
+    }
+    btn.classList.add('disabled');
+    if (currentNum === quizSet.length - 1) {
+      scoreLabel.innerHTML = `${quizSet.length} <br>
-    startTime = Date.now();
+      ${score}<br>
+      ${accuracy.toFixed(2)}%`;        // 仮
+      result.classList.remove('hidden');
+    } else {
+      currentNum++;
-    countDown();
+      setQuiz();
+    }
   });
+}
+```
+### 試したこと
+エラー文を検索してコード間違いを探したのですが、解決することができません。
-  function shuffle(arr) {
+### 補足情報（FW/ツールのバージョンなど）
+ブロックスコープ内で以下のように記述したら解決できました。
+```javascript
+ showResult();             // 仮
-    for (let i = arr.length - 1; i > 0; i--) {
+    function showResult(){    // 仮
+      const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
+    if (currentNum === quizSet.length - 1) {
+      scoreLabel.innerHTML = `${quizSet.length}  <br>
+      ${score} <br>
+      ${accuracy.toFixed(2)}%`;            //仮
-      const j = Math.floor(Math.random() * (i + 1));
+      result.classList.remove('hidden');
+    } else {
-      [arr[j], arr[i]] = [arr[i], arr[j]];
+      currentNum++;
+      setQuiz();
     }
-    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 = '結果発表';
-    }
-  }
-  setQuiz();
-  btn.addEventListener('click', () => {
-    if (btn.classList.contains('disabled')) {
-      return;
-    }
-    btn.classList.add('disabled');
-    if (currentNum === quizSet.length - 1) {
-      scoreLabel.innerHTML = `${quizSet.length} <br>
-      ${score}<br>
-      ${accuracy.toFixed(2)}%`;        // 仮
-      result.classList.remove('hidden');
-    } else {
-      currentNum++;
-      setQuiz();
-    }
-  });
 }
-```
+```
-### 試したこと
-エラー文を検索してコード間違いを探したのですが、解決することができません。
-### 補足情報（FW/ツールのバージョンなど）
-以下のように記述したら解決することができました。
-```javascript
- showResult();             // 仮
-    function showResult(){    // 仮
-      const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
-    if (currentNum === quizSet.length - 1) {
-      scoreLabel.innerHTML = `${quizSet.length}  <br>
-      ${score} <br>
-      ${accuracy.toFixed(2)}%`;            //仮
-      result.classList.remove('hidden');
-    } else {
-      currentNum++;
-      setQuiz();
-    }
-  }
- });
-}
-```

修正

2020/07/01 05:31

投稿

begine

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -32,131 +32,25 @@
 ```html
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <meta charset="utf-8">
-    <title>Quiz</title>
-    <link rel="stylesheet" href="css/styles.css">
-  </head>
-  <body>
-    <section class="container2">          <!-- スタート画面-->
-      <p>ボタンクリックで時間制限のあるクイズが始まります。</p>
-      <div class="sbtn_move">
+    <section class="container3">
-      <button id="sbtn" type="button" onclick="location.href='quiz.html'">START</button>
+    <div id="timer">00:00.00</div>             <!--カウントダウンタイマーを表示-->
-      </div>
+    <div hidden id="correct"></div>        <!-- 仮 -->
+    <div  hidden id="wrong"></div>         <!-- 仮 -->
     </section>
-    <section hidden>
-      <div></div>
-    </section>
-    <div hidden id="question"></div>    <!--要素を取得させるだけのため、非表示-->
-    <div hidden id="choices"></div>
-    <div hidden id="setQuiz"></div>
-    <div hidden id="timer"></div>
-    <div hidden id="btn"></div>         <!--要素を取得させるだけのため、非表示-->
-    <script src="js/main.js"></script>
-  </body>
-</html>
-```
-```html
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="utf-8">
-  <title>Quiz</title>
-  <link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
-  <section class="container">          <!-- クイズ画面-->
-    <p id="question"></p>              <!--問題文,jsで扱いやすいようにidを使う。-->
-    <ul id="choices">                  <!--選択肢-->
-    </ul>
-    <div id="btn" class="disabled">Next</div>   <!--次の問題に進むボタン,押せない状態のボタン-->
-    <section class="container3">
-    <div id="timer">00:00.00</div>             <!--カウントダウンタイマーを表示-->
-    <div hidden id="correct"></div>        <!-- 仮 -->
-    <div  hidden id="wrong"></div>         <!-- 仮 -->
-    </section>
-    <section id="result" class="hidden">        <!--結果画面,最初はクラスで画面外へ隠す-->
-      <p></p>
-      <a href="index.html">Replay?</a>          <!--ページ再読み込みでゲームを最初から始める-->
-    </section>
-  </section>
-  <button hidden id="sbtn"></button>          <!--要素を取得させるだけのため、このボタンは非表示-->
-  <script src="js/main.js"></script>
-</body>
-</html>
@@ -168,25 +62,9 @@
-'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');
-  const sbtn = document.getElementById('sbtn');
   const correct = document.getElementById('correct');   // 仮
@@ -194,269 +72,259 @@
-  let startTime;                                   //STARTボタンを押したときの時刻(宣言)
+  function countDown() {
-  let timeLeft;                                    //残り時間
+    timerId = setTimeout (function() {
-  const timeToCountDown = 5 * 1000;
+      timeLeft = timeToCountDown - (Date.now() - startTime);
-  let timerId;                                    //clearTimeoutの引数に渡す
+      if(timeLeft < 0){
-  function updateTimer(t) {
+        clearTimeout(timerId);
+        timeLeft = 0;
-    const d = new Date(t);
+        updateTimer(timeLeft);
-    let m = d.getMinutes();
-    let s = d.getSeconds();
-    let ms = d.getMilliseconds();
-    m = ('0' + m).slice(-2);
-    s = ('0' + s).slice(-2);
+        btn.classList.remove('disabled');
-    ms = ('00' + ms).slice(-3);
-    timer.textContent = m + ':' + s + '.' + ms;
+        btn.textContent = '結果発表';
+        currentNum = quizSet.length - 1;
+        isAnswered = true;
+        return;
-  }
+      }
+      updateTimer(timeLeft);
+      countDown();
+      showResult();          // 仮
+    }, 10);
+  }
+   function showResult(){    // 仮
+    const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
+   }
-  document.addEventListener('DOMContentLoaded', function() {
+    sbtn.addEventListener('click', function() {
-    startTime = Date.now();
+    startTime = Date.now();
-    countDown();
+    countDown();
   });
-  function countDown() {
-    timerId = setTimeout (function() {
-      timeLeft = timeToCountDown - (Date.now() - startTime);
-      if(timeLeft < 0){
-        clearTimeout(timerId);
-        timeLeft = 0;
-        updateTimer(timeLeft);
-        btn.classList.remove('disabled');
-        btn.textContent = '結果発表';
-        currentNum = quizSet.length - 1;
-        isAnswered = true;
-        return;
-      }
-      updateTimer(timeLeft);
-      countDown();
-      showResult();          // 仮
-    }, 10);
-  }
-   function showResult(){    // 仮
-    const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
-   }
-    sbtn.addEventListener('click', function() {
-    startTime = Date.now();
-    countDown();
+  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 = '結果発表';
+    }
+  }
+  setQuiz();
+  btn.addEventListener('click', () => {
+    if (btn.classList.contains('disabled')) {
+      return;
+    }
+    btn.classList.add('disabled');
+    if (currentNum === quizSet.length - 1) {
+      scoreLabel.innerHTML = `${quizSet.length} <br>
+      ${score}<br>
+      ${accuracy.toFixed(2)}%`;        // 仮
+      result.classList.remove('hidden');
+    } else {
+      currentNum++;
+      setQuiz();
+    }
   });
-  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 = '結果発表';
-    }
-  }
-  setQuiz();
-  btn.addEventListener('click', () => {
-    if (btn.classList.contains('disabled')) {
-      return;
-    }
-    btn.classList.add('disabled');
-    if (currentNum === quizSet.length - 1) {
-      scoreLabel.innerHTML = `${quizSet.length} <br>
-      ${score}<br>
-      ${accuracy.toFixed(2)}%`;        // 仮
+}
+```
+### 試したこと
+エラー文を検索してコード間違いを探したのですが、解決することができません。
+### 補足情報（FW/ツールのバージョンなど）
+以下のように記述したら解決することができました。
+```javascript
+ showResult();             // 仮
+    function showResult(){    // 仮
+      const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
+    if (currentNum === quizSet.length - 1) {
+      scoreLabel.innerHTML = `${quizSet.length}  <br>
+      ${score} <br>
+      ${accuracy.toFixed(2)}%`;            //仮
       result.classList.remove('hidden');
-    } else {
+    } else {
       currentNum++;
@@ -464,24 +332,10 @@
     }
+  }
-  });
+ });
 }
-```
+```
-### 試したこと
-エラー文を検索してコード間違いを探したのですが、解決することができません。
-### 補足情報（FW/ツールのバージョンなど）
-ここにより詳細な情報を記載してください。