- ベストアンサー
Web上で並び替え問題を作成する方法
- Web上で並び替え問題を作成するためには、プログラムの知識が必要です。
- 問題文に表示された単語を正しい順序に並び替える問題を作成し、解答欄を用意する必要があります。
- カーソルを単語の上でクリックするだけで、単語が正しい順序に並ぶようにすると便利です。
- ei60
- お礼率62% (123/198)
- ホームページ作成ソフト
- 回答数4
- ありがとう数2
- みんなの回答 （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; }
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
＞(1)単語を２つぐらい余分に表示することは可能でしょうか。 前は全ての単語を選び終わった時に自動的に正解か判定していますが、 単語が余った状態で判定をするには、回答者に答え合わせの為のボタンを押してもらう事になります。 (2)正解の時に、ピンポンと鳴るようにできるでしょうか。 音関係は全くの素人です。わかりません。 (3)教えていただいたプログラムを理解したくなりました。 初心者向けの本をご存知でしたら紹介していただけませんか。 webなら http://chaichan.web.infoseek.co.jp/src/2ndthema.htm このあたりでしょうか。 書籍は滅多に買わないのでよくわかりません。 以下、(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.htm 2年ほど前によく見ておりました。 法華経のページがあったのですぐにわかりました。 私の母や姉が熱心で、その影響で、私は英語の勉強と自分の信仰心の向上もかねて、お釈迦さんの一代記の英文を訳しておりまして参考文献を探すうちにこの方のサイトを知りました。この方の熱心さには頭が下がります。 素人考えで、2語追加するのは簡単かと思ったのですが、プログラムとなるとここまで変える必要があるのですね。すみませんでした。 注釈を入れていただいていますので、どこまでわかるかわかりませんが、少しずつ勉強しようかなと思っています。 重ねての質問で恐縮ですが、単語リストの間隔を２字くらい空けたいのですが、どこにスペースを入れれば良いですか教えてください。 a pen have I you a pencil よろしくお願いします。
- steel_gray
- ベストアンサー率66% (1052/1578)
#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>
お礼
steel_gray様 すみません。補足してお尋ねしたいことが出てきました。 私はエンピツを持っています。 a pen, a pencil, you, I, have (1)このように単語を２つぐらい余分に表示することは可能でしょうか。 (2)正解の時に、ピンポンと鳴るようにできるでしょうか。 いずれも簡単にできないようでしたら結構です。 (3)教えていただいたプログラムを理解したくなりました。 初心者向けの本をご存知でしたら紹介していただけませんか。 厚かましいお願いで申し訳ありませんが、よろしくお願いします。
補足
うわ～、こんなにも長いプログラムを私のために組んでいただいて恐縮です。早速、試してみました。 うまいことできるものですね。 こんなのを見ると私も20年以上も前にFM basicでいろんなプログラムを組んでいたのを思い出します。（保存はテープにしていた時代です。） もう、60歳を超えたのと、空白が長いので今から覚える気にはようなりません。ご紹介していただいたDOMのページも難しそうでよくわかりません。 Bingo ゲームとスロットマシーンを合わせたゲームも作ったことがあります。basicなので本をみながらでもできました。 教えていただいたプログラムで、どんなものができるか試していきます。 ありがとうございました。
- steel_gray
- ベストアンサー率66% (1052/1578)
プログラミング経験があれば、白紙の状態からよりは楽だとは思いますが… まず、WEBページを作るための基礎知識(HTMLやCSS)が必要です。 動きのないWEBページなら市販のホームページ作成ソフトでもある程度できてしまいますが、こうした事（プログラミング）をやろうとするならソフトだけではできません。 単語を選んで並べていくには、WEBブラウザ上で動作する「Flash」か「Javascript」あたり。 さらに問題の回答結果を保存したり統計をとったりするにはCGIなどのサーバ上で動くスクリプトについて勉強する必要があります。 趣味で簡単なものを作るだけなら無料でもなんとかなりますが、 ある程度しっかりしたものを作るならお金も時間も掛かります。 （業者に頼むならお金だけですが） その中間として、詳しい知人がいればなんとかして作らせちゃうって方法もあるけど。
補足
早速にご回答いただきましたのにご返事が遅くなり申し訳ありません。 「Flash」と「Javascript」の本をいろいろと調べてみましたが、希望する並び替えの例はありませんでした。 プログラムも難しそうで勉強するのも大変そうに思いました。 ネットで自分のＰＣにインストールして使うのを見つけました。 かなり立派です。 http://hp.vector.co.jp/authors/VA012837/narabe/index.html >趣味で簡単なものを作るだけなら無料でもなんとかなりますが、 私が望んでいるのは、Web上でだれでもかんたんに英文を作って基礎的な 英語が身につくようなものです。 回答を保存したり統計をとったりするサイト（並び替えではないもの）も見たことがありますが、私は遊び感覚で並び替えができればいいのです。 間違った場合に正解は出す必要がありますが。 どこか頼めるところでもあるでしょうか。
お礼
steel_gray様 いつもいつも適切な回答をすばやくしていただき感謝申し上げます。 margin:0.2em; /* ←ココ */ うまくいきました。 昨日も書店でjava script の本をいろいろ見ましたが、いずれにしてもかなりまとまった学習をしなければなりませんね。 今は仕事をたくさんかかえているのと英語の勉強で忙しくしていますので、少しずつでも学習していきたいと思っています。 並び替えの問題もデータ入力しなければなりません。 ホームページビルダー１１では記述式と穴埋め問題作成機能がついていると書かれていました。成績評価も。 私の浸かっているのがホームページビルダー６．５ですから、どんどんと進歩しています。 また、お尋ねすることが起きるかもしれませんが、ひとまず御礼して区切りにさせていただきます。 長大なコードと詳しい注釈を作っていただいて本当にありがとうございました。ご親切に厚く感謝申し上げます。