質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

JS練習用にて3択アプリ作成中

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 864

score 11

前提・実現したいこと

JSにて3択アプリを順番に押す時間制限付きのアプリに改変したい
下記のソースコードを
A、B、Cをランダム配置で表示して順に押していくゲームにしたいです。
時間制限付きで10回連続で、YouTubeへ転移する。1回でもミスするとやり直し。

分からない点

1.下記のアプリは、正解を配列先頭に固定して正誤判定しています。(子要素をランダムにしないためスプレッド演算子も使用)
これをランダムに並んだA-B-C表示から順にA-B-Cを押すと正解として、
間違えた時点で次の問題へ、とする場合には、
正解判定の専用の配列を用意し、ifにて3回判断するで良いでしょうか。

2.時間経過にて表示転移する機能実装したいです。
ex)例えば3s経つと、不正解判定になり、次のランダム表示をする。
この場合どういった関数とアルゴリズムが考えられますか?

3. 
``
//配列表示関数()
 //ランダム関数()で回す

// 順番に押したか確認する関数
  // YES=>次の問題表示正解カウンタ++
  // No=>間違えた瞬間スキップして次の問題へ

//whileにてfirstchild削除
// 配列表示関数()
 //ランダム関数()で回す

〜上記を10回

// 最終的に連続正解したか確認する(10回連続)
  // YES=>動画へ飛ばす
  // No=>リプレイ
``

この流れで良いでしょうか?

4.CSSですが、li要素の下の間隔を少し空けたいですがうまく反映されません。

該当のソースコード

'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: '世界で一番大きな湖は?', 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();
    }
  });
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <link rel="stylesheet" href="../portfolio_saga/css/style.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>Score: 3 / 3</p>
      <a href="">Replay?</a>
    </section>
  </div>

  <script src="../portfolio_saga/main.js"></script>

</body>
</html>
body {
  background: #efdec1;
  font-size: 30px;
  font-family: Verdana, sans-serif;
}

.container {
  width: 700px;
  height: 650px;
  margin: 8px auto;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  position: relative;
}

#question {
  margin-bottom: 16px;
  font-weight: bold;
  /* margin: auto; */
  text-align: center;
}

#choices {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
  font-size: 40px;
  text-align: center;
}

#choices > li {
  width: 500px;
  border: 3px solid #ccc;
  border-radius: 7px;
  padding: 30px;
  /* margin-bottom: 20px; */
  cursor: pointer;
  margin: auto;
}

#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;
}

宜しくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/07/14 13:59

    (質問文は編集できます)「分からない点」はコードブロックから出したほうが読みやすいと思います。

    キャンセル

回答 1

checkベストアンサー

+2

  1. indexOfを使用すれば判定は1回で済みます。

  2. setIntervalを使用してください。

  3. やりたいことが書かれてある通りなら、この流れで良いかと。

  4. margin: auto;が上書きされています。DevToolsで調べましょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る