選択させて結果的に答えが出る『心理テスト』型JS組んでみました

こんにちは！
今回ウェブ制作を行うにあたって複雑な選択チャートみたいなものを作成する必要がありました。
本来は図でSVGなどでお越しもよかったのですが、スマホでの見え方を考えるとどうなんだとうか…というところもありこのブログに記載してあるJSを使用したということです。
本来簡単なチャートや図などはこれだけcssが発達しているのでcssで作成してしまうのですが、今回はスタートから選択肢が複数あって、さらに一つの選択肢から複数に分岐するという内容だったのでなかなかcssでは対処できませんでした。仮にできたとしても、選択肢が一つ増えたらメンテがめちゃくちゃ大変なことになる！というのが今回作成にあたった背景です。

ではさっそくサンプルから！

See the Pen 心理テストチャート by sayuri (@giraffeweb) on CodePen.0

コードをそれぞれ分離すると以下のような形になってます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="choose_box">
  
<div id="q_01" class="fit">
 <p>質問1</p>
<ul class="flexbox fw">
<li class="even"><a class="btn" href="#q_02">選択肢1</a></li>
<li class="odd"><a class="btn" href="#q_03">選択肢2</a></li>
<li class="odd"><a class="btn" href="#q_04">選択肢3</a></li>
<li class="odd"><a class="btn" href="#q_05">選択肢4</a></li>
</ul>
 </div>
 <!-- 最初の選択肢 -->
  
<div id="q_02" style="display: none;">
<p>質問2？</p>
<ul class="flexbox fw">
<li class="even"><a class="btn" href="#q_06">選択肢1-1</a></li>
<li class="odd"><a class="btn" href="#q_07">選択肢1-2</a></li>
</ul>
</div>
<!-- 次の選択肢 --> 
 
<div id="q_03" style="display: none;">
<p>質問2？</p>
<ul class="flexbox fw">
<li class="even"><a class="btn" href="#q_06">選択肢2-1</a></li>
<li class="odd"><a class="btn" href="#q_07">選択肢2-2</a></li>
</ul>
</div>
<!-- 次の選択肢 --> 
  
<div id="q_04" style="display: none;">
<p>質問2？</p>
<ul class="flexbox fw">
<li class="even"><a class="btn" href="#q_06">選択肢3-1</a></li>
<li class="odd"><a class="btn" href="#q_07">選択肢3-2</a></li>
</ul>
</div>
<!-- 次の選択肢 --> 
  
 <div id="q_05" style="display: none;">
<p>質問2？</p>
<ul class="flexbox fw">
<li class="even"><a class="btn" href="#q_06">選択肢4-1</a></li>
<li class="odd"><a class="btn" href="#q_07">選択肢4-2</a></li>
</ul>
</div>
<!-- 次の選択肢 -->
  
  
 <div id="q_06" style="display: none;">
        <p>あなたにおすすめなのは…</p>
        <h4>『答え①』です！！</h4>
   <span><a class="btn" href="#q_01">もどる</a></span>
</div>
 
<!-- 選択肢の答え① -->
  
  <div id="q_07" style="display: none;">
        <p>あなたにおすすめなのは…</p>
        <h4>『答え②』です！！</h4>
     <span><a class="btn" href="#q_01">もどる</a></span>
</div>
 
<!-- 選択肢の答え② -->
</div>

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
}

.choose_box {
  position: relative;
  height: 50vw;
  width: 100%;
}
 .choose_box p {
    font-size: 24px;
    display: block;
    font-weight: 600;
    text-align: center;
  }

.choose_box ul {
    width: 80%;
    text-align: center;
    margin: auto;
   display:flex;
  flex-wrap: wrap;
}
.choose_box ul li {
  width: calc(100% / 2 - 20px);
  margin-right: 20px;
  margin-bottom: 20px;
  list-style: none;
}

.choose_box ul li:nth-child(2n) {
   margin-right: 0;
}
.choose_box ul li a {
  color: #fff;
  display: block;
  padding: 20px 60px;
  text-align: center;
  background-color: #2791d4;
  font-weight: 600;
  font-size: 18px;
  border: 2px solid #2791d4;
  text-decoration: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.choose_box ul li a:hover {
   background-color: #fff;
  color: #2791d4;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}

h4 {
    width: 50%;
    clear: both;
    margin: auto;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-align: center;
  background-color: #C00003;
  }

.fit {
  position: absolute;
  left: 0px;
  top: 20px;
  width: 100%;
}
#q_06 span,#q_07 span {
  display: block;
  width:100%;
}
#q_06 a,#q_07 a {
  display: block;
  width:100%;
  text-align: center;
}

	$(function () {
		$(".btn").on("click", function () {
			$(this).closest("div").css("display", "none");
			id = $(this).attr("href");
			$(id).addClass("fit").show("slow");
		});
	});

cssはもちろん好きにカスタマイズしていただいて構いません。
選択肢も自由に増やせるのですごくいいと思います♪
ぜひみなさんも使ってみてください(*’ω’*)

Share: