遊べるJavaScript入門ロゴ

いくつかのヒントを出して最後に答えを出すJavascript

国の国旗を表示して、それがどこの国の国旗なのかを考えてもらうものを作ってみました。 3個のヒントを次々表示して、その間に答えを考えてもらうことをJavascriptを使ってやっています。

ここでは「switch文」を使って処理を分岐させています。

もちろん、もう少しクイズらしくするためには、もう少し体裁や工夫を加える必要がありますが、最終的には、いくつかの国旗を準備して、それをランダムに表示させて、その国旗がどこの国のものかを当てるクイズのようなプログラムを作っていくことをイメージしていますが、第1段階のもので、改良型も次のページで考えています。


国旗の国名当てクイズ(switch文を使っています)

ボタンを押すと、ボタンに書かれた順番に、3つのヒントが表示され、その後答えが表示されるというプログラムです。

*************ここから

この国旗はどこの国の国旗でしょうか?
ヒントは3つあり、その後に答えが表示されます。

国旗の例

ボタンを押すと、ここに【ヒント】が表示されます。

***********ここまで

PR

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文」などを使わないとダメですが、この場合は問題なさそうです。

ボタンを押すと文字部分だけを変化させればいいので、getElementByIdで文章の変更場所を決めておいて、textContentであらかじめ作っておいたヒントや答えを表示させています。

今回は「1つの国旗」を使った問題です単純ですが、同じやり方で「地名当て問題」などを同様のやり方で作れますから、いくつかの国旗を用意しておくとクイズらしくなりそうですね。

ただ、考えながらHPを書いていますので、そんなに速く進みません。 次のページでは、こたえが分かった時点でジャンプするようにすると同時に、そのときに、ボタンを押せないように、ボタンを消すJavaScriptを作りました。


記事の目次へ

PR

(来歴)R6.5作成  
PR
AmazonのJavascript本 送料無料

楽天ブックスは品揃え200万点以上!


記事の目次へ

電子工作の記事へ