BLOG

24年新卒 WEBデザイナー募集中 中途 WEBデザイナー募集中 24年新卒 WEBエンジニア募集中

【jQuery】Yes/No診断コンテンツの実装方法【デモ付き】

更新日:2022/04/28

【jQuery】Yes/No診断コンテンツの実装方法【デモ付き】

医薬品や化粧品のサイトには診断コンテンツが実装されていることが多いです。
ですが、実際に診断コンテンツを実装しようと思っても、どのように作成して良いか分からないと思います。

「サイトに診断コンテンツをを実装したいが方法が分からない」
「実装にはプラグインが必要なのか」
などと実装方法が分からない方に向けて、本記事ではjQueryを使ってYes/No診断コンテンツを実装する方法をご紹介します。

それではどうぞ。

今回作成する診断ツール

今回作成する診断ツールは以下の内容になります。

  • 質問は2つ

  • 各質問ごとに3つの選択肢のうちから1つだけを選択

  • 診断結果は5パターン

質問に対して「はい」「いいえ」「どちらとも言えない」の中から1つ選択し、
質問①と質問②で選択された回答の組み合わせによって診断結果を切り替えるもの
になります。

質問内容とその結果の組み合わせは以下になります。

完成形はこちらになります。
Yes/No診断

HTMLファイルを準備

まず元となるHTMLファイルを用意します。
今回は、同一ページ内で質問と結果を切り替える形で作成していきます。
質問内容が2つと結果が5つなので計7つのボックスを用意します。

ソースの表示

jQueryの前に、HTMLで必要な記述をそれぞれ説明していきます。

data属性

「診断スタート」ボタンと1つ目の質問の「次の質問へ」ボタンにdata属性を付けます。
この2つにdata属性を持たせる理由は、
「診断スタート」ボタン ⇒ 質問①
質問① ⇒ 質問②
と遷移させる為です。

今回は次のボックスを呼び出すのに使用するので「data-box-link」という名前にします。
呼び出したいボックスに指定したIDを、data属性に持たせます。

data属性
HTML5から追加された属性の一つで「カスタムデータ属性」とも呼ばれています。
その名の通りカスタムが可能で、「data-○○」という形で「○○」部分に独自の名前を入れて使うことができます。
主な役割は以下の3つです。
・CSSでのスタイリング
・Javascriptでの値を取得、利用
・jQueryでの値を取得、利用

jQueryで呼び出す

HTMLの準備が整ったらさっそくjQueryの記述をしていきます。
大まかに分けて必要な記述は以下の5点になります。

  • 「診断スタート」を押したら一番最初の質問内容を呼び出す

  • 「次の質問へ」を押したら次の質問内容を呼び出す

  • 選択肢を選択した時

  • 「診断結果へ」を押したら合った診断結果を呼び出す

  • 「診断終了」を押したら診断をやめる

全体のソースは以下になります。

ソースの表示

「診断スタート」を押したら一番最初の質問内容を呼び出す

診断スタートボタンをクリックしたら一番最初の質問内容を呼び出す記述は以下になります。

data属性を取得

ここで先程「診断スタート」ボタンと質問①の「次の質問へ」ボタンへ付けたdata属性を使用します。
クラス「tool-btn」をクリックし、その要素に付与されているdata属性を、変数targetに代入します。
取得したdata属性を#を付けて、変数boxの中にIDとして格納します。
これで呼び出す準備は完了です。

変数boxと同じIDを持つ要素にクラスを付与する

質問や結果のボックスを囲っている親要素にクラス「is-inactive」を付与する
「診断スタート」ボタンを非表示にして、その場所に診断内容を表示させる形にしているので、
親要素であるクラス「box-wrap」にabsoluteを指定しています。
それをクラスを付与させてrelativeに変更させます。

変数boxと同じIDを持つボックスをフェードインで表示する

クリックした要素の親要素にクラス「is-inactive」を付与する
「診断スタート」ボタンをクリックした際にクラスを付与して非表示にします。

次の質問へを押したら次の質問へ

「次の質問へ」ボタンがクリックされたら、一度クリックしたボタンがあるボックス以外をフェードアウトします。
クリックしたボタンの親要素のクラス「box」にクラス「is-inactive」を付けはずしして非表示にします。

選択肢

選択肢を選択させる記述は以下になります。

選択肢を選択した時

選択したボタンにクラス「is-inactive」をつけて選択状態にする
クラス「is-inactive」を付与して選択状態にします。
複数選択が出来ないようにする
今回、選択肢は1つだけ選択する形なので複数選択できないよう、選択した選択肢以外にクラス「is-inactive」が付与されていたら、外す記述を追加します。

未選択の時は遷移しない

未選択が出ないように、選択しないと次へのボタンを押せないようにします。

『選択肢が選択されていたら、次の質問ボタンからクラスを外して選択できる状態』にし、
『選択肢が選択されていなかった場合は、次の質問にクラスを付与して選択できない状態』にします。

「診断結果へ」を押したら合った診断結果を呼び出す

結果の出し分けは、質問①と質問②の選択肢の組み合わせで出し分けます。
組み合わせの種類は以下の5つです。

  • 「はい」が2つ以上の時

  • 「はい」が1つ かつ 「いいえ」が1つ、または「どちらとも言えない」が1つの時(質問①の選択肢が「はい」の場合)

  • 「はい」が1つ かつ 「いいえ」が1つ、または「どちらとも言えない」が1つの時(質問②の選択肢が「はい」の場合)

  • 「いいえ」が2つの時 または「いいえ」が1つ かつ 「どちらとも言えない」が1つの時

  • 「どちらとも言えない」が2つの時

全体のコードは以下になります。

ソースの表示

それぞれの選択肢の数を数える

まず、「はい」「いいえ」「どちらとも言えない」の選択肢の個数を数えるために、変数を宣言します。

選択した選択肢にはクラス「is-inactive」が付与されます。
それを、lengthプロパティを付けて個数をカウントできるようにします。
この変数をif文で判断して結果を出し分けます。

length
文字列の長さや配列の要素数などを取得するためのプロパティ

「はい」が2つの時

質問①と質問②のどちらも「はい」を選択した場合の記述は以下になります。

変数yesCntが2つ以上の時に、ID「a1」を持つ診断結果をフェードインで表示させます。

「はい」が1つ かつ 「いいえ」が1つ、または「どちらとも言えない」が1つの時

  • 質問①が「はい」の時

  • 質問②が「はい」の時

こちらは、質問①と質問②のどちらが「はい」なのかによって診断結果が変わります。

変数の個数を数えているif文の中に、質問①が「はい」の場合と質問②が「はい」の場合のif文を記述します。

1つ目の質問が「はい」の時

質問①が「はい」の場合、ID「a2」を持つ診断結果を表示させます。

2つ目の質問が「はい」の時

質問②が「はい」の場合、ID「a3」を持つ診断結果を表示させます。

「いいえ」が2つの時 または「いいえ」が1つ かつ 「どちらとも言えない」が1つの時

「いいえ」が2つ以上 または 「いいえ」が1つ かつ 「どちらともいえない」が1つの場合、ID「a4」を持つ診断結果を表示します。

「どちらとも言えない」が2つの時

質問①と質問②の選択肢が「どちらとも言えない」場合、ID「a5」を持つ診断結果を表示させます。

診断の終了

「診断を止める」ボタン、クラス「finish」を持つボタンをクリックしたら、現在開いているボックスをフェードアウトさせる
診断を進めていく中で、付与されたクラス「is-inactive」を外す
選択肢を選択した際に、次の質問へボタンから外されたクラス「is-inactive」を再度付与する。
これで最初の状態に戻ります。

まとめ

如何だったでしょうか?

プラグインや特定のjsなどは必要なく、クリックイベントとif文などといった普通のjQueryだけで実装することが出来ます。
ソース全体を見たらどこの記述でどの動きを実装しているか理解しづらいですが、分解して記述を見ていけば簡単に理解できます。

今回は、「はい」「いいえ」「どちらとも言えない」の○×△の結果が分かりやすいものでしたが、
それ以外の選択肢にしたい場合もあると思います。
この選択肢の時は○判定、そうじゃない時は×判定、などと付与されているクラスで判断しているので簡単に自分のサイトにあった内容に出来ると思います。

本記事が、診断コンテンツを実装したい方へのヒントとなれば幸いです。

FOLLOW US