遊べるJavaScript入門ロゴ

前のページ(→こちら)では順番に3つのヒントを出したあとで正解が出るJavaScriptでしたが、これをもう少し「実際に使える」ものにしてみました。

もちろん、このHPはJavaScriptに慣れてもらう目的なので、実際に使えるようなものにするには「まだまだ」ですし、このやり方がベストかどうかはわかりませんが、参考になれば使ってみてください。

変更点は、ヒントを最後まで見ないで、分かった段階で「答え」に進めるように「ボタンを追加」して、そして、答えが表示されたら不要になった「ボタンを消す」… という変更をしています。


PR

答えが分かった時点で答えにショートカット

「画像当てゲーム」のようなものをイメージして検討しているのですが、発展させる内容はいろいろあって、例えば、たくさんの問題を用意しておくとか、早く答えると高い点数になる… などを組み込むことを考えていくのも楽しいでしょう。

それに行き着く前段階として、ここでは、答えがわかった時点で「回答」にショートカットするように「答えボタン」をつけて、答えが出ると、ボタンを消すようにJavaScriptの一部を変更しました。

別の国の国旗で、その内容をみてみましょう。

国旗の国名当てクイズ(第2段階:余分なボタンを消す)

ボタンを押すと、ボタンに書かれた順番にヒントが最大3つ表示され、答えが分かった時点で答え合わせができるようにしました。

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

この国旗はどこの国の国旗でしょうか?
ヒントは3つあり、その後に答えが表示されます。
途中で答えがわかれば、「わかった!」ボタンで。

国旗の例

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

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

もう一度初めから表示させる場合は、再読み込み(F5)をしてください。

PR

コードは「ページのソーズを表示」から

ここではコードを示していませんので、必要な方は、「ページのソースを表示」させて「****ここから~*****ここまで」のところをご覧ください。コードのコピーも「ページのソース」を表示するとできます。

変更部分でチェックするところは、

①ボタンを追加した <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ではうまく動きますので、どのブラウザで開くのかについては注意しておく必要があります。

これからさらに変更を加えようと思いますので、新しくできたら紹介します。その他にも役立ちそうなものがあればご利用ください。


記事の目次へ

PR

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

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


記事の目次へ

電子工作の記事へ