###前提・実現したいこと
次に問題文や解答に表示する文字列に読み方やヒントなどを置換させて、表示することをしていますがなかなかうまくいきません。
回答ボタンを押し、正解か不正解を表示した後に、次の問題を表示するのですが、test_1.jsにある配列のデータを
読み込んだ時に同時にキーワードを置換したいです。
処理はmain.jsで行ってます。置換処理はobject_replace.jsで行ってます。
test_1.js(問題文) object_replace.js(置換文字列)
| |
↓ ←-------------
main.js(問題出題DOM含む)
↓
index.html
文字の置換や問題文・解答について例えばこういう時はCSVファイルで作ったほうがいいよ等のアドバイスも頂けたら幸いです。
###発生している問題・エラーメッセージ
エラーは今のところはなし。 たぶん配列オーバーしている箇所があり、強制終了してしまうところありますが、質問に関係はないと思います。
###該当のソースコード
--html-- <script type="text/javascript" src="test_1.js"></script> <script type="text/javascript" src="object_replace.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <div> <h1>問題集1</h1> <p id="que">ここに問題が表示されます</p> <div> <input id="choice1" type="radio" name="choice">○○○<br></div> <div> <input id="choice2" type="radio" name="choice">×××</div> <div> <input type="button" value="回答する" onclick="button_click();"></div> <p id="answer"></p> <p id="last"></p> </div> <footer><a href = "index.html">最初へ</a></footer> </body> </html>
--main.js-- var i = 0; window.addEventListener("load",function() { show_question(0); },false); //終了処理 function end_study(i){ document.getElementById('que').innerHTML ="問題はすべて終了しました!!"; document.getElementById('choice1'). nextSibling.nodeValue="全問終了"; document.getElementById('choice2'). nextSibling.nodeValue="全問終了"; document.getElementById('answer').innerHTML =""; document.getElementById('last').innerHTML ="疲れるので休憩を取りましょう!!"; console.log(i); } //問題取り込み function show_question(i) { keyword_replace(i); document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む document.getElementById('choice1').nextSibling.nodeValue = exac_a[i];//同上 document.getElementById('choice2').nextSibling.nodeValue = miss_a[i];//同上 //document.querySelector('label[for="choice1"]').innerHTML="選択肢B"; } //回答後の処理 function button_click() { document.getElementById('answer').innerHTML =""; var radio = document.getElementById('choice1'); if(radio.checked) { document.getElementById('answer').innerHTML ="正解"; }else { document.getElementById('answer').innerHTML ="間違い"; } i++; //問題文を一つずらす。 show_question(i); if(i>=5){ end_study(i); i = 0; } }
-- object_replace.js -- //置換文字列候補 var keyword = { 徐行:"徐行(すぐに停止できる速度)", 車両横断禁止:"車両横断禁止(しゃりょうおうだんきんし)", 緊急自動車:"緊急自動車(きんきゅうじどうしゃ:パトカー、救急車、消防車)" }; var str_exca_a =new String(); var str_miss_a = new String(); var i = 0; function keyword_replace(i) { var str_q = q[i]; 問題・回答にキーワードが含まれていれば置換 q[i] = str_q.replace("徐行",keyword.徐行); q[i] = str_q.replace("車両横断禁止",keyword.車両横断禁止); q[i] = str_q.replace("緊急自動車",keyword.緊急自動車); console.log("q[i]:"+q[i]); var str_exac_a = exac_a[i]; exac_a[i] = str_exac_a.replace("徐行",keyword.徐行); exac_a[i] = str_exac_a.replace("車両横断禁止",keyword.車両横断禁止); exac_a[i] = str_exac_a.replace("緊急自動車",keyword.緊急自動車); var str_miss_a = miss_a[i]; miss_a[i] = str_miss_a.replace("徐行",keyword.徐行); miss_a[i] = str_miss_a.replace("車両横断禁止",keyword.車両横断禁止); miss_a[i] = str_miss_a.replace("緊急自動車",keyword.緊急自動車); }
--test_1.js-- //問題文を配列化して格納 var q = new Array(); var miss_a = new Array(); var exac_a = new Array(); q[0] = "1:交差点内を通行しているとき、緊急自動車が近づいてきたので直ちに交差点内で停止した。"; exac_a[0] = "緊急自動車が入ってきた場合の交差点内での停止は事故を起こす可能性が高まるので、交差点を避け、事故の起こりにくい道路の左側に寄って一時停止をする"; miss_a[0] = "交差点内を通行しているとき緊急自動車が近づいてきたので直ちに交差点内で停止した"; q[1] = "2:原動機自転車においてブレーキをかける場合は、ハンドルを切っていない状態で車体が傾いていないときには前後輪のブレーキを同時にかけるのがよい。"; exac_a[1] = "前後輪のブレーキを同時にかけるのが基本であるので、転倒の危険が問題がない場合は、ブレーキは同時にかけるべきである。"; miss_a[1] = "ブレーキの前後輪の同時使用は、条件を満たした場合にかけるのが、基本であるが危険時だけであり、極力使用せず、基本的には後輪のみのほうがよい。"; q[2] = "3:車両横断禁止の標識があったが道路の左側にある自分の車庫に入るため左に横断した。"; exac_a[2] = "左折を伴う道路の横断は、道路交通法上認められています"; miss_a[2] = "車両横断禁止の標識がある場所では、横断が禁止である。"; q[3] = "4:黄色の杖を持っている歩行者がいるときは、必ず警音器を鳴らさなければならない"; exac_a[3] = "杖使用者は弱視又は全盲者が用いるため、急な対応が難しく警音器のみの警告ではなく、一時停止か徐行(すぐに停止できる速度)を行う。"; miss_a[3] = "黄色の杖を持つ歩行者には、最大限注意を促す必要があるため、警音器まで鳴らすべきである。"; q[4] = "5.上り坂の頂上付近徐行の標識がなくても徐行しなくてはならない。"; exac_a[4]= "標識がなくても元々見通しが悪いため、徐行しなければならない"; miss_a[4]= "標識がないので、必ずしも徐行する必要がない";
回答1件
あなたの回答
tips
プレビュー