ブログも含め Webページ上で、問題と解答を記載したいのだけれど、解答はすぐに見せたくない場合の方法です。用意したボタンをクリックすると、JavaScriptのプログラムが実行されて解答を表示させます。
このページで実例を実装しますが、JavaScriptが記述できるブログサービス(livedoor Blog など)でも同じことが可能です。
1. 実例
問題
1から8までの数字を1回ずつ使って4けたの数字を2つつくります。その差が一番小さくなる二つの数字をさがしなさい。
解答
2. 解説
ボタンと解答の部分のHTMLと、JavaScriptコードの部分は以下のようになっています。
<!-- ボタン -->
<p><input value="解答を表示する" id="btn-20170519-1" type="button" style="margin-bottom:0;"></input></p>
<!-- 解答 -->
<p style="display:none;font-size:1.3em;color:red;" id="ans-20170519-1">247</p>
<!-- JavaScriptのコード -->
<script>
// 画面が読み込まれた後で処理を開始するために、windowオブジェクトの loadイベントに関数を登録します
window.addEventListener( 'load', ()=>{
let button = document.querySelector("#btn-20170519-1");
// ボタンの click イベントに関数を登録します
// flagという変数を関数に閉じ込めたいので、その場で関数を生成して登録します
button.addEventListener('click', (()=>{
let flag = true; // 解答を表示している時と非表示の時とを区別するためのフラグ
// ボタンの clickイベントに登録する関数を返します
return ()=>{
// 解答の部分を表示(または非表示)にします
document.querySelector("#ans-20170519-1").style.display = flag ? "block" : "none";
// ボタンのラベル文字列をセットします
button.value = flag ? "解答を隠す" : "解答を表示する";
// flag を反転させます
flag = !flag;
};
})());
});
</script>
この中に解説も書いておきました。
大雑把に説明すると、ボタンのクリックイベントに関数を登録しているだけです。その関数の中で、(1) 解答の表示・非表示、(2) ボタンのラベル文字列の切り替え処理を行っています。
JavaScriptの alert()
関数で解答を表示してもよいのですが、それだと味気ないですので、こちらの方法を試してみるのもよいのではないでしょうか。
3. 補足:HTMLだけでも近いことはできます
<details>
タグを使うと、似たようなことができます。
実例
問題
1から8までの数字を1回ずつ使って4けたの数字を2つつくります。その差が一番小さくなる二つの数字をさがしなさい。
解答
解答を表示する
247
解説
「解答を表示する」の部分の HTML は以下になります。
<details>
<summary>解答を表示する</summary>
<p>247</p>
</details>
- 画面には最初
<summary>
と</summary>
で囲まれた部分しか表示しません。 - その部分がクリックされると、それ以外の内容が表示されます。
ボタンが必要ないのであれば、こちらの方がラクですね。