JavaScriptで三択クイズ

2019/07/11

2019/07/15

この記事を書いている人 - WRITER -

サラリーマンエンジニアです。平成３１年４月１日から1日当たり100円を FX口座に積立てて令和元年の初日から自作プログラムによるシステムトレードをしています。プログラミングを基礎から学習しつつ効率的な自動売買ロジックを考えて、副収入で月給を超えることを目標にコツコツ頑張ります。

http://mukuchan.com/dotinstall/js/quiz/

３つの選択肢から１つを選ぶクイズ。できることだけ覚えておいて、何かプログラムをつくるときにコピーして改造したいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <link rel="stylesheet" href="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="main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p></p>

<a href="">Replay?</a>

</section>

</div>

</body>

</html>

'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();
    }
  });
}

'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();

}

});

}

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

100

101

102

103

104

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;

}

この記事を書いている人 - WRITER -

mukuchan

JavaScriptで三択クイズ

関連記事 - Related Posts -

Web版で復習しています。

新規注文が見送りばかり

progate のHTML&CSS道場コース上級編

JavaScriptでスロットマシン

最新記事 - New Posts -

講演会

人身事故

口座状況(第47週)

週間実績(2/10-2/15)

- Comments - コメントをキャンセル

JavaScriptで三択クイズ

共有:

関連記事 - Related Posts -

最新記事 - New Posts -

- Comments - コメントをキャンセル