問題を出題して一定時間後に答えを表示するJavascript
こちらのページ（→こちら）のプログラムは、ボタンを押すと問題が出題されて、さらにボタンを押すとその答えが出るプログラムでしたが、ここでは、問題が出題された後に、指定の時間が経過すると自動的に答えが表示されるしています。
ここでは「setTimeout」という命令語（メソッド）を使っています。
いろいろな方法があるけれど、うまく行かない場合も出てくる
「setInterval」というメソッドがあるのでそれを使おうと試したところ、なぜか、待ち時間が不安定で思うように動いてくれませんでした。 それでここでは、「1回しか関数を呼び出さないsetTimeout」に変更して動作させています。
このように、Javascriptでは、いろいろな方法が使えるのですが、思ったように動いてくれないことがしばしば起こります。
その原因を見つけようにも、初心者の私にはわからないことも多いので、ともかく「うまく動いているようならOK」ということで進んでいっています。 だから、使えるか使えないかは自分で動かしてみて判断してください。（すみません）
setTimeout（）を使って問題と答えを表示します
ここでは、ボタンは「開始ボタン」だけにして、先のページのコードよりも少し難しそうになるように、20種類の問題と答えを用意してあり、問題を出して6秒後に答えを表示させています。
PR＊＊＊＊＊＊＊＊＊＊＊ここからがプログラムです
この漢字が書けますか？
『 』の部分を漢字にしてください。
＊＊＊＊＊＊＊＊＊＊＊
HTMLとJavascriptの部分
【HTML】
<p><strong>この漢字が書けますか？</strong><br>
『 』の部分を漢字にしてください。</p>
<form name="myKanji">
<p><input type="button" value="Pushで開始" onclick="myGou()"></p>
<p><textarea class="tyumoji" name="my1st" cols="35" rows="2"></textarea></p><br>
<p><textarea class="oomoji" name="my2nd" cols="8" rows="2" ></textarea></p><br>
</form>
【Javascript】
let myQes = new Array(20); //20ずつの問と答えの配列を用意
let myAns = new Array(20);
myQes[21]="いつも『しゅんびん』な行動を心がけなさい"
myQes[22]="するどい『きゅうかく』の持ち主だ。";
myQes[23]="彼女は比類なき『びぼう』の持ち主だ。";
myQes[24]="クジラは地上最大の『ほにゅうるい』";
myQes[25]="最大の『きき』を脱出した。";
・・・・・ 以下20個のmyQesを作る
myAns[21]="俊敏";
myAns[22]="嗅覚";
myAns[23]="美貌";
myAns[24]="哺乳類";
myAns[25]="危機";
・・・・・ 以下myQesに対応するmyAnsを作る
function myGou() {
let myAns = Math.floor(20*Math.random()+21); //21～40番を乱数で呼び出す
document.myKanji.my1st.value=myQes[myAns]; //問題を書き出す
setTimeout(myKotae , 6000); //6秒間待機
myAns2=myAns //同じ関数を2回使えないので名前を変える処理
}
function myKotae() {
document.myKanji.my2nd.value=myAns[myAns2]; //答えを書き出す
}
PR
考え方など
CSS、HTML部分は、先の内容（→こちら）とほとんど変えていません。 Javascript部分だけを示しましたが、アレンジすればいろいろ応用できそうなものですから、参考になるところはぜひ利用してください。
このコードでは、2つの textbox を作っておいて、開始ボタンを押すとそこに問題が表示され、時間が経過すると（ここでは6秒）答えが表示されます。
【Javascript】
今回追加した「setTimeout（関数 , 時間）」ですが、関数を無名関数のmyKotae（）にすると、やはり、動作がおかしくなったので関数部分をmyKotaeとししたところうまく動作しました。申し訳ありませんが、これも、理由はよくわかりません。
Javascriptの動作は自分でもよくわからない状態で、後日、理解できたところは加筆していく予定ですが、ともかく、問題なく動いてくれれば良しとしていますことをご了承ください。
次のページ（→こちら）に時間が経つと答えを消すものを作っています。参考に。
