もともとのシュミレーション問い合わせ画面を、
ネットによくある性格診断アプリに変えて、簡単にコーディング。
今回は「選択するたびに質問がぱっぱ変わる性格診断アプリ」を作成。
デモはこちら。
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>
と、下処理はこんな感じ。
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>
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で該当処理をいじる
とすることもできるし、
回答数を増やす場合は、出力処理の条件を変更すれば、
簡単に出力できるはず。
コピペして使えると思うので、
使用したい方はドゾー