質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.61%

JavaScriptで4択問題を作成しているのですが、答えがうまく表示されません

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 764

HIYO_N0624

score 13

 前提・実現したいこと

現在、JavaScriptでcsvファイルを二次配列として読み込み、問題文、選択肢、答えをランダムで表示、
ラジオボタンで選択し、ボタンで結果を表示するページを作成しています。

 発生している問題・エラーメッセージ

ランダムで表示するまではいいのですが、ラジオボタンで選択後、結果を表示しようとすると、
10問あるうちの最後の問題(csvの最後の行)しか上手く動かず、それ以外では表示されません。

 該当のソースコード

var Q;
var A;
var B;
var C;
var D;
var F;

function getCSV(){
  var req = new XMLHttpRequest();
  req.open("get", "../CSV/sample4.csv", true);
  req.send(null);
  req.onload = function(){
    convertCSVtoArray(req.responseText);
  }
}

function convertCSVtoArray(str){ 
    var result = [];
    var tmp = str.split("\n");

    for(var i=0;i<tmp.length;++i){
        result[i] = tmp[i].split(',');
    }

    var random = Math.floor( Math.random() * 11 );

    Q = result[random][0];
    A = result[random][1];
    B = result[random][2];
    C = result[random][3];
    D = result[random][4];
    F = result[random][5];
    document.getElementById("Q").innerHTML = (Q)
    document.getElementById("a").innerHTML = (A)
    document.getElementById("b").innerHTML = (B)
    document.getElementById("c").innerHTML = (C)
    document.getElementById("d").innerHTML = (D)
    document.getElementById("change").value = "次の問題へ";
}

function lol() {  
    check1 = document.form1.Radio1.checked;
    check2 = document.form1.Radio2.checked;
    check3 = document.form1.Radio3.checked;
    check4 = document.form1.Radio4.checked;

    target = document.getElementById("output");

    if (F == "A"){
        if (check1 == true) {
          target.innerHTML = "お見事、正解です";
          }
          else if (check2 == true) {
          target.innerHTML = "残念、間違いです";
          }
          else if (check3 == true) {
          target.innerHTML = "残念、間違いです";
          }
          else if (check4 == true) {
          target.innerHTML = "残念、間違いです";
          }
        }  
    else if (F == "B"){
        if (check1 == true) {
          target.innerHTML = "残念、間違いです";
          }
          else if (check2 == true) {
          target.innerHTML = "お見事、正解です";
          }
          else if (check3 == true) {
          target.innerHTML = "残念、間違いです";
          }
          else if (check4 == true) {
          target.innerHTML = "残念、間違いです";
          }
        }
    else if (F == "C"){
        if (check1 == true) {
            target.innerHTML = "残念、間違いです";
          }
            else if (check2 == true) {
            target.innerHTML = "残念、間違いです";
          }
            else if (check3 == true) {
            target.innerHTML = "お見事、正解です";
          }
            else if (check4 == true) {
            target.innerHTML = "残念、間違いです";
          }
        }
    else if (F == "D"){
        if (check1 == true) {
            target.innerHTML = "残念、間違いです";
          }
            else if (check2 == true) {
            target.innerHTML = "残念、間違いです";
          }
            else if (check3 == true) {
            target.innerHTML = "残念、間違いです";
          }
            else if (check4 == true) {
            target.innerHTML = "お見事、正解です";
          }
        }                          
}

HTML
<span id="Q">ここに問題文が表示されます</span><br>
<form name="form1" action="">
<input type="radio" name="i" id="Radio1">
<span id="a"></span><br>
<input type="radio" name="i" id="Radio2">
<span id="b"></span><br>
<input type="radio" name="i" id="Radio3">
<span id="c"></span><br>
<input type="radio" name="i" id="Radio4">
<span id="d"></span><br>
<input id="change" type="button" value="開始" onclick="getCSV()">
<input id="answer" type="button" value="答えは" onclick="lol()">
</form>
<div id="output"></div>

csv
1,A,B,C,D,A
2,E,F,G,H,B
3,I,J,K,L,C
4,M,N,O,P,D
5,Q,R,S,T,A
6,U,V,W,X,B
7,Y,Z,a,b,C
8,c,d,e,f,D
9,g,h,i,j,A
10,k,l,m,n,B

 試したこと

10番以外の問題でも答えは読み込まれているのか確認するために、開始ボタンを押すと、
答えも表示されるようにした結果、うまく読み込まれてはいるようです

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/23 20:24

    「読み込まれているか確認」は変数resultをconsole.log()で確認されたほうが確実です。

    キャンセル

  • HIYO_N0624

    2018/11/23 23:52

    console.logを関数lol内に組んで実行すると、読み込まれていることは確認できまし

    キャンセル

  • Lhankor_Mhy

    2018/11/24 14:49

    『最後の問題(csvの最後の行)しか上手く動かず、それ以外では表示されません』とは具体的には、「何が」表示されないのでしょうか? "お見事、正解です"とかですか?

    キャンセル

  • Lhankor_Mhy

    2018/11/24 14:56

    ああ、もしかして、改行コード\r\nじゃないですか?

    キャンセル

回答 2

checkベストアンサー

+1

補足依頼にも書きましたが、おそらくCSVファイルの改行コードがCRLFとなっていて、.split("\n")で配列に変換した際のお尻に\rが残り、条件文がすべて不成立となるのだと思います。
なので、

    F = result[random][5].trim();


とすればよいのではないかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/24 17:24

    回答のように修正した結果、うまく動きました。ありがとうございました。

    キャンセル

  • 2018/11/24 17:59

    これは場当たり的な修正ですので、きちんとした修正をすることをお勧めします。

    キャンセル

-1

このコードは、targetを10回上書きしているだけですから、結局最後のメッセージだけ反映されます。
次のように、

// 結果文字列の初期化
var str="";

// 各if文内での採点結果の文字列追加
str += '(お見事、正解です等の結果メッセージ)' + '<br>\n'; 

// if文を抜けての結果文字列strの<div>タブへの書き出し
target.innerHTML = str;


のような修整を行えばいいでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/24 14:46

    文字列が結合されないのは、最も可能性があるのは、"+=" のコードを "="と間違えて打ち込んでいるからではないでしょうか。それとも私のコードを当てはめる位置を勘違いなさっているか。いずれにせよ、修正版のコードを回答の追加か、質問文の追加訂正で示してくれれば、アドバイスできます。

    キャンセル

  • 2018/11/24 15:11

    マイナス評価をした者ですが、このコードは lol()関数が10回呼ばれるわけではないので、質問を誤読されているかと思います。

    キャンセル

  • 2018/11/24 17:26

    すいません、自分の説明が下手でした。ご迷惑をおかけしました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る