スキップしてメイン コンテンツに移動

些細な日常

JavaScriptのクイズの選択ボタンのプログラム

ブログの知識と教養と雑学の記事（前半・後半）で使用したクイズ形式の選択ボタンのJavaScriptによるプログラムを提供する。HTML編集が可能で、scriptタグが反映するサイトならば同じような選択ボタンのコンテンツを作成して使用できる。

選択ボタンの基本的なプログラム

サンプルのソースコード

日本の首都はどこか。

  1. 北海道
  2. 東京都
  3. 福岡県

※どれかを押すと正解が緑に、誤解が赤に変わって表示される。

HTML

<p>日本の首都はどこか。</p>

<ol class="selection">
<li>北海道</li>
<li class="correct">東京都</li>
<li>福岡県</li>
</ol>

JavaScript

/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/07/javascript-quiz-selection-button-program.html | License: The MIT License */
const slbtns = document.querySelectorAll("ol.selection");
function check(event) {
const et = event.target, aits = et.parentElement.querySelectorAll("li");
aits.forEach(ait => {
if (ait.classList.contains("correct")) {
ait.style.backgroundColor = "#00ff7f"; ait.insertAdjacentHTML("afterbegin", "正解　"); } else {
ait.style.backgroundColor = "#ff6347"; ait.insertAdjacentHTML("afterbegin", "誤解　"); }  
ait.removeEventListener("click", check); });
et.insertAdjacentHTML("beforeend", "　✓"); }
slbtns.forEach(slbtn => {
slbtn.style.cssText = "padding-left:0;list-style-type:none;width:80%;margin:auto;text-align:center;border:2px #c0c0c0 solid;border-radius:4px;";
const items = slbtn.querySelectorAll("li");
items.forEach(item => {
item.style.cssText = "padding:.5em;transition:all .3s ease-out;"; 
if (item.nextElementSibling) item.style.borderBottom = "2px #c0c0c0 solid";
item.addEventListener ("click", check); }); });
※冒頭のコメント（/* ... */）はソースコードの著作権の表記で、僕が提供する Blogger用テンプレートのImaginary以外で使用する場合は必須になる。

ソースコードのマークアップ

HTMLのソースコード

<script>
JavaScriptのソースコード
</script>

サイトのHTML編集に選択ボタンのHTMLのソースコードはそのまま、JavaScriptのソースコードはHTMLのソースコードの後にscriptタグで囲んで記載すると動作する。

プログラムの内容

番号付きリストのolタグとliタグを使って問いを立ててそれぞれの問いを押すと正解だけが緑、その他の誤解が赤に変わって表示される。

正解のliタグだけ「correct」というclassを付けて判別できるようにしておく。

問いのliタグは何個でも構わないし、問いの集まりのolタグも幾つ増やしてもプログラムのJavaScriptのソースコードは一つで動作する。

問いの集まりのolタグはページで同じタグが他でも使われる場合があるから識別するために「selection」というclassを付けている。増やして使用する場合は全て同じclassを付けておく必要がある。

ボタンのデザインのカスタマイズ

通常表示のボタンのデザイン

slbtn.style.cssText

初期値：padding-left:0;list-style-type:none;width:75%;margin:auto;text-align:center;border:2px #c0c0c0 solid;border-radius:4px;

ボタンのolタグのCSSを編集できる。

最初から決まっているもの（初回表示用）なので、CSSだけで指定しても構わないし、その場合は重複しないようにJavaScriptのものは全て削除すると良い。

するとolタグを取得する「eslbtn = document.querySelector("ol.selection"),」の部分も必要なくなる。

if (item.nextElementSibling) item.style.borderBottom

初期値：2px #c0c0c0 solid

問いの集まりの最後のボタンのliタグの下の枠線のCSSを編集できる。

不要ならば全て削除して構わない。

押された後のボタンのデザイン

一番目のait.style.backgroundColor

初期値：#00ff7f

正解で使用される背景色を編集できる。

一番目のait.insertAdjacentHTML

初期値：afterbegin、「正解　」

正解のボタンの文字の先頭（liタグの開始直後）に「正解　」を追加している。

「正解　」を編集すると追加する文字を変えられる。

反対に正解のボタンの文字の末尾に文字を追加する場合は「afterbegin」を「beforeend」に書き換える。

文字を変更しない場合は不要だから全て削除して構わない。

二番目のait.style.backgroundColor

初期値：#ff6347

誤解で使用される背景色を編集できる。

二番目のait.insertAdjacentHTML

初期値：afterbegin、「誤解　」

正解のボタンの文字の先頭（liタグの開始直後）に「誤解　」を追加している。

「誤解　」を編集すると追加する文字を変えられる。

反対に正解のボタンの文字の末尾に文字を追加する場合は「afterbegin」を「beforeend」に書き換える。

文字を変更しない場合は不要だから全て削除して構わない。

et.insertAdjacentHTML

初期値：afterbegin、「　✓」

押したボタンの文字の先頭に「　✓」を追加している。

正解か誤解に関わらず、どのボタンを押したのかが分かる。

「　✓」を編集すると追加する表記を変えられる。

反対に押したボタンの文字の末尾に文字を追加する場合は「beforeend」を「afterbegin」に書き換える。

何も追加しない場合は不要だから全て削除して構わない。

追加する機能：正解数を表示する

サンプルのソースコード

アメリカの首都はどこか。

  1. ニューヨーク
  2. ワシントン
  3. ロサンゼルス

スペインの首都はどこか。

  1. バルセロナ
  2. バレンシア
  3. マドリード

最終結果：-問正解

HTML

<p>アメリカの首都はどこか。</p>

<ol class="selection"><li>ニューヨーク</li>
<li class="correct">ワシントン</li>
<li>ロサンゼルス</li></ol>

<p>スペインの首都はどこか。</p>

<ol class="selection"><li>バルセロナ</li>
<li>バレンシア</li>
<li class="correct">マドリード</li></ol>

<p class="final-result">最終結果：<span>-</span>問正解</p>

※全ての質問に回答すると「最終結果」に正解数が表示される。

JavaScript

/* Copyright: Nagahito Yuki 2022 | https://www.nagahitoyuki.com/2022/07/javascript-quiz-selection-button-program.html | License: The MIT License */
let now = 0, noc = 0;
const slbtns = document.querySelectorAll("ol.selection"), fnrs = document.querySelector("p.final-result");
fnrs.style.cssText = "display:flex;justify-content:center;align-items:center;fonts-size:x-large;font-weight:bold;height:3em;";
function check(event) {
const et = event.target, aits = et.parentElement.querySelectorAll("li");
aits.forEach(ait => {
if (ait.classList.contains("correct")) {
ait.style.backgroundColor = "#00ff7f"; ait.insertAdjacentHTML("afterbegin", "正解　"); } else {
ait.style.backgroundColor = "#ff6347"; ait.insertAdjacentHTML("afterbegin", "誤解　"); }  
ait.removeEventListener("click", check); });
et.insertAdjacentHTML("beforeend", "　✓");
if (et.classList.contains("correct")) ++noc; else ++ now;
if (slbtns.length === noc + now) {
fnrs.firstElementChild.textContent = noc; }}
slbtns.forEach(slbtn => {
slbtn.style.cssText = "padding-left:0;list-style-type:none;width:80%;margin:auto;text-align:center;border:2px #c0c0c0 solid;border-radius:4px;";
const items = slbtn.querySelectorAll("li");
items.forEach(item => {
item.style.cssText = "padding:.5em;transition:all .3s ease-out;"; 
if (item.nextElementSibling) item.style.borderBottom = "2px #c0c0c0 solid";
item.addEventListener ("click", check); }); });

※冒頭のコメント（/* ... */）はソースコードの著作権の表記で、僕が提供する Blogger用テンプレートのImaginary以外で使用する場合は必須になる。

基本的なプログラムに加えて全ての質問に回答した後に「最終結果」のところに正解数が表示されるようになる。

正解数の表記はHTMLの「final-result」のclassのpタグで編集できる。spanタグの「-」のところが最終的に正解数と置き換えられる。

正解数のデザインのカスタマイズ

最終結果の表示のデザイン

fnrs.style.cssText

初期値：display:flex;justify-content:center;align-items:center;fonts-size:x-large;font-weight:bold;height:3em;

最終結果のpタグのCSSを編集できる。

途中で変化するものではないので、CSSだけで指定しても構わないし、その場合は重複しないようにJavaScriptのものは全て削除すると良い。

するとpタグを取得する「, fnrs = document.querySelector("p.final-result")」の部分も必要なくなる。

コメント