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

些細な日常

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")」の部分も必要なくなる。

コメント

最近の投稿

日付: 

Googleドライブの空にしたゴミ箱を復元する方法

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...