急いでいます！

jqueryを使ってのタイピングゲームで外部ファイルから問題を作りたい。

解決済

質問者：usui-2015
質問日時：2017/01/27 00:41
回答数：2件

前にjqueryを使ってのタイピングゲームで質問をしました。今回は、以
前の出題を配列からでは無くて外部ファイルから出題を作りたいのです
が。方法が良く分かりません。

現在のhtmlとjavascriptは下記の様になっています。
htmlの内容。
<HTML>
<HEAD>
<TITLE>Typing Game</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
<script src="01.js"></script>
</HEAD>
<BODY>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
</BODY>
</HTML>

01.jsの内容
$(function(){
var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];
var q_count=0;
var q=questions[q_count];
$('#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');
$('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{
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');
}
});
});

ここで、questionsの配列を外部ファイルからの処理に変更をしたいの
ですが。方法が分かりません。01.jsのどこを変更したら良いのでしょ
うか。

宜しく回答願います。

回答を頂いた下記とは、
もしも、データ部分だけを独立したファイルにしたいという意味であれば、その部分だけ別ファイルにしておいてscriptタグで別に読み込むのが、ほとんどご呈示のままで済むので簡単でしょう。

<script src="01.txt"></script>
として、01.txtに下記の内容を入れると言う事でしょうか。
確かにこちらの方が簡単ですね。理解しました。

これは、これとしてgetJSONの場合のコードを例示をお願いします。

var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];

補足日時：2017/01/27 12:26
通報する

通報する

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

質問の本文を隠す

回答 (2件)

参考程度に

No.2

回答者： fujillin
回答日時：2017/01/27 13:32

ANo1です。

＞これは、これとしてgetJSONの場合のコードを例示をお願いします。
文章だけではわからない可能性を考慮して、参考サイトを提示してあります。
リンク先のページに解説及び具体例も示されています。
ここは英語サイトですが、jQueryの配布サイトなので、情報量も豊富な上に内容的にも最も正確といえます。

もしも、日本語での解説がお望みなら、適当なキーで検索をすれば、簡単に見つかることと思います。
一方で、あくまでも上記サイトがその発信元であり、正確であることはお忘れなく。
紹介したページの周辺を調べてみれば、テキストを読み込んで変換する方法等もわかることと思います。（こちらに関しては、そのままの例示は無いと思いますが…）

＞ローマ字だけ練習しても漢字としての速さは望むべきも
＞有りません。
ひらがな入力の場合でも、漢字に関しては漢字変換をするものと思いますが、その場合はどうするおつもりなのでしょうね？
他で文章を作成しておいて、コピペとか？

- 0
- 件

通報する

この回答へのお礼

目標としているのは話者に近い速度でのタイピング速度を目指していま
す。変換入力などのまどろっこしい方法での打鍵練習は行なっていませ
ん。

昔、今の様にワープロなる物が一切無かった頃の産物です。当時は、人
が全ての漢字を手で暗記をしていました。これが漢直ですが。私は
tt-codeを使っています。

変換入力は使ったとしても直接に平仮名を入力しての変換入力です。決
してローマ字変換入力では有りません。変換入力はtt-codeはgoogle日
本語入力でローマ字変換テーブルをカスタマイズすれば普通に漢字直接
入力が出来ます。

私は変換入力はしないで殆どの漢字は2タッチで入力しています。ここ
での漢字タイプの練習は全て変換入力などはしなくて。全てが2タッチ
の漢直入力です。

この様なタイプ練習ゲームと言うのは、中々有りません。だから、自分
で作るしか無かったのですが。然し、私にその知識が無い物ですから。
苦労している所です。

この場合のquestionsに入れる所のサンプルのjqueryのgetJSONのコード
を例示してほしいのですが。宜しく、お願いします。

通報する

お礼日時：2017/01/27 13:58

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2017/01/27 11:08

こんにちは

＞questionsの配列を外部ファイルからの処理に変更を
＞したいのですが。方法が分かりません。
ご提示の「01.js」は外部ファイルなので、すでにできているのではないでしょうか？
もしも、データ部分だけを独立したファイルにしたいという意味であれば、その部分だけ別ファイルにしておいてscriptタグで別に読み込むのが、ほとんどご呈示のままで済むので簡単でしょう。

あるいは、jQueryを利用なさっているので、データのみをjsonとしてgetJSON()などで読み込むことも可能です。
http://api.jquery.com/jQuery.getJSON/
（非同期処理になるので、処理順序に少し注意が必要です）
jsonに限らずテキストなら読めるので、CSVや独自の書式でも読み込むことは可能ですが、変換処理が必要になってくると思います。

ところで、作成なさっているものは「ひらがな入力モードでのひらがなタイプ練習用」専用なのでしょうか？
keyupで1文字ずつテストしているようなので、ローマ字入力の場合や漢字混じり文の場合はこのままの仕組みだとうまくいかないのではないかと思いますが・・・？

- 0
- 件

通報する

この回答へのお礼

このタイピングゲームは日本語専用にしています。それ以外は考慮して
いません。タイピングゲームは他にも有りますが。殆どがローマ字の漢
字を全く考慮はしていません。

実際問題は実務ではローマ字だけでは英語圏の仕事でも無い限りは余り
タイピングをローマ字だけ練習しても漢字としての速さは望むべきも有
りません。

その為に作りました。この手のタイピングゲームは余り有りません。
01.jsの中に有る配列をだらだらと記述をするのでは無くて別ファイル
として保存をしていて、プログラムとは切り離して問題は問題として管
理をしたかった物ですから。

現状は問題の編集はプログラムその物の編集になるのでそれを避けるの
が目的です。

回答の中に有った下記とは具体的にそのコードを示してもらえないで
しょうか。

もしも、データ部分だけを独立したファイルにしたいという意味であれ
ば、その部分だけ別ファイルにしておいてscriptタグで別に読み込むの
が、ほとんどご呈示のままで済むので簡単でしょう。

上に述べられている事が分かりません。例えば問題が01.txt場合は、
<script src='01.txt'></script>
と言う事でしょうか。

この辺の所の具体的なコードを教えて下さい。宜しくお願いします。