rails チェックボックスを使用した、各設問複数回答可能な診断機能の実装

1.はじめに

こんにちは！Webコースでメンターをしていますさとこーです！今回は質問回答をラジオボタン式 → チェックボックス式に変更し、各設問複数回答可能な診断機能を作成してみました！診断方法の幅が広がるので是非チャレンジ、アレンジしてみてください！！

なお、本記事は https://qiita.com/takeru55555/items/bed00ed822e0a49de291 を参照して作成しています。モデル、コントローラー設計等はコチラの記事を参考にしてください。

controllerの記述

perfumes_contoller.rb

class PerfumesController < ApplicationController
    def new
        @perfume = Perfume.new
    end

    def show
        @perfume = Perfume.find_by(id: params[:id])
        calculate_diagnosis
    end

    def create
        @perfume = Perfume.new(perfume_params)
        if @perfume.save
        flash[:notice] = "診断が完了しました"
        redirect_to perfume_path(@perfume.id)
        else
        render :new
        end
    end

    private

    def perfume_params
        params.require(:perfume).permit({ question1: [] }, { question2: [] }, { question3: [] })
    end

    def calculate_diagnosis
        counts = { 視覚型: 0, 聴覚型: 0, 運動感覚型: 0 }

        counts[:視覚型] += @perfume.question1&.count || 0
        counts[:聴覚型] += @perfume.question2&.count || 0
        counts[:運動感覚型] += @perfume.question3&.count || 0

        @dominant_type = counts.max_by { |_, v| v }[0]
    end
end

モデルの記述

perfume.erb

class Perfume < ApplicationRecord
    serialize :question1, Array
    serialize :question2, Array
    serialize :question3, Array
end

質問ページの記述

new.html.erb

<%= form_for(@perfume, class: 'form-horizontal', role: 'form') do |f| %>
    <div class="perfume-container">
        <!-- 質問1: 視覚 -->
        <div class="col-12">
            <p>Q1. 視覚</p>
        </div>
        <div class="col-6">
            <%= f.check_box :question1, { multiple: true, id: "custom_id1", value: "1" } %>
            <label for="custom_id1">メモをたくさん取る</label>
            <%= f.check_box :question1, { multiple: true, id: "custom_id2", value: "2" } %>
            <label for="custom_id2">メモは取るが、メモを確認している様子はない</label>
            <%= f.check_box :question1, { multiple: true, id: "custom_id3", value: "3" } %>
            <label for="custom_id3">学習者が話すとき、自分を見て話す</label>
            <%= f.check_box :question1, { multiple: true, id: "custom_id4", value: "4" } %>
            <label for="custom_id4">何かバッグにノイズがあると集中していない様子である</label>
        </div>
        
        <!-- 質問2: 聴覚 -->
        <div class="col-12">
            <p>Q2. 聴覚</p>
        </div>
        <div class="col-6">
            <%= f.check_box :question2, { multiple: true, id: "custom_id5", value: "1" } %>
            <label for="custom_id5">メモをあまりとらない</label>
            <%= f.check_box :question2, { multiple: true, id: "custom_id6", value: "2" } %>
            <label for="custom_id6">ものを書くときに独り言を言っている</label>
            <%= f.check_box :question2, { multiple: true, id: "custom_id7", value: "3" } %>
            <label for="custom_id7">指示を与えたときその指示を復唱する</label>
            <%= f.check_box :question2, { multiple: true, id: "custom_id8", value: "4" } %>
            <label for="custom_id8">サラっといったことをよく覚えている</label>
        </div>
        
        <!-- 質問3: 運動感覚 -->
        <div class="col-12">
            <p>Q3. 運動感覚</p>
        </div>
        <div class="col-6">
            <%= f.check_box :question3, { multiple: true, id: "custom_id9", value: "1" } %>
            <label for="custom_id9">説明をすると見本を実際見たいという</label>
            <%= f.check_box :question3, { multiple: true, id: "custom_id10", value: "2" } %>
            <label for="custom_id10">音楽など音があっても集中している様子である</label>
            <%= f.check_box :question3, { multiple: true, id: "custom_id11", value: "3" } %>
            <label for="custom_id11">自分のやり方でやろうとする</label>
            <%= f.check_box :question3, { multiple: true, id: "custom_id12", value: "4" } %>
            <label for="custom_id12">長時間座席についていると落ち着かない様子で、立ち上がる回数が多い</label>
        </div>
    </div>
    <div class="sindanbotan">
        <%= f.submit " 結果 " %>
    </div>
<% end %>

診断結果ページの記述

new.html.erb

<div class="intoro">
  <h5>診断結果</h5>
  <p>あなたにおすすめの診断結果は…</p>
</div>
<div class="perfume-container">
  <% if @dominant_type.present? %>
    <% case @dominant_type %>
    <% when :視覚型 %>
      <h3>視覚型タイプ</h3>
      <p>ここには何か自由に記述入れよう※任意</p>
    <% when :聴覚型タイプ %>
      <h3>あなたは聴覚型です</h3>
      <p>ここには何か自由に記述入れよう※任意</p>
    <% when :運動感覚型タイプ %>
      <h3>あなたは運動感覚型です</h3>
      <p>ここには何か自由に記述入れよう※任意</p>
    <% end %>
  <% else %>
    <p>診断結果が見つかりませんでした。もう一度試してください。</p>
  <% end %>
</div>

以上で完了です！controller, viewsを変更して自分なりの診断機能を作ってみてください！

おわりに

大学生限定プログラミングコミュニティのGeekSalonでメンターをしてます！
大学生でプログラミング気になる人はぜひHP見てみてね
要チェック！大学生限定プログラミングコミュニティGeekSalon