switch文を使う例です。問題を出して、答えのヒントを3つ出したあとで答えを出すというJavascriptで、textContentをつかって、あらかじめ作っておいたヒントや答えを表示させています。
いくつかのヒントを出して最後に答えを出す方法の例
国の国旗を表示して、それがどこの国の国旗なのかを考えてもらう問題を例として作ってみました。
ここでは、すぐに答えを表示するのではなく、3個のヒントを次々表示して、その間に答えを考えてもらうことをやっています。
また「switch文」を使って、ヒントの数で、やる処理を分岐させています。
もちろん、もう少しクイズらしくするためには、もう少し体裁や工夫を加える必要がありますが、たとえば、いくつかの国旗を準備しておいて、それをランダムに表示させて、その国旗がどこの国のものかを当てるクイズのようなプログラムを作っていくことをイメージしていますが、これはそれに至る第1段階のもので、同様の例でやり方を少し変えた例が次のページにあります。
国旗の国名当てクイズ（switch文を使っています）
ボタンを押すと、ボタンに書かれた順番に、3つのヒントが表示され、その後に答えが表示されます。
＊＊＊＊＊＊＊＊＊＊＊＊＊ここからがクイズです
この国旗はどこの国の国旗でしょうか？
ヒントは3つあり、その後に答えが表示されます。
ボタンを押すと、ここに【ヒント】が表示されます。
＊＊＊＊＊＊＊＊＊＊＊ここまでがクイズの部分です
HTML部分とJavascript部分
【HTML部分】
<p>この国旗はどこの国の国旗でしょうか？<br>
ヒントは3つあり、その後で答えが表示されます。</p>
<img src="img/fl01.gif"> //imgホルダーにおいている国旗の図柄を表示
<button id="myBtn" onclick="mySerect()">第1ヒントを見る</button>
<p id="myHint">ここに【ヒント】が表示されます。</p>
【スプリクト部分】
<script>
let myHinttimes = 0; //この数をヒントの数としてcaseで分岐させています
function mySerect() {
myHinttimes++;
switch (myHinttimes) {
case 1:
document.getElementById('myBtn').textContent = '第2ヒントを見る';
document.getElementById('myHint').textContent
= '【ヒント1】高福祉国家で経済も強く、19世紀以降は戦争をしていない国です。';
break;
case 2:
document.getElementById('myBtn').textContent = '第3ヒントを見る';
document.getElementById('myHint').textContent
= '【ヒント2】IKEA ボルボ エリクソンが有名。';
break;
case 3:
document.getElementById('myBtn').textContent = '答えを見る';
document.getElementById('myHint').textContent
= '【ヒント3】自然豊かな北欧の国。首都はストックホルム。';
break;
default:
document.getElementById('myHint').textContent = '答えは「スウェーデン王国」です。';
}
}
</script>
整数に対応しての分岐はswitch文が使えます
「switch文」の書き方はswitch () {
case 値A:
\\ 変数の値がAの場合の処理 \\
break;
case 値B:
\\ 変数の値がBの場合の処理 \\
break;
default:
\\ 上記でない場合の処理 \\
}
というように書きます。 「\\」で囲んだところは説明文です。
シンプルなので見た目にわかりやすいでしょう。
「case」の値が、この例のように値A・B・Cは1・2・3 に「等しい」場合には、switch文を使って分岐させると見やすくなります。
しかし、「～以上」「～以下」などの場合の分岐はswitchではうまくいかないので、このような分岐は「if文」を使って分岐させる必要があります。
ここでは、値が1・2・3の整数で、その数字かどうかを判断すればいいので、問題なく switch文 を使うことができます。
ボタンを押すと文字部分だけを変化させればいいので、getElementById で文章の変更場所（ターゲットになるid部分）を決めておいて、textContent であらかじめ作っておいたヒントや答えを表示させています。
今回は「1つの国旗」の国名を当てるという単純なものです。 同じやり方で「地名当て問題」などを同様のやり方で作ることができるでしょう。
また、これをヒントにして、いくつかの国旗を用意しておいて、それを順番に出すなどにすれば、もっとクイズらしくなりそうですね。
次のページでは、こたえが分かった時点でジャンプするようにすると同時に、そのときには、表示されていたボタンを消して、ボタンが押せないようにしているJavaScriptです。
