回答率: 85.36%

質問するログイン新規登録

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

詳細はこちら

トップ JavaScriptに関する質問

Q&A

解決済

2回答

1755閲覧

定義されていないというエラーが出ました。

退会済みユーザー

総合スコア0

0グッド

1クリップ

投稿2019/09/08 06:15

編集2019/09/08 08:05

0

1

前提・実現したいこと

今、クイズアプリを作り終わり、オリジナルとして制限時間をつけている途中なのですが、下の回答者のようにコードを書いてみたらエラーが出ました。

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

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Quiz</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <div class="container">
10    <p id="question"></p>
11    <ul id="choices"></ul>
12    <div id="btn" class="disabled">Next</div>
13
14    <section id="result">
15      <p></p>
16      <a href="">Replay?</a>
17    </section>
18  </div>
19
20  <script src="js/main.js"></script>
21</body>
22</html>
23

css
1body {
2  background: #efdec1;
3  font-size: 14px;
4  font-family: Verdana, sans-serif;
5}
6
7.container {
8  width: 400px;
9  margin: 8px auto;
10  background: #fff;
11  border-radius: 4px;
12  padding: 16px;
13  position: relative;
14}
15
16#question {
17  margin-bottom: 16px;
18  font-weight: bold;
19}
20
21#choices {
22  list-style: none;
23  padding: 0;
24  margin-bottom: 16px;
25}
26
27#choices > li {
28  border: 1px solid #ccc;
29  border-radius: 4px;
30  padding: 10px;
31  margin-bottom: 10px;
32  cursor: pointer;
33}
34
35#choices > li:hover {
36  background: #f8f8f8;
37}
38
39#choices > li.correct {
40  background: #d4edda;
41  border-color: #c3e6cb;
42  color: #155724;
43  font-weight: bold;
44}
45
46#choices > li.correct::after {
47  content: " ... correct!";
48}
49
50#choices > li.wrong {
51  background: #f8d8da;
52  border-color: #f5c6cb;
53  color: #721c24;
54  font-weight: bold;
55}
56
57#choices > li.wrong::after {
58  content: " ... wrong!";
59}
60
61#btn, #result > a {
62  background: #3498db;
63  padding: 8px;
64  border-radius: 4px;
65  cursor: pointer;
66  text-align: center;
67  color: #fff;
68  box-shadow: 0 4px 0 #2880b9;
69}
70
71#btn.disabled {
72  background: #ccc;
73  box-shadow: 0 4px 0 #bbb;
74  opacity: 0.7;
75}
76
77#result {
78  position: absolute;
79  width: 300px;
80  background: #fff;
81  padding: 30px;
82  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
83  /* top: 50px; */
84  top: -500px;
85  left: 0;
86  right: 0;
87  margin: 0 auto;
88  border-radius: 3px;
89  text-align: center;
90  transition: 0.4s ease-out;
91}
92
93#result.show {
94  top: 50px;
95}
96
97#result > p {
98  font-size: 24px;
99}
100
101#result > a {
102  display: block;
103  text-decoration: none;
104}
105

js
1'use strict';
2
3{
4  const question = document.getElementById('question');
5  const btn = document.getElementById('btn');
6  const choices = document.getElementById('choices');
7  const result = document.getElementById('result');
8  const scoreLabel = document.querySelector('#result > p');
9
10  const quizSet = [
11    // {q: 'What is A?', c: ['A0', 'A1', 'A2']},
12    // {q: 'What is B?', c: ['B0', 'B1', 'B2']},
13    // {q: 'What is C?', c: ['C0', 'C1', 'C2']},
14    {q: '世界で一番大きな湖は？', c: ['カスピ海', 'カリブ海', '琵琶湖']},
15    {q: '2の8乗は？', c: ['256', '64', '1024']},
16    {q: 'いま、何問目？', c: ['3問目', '4問目', '5問目']},
17  ];
18  let currentNum = 0;
19  let isAnswered;
20  let score = 0;
21
22  function shuffle(arr) {
23    for (let i = arr.length - 1; i > 0; i--) {
24      const j = Math.floor(Math.random() * (i + 1));
25      [arr[j], arr[i]] = [arr[i], arr[j]];
26    }
27    return arr;
28  }
29
30  function checkAnswer(li) {
31    if (isAnswered) {
32      return;
33    }
34    isAnswered = true;
35
36    if (li.textContent === quizSet[currentNum].c[0]) {
37      li.classList.add('correct');
38      score++;
39    } else {
40      li.classList.add('wrong');
41    }
42
43    btn.classList.remove('disabled');
44  }
45
46  function setQuiz() {
47    isAnswered = false;
48
49    question.textContent = quizSet[currentNum].q;
50
51    while (choices.firstChild) {
52      choices.removeChild(choices.firstChild);
53    }
54
55    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
56    shuffledChoices.forEach(choice => {
57      const li = document.createElement('li');
58      li.textContent = choice;
59      li.addEventListener('click', () => {
60        checkAnswer(li);
61      });
62      choices.appendChild(li);
63    });
64
65    if (currentNum === quizSet.length - 1) {
66      btn.textContent = 'Show Score';
67    }
68  }
69
70  setQuiz();
71
72  btn.addEventListener('click', () => {
73    if (btn.classList.contains('disabled')) {
74      return;
75    }
76    btn.classList.add('disabled');
77
78    if (currentNum === quizSet.length - 1) {
79      // console.log(`Score: ${score} / ${quizSet.length}`);
80      scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
81      result.classList.add('show');
82    } else {
83      currentNum++;
84      setQuiz();
85    }
86  });
87
88  function newi(){
89    document.getElementById("choices").style.display ="none";
90  }
91  
92  setTimeout("newi()", 10000);
93}
94

試したこと

色々関連するサイトを調べたりしました。

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

macbook air 10.14.6
atomのバージョン　1.40.1x64(?)

サイト

JavaScriptで三択クイズを作ろう

上のサイトで作りました。

何かわかる方ご教授お願いします。

2019/09/08 06:35

質問はなにでしょうか「制限時間機能を作ってください」という作業依頼でしょうか

退会済みユーザー

2019/09/08 06:36

いいえ、違います、わかりにくくてすみません。制限時間をつける方法を知りたいのです。どうすれば制限時間をつけることができるのか。

2019/09/08 09:04

内容が変わり過ぎてて回答者を振り回してる形になってますけど（アドバイスする気が殺がれます）

行動規範の内容に同意します

回答2件

0

ベストアンサー

制限時間を付ける方法

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

HTML
1<ul id="choices"></ul>

を非表示にしたいなら

JavaScript
1function newi(){
2  document.getElementById("choices").style.display ="none";
3}
4
5window.setTimeout("newi()", 10000);

「関数の定義ができないならしなければいいじゃない」（某漫画をオマージュ）

JS
1window.setTimeout(function(){document.getElementById("choices").style.display ="none";},2000);

追記

質問内容からずれますがこんなのはどうでしょうか？

HTML
1<html lang="ja">
2<head>
3
4  <meta charset="utf-8">
5  <title>Quiz</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <div class="container">
10    <p id="question"></p>
11    <ul id="choices"></ul>
12
13    <section id="result">
14      <p></p>
15      <a href="">Replay?</a>
16    </section>
17  </div>
18
19  <script src="js/main.js"></script>
20</body>
21</html>

CSS
1body {
2  background: #efdec1;
3  font-size: 14px;
4  font-family: Verdana, sans-serif;
5}
6
7.container {
8  width: 400px;
9  margin: 8px auto;
10  background: #fff;
11  border-radius: 4px;
12  padding: 16px;
13  position: relative;
14}
15
16#question {
17  margin-bottom: 16px;
18  font-weight: bold;
19}
20
21#choices {
22  list-style: none;
23  padding: 0;
24  margin-bottom: 16px;
25}
26
27#choices > li {
28  border: 1px solid #ccc;
29  border-radius: 4px;
30  padding: 10px;
31  margin-bottom: 10px;
32  cursor: pointer;
33}
34
35#choices > li:hover {
36  background: #f8f8f8;
37}
38
39#choices > li.correct {
40  background: #d4edda;
41  border-color: #c3e6cb;
42  color: #155724;
43  font-weight: bold;
44}
45
46#choices > li.correct::after {
47  content: " ... correct!";
48}
49
50#choices > li.wrong {
51  background: #f8d8da;
52  border-color: #f5c6cb;
53  color: #721c24;
54  font-weight: bold;
55}
56
57#choices > li.wrong::after {
58  content: " ... wrong!";
59}
60
61#result > a {
62  background: #3498db;
63  padding: 8px;
64  border-radius: 4px;
65  cursor: pointer;
66  text-align: center;
67  color: #fff;
68  box-shadow: 0 4px 0 #2880b9;
69}
70
71#result {
72  position: absolute;
73  width: 300px;
74  background: #fff;
75  padding: 30px;
76  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
77  /* top: 50px; */
78  top: -500px;
79  left: 0;
80  right: 0;
81  margin: 0 auto;
82  border-radius: 3px;
83  text-align: center;
84  transition: 0.4s ease-out;
85}
86
87#result.show {
88  top: 50px;
89}
90
91#result > p {
92  font-size: 24px;
93}
94
95#result > a {
96  display: block;
97  text-decoration: none;
98}

JS
1'use strict';
2
3{
4  const question = document.getElementById('question');
5  const choices = document.getElementById('choices');
6  const result = document.getElementById('result');
7  const scoreLabel = document.querySelector('#result > p');
8
9  const quizSet = [
10    // {q: 'What is A?', c: ['A0', 'A1', 'A2']},
11    // {q: 'What is B?', c: ['B0', 'B1', 'B2']},
12    // {q: 'What is C?', c: ['C0', 'C1', 'C2']},
13    {q: '世界で一番大きな湖は？', c: ['カスピ海', 'カリブ海', '琵琶湖']},
14    {q: '2の8乗は？', c: ['256', '64', '1024']},
15    {q: 'いま、何問目？', c: ['3問目', '4問目', '5問目']},
16  ];
17  let currentNum = 0;
18  let isAnswered;
19  let score = 0;
20
21  function shuffle(arr) {
22    for (let i = arr.length - 1; i > 0; i--) {
23      const j = Math.floor(Math.random() * (i + 1));
24      [arr[j], arr[i]] = [arr[i], arr[j]];
25    }
26    return arr;
27  }
28
29  function checkAnswer(li) {
30    if (isAnswered) {
31      return;
32    }
33    isAnswered = true;
34
35    if (li.textContent === quizSet[currentNum].c[0]) {
36      li.classList.add('correct');
37      score++;
38    } else {
39      li.classList.add('wrong');
40    }
41    
42  }
43
44  function setQuiz() {
45    isAnswered = false;
46
47    question.textContent = quizSet[currentNum].q;
48
49    while (choices.firstChild) {
50      choices.removeChild(choices.firstChild);
51    }
52
53    const shuffledChoices = shuffle([...quizSet[currentNum].c]);
54    shuffledChoices.forEach(choice => {
55      const li = document.createElement('li');
56      li.textContent = choice;
57      li.addEventListener('click', () => {
58        checkAnswer(li);
59      });
60      choices.appendChild(li);
61    });
62  }
63
64  setQuiz();
65  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);
66}

投稿2019/09/08 06:50

編集2019/09/08 11:29

総合スコア10429

退会済みユーザー

2019/09/08 06:53

あ・・すみません。私の質問だとそういう答えになってしまいますね。今から質問を編集します。(その制限時間を設定するコードを知りたいのです)

退会済みユーザー

2019/09/08 06:55

すみません。そんな質問にするとただの丸投げになるのでこれで質問は終了しますね。すみませんでした。でも方法はわかりました！ありがとうございましたm(_ _)m

2019/09/08 07:47

一応一定時間後に選択肢を非表示にする（あんまソース詳しくみてないんで変なとこ非表示にしてたらすみません）コードを追記しました

退会済みユーザー

2019/09/08 07:48 編集

コードまで載せてくださり、ありがとうございます！！本当に助かります！！ >あんまソース詳しくみてないんで変なとこ非表示にしてたらすみません謝らないでください！！

2019/09/08 07:50

今簡単に動作確認を行いましたがNextボタンが押せない問題がありますね

退会済みユーザー

2019/09/08 07:53

いえ、しっかり押せます。

2019/09/08 07:54

https://s.codepen.io/asuchi0819/debug/VwZQbMV/xnkabZzOnPNM 何もしないで10秒経つと選択肢が消えてNextが押せないのですが私の環境によるものでしょうか？

退会済みユーザー

2019/09/08 07:56 編集

あっ・・私のもでした。選択肢消えました・・すみません。できませんでした。コードが原因ですかね？

2019/09/08 07:57 編集

おそらくliで選択しないとNextが押せない仕様になっているのでしょう。もう少し試行錯誤してみます。

退会済みユーザー

2019/09/08 07:57

すみません。もう一つエラーが出ました。あの、なんかnewiは定義されていないというエラーが出ました。

退会済みユーザー

2019/09/08 07:58

本当にすみません。ありがとうございます。

退会済みユーザー

2019/09/08 07:58

あの、全て質問を変えますね。ちょっと待っててください。

退会済みユーザー

2019/09/08 08:05

編集しました。いったん、未解決にしますね。

2019/09/08 08:15

window. が抜けてました失礼しました

2019/09/08 08:31

根本的に時間制限をかけるにはめんどくさい仕様な気がします。

2019/09/08 13:39

なんて優しいトピなんだ

退会済みユーザー

2019/09/14 03:59

ありがとうございました！！無事に解決することはできました！！またお願いします！！

行動規範の内容に同意します

0

Diff
1-setTimeout("newi()", 10000);
2+setTimeout(newi, 10000);

投稿2019/09/08 12:53

総合スコア69596

2019/09/08 13:41

低評価をされるのはかまいませんが、どの部分に問題があるかはコメントくださいね。当回答および次回以降の回答の改善につながる可能性もあるので、よろしくおねがいします。

退会済みユーザー

2019/09/14 03:59

私は低評価押していませんよ。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ JavaScriptに関する質問

定義されていないというエラーが出ました。