いくつかのヒントを出して最後に答えを出すJavascript
国の国旗を表示して、それがどこの国の国旗なのかを考えてもらうものを作ってみました。 すぐに答えを表示するのではなく、3個のヒントを次々表示して、その間に答えを考えてもらうことをJavascriptを使ってやっています。
ここでは「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 () {
case 値A:
\\ 変数の値がAの場合の処理 \\
break;
case 値B:
\\ 変数の値がBの場合の処理 \\
break;
default:
\\ 上記でない場合の処理 \\
}
というように、見やすくてシンプルなので見た目にわかりやすいでしょう。
「case」の値が、この例のように値A・B・Cは1・2・3 に「等しい」場合なので、switch文を使って分岐させると見やすいのですが、「～以上」「～以下」などの場合の分岐はswitchでは無理なので、「if文」などを使わないとダメです。 しかしここでは値が整数で、その数字かどうかを判断すればいいので問題なくswitch分が使えます。
ボタンを押すと文字部分だけを変化させればいいので、getElementByIdで文章の変更場所（ターゲットになるid部分）を決めておいて、textContentであらかじめ作っておいたヒントや答えを表示させています。
今回は「1つの国旗」を使った問題です単純ですが、同じやり方で「地名当て問題」などを同様のやり方で作れますから、いくつかの国旗を用意しておくとクイズらしくなりそうですね。
ただ、考えながらHPを書いていますので、そんなに速く進みません。 次のページでは、こたえが分かった時点でジャンプするようにすると同時に、そのときには、ボタンを消して押せないようにしているJavaScriptです。
