<jQueryで作る>画面がぱっぱ変わる性格診断アプリ #CSS

もともとのシュミレーション問い合わせ画面を、
ネットによくある性格診断アプリに変えて、簡単にコーディング。
今回は「選択するたびに質問がぱっぱ変わる性格診断アプリ」を作成。
デモはこちら。

See the Pen eYNqrPL by 坊拓磨 (@bo_chan6130) on CodePen.

準備物

①htmlとcssとjs
②表記をjQueryで書いているのでCDNで読み込んでおく。

今回はjsでの動作をメインにしている記事なので、cssはcode Penからコピペするかデザインしてください。

実装過程(思考)

①質問を回答(選択ボタンをおす)すれば、前の質問が消えて、次の質問が現れる
②回答の選択数に応じて答えの出し方を記述

の２つ。

以下説明。

①質問を回答すれば、前の質問が消えて、次の質問が現れる

index.html

<!DOCTYPE html>
<html>
<head>
  <title>パパッと変わる性格診断</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
</script>

<div class="choose_box">
      <div class="app-theme">
        <p>ぱっぱ画面が変わる性格診断アプリ(全5問)</p>
      </div>


 <!-- ここから５つ質問を記述 -->
      <!-- 質問1 -->
      <div id="q_01" class="fit">
        <p>質問1: あなたは普段　</p>
        <ul>
          <li><a class="btn" href="#q_02" data-value="a">話すペースが速い</a></li>
          <li><a class="btn" href="#q_02" data-value="b">話すペースがゆっくり</a></li>
        </ul>
      </div>

      <!-- 質問2 -->
      <div id="q_02" style="display: none;">
        <p>質問2:　あなたは普段、相手との会話で</p>
        <ul>
          <li><a class="btn" href="#q_03" data-value="a">間をとらずに話す</a></li>
          <li><a class="btn" href="#q_03" data-value="b">間をとりながら話す</a></li>
        </ul>
      </div>

      <!-- 質問3 -->
      <div id="q_03" style="display: none;">
        <p>質問3:　あなたの話し方は</p>
        <ul>
          <li><a class="btn" href="#q_04" data-value="a">語尾がキッパリ</a></li>
          <li><a class="btn" href="#q_04" data-value="b">語尾がソフト</a></li>
        </ul>
      </div>

      <!-- 質問4 -->
      <div id="q_04" style="display: none;">
        <p>質問4:　あなたは普段声が</p>
        <ul>
          <li><a class="btn" href="#q_05" data-value="a">大きめ</a></li>
          <li><a class="btn" href="#q_05" data-value="b">小さめ</a></li>
        </ul>
      </div>

      <!-- 質問5 -->
      <div id="q_05" style="display: none;">
        <p>質問5:　意見を求められた時、あなたは</p>
        <ul>
          <li><a class="btn end" data-value="a">自分から口火を切る</a></li>
          <li><a class="btn end" data-value="b">後から発言する</a></li>
        </ul>
      </div>



<!-- ここから以下回答 -->
 <!-- この辺に回答を記述 -->
 </div>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

①それぞれの質問に「#q_01」のようにidをふる。
②最初の「質問1」は画面に出力しておく。他の質問はdisplay:none;を記述し、あとで前の質問が回答されたら、次の質問のdisplay:none;を解除する、という指示をjsに後述。
③また合わせて、次の質問を出力する際にclass="fit"をaddClass()メソッドでつけることで、fitがついている質問のみを出力されるようにする。
④タグの２つの選択に、それぞれdata属性でa,bと値をふっておく。
⑤最後の質問「質問5」にはclassにendをつけておいて、「end」がクリックされたら結果が表示される仕組みをjsに後述する。

と、下処理はこんな感じ。

index.js

//ボタンを押すごとに画面が切り替わる関数
  $(function () {
    $(".btn").on("click", function () {
      //btnクラスをクリック後の関数処理
      $(this).closest("div").css("display", "none");
      //質問画面にあたらる親要素divをdisplay:none;にする
      id = $(this).attr("href");
      //次の質問hrefをidに格納
      $(id).addClass("fit").fadeIn("slow").show();
      //次の質問にfitをつけて出力。
    });

これで、画面の切り替える処理は終了。

②回答の選択数に応じて答えの出し方を記述

次に、回答に応じて答えを出力する処理を記述。
はじめにhtmlに回答を記述。

index.html

<!-- ここから以下回答 -->
  <!-- 回答の答え1 -->
     <div id="answer_01" class="result" style="display: none;">
      <div class="result_theme ">
            <p>あなたの性格は</p>
      </div>
      <div class="result_type0 ">
            <h4>『イケイケどんどん』タイプ</h4>
      </div>
      <div class="result_discription0">
        <h2>めっちゃ自己主張 × めっちゃスピーディ</h2>
        <p>
          　あなたは自己主張強いのでリーダーに向いています。今すぐリーダーになろう。
        </p>
      </div>
       <div class="return-btn">
        <a class="return" href="index.html">もどる</a>
       </div>
     </div>



  <!-- 回答の答え2 -->
     <div id="answer_02" style="display: none;">
          <div class="result_theme ">
            <p>あなたの性格は</p>
      </div>
      <div class="result_type1 ">
            <h4>『まろやか』タイプ</h4>
      </div>
      <div class="result_discription1">
        <h2>周りを立てる人 × じっくり考える人</h2>
        <p>
          　あなたは物事をじっくり考えて、最善策を練ることが得意。組織や周りを支えることが得意。
        </p>
      </div>
       <div class="return-btn">
        <a class="return" href="index.html">もどる</a>
       </div>
     </div>

①それぞれの回答のdivタグに「answer_01」のようにidをふる
②回答はdisplay:none;で隠しておく。あとで、回答に応じて、display:none;を解除する処理をjsに記述する。

index.js

//選択ボタンデータを配列に入れてカウントする関数
      var countA;
      //data-value="a"を選択した数を入れる変数
      var countB;
      //data-value="b"を選択した数を入れる変数
      var box =[];
      //それぞれのデータを配列に入れるための変数box
    $(".btn").each(function(){
      $(this).on('click',function(){
        var value = $(this).data("value");
         box.push(value);
         //data-value値をboxに入れる。(配列に値を入れるときはpush()を使用)

        countA = box.filter(function(x){
                      return x === "a"
                    }).length;
        //aの数を変数countAへ入れる
        countB = box.filter(function(y){
                        return y === "b"
                    }).length;
        //bの数を変数countBへ入れる
      });
    });

ここまでで選択するたびに、その選択したデータの数をcountA / countBに入っている。
(もともとの開発アプリから間引いたものなので、もしかした遠回りしているコーディングかもしれません)

以下、回答数に応じて答えを出力する処理を記述。

//結果を出力する関数
    $('.end').on('click',function(){
      //endクラスをクリックしたときの関数
      if( countA > countB ) {
        $('#answer_01').css("display",""); //回答1
      //answer_01のdisplayを""へ
      } else {
        $('#answer_02').css("display","");//回答2
      //answer_02のdisplayを""へ
    }
  });

display:none;をdisplay:"";とすることで、
選択された回答は出力されるように処理を記述。

これで、簡単な診断テストは完成。

まとめ

今回は２択問題で結果を出力しているが、
４択にしたい場合は、liタグを増やしてdata-valueをいじる→jsで該当処理をいじる
とすることもできるし、
回答数を増やす場合は、出力処理の条件を変更すれば、
簡単に出力できるはず。

コピペして使えると思うので、
使用したい方はドゾー