ブログの知識と教養と雑学の百問、前半（芸能と文学と芸術と時事と自然）と後半（歴史とITと健康とスポーツと生活）でクイズ形式の三択ボタンをJavaScriptで作成したときのプログラムの内容を説明する。
JavaScript
// 誤解数と正解数の変数の宣言
let now = 0, noc = 0;
// 全てのクイズのol要素と最終結果のp要素の取得
const slbtns = document.querySelectorAll("ol.selection"), fnrs = document.querySelector("p.final-result");
// 最終結果のp要素にCSSでデザインを付ける
fnrs.style.cssText = "display:flex;justify-content:center;align-items:center;fonts-size:x-large;font-weight:bold;height:3em;";
// クイズ毎の正誤の判定の関数
function check(event) {
// クリックイベントとクリックされたボタンと同じクイズの残りのボタンのli要素の取得（クイズを三択ボタンのどれかが押されたときに終了させるため）
const et = event.target, aits = et.parentElement.querySelectorAll("li");
// クリックされたボタンと同じクイズの残りのボタンのli要素の配列処理
aits.forEach(ait => {
// 正解のボタンの場合
if (ait.classList.contains("correct")) {
// ボタンの背景色を「#00ff7f」に変えて前方に「正解」と追記する
ait.style.backgroundColor = "#00ff7f"; ait.insertAdjacentHTML("afterbegin", "正解 "); }
// 誤解のボタンの場合
else {
// ボタンの背景色を「#ff6347」に変えて前方に「誤解」と追記する
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 => {
// クイズのol要素にCSSでデザインを付ける
slbtn.style.cssText = "padding-left:0;list-style-type:none;width:80%;margin:auto;text-align:center;border:2px #c0c0c0 solid;border-radius:4px;";
// 三択ボタンのli要素の取得
const items = slbtn.querySelectorAll("li");
// 三択ボタンのli要素の配列処理
items.forEach(item => {
// 三択ボタンのli要素にCSSでデザインを付ける
item.style.cssText = "padding:.5em;transition:all .3s ease-out;";
// 三択ボタンの三番目だけCSSでデザインを付ける
if (item.nextElementSibling) item.style.borderBottom = "2px #c0c0c0 solid";
// ボタンのli要素のクリックのイベントリスナーの設置
item.addEventListener ("click", check); }); });