アプリ版：「スタンプのみでお礼する」機能のリリースについて

急いでいます！

javascriptのタイピングゲームでクリアした後の出題の処理が分からない

解決済

  • 質問者：usui-2015
  • 質問日時：
  • 回答数：2件

前回質問をしたものです。前回はお世話になりました。
下記のhtmlでは、1回のゲームで終わりとなります。これをファイルか
ら読んでファイルが尽きた所で終了にしたいのですが。現在は下記の
htmlです。
<HTML>
<HEAD>
<TITLE>Typing Game</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
<script>
$(function(){
var q="あいうえお";
$('#q').html(q);
$('input[type=text][name=a]').on('keyup',function(){
var v=$(this).val()
var reg=new RegExp('^'+v);
$('#q').html(q);
if(v==""){
$('#res').html('');
}else if(q==v){
$(this).data('pre',v);
$('#res').html('complete');
}else if(q.match(reg)){
$(this).data('pre',v);
$('#res').html('ok');
}else{
if(q.length>=v.length) $('#q').html(q.substr(0,v.length-1)+"<span style='color:red;font-weight:bold'>"+q.substr(v.length-1,1)+"</span>"+q.substr(v.length));
$(this).val($(this).data('pre'));
$('#res').html('ng');
}
});
});
</script>
</HEAD>
<BODY>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
</BODY>
</HTML>


javascriptのタイピングゲームでクリアした後の次の出題の処理が分か
らない。

今のは出題を変数に固定をしているが。これをファイルから出題をする
所の処理が分からない。

completeを表示した後の処理をどの様にしたら新たなゲームの開始とな
るのかその時のコードを回答願います。

宜しくお願いします。

質問者からの補足コメント

  • うーん・・・

    続きを送ります。
    $('input[type=button][value="次へ"]').on('click',function(){
    if(questions.length>q_count){
    var q=questions[q_count];
    $('#q').html(q);
    q_count++;
    }else{
    $('#q').html('**終了しました**');
    $(this).prop('disabled',true);
    }
    }).click();
    });
    </script></HEAD>

    もう1回送ります。

    No.1の回答に寄せられた補足コメントです。 補足日時：2017/01/26 14:56
    通報する

  • うーん・・・

    続きです。これで終わりです。
    <BODY>
    <div id="q"></div>
    <input type="text" name="a" style="width:20em;">
    <div id="res"></div>
    <input type="button" value="次へ"></BODY>
    </HTML>

      補足日時：2017/01/26 14:59
    通報する

  • うーん・・・

    htmlの文が長くなったので<script src="01.js"></script>
    01.jsは下記。
    var questions=[
    "あいうえお",
    "かきくけこ",
    "さしすせそ",
    "たちつてと",
    ];
    $(function(){
    var q_count=0;
    $('input[type=button][value="次へ"]').on('click',function(){
    if(questions.length>q_count){
    var q=questions[q_count];
    $('#q').html(q);
    q_count++;
    }else{
    $('#q').html('**終了しました**');
    $(this).prop('disabled',true);
    }
    }).click();
    });

      補足日時：2017/01/26 17:33
    通報する

  • うーん・・・

    01.jsの$('input[type=button][value="次へ"]').on('click',function(){
    は次へのボタンをクリックした時の動作を定義している。だから、この
    01.jsではボタンをクリックしていなければ質問の領域には何も表示は
    出ない筈ですが。

    実際は、あいうえおと表示をしています。これは、何故でしょうか。私
    は、一切の質問の領域には表示されないと思ったのですが。

    済みません。教えて下さい。

      補足日時：2017/01/26 17:40
    通報する

  • うーん・・・

    01.jsを下記の様に変更したら一部不具合は有りますが動くのは動きます。
    var questions=[
    "あいうえお",
    "かきくけこ",
    "さしすせそ",
    "たちつてと",
    ];

    再度送ります。

      補足日時：2017/01/26 21:08
    通報する

  • うーん・・・

    $(function(){
    var q_count=0;
    q=questions[q_count];
    $('input[type=text][name=a]').on('keyup',function(){
    var v=$(this).val()
    var reg=new RegExp('^'+v);
    $('#q').html(q);
    if(v==""){
    $('#res').html('');

      補足日時：2017/01/26 21:11
    通報する

  • うーん・・・

    }else if(q==v){
    $(this).data('pre',v);
    $('#res').html('complete');
    $('input[type=text][name=a]').val('');
    ++q_count;
    if(q_count>3){
    alert("end job");
    }
    q=questions[q_count];
    $('#q').html(q);
    }else if(q.match(reg)){
    $(this).data('pre',v);
    $('#res').html('ok');
    }else{

      補足日時：2017/01/26 21:13
    通報する

  • if(q.length>=v.length) $('#q').html(q.substr(0,v.length-1)+"<span style='color:red;font-weight:bold'>"+q.substr(v.length-1,1)+"</span>"+q.substr(v.length));
    $(this).val($(this).data('pre'));
    $('#res').html('ng');
    }
    });

      補足日時：2017/01/26 21:14
    通報する

  • うーん・・・

    $('input[type=button][value="次へ"]').on('click',function(){
    if(questions.length>q_count){
    var q=questions[q_count];
    $('#q').html(q);
    q_count++;
    }else{
    $('#q').html('**終了しました**');
    $(this).prop('disabled',true);
    }
    }).click();
    });
    上記で動くのは動きますが。あいうえおを終了すると、いきなり次はさしすせそになります。また、
    $('input[type=button][value="次へ"]').on('click',function(){は使っていないので削除すると動きません。動かない理由が分かりません。

      補足日時：2017/01/26 21:18
    通報する

  • うーん・・・

    済みません。補足を使イキってしまったので。一旦終了させます。
    有難う御座いました。

    再度質問します。

      補足日時：2017/01/26 21:20
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： yambejp
  • 回答日時：

一点確認



ttpのところhttpになおしても同じでしょうか？
（へんなリンクになるので書き換えちゃったんですけど）
    • good
    • 0
    • 件
通報する
この回答へのお礼

うーん・・・

有難う御座います。ttpをhttpに直してみましたが同じでした。

実行すると、質問と回答とレスポンスの所が表示されます。

然し、最初の一行の「あいうえお」は正常に動いていますが。然し、以
前に入力した「あいうえお」は残っています。この時に"complete"と表
示しています。

それで、edit boxの内容を消してから「次へ」のボタンをクリックして
「かきくけこ」を表示させてからedit boxに最初の「か」を入力したら
直に質問が「あいうえお」に変更になります。

多分に私のソースに問題が有ると思うのですが。混ぜた時におかしく
なっていると思いますが。おかしい所が分かりません。よろしくお願い
します。

通報する
お礼日時：2017/01/26 15:22

No.1

  • 回答者： yambejp
  • 回答日時：

前回ajaxでとお伝えしましたが。

最初から問題文をたくさん用意しておけば
ajaxで取りに行く必要はなかったですね
かりにcompleteの際に「次へ」ボタンで誘導として、こんな感じ
前回書いたものと合体は一度ご自身で試してみてください

<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];
$(function(){
var q_count=0;
$('input[type=button][value="次へ"]').on('click',function(){
if(questions.length>q_count){
var q=questions[q_count];
$('#q').html(q);
q_count++;
}else{
$('#q').html('**終了しました**');
$(this).prop('disabled',true);
}
}).click();
});
</script>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
<input type="button" value="次へ">
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難う御座います。
下記のhtmlで上手く動きません。

htmlの全文は容量制限の為に少出しに出します。
以下、何回に分けて出します。
<HTML>
<HEAD>
<TITLE>Typing Game</TITLE>
<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];
$(function(){
var q_count=0;
var q="あいうえお";
$('#q').html(q);

$('input[type=text][name=a]').on('keyup',function(){
var v=$(this).val()
var reg=new RegExp('^'+v);
$('#q').html(q);
if(v==""){
$('#res').html('');
}else if(q==v){
$(this).data('pre',v);
$('#res').html('complete');
}else if(q.match(reg)){
$(this).data('pre',v);
$('#res').html('ok');
}else{
if(q.length>=v.length) $('#q').html(q.substr(0,v.length-1)+"<span style='color:red;font-weight:bold'>"+q.substr(v.length-1,1)+"</span>"+q.substr(v.length));
$(this).val($(this).data('pre'));
$('#res').html('ng');
}
});

残りの部分は、次回に送ります。

通報する
お礼日時：2017/01/26 14:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報