- 締切済み
選択肢を消していく
javascript超初心者です！失礼します！ 学習ソフトを作っています。以下のような内容にしたいと考えています。 まず開始ボタンを押して、１０個くらいの単語のうち１個をランダムで表示する。 それとは別に、表示される単語の意味に対応する文が入った選択肢のボックスを用意しておく（選択肢の数＝単語の数）。 学習者に、表示された単語を意味する選択肢をクリックさせ、 正解であれば→選択肢のボックスからその選択肢を消去し、次の単語をランダムで表示する（既出の単語と重複しないように）。 不正解であれば→選択肢は残して、次の単語をランダムで表示する（既出の単語と重複しないように）。 単語の数だけ解答が終わった時点で、間違えた単語（選択肢ボックスには対応する意味が残っているはず）を表示する。 ……というソフトなんですが、どなたかご教授いただけないでしょうか？超初心者のため、可能であればコードを書いていただけると幸いです。だれか助けてくださーいm(__)m 宜しくお願い致します。
- masa892789
- お礼率0% (0/6)
- JavaScript
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
みんなの回答
<html> <body> <script> var q='abc,def,ghi,jkl,mno,pqr,stu,vwx,yza,bcd'.split(','); var a='ABC,DEF,GHI,JKL,MNO,PQR,STU,VWX,YZA,BCD'.split(','); var qn=q.length; var n=0; var f=[],hf=[]; var r; function qu(){ $('q1').innerHTML=n-0+1; do r=~~(Math.random()*qn); while(f[r]) f[r]=1; $('q2').value=q[r]; for(i=0,mx=qn,ht='';i<mx;i++) if(!hf[i]) ht+='<input type="radio" name="q3" value="'+i+'">'+a[i]+'<br>'; $('ql').innerHTML=ht; } function chk(){ o=document.getElementsByName('q3'); for(i=0,an='',mx=o.length;i<mx;i++) if(o[i].checked) an=o[i].value; if(r==an && an !='') hf[r]=1; if(++n<qn) qu(); else ending(); } function $(o){ return document.getElementById(o); } function ending(){ for(i=0,ht='';i<qn;i++) ht+=(hf[i])?'':'[ '+q[i]+' ] = '+a[i]+'<br>'; $('ql').innerHTML=(ht)?ht:'全問正解'; } </script> <input type="button" value="Start!!" onClick="qu();this.disabled=true;"><br> Q.<span id="q1"></span> 単語:<input type="text" id="q2">の訳を答えよ<hr> <div id="ql"></div><hr> <input type="button" value="Check!" onClick="chk()"> </body> </html>
- himajin100000
- ベストアンサー率54% (1660/3060)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q4267117 TestCase 1</title> <style type="text/css"> @namespace xhtml "http://www.w3.org/1999/xhtml"; xhtml|table.qa xhtml|td.q{ width:100px; } xhtml|table.qa xhtml|td.a{ width:100px; } xhtml|table,xhtml|tr,xhtml|th,xhtml|td{ border-style:solid; border-width:medium; } xhtml|th,xhtml|td{ text-align:center; } </style> <script type="application/ecmascript"><![CDATA[ var qandas ={ "pairs": [ ["divorce","離婚"], ["failure","失敗"], ["bankruptcy","破産"], ["court","裁判"], ["jail","牢獄"], ["violence","暴力"], ["regret","後悔"], ], "shuffle":function(n){ if (!qandas["stop"]()){ for (var i = 0;i < n;i++){ var candidate1 = Math.floor(Math.random() * this["pairs"].length); var candidate2 = Math.floor(Math.random() * this["pairs"].length); var temp; temp = this["pairs"][candidate1]; this["pairs"][candidate1] = this["pairs"][candidate2]; this["pairs"][candidate2] = temp; } this["answer"] = Math.floor(Math.random() * this["pairs"].length); while(this["wrong"].indexOf(this["pairs"][this["answer"]][0]) >= 0){ this["answer"] = Math.floor(Math.random() * this["pairs"].length); } } }, "dom":function(){ var table = document.createElementNS("http://www.w3.org/1999/xhtml","table"); table.setAttributeNS(null,"class",appendtokenNS(table,"class","qa")); if (!qandas["stop"]()){ var firstrow = document.createElementNS("http://www.w3.org/1999/xhtml","tr"); var th = document.createElementNS("http://www.w3.org/1999/xhtml","th"); th.appendChild(document.createTextNode("問題")); firstrow.appendChild(th); th = document.createElementNS("http://www.w3.org/1999/xhtml","th"); th.appendChild(document.createTextNode("選択肢一覧")); firstrow.appendChild(th); table.appendChild(firstrow); var secondrow = document.createElementNS("http://www.w3.org/1999/xhtml","tr"); var qtd = document.createElementNS("http://www.w3.org/1999/xhtml","td"); qtd.appendChild(document.createTextNode(this["pairs"][this["answer"]][0])); qtd.setAttributeNS(null,"rowspan",this["pairs"].length); qtd.setAttributeNS(null,"class",appendtokenNS(qtd,"class","q")); var firstrowatd = document.createElementNS("http://www.w3.org/1999/xhtml","td"); firstrowatd.appendChild(document.createTextNode(this["pairs"][0][1])); firstrowatd.onclick = trigger; firstrowatd.setAttributeNS(null,"class",appendtokenNS(firstrowatd,"class","a")); secondrow.appendChild(qtd); secondrow.appendChild(firstrowatd); table.appendChild(secondrow); for (var i = 1;i < this["pairs"].length;i++){ tr = document.createElementNS("http://www.w3.org/1999/xhtml","tr"); td = document.createElementNS("http://www.w3.org/1999/xhtml","td"); td.appendChild(document.createTextNode(this["pairs"][i][1])); td.onclick = trigger; td.setAttributeNS(null,"class",appendtokenNS(td,"class","a")); tr.appendChild(td); table.appendChild(tr); } } return table; }, answer:-1, wrong:[], stop:function(){ for(var i = 0;i < this["pairs"].length;i++){ if (this["wrong"].indexOf(this["pairs"][i][0]) < 0){ return false; } } return true; } }; function initialize(){ qandas["shuffle"](5); document.getElementById("qandasection").appendChild(qandas["dom"]()); }; function trigger(){ if(qandas ["pairs"][qandas ["answer"]][1] == this.textContent){ qandas ["pairs"].splice(qandas ["answer"],1); }else{ qandas["wrong"].push(qandas ["pairs"][qandas ["answer"]][0]); } document.getElementById("qandasection").removeChild(document.getElementById("qandasection").childNodes[0]); if (!qandas["stop"]()){ qandas["shuffle"](5); document.getElementById("qandasection").appendChild(qandas["dom"]()); }else{ var h2 = document.createElementNS("http://www.w3.org/1999/xhtml","h2"); h2.appendChild(document.createTextNode("間違えた問題一覧")); document.getElementById("resultsection").appendChild(h2); if (qandas["wrong"].length > 0){ var ul = document.createElementNS("http://www.w3.org/1999/xhtml","ul"); for ( var i = 0;i < qandas["wrong"].length;i++){ var li= document.createElementNS("http://www.w3.org/1999/xhtml","li"); li.appendChild(document.createTextNode(qandas["wrong"][i])); ul.appendChild(li); } document.getElementById("resultsection").appendChild(ul); }else{ var p = document.createElementNS("http://www.w3.org/1999/xhtml","p"); p.appendChild(document.createTextNode("全問正解")); document.getElementById("resultsection").appendChild(p); } } }; //名前空間接頭辞はとりあえず無視 function appendtokenNS(element,attributename,token,attributeNS){ var attr = element.getAttributeNS(attributeNS,attributename); if (attr === null){ attr = ""; } var arr = attr.split(/\\u0020|\\u0009|\\u000A|\\u000C|\\u000D/) arr.push(token); return arr.join(" "); } ]]></script> </head> <body onload="initialize();"> <h1>Q4267117 TestCase 1</h1> <div id="qandasection"></div> <div id="resultsection"></div> </body> </html> <!-- #4を少しだけ修正 -->
- himajin100000
- ベストアンサー率54% (1660/3060)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q4267117 TestCase 1</title> <style type="text/css"> @namespace xhtml "http://www.w3.org/1999/xhtml"; xhtml|table.qa xhtml|td.q{ width:100px; } xhtml|table.qa xhtml|td.a{ width:100px; } xhtml|table,xhtml|tr,xhtml|th,xhtml|td{ border-style:solid; border-width:medium; } xhtml|th,xhtml|td{ text-align:center; } </style> <script type="application/ecmascript"><![CDATA[ var qandas ={ "pairs": [ ["divorce","離婚"], ["failure","失敗"], ["bankraptcy","破産"], ["court","裁判"], ["jail","牢獄"], ], "shuffle":function(n){ if (!qandas["stop"]()){ for (var i = 0;i < n;i++){ var candidate1 = Math.floor(Math.random() * this["pairs"].length); var candidate2 = Math.floor(Math.random() * this["pairs"].length); var temp; temp = this["pairs"][candidate1]; this["pairs"][candidate1] = this["pairs"][candidate2]; this["pairs"][candidate2] = temp; } this["answer"] = Math.floor(Math.random() * this["pairs"].length); while(this["wrong"].indexOf(this["pairs"][this["answer"]][0]) >= 0){ this["answer"] = Math.floor(Math.random() * this["pairs"].length); } } }, "dom":function(){ var table = document.createElementNS("http://www.w3.org/1999/xhtml","table"); table.setAttributeNS(null,"class",appendtokenNS(table,"class","qa")); if (!qandas["stop"]()){ var firstrow = document.createElementNS("http://www.w3.org/1999/xhtml","tr"); var qtd = document.createElementNS("http://www.w3.org/1999/xhtml","td"); qtd.appendChild(document.createTextNode(this["pairs"][this["answer"]][0])); qtd.setAttributeNS(null,"rowspan",this["pairs"].length); qtd.setAttributeNS(null,"class",appendtokenNS(qtd,"class","q")); var firstrowatd = document.createElementNS("http://www.w3.org/1999/xhtml","td"); firstrowatd.appendChild(document.createTextNode(this["pairs"][0][1])); firstrowatd.onclick = trigger; firstrowatd.setAttributeNS(null,"class",appendtokenNS(firstrowatd,"class","a")); firstrow.appendChild(qtd); firstrow.appendChild(firstrowatd); table.appendChild(firstrow); for (var i = 1;i < this["pairs"].length;i++){ tr = document.createElementNS("http://www.w3.org/1999/xhtml","tr"); td = document.createElementNS("http://www.w3.org/1999/xhtml","td"); td.appendChild(document.createTextNode(this["pairs"][i][1])); td.onclick = trigger; td.setAttributeNS(null,"class",appendtokenNS(td,"class","a")); tr.appendChild(td); table.appendChild(tr); } } return table; }, answer:-1, wrong:[], stop:function(){ for(var i = 0;i < this["pairs"].length;i++){ if (this["wrong"].indexOf(this["pairs"][i][0]) < 0){ return false; } } return true; } }; function initialize(){ qandas["shuffle"](5); document.getElementById("qandasection").appendChild(qandas["dom"]()); }; function trigger(){ if(qandas ["pairs"][qandas ["answer"]][1] == this.textContent){ qandas ["pairs"].splice(qandas ["answer"],1); }else{ qandas["wrong"].push(qandas ["pairs"][qandas ["answer"]][0]); } if (!qandas["stop"]()){ document.getElementById("qandasection").removeChild(document.getElementById("qandasection").childNodes[0]); qandas["shuffle"](5); document.getElementById("qandasection").appendChild(qandas["dom"]()); }else{ if (qandas["wrong"].length > 0){ var ul = document.createElementNS("http://www.w3.org/1999/xhtml","ul"); for ( var i = 0;i < qandas["wrong"].length;i++){ var li= document.createElementNS("http://www.w3.org/1999/xhtml","li"); li.appendChild(document.createTextNode(qandas["wrong"][i])); ul.appendChild(li); } document.getElementById("resultsection").appendChild(ul); } } }; //名前空間接頭辞はとりあえず無視 function appendtokenNS(element,attributename,token,attributeNS){ var attr = element.getAttributeNS(attributeNS,attributename); if (attr === null){ attr = ""; } var arr = attr.split(/\\u0020|\\u0009|\\u000A|\\u000C|\\u000D/) arr.push(token); return arr.join(" "); } ]]></script> </head> <body onload="initialize();"> <div id="qandasection"></div> <div id="resultsection"></div> </body> </html> <!-- 多分こんな感じ。意地悪な作り方しているけど。 #どうしても連想配列ってのが頭に残っちゃって ピリオドで繋ぐことに抵抗感がある。 ##ただ，これは意地悪いつくりの原因ではない 要検討: splitしてjoinするという手順だけで HTML 5のDOMTokenList.add()の手順と同一内容のものが実現できるだろうか？ -->
- dongri5656
- ベストアンサー率8% (8/100)
僕も初心者なんですが、 ＞学習ソフトを作っています。 という以上、ソフトを作る最低限の技術は自分で 勉強しようとしてるんですよね。 ランダムとはどうするものなのか、 消すとは 〃 間違えた単語を表示する仕組みは 〃 などなど・・・ 結局全部作ってもらったとして、それを自分で直せない いでしょ。間違ったプログラムの使用かもしれない。 人のをわけもわからずそっくり使う勇気は僕にはありませ んけどね。
- yambejp
- ベストアンサー率51% (3827/7415)
＞どのあたりを具体的にすれば 正直、予備知識なかったとして自身の文書だけを読んで、何をつくりたいか わかりますか？私にはさっぱりわかりませんでした。 具体例があるとわかりやすいのでは？ プログラム部分はともかくHTMLで仮組くらいはできるでしょう？
- yambejp
- ベストアンサー率51% (3827/7415)
丸投げなので感心しませんが、まぁそんなに難しくはないでしょう。 ただ、仕様提起があいまいすぎるので何をどうしたいのかが いまいちわかりません。 もう少し具体的に表記してもらったほうが回答がつきやすいと思います
補足
本を読んだり、ネットから引っ張ってきたりと試行錯誤しているのですが、結果的に丸投げ感が出ていて申し訳ありません…。 仕様提起を具体的に、とはどのあたりを具体的にすればよろしいでしょうか？？