人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptで、自分で答えを入力するクイズ形式の問題を作成しています。
答えをキーボードから入力して、リターンで正解と比較して判定させています。
もし、答えが不正解の時、次に進むボタンを表示させ、一旦画面を停止させているのですが、
ここで、次に進む際、ボタンクリックでは面倒なので、リターンキーで次に
進ませたいのですが、やり方がわかりません、
ボタンを表示させた時点で、ボタンクリック以外はだめでしょうか?
もし、ダメな場合、ボタンの代わりに「次に進むにはリターン」というコメントを出して、
そこでリターン判定を行う?のでしょうか。

document.getElementById("aaa").style.visibility="visible"; //ここでボタンを表示
document.getElementById("aaa").onclick = function (){
setNextGameParam() //ボタンを押したら、次の問題へ進む
start()
}

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

http://q.hatena.ne.jp/1444790440
これの続きで良いんですよね。

今のコードがこうなってると想定。

 function key_Press(e){

 var ret = true;
 var keycode = getKEYCODE(e);
 
 document.getElementById("keycode_check").innerHTML = keycode;
 
 if(keycode == '13'){

 if (impwd == SEIKAI) { // 正解かどうかを判定
 document.getElementById("aaa").style.visibility="visible"; //ここでボタンを表示
 document.getElementById("aaa").onclick = function (){
 setNextGameParam(); //ボタンを押したら、次の問題へ進む
 start();
 };
 } 

 } else if(keycode == 8){
 ... 以下省略

ボタンが表示されてたら、次に進む処理を呼び出してあげれば良いです。

 function key_Press(e){
 ...

 if(keycode == '13'){

 if (impwd == SEIKAI) { // 正解かどうかを判定
 var btn = document.getElementById("aaa");
 if (btn.style.visibility != "visible") { // ボタンが表示されていないか?
 btn.style.visibility = "visible";
 btn.onclick = function (){
 setNextGameParam() //ボタンを押したら、次の問題へ進む
 start()
 } 
 } else { // 次に進むボタンが表示されてたら、リターンキーでも次の問題へ進む
 // ★
 setNextGameParam();
 start();
 }
 } 

 } else if(keycode == 8){
 ... 以下省略

次に進む処理を二度も書くのはアレなので、ボタンの click メソッドを呼ぶのでも良い。

 function key_Press(e){
 ...

 if(keycode == '13'){

 if (impwd == SEIKAI) { // 正解かどうかを判定
 var btn = document.getElementById("aaa");
 if (btn.style.visibility != "visible") { // ボタンが表示されていないか?
 btn.style.visibility = "visible";
 btn.onclick = function (){
 setNextGameParam(); //ボタンを押したら、次の問題へ進む
 start();
 }; 
 } else { // 次に進むボタンが表示されてたら、リターンキーでも次の問題へ進む
 // ★
 btn.click(); // 「次に進む」ボタンをクリック
 }
 } 

 } else if(keycode == 8){
 ... 以下省略

「次に進む」ボタンが表示されていたら、正解かどうかの判定をする必要もないんじゃないか、という話もある。

 function key_Press(e){
 ...

 if(keycode == '13'){

 // ★正解判定の前にリターンキーで次に行くかどうか判定しちゃう
 // 次に進むボタンが表示されてたら、リターンキーでも次の問題へ進む
 var btn = document.getElementById("aaa");
 if (btn.style.visibility != "visible") {
 btn.click();
 }

 if (impwd == SEIKAI) { // 正解かどうかを判定
 btn.style.visibility = "visible";
 btn.onclick = function () {
 setNextGameParam() //ボタンを押したら、次の問題へ進む
 start()
 }; 

 }

 } else if(keycode == 8){
 ... 以下省略

kajironpuさんのコメント
ありがとうございます。さっそく3番め(一番下のコードです)の方法を試してみましたが、 btn.click(); のところは、どういう意味なのでしょうか? btn.onclick = function () { 、、、、、を呼び出しているのでしょうか? 単語を入力してリターンを押すと、正解したとき、次の問題へ進むのボタンは表示されますが 正解判定の前に、リターンを押して、どんどん先に進む? という意味なのでしょうか? 現時点では、最初1個目の問題は入力して正解すると、ボタンが表示されますが、 リターンを押しても変化しないため、クリックすると次の設問へ進みますが、 単語を入力してリターンを押すと、正解判定なしに、どんどんリターンで先に進んでしまいました。

a-kuma3さんのコメント
>> btn.click(); のところは、どういう意味なのでしょうか? btn.onclick = function () { 、、、、、を呼び出しているのでしょうか? << そうです。 btn.click() は、ボタンをクリックしたのと同じことを javascript でやるということです。 >> 現時点では、最初1個目の問題は入力して正解すると、ボタンが表示されますが、 リターンを押しても変化しないため、クリックすると次の設問へ進みますが、 単語を入力してリターンを押すと、正解判定なしに、どんどんリターンで先に進んでしまいました。 << あ、「次に進む」ボタンを押したときって、ページがリロードされるんじゃないんでしたっけ。 だったら、3番目はダメだなあ。 正解の判定は毎回しなきゃいけないか。 全体のコードが分からないので質問ですけれど、1問目に正解して 2問目が表示されたときには、どういうふうに動いてほしいんでしょう。 1問目は、すんなり正解したとして 2回リターンキーを押さないと次に進めないようにしたいんですよね。 2問目は「次に進む」ボタンが表示されたままだと思いますけれど、正解を入力してボタンをクリックしたら、すぐ次に進むんでしょうか。 それともいったん止まる? 2番目のコードは、毎回 正解かどうかの判定はしているので、2問目からはリターンキーを押すと正解だったら、次に次に、と進んでいくと思います。

kajironpuさんのコメント
ありがとうございます。最初、正解したとき次に進むボタンを表示していたのですが、毎回マウスでクリックするのは面倒なので、そのままリターンを次の問題に進むようにしたいと考えました。しかし、よく考えると、別に正解のボタンを出す必要はなく、それなら、リターンを押して、正解の判定をして、次の問題へ進むようにすればいいですよね。しかし、正解の時は、一応、画面に正解の答えや解説などのコメントを表示させたいので、次の問題へ進む前に、一旦、画面を停止させたいと考えています。 その場合は、flagを立てるなどのやり方がいいのでしょうか?(例えば、正解の時だけ、フラグを立てて、そのフラグONの状態の時、なおかつリターンを押したら次に進むとか?)

a-kuma3さんのコメント
>> その場合は、flagを立てるなどのやり方がいいのでしょうか?(例えば、正解の時だけ、フラグを立てて、そのフラグONの状態の時、なおかつリターンを押したら次に進むとか?) << それで良いと思います。 http://q.hatena.ne.jp/1443492042#a1251924 これと同じノリで、キーコードがリターンキーのときに処理をすれば良いと思います。

kajironpuさんのコメント
ありがとうございます。 判定後に、画面の一時停止は、フラグを良く使うんですね。 何とかうまくいきました。 ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ