htmlで書きたいのですが(javascriptとか簡単に利用できるものがあればそれも可です)、

英文の空白埋め込み問題?を画面に表示して、見た人が答えを書き込み、その答えをチェックする
ようにするにはどうしたらいいのでしょうか?

例えば、

I had a car accident yesterday morning. という音声が聞こえてきて
(音声を流す部分は別に用意します)
I had a car [ ] yesterday [ ].
というように途中に空欄(テキストボックス)を置いておくようなイメージです。

答え合わせの部分を作成するのに、参考になるホームページなどがありましたら教えてください。
よろしくお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/04/03 14:15:46
  • 終了:2006/04/03 23:21:29

ベストアンサー

id:bonlife No.3

回答回数421ベストアンサー獲得回数752006/04/03 17:40:58

ポイント75pt

シンプルなものを書いてみました。

見た目やHTMLの正しさはほとんど考慮できておりませんので、適宜修正してください。

(文字コードをUTF-8にする前提でMETAタグにてutf-8と指定しておりますので、違う文字コードにする際にはその部分も修正してください。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>簡易テストサンプル</title>
<script language="JavaScript">
<!--
function checkAll() {
	ans = ["accident","morning","just","test"]; // 回答を順に配列に設定
	correct_ans = 0;
	// テキストフィールドから取得した値と配列の値を比較
	// 一致すれば"○"を結果用のテキストフィールドにセット
	// 正答数用の変数correct_ansの値を増加させる
	// 一致しなければ文字を赤くし、結果用のテキストフィールドには"×"をセット
	for (i=0;i<ans.length;i++) {
		if(document.getElementById("q"+(i+1)).value == ans[i]) {
			document.getElementById("r"+(i+1)).value= "○";
			correct_ans++;
		} else {
			document.getElementById("q"+(i+1)).style.color = "red";
			document.getElementById("r"+(i+1)).value= "×";
		}
	}
	// 正答数と問題数が一致した場合は、メッセージを出力
	if (correct_ans == ans.length) {
		alert("全問正解です。");
	}
}
function resetEach(q_number) {
	// テキストフィールドの内容が変わった場合、文字の色を黒にする
	// 結果用テキストフィールドの内容を空にする
	document.getElementById("q"+q_number).style.color = "black";
	document.getElementById("r"+q_number).value = "";
}
//-->
</script>
</head>
<body>
<p>
<!-- 質問にはq1、q2と順にIDを設定 -->
I had a car <input type="text" size="10" id="q1" onChange="resetEach('1')" /> yesterday <input type="text" size="10" id="q2" onChange="resetEach('2')" />.<br />
This is <input type="text" size="10" id="q3" onChange="resetEach('3')" /> a <input type="text" size="10" id="q4" onChange="resetEach('4')" />.<br />
</p>
<p>
<input type="submit" value="答え合せ" onClick="checkAll()" />
</p>
<p>
<!-- 結果にはr1、r2と順にIDを設定 -->
Q1 : <input type="text" id="r1" size="1" style="text-align:center"; readonly /><br />
Q2 : <input type="text" id="r2" size="1" style="text-align:center"; readonly /><br />
Q3 : <input type="text" id="r3" size="1" style="text-align:center"; readonly /><br />
Q4 : <input type="text" id="r4" size="1" style="text-align:center"; readonly /><br />
</p>
</body>
</html>

見てもらえば分かるようにこのままではHTMLのソースに回答が丸見えになってしまっています。

JavaScript部分をtest.jsなどの外部ファイルにして、それをHTML側で呼び出すようにすれば少しはましになるかもしれません。

参考URL

参考になると幸いです。

id:sun-chan

ありがとうございます。

こんなに書いていただけるとは… あくまで

勉強したい人が勉強するために作るものなので

htmlソースに回答が見えていても問題はありません。

(試験ではないので)

あとでゆっくりやってみようと思います。

ありがとうございました。

2006/04/03 19:59:30

その他の回答(3件)

id:sainokami No.1

sainokami回答回数853ベストアンサー獲得回数452006/04/03 14:21:05

ポイント23pt

java script での条件分岐で可能です。

入力された空欄の文字列が正解なら、正解ページが読み込まれるように。

不正解なら、不正解ページが読み込まれるように。

http://www.site-cooler.com/kwl/javascript/6.htm

id:sun-chan

ありがとうございます。

これは読み込まれるページ全体が異なるのですよね?

例えば、括弧1、括弧2、括弧3は合っているけれど、括弧4は違う場合、

括弧1、括弧2、括弧3は合っているけれど、括弧4は違うよ、という表示を出すようにするには、

括弧の数を元に組み合わせを計算して、その数だけページを用意するのでしょうか?

括弧の横にあっているか合っていないかだけ

(○×)を表示する程度でも、いいかなとも思っているのですが。

また何かあれば、お願いします。

2006/04/03 14:32:42
id:sainokami No.2

sainokami回答回数853ベストアンサー獲得回数452006/04/03 14:45:35

ポイント23pt

http://iswebmag.hp.infoseek.co.jp/sample188.html

↑これを応用すれば可能だとおもいます。

id:sun-chan

ありがとうございます。

良さそうですね。ちょっとどうやるのか

考えてみます!

2006/04/03 14:48:12
id:bonlife No.3

回答回数421ベストアンサー獲得回数752006/04/03 17:40:58ここでベストアンサー

ポイント75pt

シンプルなものを書いてみました。

見た目やHTMLの正しさはほとんど考慮できておりませんので、適宜修正してください。

(文字コードをUTF-8にする前提でMETAタグにてutf-8と指定しておりますので、違う文字コードにする際にはその部分も修正してください。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>簡易テストサンプル</title>
<script language="JavaScript">
<!--
function checkAll() {
	ans = ["accident","morning","just","test"]; // 回答を順に配列に設定
	correct_ans = 0;
	// テキストフィールドから取得した値と配列の値を比較
	// 一致すれば"○"を結果用のテキストフィールドにセット
	// 正答数用の変数correct_ansの値を増加させる
	// 一致しなければ文字を赤くし、結果用のテキストフィールドには"×"をセット
	for (i=0;i<ans.length;i++) {
		if(document.getElementById("q"+(i+1)).value == ans[i]) {
			document.getElementById("r"+(i+1)).value= "○";
			correct_ans++;
		} else {
			document.getElementById("q"+(i+1)).style.color = "red";
			document.getElementById("r"+(i+1)).value= "×";
		}
	}
	// 正答数と問題数が一致した場合は、メッセージを出力
	if (correct_ans == ans.length) {
		alert("全問正解です。");
	}
}
function resetEach(q_number) {
	// テキストフィールドの内容が変わった場合、文字の色を黒にする
	// 結果用テキストフィールドの内容を空にする
	document.getElementById("q"+q_number).style.color = "black";
	document.getElementById("r"+q_number).value = "";
}
//-->
</script>
</head>
<body>
<p>
<!-- 質問にはq1、q2と順にIDを設定 -->
I had a car <input type="text" size="10" id="q1" onChange="resetEach('1')" /> yesterday <input type="text" size="10" id="q2" onChange="resetEach('2')" />.<br />
This is <input type="text" size="10" id="q3" onChange="resetEach('3')" /> a <input type="text" size="10" id="q4" onChange="resetEach('4')" />.<br />
</p>
<p>
<input type="submit" value="答え合せ" onClick="checkAll()" />
</p>
<p>
<!-- 結果にはr1、r2と順にIDを設定 -->
Q1 : <input type="text" id="r1" size="1" style="text-align:center"; readonly /><br />
Q2 : <input type="text" id="r2" size="1" style="text-align:center"; readonly /><br />
Q3 : <input type="text" id="r3" size="1" style="text-align:center"; readonly /><br />
Q4 : <input type="text" id="r4" size="1" style="text-align:center"; readonly /><br />
</p>
</body>
</html>

見てもらえば分かるようにこのままではHTMLのソースに回答が丸見えになってしまっています。

JavaScript部分をtest.jsなどの外部ファイルにして、それをHTML側で呼び出すようにすれば少しはましになるかもしれません。

参考URL

参考になると幸いです。

id:sun-chan

ありがとうございます。

こんなに書いていただけるとは… あくまで

勉強したい人が勉強するために作るものなので

htmlソースに回答が見えていても問題はありません。

(試験ではないので)

あとでゆっくりやってみようと思います。

ありがとうございました。

2006/04/03 19:59:30
id:ToMmY No.4

ToMmY回答回数656ベストアンサー獲得回数192006/04/03 17:44:28

ポイント32pt

JSなどでも可能ですが、フォームなどを使って楽に、複雑な処理が行いたい場合はperlなどを使うべきでしょう。

http://www.futomi.com/lecture/index.html

この辺のサイトを参考にしてください。

チェックにはif文を用います。

http://www.site-cooler.com/kwl/perl/

このサイトも参考になります

難易度的には同じようなものですがPHPでしたらhttp://php.s3.to/tt/index.php

こちら。

簡単に覚えておくだけでもこの先便利だと思います。JSに依存せずに書いてみてはいかがでしょうか?

id:sun-chan

ありがとうございます。

perl でもできるんですね。あまり詳しくないのですが、

興味はあるので、ご紹介のページをゆっくり

読んでみようと思います。

2006/04/03 20:00:30
  • id:bonlife
    id:ToMmYさんの回答にもあるように、本格的なことをやろうと思ったらデータの管理などの点からサーバ側の言語(Perl、PHP、Rubyなど)で処理させた方が良いです。
    (JavaScriptのみで実装する場合、クライアント側で実行する仕組み上、どうしてもユーザから見える部分にデータを全て持たなければなりません。)
    ちなみに、上記のサンプルレベルで良いのであれば、以下のようにするともっと使いやすくなると思います。
    alert("全問正解です。");
    の下に
    location.href="./test02.html";
    というような行を追記すると、全問正解の場合にのみtest02.htmlという次のページに移動させることができます。
    (これもHTMLのソースを見れば、test01.htmlで全問正解しなくてもtest02.htmlが次の問題だということが分かってしまいます。)
    これを機に、JavaScriptで出来ること、サーバ側の言語で出来ることを少しずつ勉強してみると良いかもしれないですね。
    (と偉そうなことを言っている私も日々精進したいと思います。)
  • id:sun-chan
    ありがとうございます。

    やらなきゃいけないと思いつつ、perlの本を(らくだ?)
    数冊買ってきたものの、なかなか進みません…
    text processing には perl が適していると聞いた気が
    するのですが、php も同じでしょうか?

    ぼちぼちやって行きたいと思います。(^_^;)
  • id:bonlife
    PerlもPHPも出来ることに差はほとんどないです。
    (どちらかでしかできない、ということはほとんどないです。)
    http://jp.php.net/history
    こちらを読んでいただければ分かると思いますが、PHPはPerlをベースに独自に機能追加をするかたちで進化してきた言語です。
    (だからといってPHPが新しいのか、というとそういうわけではなく、Perlも常に進化を続けています。)
    Perlの方が古くからテキスト処理に使われてきたこともあり、バッチ処理の分野ではPerlが重宝されていますが、同様の処理はPHPのCLIでも可能です。
    PerlにはCPAN(Comprehensive Perl Archive Network)、PHPにはPEAR(The PHP Extension and Application Repository)という便利なライブラリがあり、先人たちが築いてきた資産を有効活用することができます。
    また、速度面でもほとんど差はないはずです。
    (このあたりはCGIで比較するのか、mod_perl、mod_phpで比較するのか、などの条件によっても違ってくるので、人によって意見が分かれるところです。)

    個人的には、PHPの方が呼び出しが簡単なので、HTMLのみ知っている状態から始める場合、敷居が低いと思います。
    私も現在PHPの勉強中です。

    最終的には好みの問題になるでしょう。
    はてなは基本的にPerlで書かれています。
    Yahoo!はここ数年PHPを重要視しています。
    (PHPの最初の開発者はYahoo!の社員なので。)
    -http://www.itmedia.co.jp/enterprise/articles/0602/27/news020.html

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません