診断アプリ 複数結果の表示について

Question

前提・実現したいこと

現在、rails、jqueryで目の動きに関する診断アプリを作成しております。
質問が全部で３５問あり、YES・NOですべての質問に回答し、診断ボタンをクリックするとその人の目の動きの苦手な方向が表示されるようにしています。
各質問のYESの回答に対してclass分けをして、７種類（左上、右上、左側、右側、左下、右下、輻輳開散）に分けています。
それぞれ５問ずつあり５×７で３５問です。
７種類の質問に対してYESの数が一番多い種類に紐づく結果が表示できるようにしたいと思っています。
また、YESの数が一番多い種類が複数あった場合には、それぞれの結果を同時に表示させたいです。
例えば、左上の質問に対するYESが一番多ければ、「あなたは左上に目を動かすのが苦手です」という結果を表示。
左上と右上のYESが一番多ければ、「あなたは左上に目を動かすのが苦手です」「あなたは右上に目を動かすのが苦手です」と表示。

発生している問題

YESの数が一番多い種類が一つだけの場合の条件分岐は分かるが、YESの数が一番多い種類が複数あった場合の結果の表示のさせ方の条件分岐が分からないです。

該当のソースコード

<div class="container">
  <div id="wrapper">
    <div class="question">
      <h1 class="title">かんたん診断</h1>
      <% @diagnoses.each do |diagnosis| %>
        <ul class="questions">
          <li class="textBox">
            <span class="text">Q<%= diagnosis.question_number %>.<%= diagnosis.question_content %></span>
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <%= form_with(local: true) do |f| %>
                <label class="btn btn-secondary">
                  <%= f.radio_button :question, :yes, class: "#{diagnosis.question_type}" %>YES
                </label>
                <label class="btn btn-secondary">
                  <%= f.radio_button :question, :no %>NO
                </label>
              <% end %>
            </div>
          </li>
        </ul>
      <% end %>
      <button>診断する</button>
    </div>
    <% @diagnosis_results.each do |result| %>
      <div class="result <%= result.result_type %>（結果）">
        <div class="Result_recommend">あなたもしかしたら、こんな目かも</div>
        <div class="Result_menu">
          <div class="Result_menu_text">【<%= result_status(result) %>】</div>
        </div>
        <div class="Result_recommend">
          <p><%= result_status(result) %>な方は・・・</p>
        </div>  
        <div class="result-text">
          <p><%= result.result_text %></p>
        </div>
        <div class="image">
          <td><%= image_tag(result.result_picture.url, width: "300px") if result.result_picture? %>
        </div>
      </div>
    <% end %>
    <div class="results">
      <div class="results-text">
        <p>目は脳の一部であり、感覚神経や運動神経とつながっています。トレーニングを行う事で、今まで抱えていた悩みを解決できるかもしれません！</p>
      </div>
      <div class="result-btn">
        <%= link_to "「眼トレ・メントレ・脳トレ」に興味を持った方はこちら！", "#", class: "btn btn-result" %>
      </div>
    </div>  
  </div>
</div>

<script src="index.js"></script>

$(function(){
  //一度結果を非表示にする
  $(".result, .results").hide();
  //ボタンがクリックされた時
  $("button").on("click", function(){
    //一度結果を非表示にする
    $(".result, .results").hide();
    //問題数を取得
    var qNum = $("ul.questions li").length;
    if( $("ul.questions li input:checked").length < qNum ){
      //全てチェックしていなかったらアラートを出す
      alert("未回答の質問があります");
    } 
    else {
        //チェックされているinputの数を取得
        var typeANum = $(".左上:checked").length,
            typeBNum = $(".右上:checked").length,
            typeCNum = $(".左側:checked").length,
            typeDNum = $(".右側:checked").length,
            typeENum = $(".左下:checked").length,
            typeFNum = $(".右下:checked").length,
            typeGNum = $(".輻輳開散:checked").length;
        if( typeANum > typeBNum && typeANum > typeCNum && typeANum > typeDNum && typeANum > typeENum && typeANum > typeFNum && typeANum > typeGNum) {
            $(".左上（結果）,.results").fadeIn();
        } else if( typeBNum > typeANum && typeBNum > typeCNum && typeBNum > typeDNum && typeBNum > typeENum && typeBNum > typeFNum && typeBNum > typeGNum) {
            $(".右上（結果）,.results").fadeIn();
        } else if( typeCNum > typeANum && typeCNum > typeBNum && typeCNum > typeDNum && typeCNum > typeENum && typeCNum > typeFNum && typeCNum > typeGNum) {
            $(".左側（結果）,.results").fadeIn();
        } else if( typeDNum > typeANum && typeDNum > typeBNum && typeDNum > typeCNum && typeDNum > typeENum && typeDNum > typeFNum && typeDNum > typeGNum) {
            $(".右側（結果）,.results").fadeIn();
        } else if( typeENum > typeANum && typeENum > typeBNum && typeENum > typeCNum && typeENum > typeDNum && typeENum > typeFNum && typeENum > typeGNum) {
            $(".左下（結果）,.results").fadeIn();
        } else if( typeFNum > typeANum && typeFNum > typeBNum && typeFNum > typeCNum && typeFNum > typeDNum && typeFNum > typeENum && typeFNum > typeGNum) {
            $(".右下（結果）,.results").fadeIn();
        } else if( typeGNum > typeANum && typeGNum > typeBNum && typeGNum > typeCNum && typeGNum > typeDNum && typeGNum > typeENum && typeGNum > typeFNum) {
            $(".輻輳開散（結果）,.results").fadeIn();
      }
    }
  });
});

試したこと

var a = [typeANum, typeBNum, typeCNum, typeDNum, typeENum, typeFNum, typeGNum];
var max = Math.max.apply(null, a);
と書いて、最大値を取得してそれと同じ数のtypeを絞り込み、そのtypeに紐づく結果を表示させられるかとも考えましたが、これ以降の記述の仕方が思いつきませんでした。

「診断アプリ　複数結果」などで調べてみましたが、今のところ参考になるものが見つかっておりません。

どなたかアドバイス頂けると幸いです。
よろしくお願いいたします。

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

ruby 2.6.6
rails (5.2.4.5)
jquery-rails (4.4.0)

追記(2021/04/18)

下記の様に、コードを修正しました。

$(function(){
  //一度結果を非表示にする
  $(".result, .results").hide();
  //ボタンがクリックされた時
  $("button").on("click", function(){
    //一度結果を非表示にする
    $(".result, .results").hide();
    //問題数を取得
    var qNum = $("ul.questions li").length;
    if( $("ul.questions li input:checked").length < qNum ){
      //全てチェックしていなかったらアラートを出す
      alert("未回答の質問があります");
    } 
    else {
        //チェックされているinputの数を取得
        var typeANum = $(".左上:checked").length,
            typeBNum = $(".右上:checked").length,
            typeCNum = $(".左側:checked").length,
            typeDNum = $(".右側:checked").length,
            typeENum = $(".左下:checked").length,
            typeFNum = $(".右下:checked").length,
            typeGNum = $(".輻輳開散:checked").length;
        var a = [typeANum, typeBNum, typeCNum, typeDNum, typeENum, typeFNum, typeGNum];
        var max = Math.max.apply(null, a);
        var eyes = [
            { type: "A", Num: typeANum, result: ".左上（結果）" },
            { type: "B", Num: typeBNum, result: ".右上（結果）" },
            { type: "C", Num: typeCNum, result: ".左側（結果）" },
            { type: "D", Num: typeDNum, result: ".右側（結果）" },
            { type: "E", Num: typeENum, result: ".左下（結果）" },
            { type: "F", Num: typeFNum, result: ".右下（結果）" },
            { type: "G", Num: typeGNum, result: ".輻輳開散（結果）" },
          ];
        
          var filtered = $.grep(eyes,
            function(element, index) {
              
              return (element.Num >= max);
            }
          );
        
          console.log(filtered);
          var r = $("filtered").val("result");
          $("r,.results").fadeIn();
    }
  });
});

最大値を取得し、オブジェクトも作成してtypeとresultが紐づくようにしました。
そして最大値とオブジェクトのNumが同数のものを抽出するようにして、YESが一番多いオブジェクトの抽出までは出来ました。（写真はtypeAのYESが一番多かった時のconsole.log(filtered);の結果です）

抽出できた結果の中から、resultの内容を取得できればと思い、
var r = $("filtered").val("result");
という書き方をしましたが、取得ができていないのが現状です。
オブジェクトの中の特定の要素のみを取り出す方法が分かればと思うのですが、どなたかアドバイス頂けたらと思います。
よろしくお願いいたします。

Comments

[gouf]

これはデータの持たせ方の問題でしょうか?

オブジェクトを用意して (eg. [{typeA: $(".左上:checked").length}, {typeB: ... }, ...]);

sort ( https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort ) を使って順番を入れ替えれば 複数結果の表示処理の構築に辿り着けませんか?

[satokei]

最大値を利用する方法なら、
最大値とそれぞれの数が一致するかを判定に利用するのはどうでしょうか。

[kwansai724]

gouf様
ご返信ありがとうございます！
初心者のためsortというのを初めて知りました。
教えて頂いた参考サイトを見て試してみます。

[kwansai724]

satokei様
ご返信ありがとうございます！
判定して抽出したtypeと表示させたい結果を結びつけるところが難しいと感じております、、。
現状だと、typeAが一番多くYESがあった場合は、 $(".左上（結果）,.results").fadeIn();という風に書いているため、typeの数が複数になると色んなパターンを書かなければならず、現実的ではないかなと思い、行き詰ってます。。

Answer 1

var r = $("filtered").val("result");
という書き方をしましたが、取得ができていないのが現状です。

変数filteredを文字列として扱ってしまっています。

以下のようにすればよいかと思います。

console.log(filtered);

let selector = filtered.map(e => e.result).join(',');
$(`${selector},.results`).fadeIn()

Comments

[kwansai724]

satokei様
ご回答いただいた書き方で無事欲しい結果が出ました！
本当にありがとうございます。
大変勉強になりました！