【JavaScript】ラジオボタンの診断テストで合計点数に応じてコメントを変える方法

やりたいこと

  • 3択のラジオボタンを作成し、判定ボタンで集計を出す
  • 集計の結果に応じて、if文でコメントを出す
  • 未選択のラジオボタンがある場合はエラーを出す
  • IEでも動作する

「JavaScript＋診断テスト」で検索すれば 似たようなプログラムはいくつもヒットしますが、この4つを満たすものがなかなか無かったため自分で作成しました。
コピペで使えます。

DEMO

  • 朝食に絶対欠かせないものは？



  • ランチ何食べる？



  • 3時のおやつといえば？



ここに結果が出るよ！

コメントの条件分岐

Aが多い場合は「卵好きだね！」
Bが多い場合は「乳製品好きだね！」
Cが多い場合は「もしかして豆好き？」
ABCが1個ずつ選択された場合は「バランスの良いチョイスだね！」と出るはずです。

ソースコード

HTMLコード

<form id="shitsumon" name="shitsumon" onsubmit="check(); return false;">
<ul>
<li>
<p>朝食に絶対欠かせないものは？</p>
<label><input name="q0" type="radio" value="A" required="" />A.卵料理</label><br />
<label><input name="q0" type="radio" value="B" />B.ヨーグルト</label><br />
<label><input name="q0" type="radio" value="C" />C.納豆</label></li>
<li>
<p>ランチ何食べる？</p>
<label><input name="q1" type="radio" value="A" required="" />A.オムライス</label><br />
<label><input name="q1" type="radio" value="B" />B.グラタン</label><br />
<label><input name="q1" type="radio" value="C" />C.麻婆豆腐</label></li>
<li>
<p>3時のおやつといえば？</p>
<label><input name="q2" type="radio" value="A" required="" />A.プリン</label><br />
<label><input name="q2" type="radio" value="B" />B.レアチーズケーキ</label><br />
<label><input name="q2" type="radio" value="C" />C.大福</label></li>
</ul>
<input type="submit" value="判定！" class="hantei" /></form>
<div id="kekka">ここに結果が出るよ！</div>

JavaScriptコード

function check() {
    let str = [];

    //ラジオボタンの中身を取得
    const q = [document.shitsumon.q0, document.shitsumon.q1, document.shitsumon.q2];

    //A・B・Cそれぞれの合計点数を入れるための変数
    var aaa = 0;
    var bbb = 0;
    var ccc = 0;

    //どのラジオボタンが選択されたか判定し、点数を加算
    for (let n = 0; n < q.length; n++) {
        for (let i = 0; i < q[n].length; i++) {
            if (q[n][i].checked) {
                str[n] = q[n][i].value;
                if (str[n] == "A") {
                    aaa++;
                } else if (str[n] == "B") {
                    bbb++;
                } else if (str[n] == "C") {
                    ccc++;
                }
                break;
            }
        }
    }

    //コメントの条件分岐
    var message = "";
    if (aaa > bbb && aaa > ccc) {
        message = "卵好きだね！";
    } else if (bbb > aaa && bbb > ccc) {
        message = "乳製品好きだね！";
    } else if (ccc > aaa && ccc > bbb) {
        message = "もしかして豆好き？";
    } else {
        message = "バランスの良いチョイスだね！";
    }

    //HTMLへ出力
    var html = '<div>';
    html += 'A=' + aaa + '個<br>';
    html += 'B=' + bbb + '個<br>';
    html += 'C=' + ccc + '個<br><br>';
    html += '' + message + '';
    html += '</div>';
    document.getElementById("kekka").innerHTML = html;
}

CSSコード

見栄えの部分。無くてもOK。

/*質問部分を太字に＆空白調整*/
#shitsumon p {
  margin: 10px 0 5px 0;
  font-weight: bold;
}

#shitsumon li:not(:last-child) {
  margin-bottom: 20px;
}

/*ラジオボタンとテキストの間に余白を入れる*/
#shitsumon input[type="radio"] {
  margin-right: 5px;
}

/*判定ボタンのデザイン*/
.hantei {
  background: #cc0000;
  color: #fffec5;
  font-weight: bold;
  border: none;
}

/*結果部分の空白調整*/
#kekka {
  margin: 20px 0;
}

/*結果部分のデザイン*/
#kekka div {
  background: rgba(0, 0, 0, 0.1);
  display: inline-block;
  padding: 10px;
  border-radius: 20px 10px 80px 30px/40px 70px 30px 40px;
}

-JavaScript