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

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

ただいまの
回答率

88.93%

jQueryを用いた診断ツールで、回答の分岐を行いたい

解決済

回答 1

投稿

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

InoseKeiko

score 6

前提・実現したいこと

質問の回答によって結果が分岐する診断テストを作成しています。

「よくある」「まあまあある」「あまりない」「ほとんどない」にそれぞれ3点、2点、1点、0点を割り振ります。
トータルの点数が25点以上であった場合
トータルの点数が25点以上かつq19で「ほとんどない」出会った場合
トータルの点数が25点以上かつq20で「ほとんどない」出会った場合
トータルの点数が25点以上かつq21で「ほとんどない」出会った場合
トータルの点数が25点以上かつq19,q20で「ほとんどない」出会った場合
トータルの点数が25点以上かつq19,q22で「ほとんどない」出会った場合
トータルの点数が25点以上かつq20,q22で「ほとんどない」出会った場合
トータルの点数が25点以上かつq19,q20,q22で「ほとんどない」出会った場合
それ以外
に分けて結果を表示したいです。

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

トータルの点数が25点以上であった場合
それ以外の場合
はうまくいきます。
しかしそれ以外の分岐がうまくいきません。

60~110行目のに分岐を記載しました。

該当のソースコード

<!DOCTYPE html>
<html>
    <head>
        <title>診断系コンテンツ</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="check.css" type="text/css" />


        <script src="jquery-3.5.1.min.js"></script>
        <script>


            //-----初期設定
            function initFunc(){
                selectArray = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
                scoreArray = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
                qNum = selectArray.length;
            }

            // ,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
            // ,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

            function preloadFunc() {
                for(var i = 0; i< arguments.length; i++){
                    $("<img>").attr("src", arguments[i]);
                }
            }

            function againFunc(){
                moveFunc(-1);
                for (var i in selectArray){
                    var selectID = selectArray[i];
                    $("#" + i + "_" + selectID).removeClass("selected");
                }
                initFunc();//---初期化
            }

            function quesFunc(){
                var idArray = this.id.split("_");
                var qID = Number(idArray[0]);
                var ansID = Number(idArray[1]);
                var selectID = selectArray[qID];
                if (ansID == selectID) return;
                $("#" + qID + "_" + ansID).addClass("selected");
                $("#" + qID + "_" + selectID).removeClass("selected");
                selectArray[qID] = ansID;
                moveFunc(qID);

                scoreArray[qID] =  Number($(this).attr("sc"));

                if (qID+1 >= qNum) resultFunc();//---最後の質問かをチェック

            }

            function resultFunc(){
                alert("合計得点の算出を開始!")
            }

            function resultFunc(){
                var totalScore = 0;
                for(var i in scoreArray){
                    totalScore += scoreArray[i];
                }

                var q19 = $('li').hasClass('18_1');
                var q20 = $('li').hasClass('19_1');
                var q22 =$('li').hasClass('21_0');

                switch (true){
                    case (totalScore >= 25 && q19 == true && q20 == true && q22 == true):
                        var lv = 8;
                    case (totalScore >= 25 && q22 == true && q20 == true):
                        var lv = 7;
                    case (totalScore >= 25 && q19 == true && q22 == true):
                        var lv = 6;
                    case (totalScore >= 25 && q19 == true && q20 == true):
                        var lv = 5;
                    case (totalScore >= 25 && q22 == true):
                        var lv = 4;
                    case (totalScore >= 25 && q20 == true):
                        var lv = 3;
                    case (totalScore >= 25 && q19 == true):
                        var lv = 2;
                    case totalScore >= 25:
                        var lv = 1;
                        break;
                    default:
                        var lv = 0;
                }
                $("#resultPoint").text(totalScore);
                $("#resultImage").css("background-image", "url('images/lv"+lv+".png')");
                var myData = resultArray[lv];
                $("#resultTitle").text(myData.split(",")[0]);
                $("#resultText").text(myData.split(",")[1]);
            }

            function moveFunc(vol){
                var myPos = (vol+1) * -650;
                $("#qContainer").delay(500).animate({left: myPos},500);
            }

            $(function(){
                initFunc();//---初期化

                $.get('result.csv', function(myData){resultArray = myData.split("\r\n")});
                preloadFunc("images/lv0.png","images/lv1.png","images/lv2.png","images/lv3.png","images/lv4.png", "images/againOn.png");
                $("ul>li").click(quesFunc);
                $("#againButton").click(againFunc);
            });


        </script>
</head>
    <body>
        <div id="qArea">
        <div id="qContainer">

                <div class="qBox">
                        <div class="ques"><span class="qNum">Q1</span> 会社や学校などでケアレスミスをしてしまったり、<br>細かい部分に注意を払えないことがある</div>
                        <ul>
                            <li id="0_0" sc="3">よくある</li>
                            <li id="0_1" sc="2">まあまあある</li>
                            <li id="0_2" sc="1">あまりない</li>
                            <li id="0_3" sc="0">ほとんどない</li>

                        </ul>       
              </div>

            <div class="qBox">
                <div class="ques"><span class="qNum">Q2</span> 席にいるとき手足を触ってしまったり落ち着いていられない</div>
                <ul>
                    <li id="1_0" sc="3">よくある</li>
                    <li id="1_1" sc="2">まあまあある</li>
                    <li id="1_2" sc="1">あまりない</li>
                    <li id="1_3" sc="0">ほとんどない</li>

                </ul>

            </div>

//一部質問省略


                <div class="qBox">
                    <div class="ques"><span class="qNum">Q19</span> 7歳以前のときも、<br>Q18までのような傾向はまあまあ〜かなりあった</div>
                    <ul>
                        <li id="18_0" sc="0">ある</li>
                        <li id="18_1" sc="0">ほとんどない</li>

                    </ul>
                </div>


                <div class="qBox">
                    <div class="ques"><span class="qNum">Q20</span> Q18のような傾向が<br>職場、家庭問わずある</div>
                    <ul>
                        <li id="19_0" sc="0">よくある</li>

                        <li id="19_1" sc="0">ほとんどない</li>

                    </ul>

                </div>



                <div class="qBox">
                    <div class="ques"><span class="qNum">Q21</span> これらの経験によって職場や生活において<br>深刻な問題になったことがある</div>
                    <ul>
                        <li id="20_0" sc="0">よくある</li>
                        <li id="20_1" sc="0">まあまあある</li>
                        <li id="20_2" sc="0">あまりない</li>
                        <li id="20_3" sc="0">ほとんどない</li>

                    </ul>

                </div>

                <div class="qBox">
                    <div class="ques"><span class="qNum">Q22</span> 以前に精神疾患と診断されたことがある。<br>またはそうであると自覚したことがある</div>
                    <ul>
                        <li id="21_0" sc="0">ある</li>

                        <li id="21_1" sc="0">ない</li>

                    </ul>
                </div> 


            <div class="qBox">
                <div id="resultBox">
                    <div id="resultTitle">実業家級サラリーマン</div>
                    <div id="resultPoint">15</div>
                    <div id="resultLeft">
                        <div id="resultText">実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文
                        </div>
                        <div id="againButton"></div>
                    </div>
                    <div id="resultImage"></div> 
                </div>
            </div>

        </div>
        </div>
    </body>
</html>

試したこと

csvのデータは破損していませんでした。
jqueryも問題なく動いていそうでした。

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

こんにちは。

break置き忘れが原因では?

break を置かな買った場合、スクリプトは基準を満たす case から実行され、その後の case も条件に合うかに関係なく実行されます。
break を置かないとどうなるか | switch - JavaScript | MDN

コメントを受けて追記

                var q19 = $('li').hasClass('18_1');
                var q20 = $('li').hasClass('19_1');
                var q22 =$('li').hasClass('21_0');

↑この部分がおかしいのではないかな、と思いました。
q19という変数に'18_1'を参照して代入しているのは違和感がありますし、なによりquesFunc()では選択された答えにはselectedというクラスがついているようです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/24 19:48

    私の記憶違いかもしれないのですが、昨日サイトにアップロードしたときはできていた気がしています。
    キャッシュは削除した上で確認しましたがやはりできていませんでした。

    キャンセル

  • 2020/07/26 18:38

    .hasClass()を使っているのに実際の質問項目にclass名を足していないことが原因でした。
    下記のようにHTMLを変更したことで正確な診断が行われるようになりました。

    <div class="ques"><span class="qNum">Q19</span> 7歳以前のときも、<br>Q18までのような傾向はまあまあ〜かなりあった</div>
    <ul>
    <li id="18_0" sc="0">ある</li>
    <li id="18_1" class="18_1" sc="0">ほとんどない</li>

    </ul>
    </div>

    キャンセル

  • 2020/07/26 18:39

    Lhankor_Mhyさま、本当にありがとうございました。

    ルール違反を犯してしまった中、ご親切にしてくださったおかげで答えにたどり着くことができました。
    精進いたします、、、!

    キャンセル

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

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

関連した質問

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