もともとのシュミレーション問い合わせ画面を、
ネットによくある性格診断アプリに変えて、簡単にコーディング。
今回は「選択するたびに質問がぱっぱ変わる性格診断アプリ」を作成。
デモはこちら。
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><metacharset="utf-8"><linkrel="stylesheet"type="text/css"href="index.css"></head><body></script><divclass="choose_box"><divclass="app-theme"><p>ぱっぱ画面が変わる性格診断アプリ(全5問)</p></div><!-- ここから５つ質問を記述 --><!-- 質問1 --><divid="q_01"class="fit"><p>質問1: あなたは普段 </p><ul><li><aclass="btn"href="#q_02"data-value="a">話すペースが速い</a></li><li><aclass="btn"href="#q_02"data-value="b">話すペースがゆっくり</a></li></ul></div><!-- 質問2 --><divid="q_02"style="display: none;"><p>質問2: あなたは普段、相手との会話で</p><ul><li><aclass="btn"href="#q_03"data-value="a">間をとらずに話す</a></li><li><aclass="btn"href="#q_03"data-value="b">間をとりながら話す</a></li></ul></div><!-- 質問3 --><divid="q_03"style="display: none;"><p>質問3: あなたの話し方は</p><ul><li><aclass="btn"href="#q_04"data-value="a">語尾がキッパリ</a></li><li><aclass="btn"href="#q_04"data-value="b">語尾がソフト</a></li></ul></div><!-- 質問4 --><divid="q_04"style="display: none;"><p>質問4: あなたは普段声が</p><ul><li><aclass="btn"href="#q_05"data-value="a">大きめ</a></li><li><aclass="btn"href="#q_05"data-value="b">小さめ</a></li></ul></div><!-- 質問5 --><divid="q_05"style="display: none;"><p>質問5: 意見を求められた時、あなたは</p><ul><li><aclass="btn end"data-value="a">自分から口火を切る</a></li><li><aclass="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 --><divid="answer_01"class="result"style="display: none;"><divclass="result_theme "><p>あなたの性格は</p></div><divclass="result_type0 "><h4>『イケイケどんどん』タイプ</h4></div><divclass="result_discription0"><h2>めっちゃ自己主張 × めっちゃスピーディ</h2><p> あなたは自己主張強いのでリーダーに向いています。今すぐリーダーになろう。
</p></div><divclass="return-btn"><aclass="return"href="index.html">もどる</a></div></div><!-- 回答の答え2 --><divid="answer_02"style="display: none;"><divclass="result_theme "><p>あなたの性格は</p></div><divclass="result_type1 "><h4>『まろやか』タイプ</h4></div><divclass="result_discription1"><h2>周りを立てる人 × じっくり考える人</h2><p> あなたは物事をじっくり考えて、最善策を練ることが得意。組織や周りを支えることが得意。
</p></div><divclass="return-btn"><aclass="return"href="index.html">もどる</a></div></div>
①それぞれの回答のdivタグに「answer_01」のようにidをふる
②回答はdisplay:none;で隠しておく。あとで、回答に応じて、display:none;を解除する処理をjsに記述する。
index.js
//選択ボタンデータを配列に入れてカウントする関数varcountA;//data-value="a"を選択した数を入れる変数varcountB;//data-value="b"を選択した数を入れる変数varbox=[];//それぞれのデータを配列に入れるための変数box$(".btn").each(function(){$(this).on('click',function(){varvalue=$(this).data("value");box.push(value);//data-value値をboxに入れる。(配列に値を入れるときはpush()を使用)countA=box.filter(function(x){returnx==="a"}).length;//aの数を変数countAへ入れるcountB=box.filter(function(y){returny==="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で該当処理をいじる
とすることもできるし、
回答数を増やす場合は、出力処理の条件を変更すれば、
簡単に出力できるはず。
コピペして使えると思うので、
使用したい方はドゾー