問題を出題して一定時間後に答えを表示する
こちらのページ（→こちら）のプログラムは、ボタンを押すと問題がでて、さらにボタンを押すと答えが出るプログラムでしたが、ここでは、指定の時間が経過すると、自動的に答えが出るようにしてみました。
ここでは「setTimeout」というメソッドを使っていますが、「setInterval」というメッソドがあるのでそれを試したのですが、なぜか待ち時間が不安定なので、「1回しか関数を呼び出さないsetTimeout」にして動作させています。
このように、Javascriptでは、いろいろな方法が使えるはずなのですが、思ったように動いてくれないことがしばしば起こります。
そして、その原因を、初心者の私には理解できないことも多いのですが、ともかく「うまく動いているようならOK」ということで進んでいっています。 だから、使えるか使えないかは自分で動かしてみて判断してください。（すみません）
ここでは、少しの変更ですが、まずボタンを開始ボタン1つにして、先のページよりも少し難しそうな20種類の問題と答えを用意して、問題を出したあと、6秒後に答えを表示しています。
PR
setTimeout（）を使って問題と答えを表示します
＊＊＊＊＊＊＊＊＊＊＊ここからがプログラムです
この漢字が書けますか？
『 』の部分を漢字にしてください。
＊＊＊＊＊＊＊＊＊＊＊
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の動作は自分でもよくわからない状態で、後日、気がついたところは加筆していく予定ですが、ともかく、動いてくれれば良しとしていますことをご了承ください。
次のページ（→こちら）に時間が経つと答えを消すものを作っています。参考に。
