診断ツール【Yes/Noチャート】をJQueryを使って作ってみる

WEBサイトを作っていると、たまに「あなたに最適なのは○○」「診断チェック」など見かけませんか？
質問に対して「Yes」か「No」の2択で進んでいく診断Yes/Noチャートです。

質問に答えていくことで、簡易的な診断をおこなってユーザーに何かしらの答えを与えてあげることができます。

サイトはどうしても情報を一方的に発信する場所になりがちですが、訪れたユーザーが能動的にサイト内のコンテンツを動かす体験ができると楽しいですよね。

実装できればコンテンツの幅も広がりそうだけど、難しそう。そう思っていたのですが、最近以外にも簡単に実装することができたので、その方法をまとめておこうと思います。

診断ツール【Yes/Noチャート】実装

デモはこちら
DEMO

Jqueryを使うので、まず読み込み。
それからYes/Noチャートのスクリプトを書き込みます。

書いてある内容を説明をすると、

「btn」というクラスを「クリック」したら実行。
つまり質問に対して「Yes」か「No」をクリックしたら実行。

このボタンが属していた「div」要素のdisplayをnoneにして表示を非表示に。
つまり今まで表示されていた質問のボックス要素を非表示に。

次にaタグに指定してあるidの要素に飛んで、showというクラスを降ってください。
つまり次の質問の要素を非表示→表示にしてください。

みたいな感じかと。

次のHTMLを見たら、だいたい仕組みが理解でいるかもしれません。

	

		
【質問①】
		

		
Yes
		
No
		
	

	

		
【質問②-1】
		

		
Yes
		
No
		
	

	

		
【質問②-2】
		

		
Yes
		
No
		
	

	

		
【答えA】
		
	

	

		
【答えB】
	

あと必要なCSSは次のような感じに

.yesno {
        height: 500px;
	position:relative;
}
 
.yesno ul li {
	list-style:none;
	float: left;
	text-align: center;
	display: block;
	color: #FFF;
	background-color: #066;
	line-height: 300px;
	font-size: 120%;
}
.positionFit {
	position:absolute;
	left: 0px;
	top: 20px;
}

positionのabsoluteで、すべての質問ボックスが重なっていて、リンクによって表示させる質問ボックスを切り替えているんですね。

JQueryは使用しますが、なにか重いプラグインを導入するわけでもなく、数行のJSを書くだけで実装できるのでオススメです。

冒頭にも書きましたが、コンテンツの幅は広がりますし、アイデア次第では面白い企画にも使えるかもしれません！Yes/Noチャート。良い感じです。