編集履歴

質問編集履歴

文章の変更

2019/09/08 08:05

投稿

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~制限時間をつける方法を知り~~たい
1	+ 定義されていないというエラーが出ました。

test CHANGED Viewed

@@ -1,473 +1,479 @@
 ### 前提・実現したいこと
-今、クイズアプリを作り終わったのですが、オリジナルとして制限時間をつけたいを思います。
+今、クイズアプリを作り終わり、オリジナルとして制限時間をつけている途中なのですが、下の回答者のようにコードを書いてみたらエラーが出ました。
 ### 発生している問題・エラーメッセージ
+![](7b9f62509db67880dc04657fccde37bb.png)
+### 該当のソースコード
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8">
+  <title>Quiz</title>
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+  <div class="container">
+    <p id="question"></p>
+    <ul id="choices"></ul>
+    <div id="btn" class="disabled">Next</div>
+    <section id="result">
+      <p></p>
+      <a href="">Replay?</a>
+    </section>
+  </div>
+  <script src="js/main.js"></script>
+</body>
+</html>
 ```
-特にないです
+```css
+body {
+  background: #efdec1;
+  font-size: 14px;
+  font-family: Verdana, sans-serif;
+}
+.container {
+  width: 400px;
+  margin: 8px auto;
+  background: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  position: relative;
+}
+#question {
+  margin-bottom: 16px;
+  font-weight: bold;
+}
+#choices {
+  list-style: none;
+  padding: 0;
+  margin-bottom: 16px;
+}
+#choices > li {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+#choices > li:hover {
+  background: #f8f8f8;
+}
+#choices > li.correct {
+  background: #d4edda;
+  border-color: #c3e6cb;
+  color: #155724;
+  font-weight: bold;
+}
+#choices > li.correct::after {
+  content: " ... correct!";
+}
+#choices > li.wrong {
+  background: #f8d8da;
+  border-color: #f5c6cb;
+  color: #721c24;
+  font-weight: bold;
+}
+#choices > li.wrong::after {
+  content: " ... wrong!";
+}
+#btn, #result > a {
+  background: #3498db;
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  color: #fff;
+  box-shadow: 0 4px 0 #2880b9;
+}
+#btn.disabled {
+  background: #ccc;
+  box-shadow: 0 4px 0 #bbb;
+  opacity: 0.7;
+}
+#result {
+  position: absolute;
+  width: 300px;
+  background: #fff;
+  padding: 30px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  /* top: 50px; */
+  top: -500px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  border-radius: 3px;
+  text-align: center;
+  transition: 0.4s ease-out;
+}
+#result.show {
+  top: 50px;
+}
+#result > p {
+  font-size: 24px;
+}
+#result > a {
+  display: block;
+  text-decoration: none;
+}
 ```
-### 該当のソースコード
-```html
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="utf-8">
-  <title>Quiz</title>
-  <link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
-  <div class="container">
-    <p id="question"></p>
-    <ul id="choices"></ul>
-    <div id="btn" class="disabled">Next</div>
-    <section id="result">
-      <p></p>
-      <a href="">Replay?</a>
-    </section>
-  </div>
-  <script src="js/main.js"></script>
-</body>
-</html>
+```js
+'use strict';
+{
+  const question = document.getElementById('question');
+  const btn = document.getElementById('btn');
+  const choices = document.getElementById('choices');
+  const result = document.getElementById('result');
+  const scoreLabel = document.querySelector('#result > p');
+  const quizSet = [
+    // {q: 'What is A?', c: ['A0', 'A1', 'A2']},
+    // {q: 'What is B?', c: ['B0', 'B1', 'B2']},
+    // {q: 'What is C?', c: ['C0', 'C1', 'C2']},
+    {q: '世界で一番大きな湖は？', c: ['カスピ海', 'カリブ海', '琵琶湖']},
+    {q: '2の8乗は？', c: ['256', '64', '1024']},
+    {q: 'いま、何問目？', c: ['3問目', '4問目', '5問目']},
+  ];
+  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);
+      });
+      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) {
+      // console.log(`Score: ${score} / ${quizSet.length}`);
+      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
+      result.classList.add('show');
+    } else {
+      currentNum++;
+      setQuiz();
+    }
+  });
+  function newi(){
+    document.getElementById("choices").style.display ="none";
+  }
+  setTimeout("newi()", 10000);
+}
 ```
-```css
-body {
-  background: #efdec1;
-  font-size: 14px;
-  font-family: Verdana, sans-serif;
-}
-.container {
-  width: 400px;
-  margin: 8px auto;
-  background: #fff;
-  border-radius: 4px;
-  padding: 16px;
-  position: relative;
-}
-#question {
-  margin-bottom: 16px;
-  font-weight: bold;
-}
-#choices {
-  list-style: none;
-  padding: 0;
-  margin-bottom: 16px;
-}
-#choices > li {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 10px;
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-#choices > li:hover {
-  background: #f8f8f8;
-}
-#choices > li.correct {
-  background: #d4edda;
-  border-color: #c3e6cb;
-  color: #155724;
-  font-weight: bold;
-}
-#choices > li.correct::after {
-  content: " ... correct!";
-}
-#choices > li.wrong {
-  background: #f8d8da;
-  border-color: #f5c6cb;
-  color: #721c24;
-  font-weight: bold;
-}
-#choices > li.wrong::after {
-  content: " ... wrong!";
-}
-#btn, #result > a {
-  background: #3498db;
-  padding: 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  text-align: center;
-  color: #fff;
-  box-shadow: 0 4px 0 #2880b9;
-}
-#btn.disabled {
-  background: #ccc;
-  box-shadow: 0 4px 0 #bbb;
-  opacity: 0.7;
-}
-#result {
-  position: absolute;
-  width: 300px;
-  background: #fff;
-  padding: 30px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  /* top: 50px; */
-  top: -500px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  border-radius: 3px;
-  text-align: center;
-  transition: 0.4s ease-out;
-}
-#result.show {
-  top: 50px;
-}
-#result > p {
-  font-size: 24px;
-}
-#result > a {
-  display: block;
-  text-decoration: none;
-}
-```
-```js
-'use strict';
-{
-  const question = document.getElementById('question');
-  const btn = document.getElementById('btn');
-  const choices = document.getElementById('choices');
-  const result = document.getElementById('result');
-  const scoreLabel = document.querySelector('#result > p');
-  const quizSet = [
-    // {q: 'What is A?', c: ['A0', 'A1', 'A2']},
-    // {q: 'What is B?', c: ['B0', 'B1', 'B2']},
-    // {q: 'What is C?', c: ['C0', 'C1', 'C2']},
-    {q: '世界で一番大きな湖は？', c: ['カスピ海', 'カリブ海', '琵琶湖']},
-    {q: '2の8乗は？', c: ['256', '64', '1024']},
-    {q: 'いま、何問目？', c: ['3問目', '4問目', '5問目']},
-  ];
-  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);
-      });
-      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) {
-      // console.log(`Score: ${score} / ${quizSet.length}`);
-      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
-      result.classList.add('show');
-    } else {
-      currentNum++;
-      setQuiz();
-    }
-  });
-}
-```
 ### 試したこと
 色々関連するサイトを調べたりしました。
@@ -489,3 +495,7 @@
 ](https://dotinstall.com/lessons/quiz_js_v2)
 上のサイトで作りました。
+何かわかる方ご教授お願いします。

文章の変更

2019/09/08 08:04

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -479,3 +479,13 @@
 macbook air 10.14.6
 atomのバージョン　1.40.1x64(?)
+### サイト
+[JavaScriptで三択クイズを作ろう
+](https://dotinstall.com/lessons/quiz_js_v2)
+上のサイトで作りました。