診断アプリの作る方法（jQueryのみで実装）

概要

診断アプリを作りました。

こんな感じ

こちらの診断アプリをJS（jQuery）のみで実装したので記事をしました。

まずは、ビューを用意する。

#wrapper
  .question
    %h1.title ソーシャルスタイル診断
    %ul.questions
      %li.textBox
        %span.text Q1. 冷静で人からの指示は嫌い
        %label.yes
          %input.typeA.typeD{:name => "q01", :type => "radio"}>/
          YES
        %label.no
          %input.typeB.typeC{:name => "q01", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q2. 自分の話をすることを好む
        %label.yes
          %input.typeB.typeA{:name => "q02", :type => "radio"}>/
          YES
        %label.no
          %input.typeC.typeD{:name => "q02", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q3. 周りの意見を大事にする方だ
        %label.yes
          %input.typeC.typeD{:name => "q03", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeB{:name => "q03", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q4. 情報を集めたり分析することが得意だ
        %label.yes
          %input.typeD.typeC{:name => "q04", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeB{:name => "q04", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q5. 戦略立案や勝負事への興味が強い
        %label.yes
          %input.typeA.typeD{:name => "q05", :type => "radio"}>/
          YES
        %label.no
          %input.typeB.typeC{:name => "q05", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q6. ノリがよくムードメーカーだと言われる
        %label.yes
          %input.typeB.typeC{:name => "q06", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeD{:name => "q06", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q7. 気配り上手、聞き上手と言われる
        %label.yes
          %input.typeC.typeD{:name => "q07", :type => "radio"}>/
          YES
        %label.no
          %input.typeA.typeB{:name => "q07", :type => "radio"}>/
          NO
      %li.textBox
        %span.text Q8. 感情を表に出すのは、苦手だ
        %label.yes
          %input.typeD.typeA{:name => "q08", :type => "radio"}>/
          YES
        %label.no
          %input.typeC.typeB{:name => "q08", :type => "radio"}>/
          NO
    %button 診断する
  .result.ResultA
    .ResultA__recommend あなたの性格は・・・・
    .ResultA__Amenu
      .ResultA__Amenu__text 前進型・行動派
    %p あなたは迅速かつ合理的に仕事を進めるタイプです。ビジネスライクな性格で、プロセスよりも結果を重視し、決断力に優れています。経営者に多いタイプに多いとされます。
    = image_tag("close-up-face-fashion-fine-looking-450212.jpg", width: "306px",class: "image")
  .result.ResultB
    .ResultB__recommend あなたの性格は・・・・
    .ResultB__Bmenu
      .ResultB__Bmenu__text 直感型・感覚派
    %p あなたは、周りから注目されることを好むタイプです。ビジネス面では、自ら先頭に立って人を率いていく傾向にあります。
    = image_tag("men-s-white-button-up-dress-shirt-708440.jpg", width: "306px",class: "image")
  .result.ResultC
    .ResultC__recommend あなたの性格は・・・・
    .ResultC__Cmenu
      .ResultC__Cmenu__text 温和型・協調派
    %p あなたは、どこにいてもみんなの調停役になるタイプです。周囲の気持ちに敏感で、自分の話をするよりも相手の話に耳を傾ける傾向にあります。
    = image_tag("woman-wearing-teal-dress-sitting-on-chair-talking-to-man-2422280.jpg", width: "306px",class: "image")
  .result.ResultD
    .ResultD__recommend あなたの性格は・・・・
    .ResultD__Dmenu
      .ResultD__Dmenu__text 分析型・思考派
    %p あなたは、独特の価値観や雰囲気を持っていて、周囲に影響されにくいマイペースな人です。仕事においては、データの収集や分析に黙々と取り組みます。
    = image_tag("person-using-a-laptop-3183131.jpg", width: "306px",class: "image")

次にJS(jQuery)を用意する。

$(function(){
  //ボタンがクリックされた時
  $("button").on("click", function(){
  //一度結果を非表示にする
    $(".result").hide();   
    //問題数を取得
    var qNum = $("ul li").length;
    if( $("ul li input:checked").length < qNum ){
      //全てチェックしていなかったらアラートを出す
      alert("未回答の問題があります");
    } 
    else {
        //チェックされているinputの数を取得
        var typeANum = $(".typeA:checked").length,
            typeBNum = $(".typeB:checked").length,
            typeCNum = $(".typeC:checked").length,
            typeDNum = $(".typeD:checked").length,
            typeENum = $(".typeD:checked").length;
        if( typeANum >= typeBNum && typeANum >= typeCNum && typeANum >= typeDNum && typeANum >= typeENum) {
            $(".ResultA").fadeIn();
        } else if( typeBNum >= typeANum && typeBNum >= typeCNum && typeBNum >= typeDNum && typeBNum >= typeENum) {
            $(".ResultB").fadeIn();
        } else if( typeCNum >= typeANum && typeCNum >= typeBNum && typeCNum >= typeDNum && typeCNum >= typeENum) {
            $(".ResultC").fadeIn();
        } else if( typeDNum >= typeBNum && typeDNum >= typeCNum && typeDNum >= typeANum && typeDNum >= typeENum) {
            $(".ResultD").fadeIn();
        } else if( typeENum >= typeBNum && typeENum >= typeCNum && typeENum >= typeANum && typeENum >= typeDNum) {
            $(".ResultE").fadeIn();
      }
    }
  });
});

解説

ちょい説明します。

  .result.ResultA
    .ResultA__recommend あなたの性格は・・・・
    .ResultA__Amenu
      .ResultA__Amenu__text 前進型・行動派
    %p あなたは迅速かつ合理的に仕事を進めるタイプです。ビジネスライクな性格で、プロセスよりも結果を重視し、決断力に優れています。経営者に多いタイプに多いとされます。
    = image_tag("close-up-face-fashion-fine-looking-450212.jpg", width: "306px",class: "image")

回答結果となる.result.ResultAは、CSSでdisplay: none;により普段は非表示にしています。

if( typeANum >= typeBNum && typeANum >= typeCNum && typeANum >= typeDNum && typeANum >= typeENum) {
    $(".ResultA").fadeIn();

もし.typeAが.typeB .typeC .typeD .typeEよりinputの数（.length）が多い場合は、

$(".ResultA").fadeIn();

fadeInメソッドで、非表示にされていた.result.ResultAをフェードイン表示させます。

---

こんな感じで.typeB以下のif文が同じ要領で続きます。

これを応用すれば、色んな診断アプリを作れそうです。

補足

hamlからHTMLに変換する場合は、以下の記事を参考にしてください。
https://qiita.com/chezou/items/0e9bd4f9eb8314dc2aec#hamlhtml%E5%A4%89%E6%8F%9B