漢字の書き問題Part3です。 ここでは、問題の答えが表示されてから一定時間が経過すると、表示されて答えが消えるようにしています。
漢字問題で、時間が経つと答えが消えるようにする
JavaScriptの基本型はこちらのページと同じで、20組の問題と答えを用意しておいて、それをランダムに表示するものです。
ここでは、クイズに答える状況を考えて、マイナーチェンジをしているのですが、その内容は後回しにして、どのようなものかを一度試してみてください。
この漢字が書けますか？
『 』の部分を漢字で書いてください。
＊＊＊＊＊＊＊＊＊＊＊
PR前のページで、同じような漢字の書き問題を2つ上げましたが、ここでは、さらに少し内容を変えて、以下のような工夫をしています
1） 今までの説明用ページの記事と異なり、JavaScriptを別のホルダー移して、HTMLと分離しました。これによって外部からコードが見えなくなりますし、いろいろなところからも呼び出せるようになります。
2） 出題が重複しにくいように50題を用意しました。（多いほうが面白いでしょう）
3） 考える時間を充分に取るために、出題と回答用で別々のボタンにしています。
4） 漢字が覚えやすいように、答えは5秒後に消えるようにして、また、何回でも答えを見ることができるようにしています。
CSS と HTML と Javascript
【CSS】 //①
.oomoji {
font-size: 70px ;
}
.tyumoji {
font-size:25px ;
}
【HTML】 //②
<form name="myKanji"> //③
<p><input type="button" value="Pushで出題"
onclick="myGou()"> 押すと新しい問題が出ます。 </p> //④
<p><textarea class="tyumoji" name="my1st"
cols="40" rows="3"></textarea></p> //⑤
<p><input type="button" value="答えを見る" onclick="myKotae()">
答えは5秒で消えます。クリックで再表示します。</p> //⑥
<p><textarea class="oomoji" name="my2nd"
cols="15" rows="2" ></textarea></p><br> //⑦
</form>
【Javascript】 //別のホルダーに置いています。
let myQes = new Array(50); //⑧
let myAns = new Array(50);
myQes[1]="私は読書が『しゅみ』です。"; //⑨
myQes[2]="いつ財布を『ぬす』まれたのかわからない。";
myQes[3]="『がいてき』の襲来に備えろ！" ;
myQes[4]="『そんけい』の眼差し" ;
・・・・・ 以下50個のmyQesを作る
myAns[1]="趣味" ;
myAns[2]="盗" ;
myAns[3]="外敵" ;
myAns[4]="尊敬" ;
・・・・・ 以下myQesに対応する50このmyAnsを作る<br><br>
function myGou() { //⑩
let myAns = Math.floor(50*Math.random()+1);
document.myKanji.my1st.value=myQes[myAns]; //⑪
myAns2=myAns;
}
function myKotae() { //⑫
document.myKanji.my2nd.value=myAns[myAns2];
setTimeout(function() { //⑬
document.myKanji.my2nd.value='' } , 5000) ;
}
PR
注意点や考え方など
この状態で問題なく動いているので「これでOK」ということにしています。
関数などは前のページ（→こちら）と同じで変更していません。 変数はわかりやすいように「my～」のようにしています。
【CSS】
①このページ用の追加のCSSで、テキストボックスに表示する文字の大きさを</head>の上に追記しています。
【HTLM】
②「my**」のように「ｍｙ」は、Javascriptの命令と間違えないように、私が勝手に決めた変数や定数です。画面を右クリックして、ソースのコードを表示させてコピーできます。
③formに「name」をつけて、JavaScriptと対応させています。
④出題用のボタンを設置。
⑤出題用のテキストエリア
⑥回答用のボタンを設置。
⑦回答用のテキストエリア
やっていることは単純で、2つのボタンと2つのtextboxを作って、そこに問と答えを表示させているだけです。
字の大きさをJavascriptで書くのはよくわからなかったので、textboxの属性をこのページ用のCSSで文字の大きさを変えていますが、これはいろいろなところで使えそうな方法ですね。
【Javascript】
⑧問題と回答用に配列を宣言しています。ここでは問題回答を50個ずつ作ります。
⑨問題と答えを［ ］数字に対応させて書いていきます。
⑩問題の作成用です。 ランダムに問題を選ぶために、ランダム関数と切り捨て処理をしています。このとき小数以下を切り捨て（floor）せずに四捨五入や切り上げをすると［51］の数字が出てくるので切り捨てするようにしましょう。
⑪「formのmyKanjiのmy1st」に、計算した「myAns」を書き込んでいます。 そして、「myAns」の値はあとでも使用するので、名前を変えた変数myAns2にしています。
⑫答えの書き出し用です。 問題のNoと同じ数字の答えを「formのmyKanjiのmy2nd」のテキストボックスに書き出します。
⑬タイマー処理です。5秒後に「formのmyKanjiのmy2nd」の値を「’’」（空白）にします。 これでJavaScript終わりですが、プログラム自体は動いていますので、回答ボタンを押すと、⑫に戻って回答を再表示しますし、問題ボタンを押すと、最初から動いて、新しい問題が表示されます。
以上ですが、
Javascriptは私自身もまだまだわかりにくくて、コードも外観もスマートさはありませんが、このように、数行のコードで簡単なプログラムが作れるというところを見ていただいて参考にしていただくと良いと思っています。
同じようなやり方で、たとえば、画像の名前を答えたりするのも面白そうですから、他のものも考えていくとアイデア次第で面白いものが簡単に作れるでしょう。
趣味でJavaScriptを学ぶ人がJavaScript全般を理解しようとするとかなりハードルが高いのですが、私のように「何かを表示する」という小さな目的に絞って学ぶと、そんなに難しくはありません。 しかしそれでも、自分の考えていることをコード化するのに2ヶ月以上かかっていますし、JavaScriptは今でも馴染めませんが、それでも結構楽しめます。
私は、このHPの内容のほとんどを下の「ワークブック」で学び、それを自分なりにアレンジしています。 こちらのページでも説明しているように、いろいろな本を読んだのですが、この本が一番ストレートにわかりましたし、とっても安価ないい本ですので、ここでも紹介しておきます。
 |
JavaScriptワークブック: ステップ30 (情報演習 36) 新品価格 |
