回答編集履歴

追記

2019/09/08 11:29

投稿

kyoya0819

スコア10429

test CHANGED Viewed

@@ -37,3 +37,397 @@
 window.setTimeout(function(){document.getElementById("choices").style.display ="none";},2000);
 ```
+### 追記
+質問内容からずれますがこんなのはどうでしょうか？
+```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>
+    <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!";
+}
+#result > a {
+  background: #3498db;
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  color: #fff;
+  box-shadow: 0 4px 0 #2880b9;
+}
+#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 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');
+    }
+  }
+  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);
+    });
+  }
+  setQuiz();
+  window.setTimeout(function(){currentNum++;setQuiz();window.setTimeout(function(){currentNum++;setQuiz();window.setTimeout(function(){scoreLabel.textContent=`Score: ${score} / ${quizSet.length}`;result.classList.add('show');},5000);},5000);},5000);
+}
+```
+[サンプル](https://s.codepen.io/asuchi0819/debug/VwZQbMV/XBkGRqgpjLZA)

追記

2019/09/08 11:29

投稿

kyoya0819

スコア10429

test CHANGED Viewed

@@ -27,3 +27,13 @@
 window.setTimeout("newi()", 10000);
 ```
+「関数の定義ができないならしなければいいじゃない」（某漫画をオマージュ）
+```JS
+window.setTimeout(function(){document.getElementById("choices").style.display ="none";},2000);
+```

失敬

2019/09/08 08:30

投稿

kyoya0819

スコア10429

test CHANGED Viewed

@@ -24,6 +24,6 @@
-setTimeout("newi()", 10000);
+window.setTimeout("newi()", 10000);
 ```

こんなとこか？

2019/09/08 08:15

投稿

kyoya0819

スコア10429

test CHANGED Viewed

@@ -3,3 +3,27 @@
 一定時間後JavaScriptで要素を非表示にしたりして操作できなくする。（本格的なものを作りたいなら不十分）
+```HTML
+<ul id="choices"></ul>
+```
+を非表示にしたいなら
+```JavaScript
+function newi(){
+  document.getElementById("choices").style.display ="none";
+}
+setTimeout("newi()", 10000);
+```

追記

2019/09/08 07:46

投稿

kyoya0819

スコア10429

test CHANGED Viewed

@@ -2,4 +2,4 @@
-JavaScriptで要素を非表示にしたりして操作できなくする。（本格的なものを作りたいなら不十分）
+一定時間後JavaScriptで要素を非表示にしたりして操作できなくする。（本格的なものを作りたいなら不十分）