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

htmlで書きたいのですが(javascriptとか簡単に利用できるものがあればそれも可です)、
英文の空白埋め込み問題?を画面に表示して、見た人が答えを書き込み、その答えをチェックする
ようにするにはどうしたらいいのでしょうか?

例えば、

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

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

●質問者: sun-chan
●カテゴリ:コンピュータ インターネット
✍キーワード:accident car HTML JavaScript イメージ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● sainokami
●23ポイント

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

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

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

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

◎質問者からの返答

ありがとうございます。

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

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

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

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

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

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

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


2 ● sainokami
●23ポイント

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

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

◎質問者からの返答

ありがとうございます。

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

考えてみます!


3 ●
●75ポイント ベストアンサー

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

見た目や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

参考になると幸いです。

◎質問者からの返答

ありがとうございます。

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

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

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

(試験ではないので)

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

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


4 ● ToMmY
●32ポイント

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に依存せずに書いてみてはいかがでしょうか?

◎質問者からの返答

ありがとうございます。

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

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

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

関連質問


●質問をもっと探す●



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