Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.86 - 英単語の暗記


JavaScript ばかり勉強して、学校の勉強をおろそかにしてはいけません。
英単語の暗記も Webでやりましょう!?


Step テーマ
● とくになし

実行例





リスト


<script type="text/javascript"><!--
myQA = new Array(// 問題テーブル
"飛行機","plane",
"船","ship",
"汽車","train",
"車","car",
"自転車","bicycle",
"川","river",
"山","mountain",
"道路","road",
"家","house",
"スクリプト","script"
);
 
myNowCnt = 0;// 問題を出すテーブルカウンタ
myLastCnt = myQA.length / 2;// 問題の数
 
function myQues(){
myA = prompt("¥n問題 : "+myQA[myNowCnt*2],"");
if ( myA != null ){// キャンセルボタンでない?
if ( myA == myQA[myNowCnt*2+1] ){// スペル正解?
myNowCnt=(myNowCnt==myLastCnt-1)?0:myNowCnt+1;// 次の問題へ
}else{// スペル間違った
alert("はずれ! 答えは "+myQA[myNowCnt*2+1]+" です!");
}
myQues();
}
}
// --></script>
<form name="myForm">
<input type="button" value="英単語の勉強を始める" onclick="myQues()">
</form>


サンプルだけの HTMLは こちらへ

説明


[Q] こちらでJavaScriptの勉強をさせていただいています。とても、わかりやすく説明してくれているので、だいぶ分かってきました。ところで、JavaScriptばかり勉強していて、もうすぐ学校でテストだというのに、なにも勉強していません。英語の単語カードみたいなサンプルを作ってください。
[A] はぅ〜


とにかく、このサンプルの勉強はあとにして、myQA テーブルに "問題の日本語","答えの英語", の順にひたすらテストで出る単語を打ち込んでいってくださいな。
それですぐ使えます。おっと、最後だけカンマは、いりませんよ。

とりあえず、説明。。

myNowCnt に、今回出題する問題の番号が入ります。
myLastCnt は、問題の数が入ります。配列宣言した変数に、myLastCnt.length とすると、格納されたデータの数が返ってきます。
今回、日本語、英語を順に格納したので、2で割って問題の数にしています。
myNowCnt = 0;// 問題を出すテーブルカウンタ
myLastCnt = myQA.length / 2;// 問題の数
※ Arrayオブジェクトの lengthプロパティは IE3 , NS2 は対応していません。

問題出題に、prompt() を使いました。
フォームによる出題はマウス操作が面倒なので、prompt() を使って、「入力」「リターン」でサクサクと次へ進めるようにしました。
myA = prompt("¥n問題 : "+myQA[myNowCnt*2],"");
ああ、親切。(^^;

prompt() の戻り値に null が返ってきた時は、キャンセルボタンが押された場合です。この場合、お勉強の中止としました。
また、スペルミスがあった場合は 次の問題に進まず、再度、同じ問題を出すようにしました。
最後の問題が終わったら、最初から再び出題するようにしました。
if ( myA != null ){// キャンセルボタンでない?
if ( myA == myQA[myNowCnt*2+1] ){// スペル正解?
myNowCnt=(myNowCnt==myLastCnt-1)?0:myNowCnt+1;// 次の問題へ
}else{// スペル間違った
alert("はずれ! 答えは "+myQA[myNowCnt*2+1]+" です!");
}
myQues();
}


参考ステップ
Step.87 英単語のお勉強をいたしましょう その2 

Q&A


[Q] 答えの部分に日本語(全角)を使いたいのですが、うまく動きません。
[A] IEのバグ問題のようですので以下の1行を所定の場所に追加してください。

function myQues(){
myA = prompt("¥n問題 : "+myQA[myNowCnt*2],"");
if ( myA != null ){ // キャンセルボタンでない?
if (document.all)myA = unescape(escape(myA).split("%00")[0]);
if ( myA == myQA[myNowCnt*2+1] ){
回答者:ぴろあき様

Q&A


[Q] 答えを間違えた場合は再入力せずに問題が終わると得点を表示させたいのですが
[A] 以下のようになります。


<script type="text/javascript"><!--
myQA = new Array(// 問題テーブル
"飛行機","plane",
"船","ship",
"汽車","train",
"車","car",
"自転車","bicycle",
"川","river",
"山","mountain",
"道路","road",
"家","house",
"スクリプト","script"
);
 
myNowCnt = 0;// 問題を出すテーブルカウンタ
myLastCnt = myQA.length / 2;// 問題の数
myHit = 0;// 正解数のカウンタ
 
function myQues1(){
if (myNowCnt == myLastCnt){// 問題終わり?
myScore = Math.floor(myHit*100/myLastCnt);
alert("問題終了です¥n¥n"
+myLastCnt+"問中"+myHit+"問正解。点数は"+myScore+"点です。");
myNowCnt=0;
myHit=0;
}else{
myA = prompt("¥n問題 : "+myQA[myNowCnt*2],"");
if ( myA != null ){// キャンセルボタンでない?
if ( myA == myQA[myNowCnt*2+1] ){// スペル正解?
myHit++;
}
myNowCnt++;// 次の問題へ
myQues1();
}else{
alert("問題を中断しました");
myNowCnt=0;
myHit=0;
}
}
}
// --></SCRIPT>

問題数分ループして正解数を myHit にカウントしていきます。
myScore には何パーセント正解したかを小数点切捨てで計算しています。(問題数を100%とした時に正解数(myHit)は何%であるか)


 
イヌでもわかるJavaScript講座 お品書き へ戻ります