漢字の問題を出題するJavascriptプログラム1
私のJavascriptを使う目的は、HPのサイドメニューにちょっとしたガジェットのようなものを作ることを考えていますが、漢字問題を出して答えを表示させる方法は、いろいろなところで応用できそうです。 ここでは、
1）ボタンを押すと問題がでて、別のボタンを押すと回答が出るようにする
2）問題と回答は、読みやすいような大きな字にする
ということで作ったのが次のプログラムです。 ここでは20種類の問題と答えを用意しましたが、多いほど面白いでしょう。 また、これと同じ方法でいろいろなクイズにも対応できますね。
PR
問題と回答は textbox を使って表示させています
＊＊＊＊＊＊＊＊＊＊＊ここからがプログラムです
この漢字が書けますか？
『 』の部分を漢字にしてください。
＊＊＊＊＊＊＊＊＊＊＊
CSS と HTML と Javascript
【CSS】 //</head>の直上に書いています。
.oomoji {
font-size: 50px ;
}
.tyumoji {
font-size:20px ;
}
【HTML】
<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><input type="button" value="答えを見る" onclick="myKotae()"></p>
<p><textarea class="oomoji" name="my2nd" cols="8" rows="2" ></textarea></p><br>
</form>
【Javascript】
let myQes = new Array(20); //①20ずつの配列を用意して、Math.randomで乱数をつくり整数化して表示させる。
let myAns = new Array(20);
myQes[1]="私は読書が『しゅみ』です。";
myQes[2]="いつ財布を『ぬす』まれたのかわからない。";
myQes[3]="『がいてき』の襲来に備えろ！" ;
myQes[4]="『そんけい』の眼差し" ;
・・・・・ 以下20個のmyQesを作る
myAns[1]="趣味" ;
myAns[2]="盗" ;
myAns[3]="外敵" ;
myAns[4]="尊敬" ;
・・・・・ 以下myQesに対応するmyAnsを作る
function myGou() {
let myAns = Math.floor(20*Math.random()+1);
document.myKanji.my1st.value=myQes[myAns];
myAns2=myAns
}
function myKotae() {
document.myKanji.my2nd.value=myAns[myAns2];
}
PR
考え方など
いろいろ試行錯誤をして動いてくれました。 コードなど完璧ではありませんが、アレンジするといろいろ応用できそうです。参考になればぜひ利用してください。
【CSS】
textboxに表示する文字を変えるためのもので、</head>の上に追記しています。
【HTLM】
「my**」のように「ｍｙ」は、Javascriptの命令と間違えないように、私が勝手に決めた変数や定数です。
やっていることは、2つのボタンと2つのtextboxを作って、そこに問と答えを表示させているだけです。
字の大きさをJavascriptで書くのはよくわからなかったので、textboxの属性で文字の大きさを変えていますが、これは外でも使えそうな方法ですね。
【Javascript】
問題文は20個で、後日に入れ替えやすいように配列にしています。
また、Javascriptの部分は簡単なもので、formに書いたtextbox部分に、ランダム関数で決めたvalueを表示させているだけです。
問題がランダムに出るように、Math.random()で1～20の数字を出して、同じ番号で対になった「問と答え」を別々のtextboxに表示させています。
このとき、乱数で作ったmyAnsは2回使えなかったので、（他にやり方もあるでしょうが） ここでは答え用に myAns を myAns2 に変えて「答え」を表示させました。
Javascriptは私にはまだまだわかりにくく、スマートさは欠けるものの、ともかく、動いてくれれば良しとしています。
このような考え方を使って、画像の名前を答えたりするのも面白そうです。 同じ漢字問題を使った他のものもありますので参考に。
アレンジ1：一定時間が経過すると答えが表示される（→こちら）
アレンジ2：表示させた答えを一定時間後に消す（→こちら）
