遊べるJavaScript入門ロゴ

問題を出題して一定時間後に答えを表示する

こちらのページ(→こちら)のプログラムは、ボタンを押すと問題がでて、さらにボタンを押すと答えが出るプログラムでしたが、ここでは、指定の時間が経過すると、自動的に答えが出るようにしてみました。

ここでは「setTimeout」というメソッドを使っていますが、「setInterval」という標準的なメッソドがあるのでそれを試したのですが、なぜか待ち時間が不安定なので、「1回しか関数を呼び出さないsetTimeout」にして動作させています。

このように、Javascriptでは、いろいろな方法が使えるはずなのですが、思ったように動いてくれないことがしばしば起こります。 

そして、その原因を、初心者の私には理解できないことも多いのですが、ともかく「うまく動いているようならOK」ということで進んでいっています。 だから、使えるか使えないかは自分で動かしてみて判断してください。(すみません)

ここでは、少しの変更ですが、まずボタンを開始ボタン1つにして、先のページよりも少し難しそうな20種類の問題と答えを用意して、問題を出したあと、6秒後に答えを表示しています。

PR


setTimeout()を使って問題と答えを表示します

***********ここからがプログラムです

この漢字が書けますか?
 『 』の部分を漢字にしてください。

6秒後に答えが出ます


ボタンを押すと、新しい問題が出ます。

***********

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の動作は自分でもよくわからない状態で、後日、気がついたところは加筆していく予定ですが、ともかく、動いてくれれば良しとしていますことをご了承ください。


記事の目次へ


PR

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

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


記事の目次へ

電子工作の記事の目次へ