前のページ（→こちら）では順番に3つのヒントを出したあとで正解が出るJavaScriptのプログラムでしたが、このページでは、わかった時点でヒントを出さずに答えが出るようにしています。
もちろん、このHPはJavaScriptに慣れてもらう目的なので、実際に使えるものにするには改良を加えていくのですが、ベストではないですが参考にできる部分を使ってみてください。
ここでの変更点は、3つのヒントを最後まで見ないで「答え」に進めるように「ボタンを追加」したことと、答えが表示されたら不要になった「ボタンを消す」… という変更をしています。前のプログラムと比較しながら見ていただくと良いでしょう。
答えが分かったら答え合わせに進むようにした
このプログラムは、「画像当てゲーム」のようなものを作るために検討しているものですが、発展させる内容はいろいろイメージできます。
例えば、たくさんの画像などを用意して、それを問題にすればもっとバリエーションが出るでしょうし、タイマーを仕掛けておいて、早く答えると高い点数になる… などを組み込むことなどプラスしていくと、面白いものになると思います。
それに行き着く前段階として、ここでは、答えがわかった時点で「答え合わせ」にショートカットするように「答えボタン」をつけました。 そして、答えがわかったら、「分かった！」ボタンをおすと、「ヒントボタン」が消えるように変更しています。
国旗当てクイズの改良版を動作させて確認してみましょう。
国旗の国名当てクイズ2 を動かしてみましょう
どちらかのボタンを押します。 答えがわからない場合はヒント3つを順番に表示します。答えが分かった時点で「分かった！」ボタンを押しと答え合わせができるようにしました。
＊＊＊＊＊＊＊＊＊＊＊＊＊どちらかのボタンを押して進めてみましょう。
【問題】 この国旗はどこの国の国旗でしょうか？
ヒントを3つ用意しています。その後に答えが表示されますが
途中で「わかった！」ボタンを押すと「答え」が出ます。
ここに【ヒント】が表示されます。
＊＊＊＊＊＊＊＊＊＊＊ここまでがプロクラムで動作しています。
（注）もう一度初めから表示させる場合は、再読み込み（F5）をしてください。
「ページのソーズを表示」でコードを確認できます
ここではコードを示していませんので、必要な方は、「ページのソースを表示」させて「＊＊＊＊ここから…～＊＊＊＊＊ここまで…」のところをご覧ください。
変更部分でチェックするところは、
①ボタンを追加した
<button id="myBtn" onclick="mySerect()">第1ヒントを見る</button>
<button id="myAns" onclick="myLast()"> 分かった！</button>
②途中で答えがわかったら「分かった！ボタン」で新しい関数を作ってそこに飛ばした
function myLast() {
③必要のなくなった2つのボタンを消している
document.getElementById('myBtn').remove();
document.getElementById('myAns').remove();
… というところが前のページと変わっています。
動作させたときの問題点
このHPはホームページ・ビルダー22を使ってHTML5で書いています。 HPビルダーは私のような初級者には便利なツールですが、Explorerをつかってプレビューする仕組みになっているので、JavaScriptへの対応が悪く、うまく動いてくれません。 そのために、他のブラウザー Google ChromeやFirefox を使って動作することを確認して問題ないことを確認していますが、詳しい対応などはよくわかりません。
このプログラムは「1つの例」ですので、これを基本にして、独自の変更を加えていっていただくといいでしょう。
その他も参考にご覧ください。
