次のような問題をWeb上でできるようしたいのですが、むずかしいプログラムを組まないとできないのでしょうか。
問題
次の語を並び替えて正しい英文を作りなさい。
hand a pen I in my have
1 2 3 4 5 6
私は手にペンを持っています。
[ ]
ーーーーーーーーーーーーーーーーーーーーーーーー
昔、Basic でプログラムを組んでいた時は、数字を1つずつinput するたびに、単語が[ ]の中に順番に並ぶようにしていました。
(3) (6) (2) (4) (5) (1)
カーソルを単語の上でクリックするだけで、その単語が[ ]に並べば理想的です。
数字のinput だけでもかまいません。英文を打ち込むよりは簡便ですから。
Windows になってから、プログラムのことはまったくわかりません。
よろしくお願いします。
No.4ベストアンサー
- 回答日時:
>単語間隔を…
枠線や余白などは
CSS(カスケーディングスタイルシート)というもので装飾しています。
余白を調整するにはmarginの設定を工夫してみてください。
http://chaichan.web.infoseek.co.jp/src/cssmain.htm
前回のソースコードの初頭部分にあります。
.word {
font-family:monospace;
margin:0.2em; /* ←ココ */
padding:0.1em 0.2em;
border:solid 1px #ccc;
cursor:pointer;
}
steel_gray様
いつもいつも適切な回答をすばやくしていただき感謝申し上げます。
margin:0.2em; /* ←ココ */
うまくいきました。
昨日も書店でjava script の本をいろいろ見ましたが、いずれにしてもかなりまとまった学習をしなければなりませんね。
今は仕事をたくさんかかえているのと英語の勉強で忙しくしていますので、少しずつでも学習していきたいと思っています。
並び替えの問題もデータ入力しなければなりません。
ホームページビルダー11では記述式と穴埋め問題作成機能がついていると書かれていました。成績評価も。
私の浸かっているのがホームページビルダー6.5ですから、どんどんと進歩しています。
また、お尋ねすることが起きるかもしれませんが、ひとまず御礼して区切りにさせていただきます。
長大なコードと詳しい注釈を作っていただいて本当にありがとうございました。ご親切に厚く感謝申し上げます。
No.3
- 回答日時:
>(1)単語を2つぐらい余分に表示することは可能でしょうか。
前は全ての単語を選び終わった時に自動的に正解か判定していますが、
単語が余った状態で判定をするには、回答者に答え合わせの為のボタンを押してもらう事になります。
(2)正解の時に、ピンポンと鳴るようにできるでしょうか。
音関係は全くの素人です。わかりません。
(3)教えていただいたプログラムを理解したくなりました。
初心者向けの本をご存知でしたら紹介していただけませんか。
webなら
http://chaichan.web.infoseek.co.jp/src/2ndthema. …
このあたりでしょうか。
書籍は滅多に買わないのでよくわかりません。
以下、(1)を取り入れたコードです。
<html>
<head>
<title></title>
<style type="text/css">
#article div{
margin:1em 0;
padding:0 1em;
border:solid 1px #000;
}
.word {
font-family:monospace;
margin:0.2em;
padding:0.1em 0.2em;
border:solid 1px #ccc;
cursor:pointer;
}
</style>
<script type="text/javascript">
// 問題 行末のカンマに気をつけて行を足していけば問題を増やせます。
var q = new Array(
// 訳文、正解の単語数、単語の羅列(ダミーを含める場合は正解の後に))
['私は手にペンを持っています', 6 , 'I','have','a pen','in','my','hand','a pencil','you'],
['これは微妙な問題です', 4 , 'This','is','a delicate','proposition','It\'s'] // 「'」 を書く場合\を前に付ける
);
// 初期化
function init(){
// templateをヒナ型として、問題部分を表示する
var article = document.getElementById('article');
var Template = article.removeChild(document.getElementById('template'));
for(var i=0;i<q.length;) {
var text = q[i].shift();
var wQcount = q[i].shift();
var wQ = randArray(q[i]);
q[i].unshift(wQcount);
var wArea = Template.cloneNode(true);
wArea.getElementsByTagName('input')[0].value = '';
wArea.getElementsByTagName('p')[0].appendChild(document.createTextNode(text));
var qArea = wArea.getElementsByTagName('p')[1];
for(var j=0;j<wQ.length;j++) {
var word = document.createElement('span');
word.className = 'word';
word.onclick = function(){wordClick(this)};
word.onmouseover = function(){this.style.backgroundColor ='#fcc'};
word.onmouseout = function(){this.style.backgroundColor =''};
word.appendChild(document.createTextNode(wQ[j]));
qArea.appendChild(word);
}
wArea.id='Q'+ ++i;
document.getElementById('article').appendChild(wArea);
}
}
//単語リストをランダムに並び替える関数
function randArray(oq) {
var result = new Array;
while(oq.length){
var r = parseInt(Math.random() * oq.length);
result.push(oq.slice(r,r+1));
oq = oq.slice(0,r).concat(oq.slice(r+1,oq.length+1));
}
return result;
}
//単語をクリックした時の関数
function wordClick(O){
//クリックした単語を、'非表示'にし、答え欄に追加。
O.style.visibility = 'hidden';
var Ans = O.parentNode.parentNode.getElementsByTagName('input')[0];
Ans.value += O.innerHTML + ' ';
}
//正解かどうかの判定関数
function checkAnswer(O){
// 正否判定し、正解なら「正解」を表示状態に
// 間違いならalertを出す
// また、答え欄の背景色も変更
var qid = parseInt(O.parentNode.parentNode.id.substring(1,2)) -1;
var answer = '';
for(var i=0;i<q[qid][0];i++) {
answer += q[qid][i+1] + ' ';
}
var Ans = O.parentNode.parentNode.getElementsByTagName('input')[0];
if(Ans.value == answer) {
Ans.style.backgroundColor = '#0ff';
Ans.parentNode.getElementsByTagName('strong')[0].style.display='inline';
} else {
Ans.style.backgroundColor = '#f00';
alert('間違っています');
Ans.parentNode.getElementsByTagName('input')[3].style.display='inline';
}
}
//やり直しボタンをクリックしたときの関数
function resetSelect(O) {
//単語を全て'表示'に戻す
var list = O.parentNode.parentNode.getElementsByTagName('span');
for(var i=0;i<list.length;i++) {
list[i].style.visibility = '';
}
//答え欄の初期化
var input = O.parentNode.getElementsByTagName('input')[0]
input.value = '';
input.style.backgroundColor = '';
//'正解'を'非表示'に
O.parentNode.getElementsByTagName('strong')[0].style.display='none';
}
// 正解表示
function viewAnswer(O){
var qid = parseInt(O.parentNode.parentNode.id.substring(1,2)) -1;
var answer = '';
for(var i=0;i<q[qid][0];i++) {
answer += q[qid][i+1] + ' ';
}
alert(answer);
}
</script>
</head>
<body onload="init()">
<p>訳に添った英文になるよう、リスト中の選択肢を順番にクリック、最後に選択終了をクリック</p>
<div id="article">
<div id="template">
<p>訳 </p>
<p>リスト </p>
<p><em>A.</em>
<input type="text" size="40" readonly>
<input type="button" value="選択終了"
onclick="checkAnswer(this)">
<strong style="display:none;">正解</strong>
<input type="button" value="やり直す"
onclick="resetSelect(this)">
<input type="button" value="正解を見る"
onclick="viewAnswer(this)"
style="display:none;">
</p>
</div>
</div>
</body>
</html>
この回答への補足
steel_gray様
またまた、長大なコードを作っていただき申し訳ありません。
親切にも参照メモも入れてくださり本当にお手数をおかけしました。
教えていただいたサイト
http://chaichan.web.infoseek.co.jp/src/2ndthema. …
2年ほど前によく見ておりました。
法華経のページがあったのですぐにわかりました。
私の母や姉が熱心で、その影響で、私は英語の勉強と自分の信仰心の向上もかねて、お釈迦さんの一代記の英文を訳しておりまして参考文献を探すうちにこの方のサイトを知りました。この方の熱心さには頭が下がります。
素人考えで、2語追加するのは簡単かと思ったのですが、プログラムとなるとここまで変える必要があるのですね。すみませんでした。
注釈を入れていただいていますので、どこまでわかるかわかりませんが、少しずつ勉強しようかなと思っています。
重ねての質問で恐縮ですが、単語リストの間隔を2字くらい空けたいのですが、どこにスペースを入れれば良いですか教えてください。
a pen have I you a pencil
よろしくお願いします。
No.2
- 回答日時:
#1です。
頼めるところというと業者でしょうか?
web製作を行っている業者はたくさんあるので検索すれば見つかります。
一応サンプルを挙げておきます。(HTMLの操作はDOMを使用しています→参考URL)
・並びかえをランダムに行っているので、並び替えの結果が正解と同じ場合があります。
・他にも不具合があるかもしれません。
<html>
<head>
<title></title>
<style type="text/css">
#article div{
margin:1em 0;
padding:0 1em;
border:solid 1px #000;
}
.word {
font-family:monospace;
margin:0.2em;
padding:0.1em 0.2em;
border:solid 1px #ccc;
cursor:pointer;
}
</style>
<script type="text/javascript">
// 問題 行末のカンマに気をつけて行を足していけば問題を増やせます。
var q = new Array(
['私は手にペンを持っています','I','have','a pen','in','my','hand'],
['これは微妙な問題です','This','is','a delicate','proposition']
);
function init(){
var article = document.getElementById('article');
var Template = article.removeChild(document.getElementById('template'));
for(var i=0;i<q.length;) {
var text = q[i].shift();
var wQ = randArray(q[i]);
var wArea = Template.cloneNode(true);
wArea.getElementsByTagName('input')[0].value = '';
wArea.getElementsByTagName('p')[0].appendChild(document.createTextNode(text));
var qArea = wArea.getElementsByTagName('p')[1];
for(var j=0;j<wQ.length;j++) {
var word = document.createElement('span');
word.className = 'word';
word.onclick = function(){wordClick(this)};
word.onmouseover = function(){this.style.backgroundColor ='#fcc'};
word.onmouseout = function(){this.style.backgroundColor =''};
word.appendChild(document.createTextNode(wQ[j]));
qArea.appendChild(word);
}
wArea.id='Q'+ ++i;
document.getElementById('article').appendChild(wArea);
}
}
function randArray(oq) {
var result = new Array;
while(oq.length){
var r = parseInt(Math.random() * oq.length);
result.push(oq.slice(r,r+1));
oq = oq.slice(0,r).concat(oq.slice(r+1,oq.length+1));
}
return result;
}
function wordClick(O){
var Ans = O.parentNode.parentNode.getElementsByTagName('input')[0];
Ans.value += O.innerHTML + ' ';
O.style.visibility = 'hidden';
var qid = parseInt(O.parentNode.parentNode.id.substring(1,2)) -1;
var answer = q[qid].join(' ') + ' ';
if(Ans.value.length == answer.length) {
if(Ans.value == answer) {
Ans.style.backgroundColor = '#0ff';
Ans.parentNode.getElementsByTagName('strong')[0].style.display='inline';
} else {
Ans.style.backgroundColor = '#f00';
alert('間違っています');
Ans.parentNode.getElementsByTagName('input')[2].style.display='inline';
}
}
}
function resetSelect(O) {
var list = O.parentNode.parentNode.getElementsByTagName('span');
for(var i=0;i<list.length;i++) {
list[i].style.visibility = '';
}
var input = O.parentNode.getElementsByTagName('input')[0]
input.value = '';
input.style.backgroundColor = '';
O.parentNode.getElementsByTagName('strong')[0].style.display='none';
}
function viewAnswer(O){
var qid = parseInt(O.parentNode.parentNode.id.substring(1,2)) -1;
alert(q[qid].join(' '));
}
</script>
</head>
<body onload="init()">
<p>訳に添った英文になるよう、リスト中の選択肢を順番にクリック</p>
<div id="article">
<div id="template">
<p>訳 </p>
<p>リスト </p>
<p><em>A.</em>
<input type="text" size="40" readonly>
<strong style="display:none;">正解</strong>
<input type="button" value="やり直す"
onclick="resetSelect(this)">
<input type="button" value="正解を見る"
onclick="viewAnswer(this)"
style="display:none;">
</p>
</div>
</div>
</body>
</html>
参考URL:http://www.doraneko.org/misc/dom10/19981001/cove …
この回答への補足
うわ~、こんなにも長いプログラムを私のために組んでいただいて恐縮です。早速、試してみました。
うまいことできるものですね。
こんなのを見ると私も20年以上も前にFM basicでいろんなプログラムを組んでいたのを思い出します。(保存はテープにしていた時代です。)
もう、60歳を超えたのと、空白が長いので今から覚える気にはようなりません。ご紹介していただいたDOMのページも難しそうでよくわかりません。
Bingo ゲームとスロットマシーンを合わせたゲームも作ったことがあります。basicなので本をみながらでもできました。
教えていただいたプログラムで、どんなものができるか試していきます。
ありがとうございました。
steel_gray様
すみません。補足してお尋ねしたいことが出てきました。
私はエンピツを持っています。
a pen, a pencil, you, I, have
(1)このように単語を2つぐらい余分に表示することは可能でしょうか。
(2)正解の時に、ピンポンと鳴るようにできるでしょうか。
いずれも簡単にできないようでしたら結構です。
(3)教えていただいたプログラムを理解したくなりました。
初心者向けの本をご存知でしたら紹介していただけませんか。
厚かましいお願いで申し訳ありませんが、よろしくお願いします。
No.1
- 回答日時:
プログラミング経験があれば、白紙の状態からよりは楽だとは思いますが…
まず、WEBページを作るための基礎知識(HTMLやCSS)が必要です。
動きのないWEBページなら市販のホームページ作成ソフトでもある程度できてしまいますが、こうした事(プログラミング)をやろうとするならソフトだけではできません。
単語を選んで並べていくには、WEBブラウザ上で動作する「Flash」か「Javascript」あたり。
さらに問題の回答結果を保存したり統計をとったりするにはCGIなどのサーバ上で動くスクリプトについて勉強する必要があります。
趣味で簡単なものを作るだけなら無料でもなんとかなりますが、
ある程度しっかりしたものを作るならお金も時間も掛かります。
(業者に頼むならお金だけですが)
その中間として、詳しい知人がいればなんとかして作らせちゃうって方法もあるけど。
この回答への補足
早速にご回答いただきましたのにご返事が遅くなり申し訳ありません。
「Flash」と「Javascript」の本をいろいろと調べてみましたが、希望する並び替えの例はありませんでした。
プログラムも難しそうで勉強するのも大変そうに思いました。
ネットで自分のPCにインストールして使うのを見つけました。
かなり立派です。
http://hp.vector.co.jp/authors/VA012837/narabe/i …
>趣味で簡単なものを作るだけなら無料でもなんとかなりますが、
私が望んでいるのは、Web上でだれでもかんたんに英文を作って基礎的な
英語が身につくようなものです。
回答を保存したり統計をとったりするサイト(並び替えではないもの)も見たことがありますが、私は遊び感覚で並び替えができればいいのです。
間違った場合に正解は出す必要がありますが。
どこか頼めるところでもあるでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 英語 高校英語の並び替え問題について 2 2022/11/08 05:39
- 英語 英語が苦手なので中学英語から復習してますが、英語の並べ替え問題なら解ける問題多いのですが、この日本語 2 2023/04/01 16:27
- その他(プログラミング・Web制作) プログラムの勉強のおすすめは 7 2022/12/09 20:09
- C言語・C++・C# C#の問題です。 文字列型の配列 s[100] にキーボードから入力された100文字以内の文字列(単 2 2022/06/22 15:18
- 英語 英語の問題で教えていただきたいです。 ( )の中の語句を並べ替えなさい。ただし、一語不足している語が 2 2023/06/18 15:55
- 英語 並べるのを避けるべき似た単語の判断基準について 5 2022/05/30 09:17
- 英語 A healthy 20 centimeters tall. に不定冠詞があるのはなぜでしょうか? 13 2022/10/07 05:13
- 仕事術・業務効率化 効率的な勉強方法(分野問わず)を教えてください 1 2023/08/16 01:33
- C言語・C++・C# C言語プログラム変更 2 2022/12/21 15:03
- 英語 A healthy 20 centimeters tall の a がなぜ定冠詞でないのでしょうか? 2 2022/10/14 05:21
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
C#で、ContextMenuStripに動的...
-
google apps scriptの終了のさせ方
-
ボタンを押すことでテキストエ...
-
$("body").height();と$("body"...
-
JavaScriptを使って毎日決まっ...
-
ジェネレーターの作り方
-
現在時刻をボタンクリックで表示
-
javascriptでのURLの引数
-
テーブル内のテキストを取得したい
-
ASP.NETのコントロールの値をJa...
-
1日1回引けるJavaScriptおみく...
-
JavaScriptでテーブル内?に矢...
-
googleスプレッドシートのApps ...
-
thickboxについて
-
カンマで終わってるのはセミコ...
-
ソースコードのいじる場所が分...
-
JavaScriptで決まった「時刻」...
-
pdfに丸秘などのスタンプを...
-
JavaScriptで文字列の特定文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
javaScriptのコードの修正をお...
-
ジェネレーターの作り方
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
GASでundefinedエラーが出ます
-
C#で、ContextMenuStripに動的...
-
GASでGoogleフォームの自動返信...
-
ASP.NET MVCでObjectをjsに渡す
-
VSCODE[Python]の設定について
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
イベントが初めの一回しか起き...
-
なぜmatchメソッドがエラーにな...
-
jqGridについて
-
gas スプレッドシートがアクテ...
-
JavaScriptで文字列の特定文字...
-
var exports = exports || {}; ...
-
googleスプレッドシートのApps ...
おすすめ情報