前のページ（→こちら）では順番に3つのヒントを出したあとで正解が出るJavaScriptでしたが、ここでは、わかった時点で答えが出るようにしました。
もちろん、このHPはJavaScriptに慣れてもらう目的なので、実際に使える完璧なものにするには「まだまだ」ですし、また、このやり方がベストかどうかはわかりませんが、参考になれば使ってみてください。
変更点は、3つのヒントを最後まで見ないで「答え」に進めるように「ボタンを追加」したことと、答えが表示されたら不要になった「ボタンを消す」… という変更をしています。
答えが分かったら答え合わせに進めるようにした
「画像当てゲーム」のようなものをイメージして検討しているのですが、発展させる内容はいろいろあって、例えば、たくさんの問題を用意しておくとか、早く答えると高い点数になる… などを組み込むことを考えていくのも楽しいでしょう。
それに行き着く前段階として、ここでは、答えがわかった時点で「回答」にショートカットするように「答えボタン」をつけて、答えが出ると、ボタンを消すようにJavaScriptの一部を変更しました。
別の国の国旗で、その内容をみてみましょう。
国旗の国名当てクイズ（第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ではうまく動きます。
こ入れを基本形にして、さらに変更を加えていくと面白いでしょう。
