前提・実現したいこと
現在、JavaScriptでcsvファイルを二次配列として読み込み、問題文、選択肢、答えをランダムで表示、
ラジオボタンで選択し、ボタンで結果を表示するページを作成しています。
発生している問題・エラーメッセージ
ランダムで表示するまではいいのですが、ラジオボタンで選択後、結果を表示しようとすると、 10問あるうちの最後の問題(csvの最後の行)しか上手く動かず、それ以外では表示されません。
該当のソースコード
JavaScript
1var Q; 2var A; 3var B; 4var C; 5var D; 6var F; 7 8function getCSV(){ 9 var req = new XMLHttpRequest(); 10 req.open("get", "../CSV/sample4.csv", true); 11 req.send(null); 12 req.onload = function(){ 13 convertCSVtoArray(req.responseText); 14 } 15} 16 17function convertCSVtoArray(str){ 18 var result = []; 19 var tmp = str.split("\n"); 20 21 for(var i=0;i<tmp.length;++i){ 22 result[i] = tmp[i].split(','); 23 } 24 25 var random = Math.floor( Math.random() * 11 ); 26 27 Q = result[random][0]; 28 A = result[random][1]; 29 B = result[random][2]; 30 C = result[random][3]; 31 D = result[random][4]; 32 F = result[random][5]; 33 document.getElementById("Q").innerHTML = (Q) 34 document.getElementById("a").innerHTML = (A) 35 document.getElementById("b").innerHTML = (B) 36 document.getElementById("c").innerHTML = (C) 37 document.getElementById("d").innerHTML = (D) 38 document.getElementById("change").value = "次の問題へ"; 39} 40 41function lol() { 42 check1 = document.form1.Radio1.checked; 43 check2 = document.form1.Radio2.checked; 44 check3 = document.form1.Radio3.checked; 45 check4 = document.form1.Radio4.checked; 46 47 target = document.getElementById("output"); 48 49 if (F == "A"){ 50 if (check1 == true) { 51 target.innerHTML = "お見事、正解です"; 52 } 53 else if (check2 == true) { 54 target.innerHTML = "残念、間違いです"; 55 } 56 else if (check3 == true) { 57 target.innerHTML = "残念、間違いです"; 58 } 59 else if (check4 == true) { 60 target.innerHTML = "残念、間違いです"; 61 } 62 } 63 else if (F == "B"){ 64 if (check1 == true) { 65 target.innerHTML = "残念、間違いです"; 66 } 67 else if (check2 == true) { 68 target.innerHTML = "お見事、正解です"; 69 } 70 else if (check3 == true) { 71 target.innerHTML = "残念、間違いです"; 72 } 73 else if (check4 == true) { 74 target.innerHTML = "残念、間違いです"; 75 } 76 } 77 else if (F == "C"){ 78 if (check1 == true) { 79 target.innerHTML = "残念、間違いです"; 80 } 81 else if (check2 == true) { 82 target.innerHTML = "残念、間違いです"; 83 } 84 else if (check3 == true) { 85 target.innerHTML = "お見事、正解です"; 86 } 87 else if (check4 == true) { 88 target.innerHTML = "残念、間違いです"; 89 } 90 } 91 else if (F == "D"){ 92 if (check1 == true) { 93 target.innerHTML = "残念、間違いです"; 94 } 95 else if (check2 == true) { 96 target.innerHTML = "残念、間違いです"; 97 } 98 else if (check3 == true) { 99 target.innerHTML = "残念、間違いです"; 100 } 101 else if (check4 == true) { 102 target.innerHTML = "お見事、正解です"; 103 } 104 } 105} 106 107HTML 108<span id="Q">ここに問題文が表示されます</span><br> 109<form name="form1" action=""> 110<input type="radio" name="i" id="Radio1"> 111<span id="a"></span><br> 112<input type="radio" name="i" id="Radio2"> 113<span id="b"></span><br> 114<input type="radio" name="i" id="Radio3"> 115<span id="c"></span><br> 116<input type="radio" name="i" id="Radio4"> 117<span id="d"></span><br> 118<input id="change" type="button" value="開始" onclick="getCSV()"> 119<input id="answer" type="button" value="答えは" onclick="lol()"> 120</form> 121<div id="output"></div> 122 123csv 1241,A,B,C,D,A 1252,E,F,G,H,B 1263,I,J,K,L,C 1274,M,N,O,P,D 1285,Q,R,S,T,A 1296,U,V,W,X,B 1307,Y,Z,a,b,C 1318,c,d,e,f,D 1329,g,h,i,j,A 13310,k,l,m,n,B
試したこと
10番以外の問題でも答えは読み込まれているのか確認するために、開始ボタンを押すと、
答えも表示されるようにした結果、うまく読み込まれてはいるようです
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー