No.6
- 回答日時:
>何度も質問で申し訳ないのですが、答えを複数作るのはどうしたらよいのでしょうか?
>例えば問1の答えは「1970年」または「1970」というようにして、どちらかを書いていれば正解とさせたいのですが
なるほど、複数ですね。
・・たぶん私が書いたものを写せばそのとおり動くようになるとは思うのですが、質問者様のお話を状況をお聞きする限り理解するのは難しいかも知れません。
できれば、まずなにか作ろうとする前に、チュートリアル的なサイトで初歩的な部分からしっかりトレーニングすると、何を使えば良いのかわかってくるので今後の似たような問題解決に役立つと思いますよ。
今回は、答えが複数ある、ということで、2次元配列を使って解決するのが良さそうです。
前回は、問題の数だけ答えを用意しましたが、更にひとつの問題に複数の答えを用意します。
まず、var ansの部分を書き換えます。
var ans = [ ["1問目の答えA", "1問目の答えB"], ["2問目の答え"] , ["3問目の答えA","3問目の答えB", "3問目の答えC"] ];
見た目は割とシンプルで、[]の中に、[]を作って書いていきます。
注意点として、答えがひとつでも、必ず[]でかこって下さいね。
次に、/*答えとの比較*/以下の部分に次の文を追加します。
/*答えとの比較*/
var flag = false;//正解か不正解かのフラグ。初期値は偽
for( var i=0; i < ans[num].length; i++ ) { //0~答えの要素数分ループ
if(input == ans[num][i]){ //i番目の答えと比較、正解ならばフラグを真にしてループを抜ける
flag = true;
break;
}
//不正解ならば繰り返し
}
そして、if( input == ans[num] )の部分を、if( flag )に書き換えます。
以上で複数解答にも対応することが出来ます。
スクリプトとしてはできるだけ早い段階で理解できるよう、どちらかと言えば教科書的なものになっています。
ですので、処理を追いかけれるようになるよう頑張って下さいね。
今後のアイディアとしては、直で2次元配列をスクリプトに書き込んでいくのはややスマートさにかけるので、入力しやすいフォーマットで書き込んで、ページが表示される時に解析して2次元配列に変換して実行したりとか、それができるなら別ファイルに書いておいて、Ajaxで読み込んで…とか夢がひろがりんぐですが、たぶんそう簡単にはできないので今後JavaScriptを勉強した後にトライしてみると面白いかも知れません。
babu_babooさんのスクリプトではそういったスマートさをかなり活かした粋なものになっていますから、基本的なことに追いついたら読解してみるのも良いと思いますよ。
No.5
- 回答日時:
var myReg = [
[/^1970年$|^1970$/^昭和45年$/, '1970' ],
[/^2010年$|^2010$/^平成23年$/, '2010' ]
];
function check( num ) {
var input = document.getElementById( 'a' + num ).value;
if( ! input ) return;
if( myReg[ num ][0].test( input ) )
alert("正解です");
else
alert("不正解です。答えは" + myReg[ num ][1] + "です");
}
No.4
- 回答日時:
ソースを読みました。
2点怪しいポイントがあります。
まず、ソースの最初の方にあるcheck関数の定義部分が、
>function check(1){
となっていますが、
function check(num){
でお願いします。
関数の引数は呼び出されたときに指定された値を受け取る変数を指定するものです。
function check(1){
だと、 1という数字に、"1"という値を入れなさい、という意味になってしまい、文法エラーが出てしまうのですね。
次に、条件判断、つまりifの中身です。
if(input=ans){
となっていますが、
正しくは、
if( input == ans ){
です。=だと、ただの代入になってしまい、inputにansの中身がコピーされて、それが判断されるためどんな答えでも正解になってしまいます。
私も覚えたての頃はこのミスが多かったのですが、左右の値を比較する演算子は「==」なので、間違えないよう注意してみてくださいね。
では健闘を祈ります。
丁寧な回答ありがとうございます。
何度も質問で申し訳ないのですが、答えを複数作るのはどうしたらよいのでしょうか?
例えば問1の答えは「1970年」または「1970」というようにして、どちらかを書いていれば正解とさせたいのですが
よろしければまた宜しくお願いします。
No.3
- 回答日時:
#2です。
ちょっとほそく。ぼたんの1つてまえのinputをさがして、だい2ひきすうのこたえとをひかくしてます
あと、かんけいないですが、1つまえのしつもんのかいとうは
function total(t){return eval('['+t.replace(/ /g,'+').replace(/\n/g,',')+']')}
alert( total( "1 2 3 4 5\n6 7 8 9 1\n2 3 4 5 6" ) );
こうかきたかったのに、しめきられた。
No.2
- 回答日時:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>
<form action="#">
<table border="1">
<tr>
<td>q1
<td>このスクリプトで金を儲けるつもりだ?
<td><input type="text" size="10">
<td><input type="button" value="答え合わせ" onclick="chk( this, 'yes' )">
</table>
</form>
<script type="text/javascript">
var chk = (function ( getpn ) {
return function ( e, answer ) {
do
if( !( e = getpn( e ) ) ) return;
while( 'INPUT' !== e.nodeName );
alert( e.value === answer ? '正解です': '不正解!答えは、' + answer );
};
})(
function ( node ) {
var n;
if( n = node.previousSibling ) {
while( n.hasChildNodes( ) ) n = n.lastChild; return n;
}
return node.parentNode;
});
</script>
No.1ベストアンサー
- 回答日時:
いきなり複数では難しいので、一つの問題を出題するプログラムを考えましょう。
先にHTMLの方にJavaScriptから操作できるように手を加えておきましょう。
・答えの入力フィールドのIDに「a1」と指定します。
e.g. <input type="text" id="a1">
・解答ボタンにクリック時にJavaScriptを呼び出すイベントを記入します。
e.g. <input type="button" value="答え合わせ" onclick="check(1)">
この例では、check関数に、引数「1」を渡して呼び出します。
それでは次に、JavaScriptの方です。
まず、答えのリストを持っていなければなりません。ということで、変数「ans」を用意し、答えを入れておきます。
e.g.
var ans = "答え";
次に、ボタンを押されたときに呼び出されるcheck関数を作ります。
function check(num){
return true;
}
この例では、引数をnumで受け取ります。このnumは複数になったときに使うのでしばらく登場しません。
中で処理することは、
「入力された値の取得」→「答えとの比較」→一致したとき「"正解です"と表示」、不一致のとき「"不正解です。答えは○○です"と表示」
ですね。ではスクリプトに起こしていきます。
function check(num){
/*入力された値の取得*/
var input = document.getElementById("a1").value; // ページの中からIDが"a1"であるものを探し、その要素のvalueを参照して取得
/*答えとの比較*/
if( input == ans ){
/*正解*/
alert("正解です");
} else {
/*不正解*/
alert("不正解です。答えは"+ans+"です");
}
return true;
}
これで単品の処理は終了です。
まずはここまでつくってできているか確認しましょう。次に複数に対応します。
HTMLの方では
・入力フィールドのIDを第1問目なら「a1」、第2問目なら「a2」...と設定していきます。
・ボタンの方は、onclickの中身を、1問目なら「check(1)」、2問目なら「check(2)」と設定しておきます。
次にJavaScript。
ansに答えを複数入力します。
var ans = ["1問目の答え", "2問目の答え", "3問目の答え"];
check関数を書き換えます。
修正するポイントは以下
・IDが"a1"ではなく、"a"+numのIDを探すことによって、その問題の回答フィールドを発見する
・ansが配列になったので、配列の要素を参照する。配列は、1,2,3、という数え方ではなく、0,1,2という数え方なので、numを1減らす
function check(num){
/*入力された値の取得*/
var input = document.getElementById("a"+num).value; // ページの中からIDが"a"+numであるものを探し、その要素のvalueを参照して取得。
num = num -1; //配列の参照は0からなので、1減らす
/*答えとの比較*/
if( input == ans[num] ){ //配列の参照は、配列変数名[要素番号]
/*正解*/
alert("正解です");
} else {
/*不正解*/
alert("不正解です。答えは"+ans[num]+"です");
}
return true;
}
本当は半角・全角の違い、ひらがな・カタカナの違いを吸収したりとかする処理はした方が良いのですが、内容が複雑になるので割愛します。
ということで、チャレンジ結果楽しみにしています!
回答ありがとうございます
参考にしてやってみたのですが反応ボタンを押しても反応しませんでした。
間違っているところがあれば指摘よろしくお願いします。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-type" conten="text/javascript">
<title>タイトル</title>
<script type="text/javascript">
<!--
var ans="1970年";
function check(1){
/*入力された値の取得*/
var input=document.getElementById("a1").value;//ページの中からIDが"a1"であるものを探し、その要素のvalueを参照して所得
/*答えとの比較*/
if(input=ans){
/*正解*/
alert("正解です");
}else{
/*不正解*/
alert("不正解です。答えは"+ans+"です");
}
return true;
}
//-->
</script>
</head>
<body background="wakuhaikei.gif">
<p align="center">
<form name="form">
<table border="1" bordercolor="#afeee">
<tr>
<td>
</td>
<td>
<p align="center">問題</p>
</td>
<td>
<p align="center">答え</p>
</td>
<td>
<p align="center">答え合わせ</p>
</td>
</tr>
<tr>
<td>
問1
</td>
<td>
オカヤドカリが天然記念物に指定されたのは西暦何年?
</td>
<td>
<input type="text" id="a1">
</td>
<td>
<input type="button" value="答え合わせ" onclick="check(1)">
</td>
</tr>
以下は省略させて頂きます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) 「問題も答えも画像」のクイズを簡単に作れるもの何かありませんでしょうか? 1 2022/05/30 17:29
- Java 問題作成のWebアプリの作り方を教えてください 1 2022/11/26 22:01
- その他(教育・科学・学問) クイズ! 嘘つきクイズ問題を作っています。辻褄があっているか、確認してください。 エイプリルフールに 3 2022/03/23 19:48
- Visual Basic(VBA) VBAで早押しゲームを作りたい 4 2022/05/12 13:46
- JavaScript セレクトボックスを選んで点数を出した後、4段階評価するプログラム 1 2022/07/03 07:23
- Excel(エクセル) ユーザー関数の自動計算(excel2003) 1 2023/02/06 06:46
- JavaScript ソースコードは下の共有コードサイト「張り紙」にあります。 入力フォームの javascript で 1 2022/05/11 11:01
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- その他(エンターテインメント・スポーツ) 何かのクイズ番組でやっていたのですが、ほぼ正解がわからない問題に対して、持ってる知識から推理して正解 2 2022/07/18 20:13
- その他(学校・勉強) 簡単なクイズを教えて欲しいです。 学校でレクリエーションを行うのでその時に出せるクイズ、問題を教えて 2 2022/05/14 20:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで簡単なクイズを作...
-
乱数を配列へ格納(JavaScript)
-
undefinedを表示させない方法は...
-
javascript 変数名の連結をしたい
-
【JavaScript】オブジェクト型...
-
順列生成アルゴリズムについて...
-
総当りの配列を返す関数の作成
-
React hooksが値を返して配列変...
-
jQueryのload()を使用して外部...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
idを使わずにonclickで自身の要...
-
Linux バイナリ実行できない "...
-
JavaScript window.openで開く...
-
Javaで避けるゲームを作ってい...
-
クリックすると上に開くアコー...
-
【JavaScript】数当てゲームを...
-
C#で、ContextMenuStripに動的...
-
URLの一部をコピーできるブック...
-
ASP+アクセスでのSQLコメントに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
C#テキストボックスの文字を配...
-
同じIDで定義した要素の配列を...
-
jspからjavascriptの変数引継ぎ
-
javascript 変数名の連結をしたい
-
React hooksが値を返して配列変...
-
undefinedを表示させない方法は...
-
javascriptで行を抽出したいです。
-
二次元配列の全要素の全要素を...
-
JavaScriptにおける[] とか :...
-
JavaScriptでの動的な多次元配...
-
順列生成アルゴリズムについて...
-
WSH(Jscript)でファイル一覧
-
JavaScriptからPHPに配列を渡す...
-
javascriptからphpに配列データ...
-
多次元配列から最大値を1行また...
-
textareaに入力されたデータを...
-
どうすればresponseText結果を...
-
オブジェクトから任意のプロパ...
-
フォーム入力値の重複チェック
おすすめ情報