▲▲JavaScriptに詳しい人見てください▲▲

質問

一度に出題される10問が全て異なる問題になるような計算練習プログラムをつくる課題がでました＞＜
・ 問題作成時，正解だけではなく問題も保存するようにする． （保存のしかたにはさまざま形がある．どのような形でもよい．）
・ 新たに問題を作成したとき，保存されている「既に存在している (出題されている) 問題」と比較し， 同じものがあれば (新しいものになるまで) 作り直す．
というヒントがあります・・

一度書いてみましたが・・

<title>計算練習プログラム(3)</title>

<h1>計算練習プログラム (3)</h1>
<form name="f">
<table border>
<tr><td>番号</td><td>問題</td><td>解答</td><td>正誤</td></tr>

<script type="text/javascript">
<!--
// 変数・関数の定義．
var i, n, m;
n = new Array(11); m = new Array(11);
var questions = new Array(); //問題の組み合わせを記録する

function myRandom(n) {
return Math.floor(Math.random() * n);
}
for(i=1; i<=10; i++){

do {
n[i] = myRandom(10) + 1;
m[i] = myRandom(10) + 1;
}while( questionCheck(n[i],m[i]) )

document.writeln('<tr><td>' + i + '</td><td>' + n[i] + ' + ' + m[i] + ' =</td>');
document.writeln(' <td><input type="text" name="a' + i + '" size="3"></td>');
document.writeln(' <td><input type="text" name="c' + i + '" size="3" readonly></td></tr>');
}
function check() {
var i, ok=0, ng=0; // i: for の制御変数, ok: 正答数, ng: 誤答数．
for (i=1; i<=10; i++) {

if (Number(document.f.elements["a" + i].value) == n[i]+m[i]) {
document.f.elements["c" + i].value = "○";
ok++;
} else {
document.f.elements["c" + i].value = "×";
ng++;
}
}
document.f.ok.value = ok;
document.f.ng.value = ng;
}

function questionCheck(n,m) { //問題が被っていたらtrueを返す
var i; //i:ループ用
var mn = ""+n+m; //mn:nとmを文字列にしたもの
for(i=0;questions[i]!==undefined;i++) {
if(mn == questions[i]) { //問題が被ったら
return true;
}
}
questions[i] = mn;
return false;
}
// -->

</script>

</table>
<input type="button" value="答え合わせ"
onclick="check();"> <!-- イベントハンドラ check() を呼び出す．-->
正答数：<input type="text" name="ok" size="3" readonly>
誤答数：<input type="text" name="ng" size="3" readonly>
</form>

先生からのコメントは
＞一応できていますが，せっかく，n, m を配列にして，問題の数値を保存するようにしたのに，別途 questions を用意して，そちらを使うようにしているので，ややちぐはぐな印象を受けます．
ということでした・・

n, m を配列にして、問題の数値を保存するようにして、そのあとどうしたらいいのでしょうか

よろしくお願い致しますっ

回答No.2

babu_baboo · ベストアンサー

そんなにくわしくないれべるですが、おなじようなミスをおかしたことがあるので。

HTML5 なのか、そうでないのかにより、あまかったりきびしかったり。

form 要素には、action 属性が必須。（HTML5なら略可）
その name 属性は、そろそろ id へ。

table 要素の border は？(HTML5ならさらにだめ）

<tr><td>番号</td><td>問題</td><td>解答</td><td>正誤</td></tr>
意味合いからすると、th 要素がふさわしいのでは？

table 要素の中に、script 要素が出現してはだめ。

script要素の中に、"</" がふくまれるとだめなときがある。

グローバル変数の使用は、極力控えましょう。

document.f.elements
これは、
document.forms[～].elements
とかにしましょう（.item(n)まで必要か？）

questions[i]!==undefined
undefined は、書き換えることができます。強固なものにするために判定は
('undefined' !== typeof questions[i])

<input type="button" value="答え合わせ"～
の、input 要素は、インライン要素なので、ブロック要素で囲みましょう
(HTML5ならOK)

イベントハンドラの第１引数は、イベントオブジェクトと決まっています。なので、
onclick="check(event);"
のようしましょう。
呼ばれた側で以下のようにすると、必要なものを得ることができます。

function check (event) {
var inp = event.target || event.srcElement; //これでイベントの発生した要素が拾える
var doc = inp.ownerDocument; // document の得かた
var form = inp.form; // form 要素の取得
}

HTML 4.01 でイベント属性を用いるならば、
必ず HTTP ヘッダで Content-Script-Type を指定しなければなりません
<meta http-equiv="Content-Script-Type" content="text/javascript">
でも、HTML5では、不要。

きっとあなたの先生は、気づいているとおもいますが・・・。

（関係のないことですが、質問のタイトルは、どのような質問なのか一目で判ると助かる。）
（また質問の本質からずれた）

回答No.1

dscripty

このロジック、フローチャート描いたり、箇条書きしたりして、案を練って無いでしょう。

行き当たりばったり感、出まくりだよ。

モーストアンバリアブルライン(MUL)はこれ！

「var mn = ""+n+m; //mn:nとmを文字列にしたもの」

比較のためだけに数字を文字列に変換してるとこと。

あと、今回は、1～10 の整数だから成功してるけど、1～11 の整数なら、『1+11』と『11+1』の区別がつかないよ？

せっかく questions って名前をつけたんだから、問題をそのまま保存して、問題文を表示するところで、再利用しちゃえば？

var mn = n + '+' + m; //mn:n+mという文字列

出力部分は

「document.writeln('<tr><td>' + i + '</td><td>' + n[i] + ' + ' + m[i] + ' =</ td>');」

の代わりに、

document.writeln('<tr><td>' + i + '</td><td>' + questions[i] + ' =</ td>');

とする。

まだまだ、きもちわるいところ、多数で、ロジックの練り直しから始めたほうがいいけど、あとは、先生を信じて委ねることにするね！