3つのセレクトボックスでクイズをつくる

2024年10月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は前回の「連動するセレクトボックス」を応用してクイズを作ってみました。

それでは早速解いてみてください。

みなさん正解できましたでしょうか。ちょっと簡単すぎましたかね。

では作り方をおさらいしてみます。

3つのセレクトボックスで重複しないようにする

3つのセレクトボックスを設置し、IDとonchangeを設定します。

<select id="firstSelect" onchange="updateSelectBoxes('firstSelect')">
  <option value="">選択してください</option>
  <option value="選択肢A">選択肢A</option>
  <option value="選択肢B">選択肢B</option>
  <option value="選択肢C">選択肢C</option>
</select>

<select id="secondSelect" onchange="updateSelectBoxes('secondSelect')">
  <option value="">選択してください</option>
  <option value="選択肢A">選択肢A</option>
  <option value="選択肢B">選択肢B</option>
  <option value="選択肢C">選択肢C</option>
</select>

<select id="thirdSelect" onchange="updateSelectBoxes('thirdSelect')">
  <option value="">選択してください</option>
  <option value="選択肢A">選択肢A</option>
  <option value="選択肢B">選択肢B</option>
  <option value="選択肢C">選択肢C</option>
</select>

スクリプトを記述します。

const options = ["選択肢A", "選択肢B", "選択肢C"];

function updateSelectBoxes(changedSelectId) {
  const firstSelect = document.getElementById("firstSelect");
  const secondSelect = document.getElementById("secondSelect");
  const thirdSelect = document.getElementById("thirdSelect");
  const firstSelectValue = firstSelect.value;
  const secondSelectValue = secondSelect.value;
  const thirdSelectValue = thirdSelect.value;
  updateOptions(firstSelect, [secondSelectValue, thirdSelectValue]);
  updateOptions(secondSelect, [firstSelectValue, thirdSelectValue]);
  updateOptions(thirdSelect, [firstSelectValue, secondSelectValue]);
  firstSelect.value = firstSelectValue;
  secondSelect.value = secondSelectValue;
  thirdSelect.value = thirdSelectValue;
}

function updateOptions(selectElement, excludeValues) {
  selectElement.innerHTML = "<option value=''>選択してください</option>";
  options.forEach(option => {
    if (!excludeValues.includes(option)) {
      let opt = document.createElement("option");
      opt.value = option;
      opt.text = option;
      selectElement.appendChild(opt);
    }
  });
}

セレクトボックスが3つの場合でも問題なくできました！

回答ボタンとリセットボタン設置

回答ボタンを押すと正解か不正解かの判定をするようにします。

あと、全てのセレクトボックスを初期化するリセットボタンも実装してみます。

<button onclick="checkAnswer()">回答する</button>
<button onclick="resetSelections()">リセット</button>

<p id="result"></p>

<div id="overlay">
  <div></div>
</div>

CSSは以下の通りです。

正解の場合は青い〇、不正解の場合は赤い✕が画面中央に大きく表示されるようにしました。

#result {
  font-weight: 700;
  display: none;
  text-align: center;
  font-size: 2rem;
  margin-top: 2rem;
}
.correct {
  color: blue;
}
.incorrect {
  color: red;
}
#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}
#overlay div {
  background-color: transparent;
  width: 1000px;
  height: 1000px;
  max-width: 95%;
  max-height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50vw;
  font-weright: 900;
}
.circle {
  color: blue;
}
.cross {
  color: red;
}

スクリプトを記述します。

1番目が選択肢A、2番目が選択肢B、3番目が選択肢C、で正解と判定することにします。

function checkAnswer() {
  const firstSelect = document.getElementById("firstSelect").value;
  const secondSelect = document.getElementById("secondSelect").value;
  const thirdSelect = document.getElementById("thirdSelect").value;
  const resultElement = document.getElementById("result");
  const overlay = document.getElementById("overlay");
  const overlayIcon = overlay.querySelector('div');
  if (firstSelect === "選択肢A" && secondSelect === "選択肢B" && thirdSelect === "選択肢C") {
    resultElement.textContent = "正解ッ！！";
    resultElement.className = "correct";
    overlayIcon.textContent = "〇";
    overlayIcon.className = "circle";
    overlay.style.display = "flex";
    setTimeout(() => overlay.style.display = "none", 2000);
  } else {
    resultElement.textContent = "不正解・・・・";
    resultElement.className = "incorrect";
    overlayIcon.textContent = "✕";
    overlayIcon.className = "cross";
    overlay.style.display = "flex";
    setTimeout(() => overlay.style.display = "none", 2000);
  }
  resultElement.style.display = "block";
}

function resetSelections() {
  document.getElementById("firstSelect").selectedIndex = 0;
  document.getElementById("secondSelect").selectedIndex = 0;
  document.getElementById("thirdSelect").selectedIndex = 0;
  updateSelectBoxes();
  document.getElementById("result").style.display = "none";
}

まとめ

〇と✕を赤と青で色分けするならどっちがいいんでしょうね。

〇 正解　✕ 不正解

〇 正解　✕ 不正解

どうでもいいどっちもアリですね！