HTML, JavaScript, CSS で解答と解説を表示する

HTML，JavaScript，CSS を使い，複数の問題の解答と解説を表示・非表示を切り替える JavaScript を紹介します。

解答と解説の表示

表示前

解答と解説を表示する前のイメージを示します。問題文，選択肢，解答と解説を表示するボタンを用意しておきます。

表示後

解答と解説を表示した後のイメージを示します。解答と解説を表示したボタンの後に，正解・不正解を表示し，解説文を付けます。

HTML

選択肢

ユーザが選択する選択肢を用意します。四つの中から一つだけ選ぶので，ラジオボタンを採用します。

<ol class="ans_choices">
    <li><label><input type="radio" name="q01" value="1"> イ．</label></li>
    <li><label><input type="radio" name="q01" value="2"> ロ．</label></li>
    <li><label><input type="radio" name="q01" value="3"> ハ．</label></li>
    <li><label><input type="radio" name="q01" value="4"> ニ．</label></li>
</ol>

ボタン（解答と解説を表示）

解答と解説を表示するボタン（表示／非表示を切り替えるボタン）を作成します。

<div class="a_botton" id="op_q01">No. 1 の解答と解説を表示</div>

ブロック（解答と解説）

解答と解説ブロックの中には，正解・不正解，答えを表示できるようにします。

<div class="exposition" id="ex_q01">
    <h4><span id="q01_result" class="red"></span></h4>
    <p>【答え】<strong id="q01_answer" class="red"></strong></p>
</div>

JavaScript

選択肢の定義

まずは，選択肢を定義します。第二種電気工事士 学科試験の場合，選択肢はイ・ロ・ハ・ニの四択となります。そこで，answer_list の配列を用意します。配列の引数 1 ～ 4 をイ～ニに対応させています。

• answer_list[1] = ‘イ’
• answer_list[2] = ‘ロ’
• answer_list[3] = ‘ハ’
• answer_list[4] = ‘ニ’

var answer_list = ['empty', 'イ', 'ロ', 'ハ', 'ニ'];

解答集の定義

解答集を連想配列 answers で作成します。

var answers = {
    q01: 3, q02: 4, q03: 4, q04: 4, q05: 1, q06: 2, q07: 4, q08: 3, q09: 1, q10: 4,
    q11: 2, q12: 4, q13: 4, q14: 1, q15: 1, q16: 1, q17: 1, q18: 1, q19: 1, q20: 1,
    q21: 1, q22: 1, q23: 1, q24: 1, q25: 1, q26: 1, q27: 1, q28: 1, q29: 1, q30: 1
};

解答と解説ボタン押下時の関数

問題の解答と解説ボタン（例えば id が “op_q01″）を押下したときの関数を作成します。関数では，以下の 5 つの処理を行っています。

1. jquery の slideToggle を使って，解答と解説を記載したブロック（例えば id が “eq_q01″）を表示
2. 解答を表示するブロック（例えば id が “q01_answer”）に解答を表示
3. ユーザが選択した選択肢（userAnswer）を取得
4. userAnswert と解答が一致するかをチェックし，一致する場合は resultText に “正解”，不一致の場合は “不正解” を代入
5. 正解・不正解を表示するブロック（例えば id が “q01_result”）に resultText を追加

function setupQuestionToggle(questionId) {
    $(`#op_${questionId}`).click(function () {
        $(`#ex_${questionId}`).slideToggle("slow");
        $(`#${questionId}_answer`).text(answer_list[answers[questionId]]);
        const userAnswer = $(`input[name="${questionId}"]:checked`).val();
	const resultText = (userAnswer == answers[questionId]) ? "正解" : "不正解";
        $(`#${questionId}_result`).text(resultText);
    });
}

関数実行

最後に関数 setupQuestionToggle を実行する関数を用意します。

$(function () {
    const questions = [
        'q01', 'q02', 'q03', 'q04', 'q05', 'q06', 'q07', 'q08', 'q09', 'q10',
        'q11', 'q12', 'q13', 'q14', 'q15', 'q16', 'q17', 'q18', 'q19', 'q20',
        'q21', 'q22', 'q23', 'q24', 'q25', 'q26', 'q27', 'q28', 'q29', 'q30'
    ];
    questions.forEach(q => setupQuestionToggle(q));
});

CSS

スタイルの一例を紹介します。

.ans_choices {
    list-style: none;
}

.a_botton {
    display: inline-block;
    border: solid 3px currentColor;
    border-radius: 6px;
    background-color: var(--main-color);
    color: var(--text-bright-color);
    font-size: 14px;
    text-decoration: none;
}

.a_botton:hover {
    background-color: var(--accent-color);
}

.exposition {
    display: none;
}

.red {
    color: var(--accent-color);
    font-weight: bold;
}

まとめ

いかがだったでしょうか。ベタにコードを書くと，問題の数だけ以下のような JavaScript 関数を用意する必要がありました。同じような関数を繰り返すのは，保守性が悪いので，うまく一つの関数にまとめました。（Microsoft Copilot に JavaScript をリファクタリングしてもらいました。）

$(function(){
    $("#op_q01").click(function(){
        $("#ex_q01").slideToggle("slow");
        if($('input[name="q01"]:checked').val()==2){
            $("#q01_result").text("正解");
        } else {
            $("#q01_result").text("不正解");
        }
    });
});

更新履歴

• 2024年11月23日　新規作成
• 2024年11月24日　解答と解説の表示前後のイメージを追加