BLOG
25年新卒 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」を付けはずしして非表示にします。

選択肢

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

選択肢を選択した時