BLOG ブログ

ホームページ制作
BLOG
【jQuery】Yes/No診断コンテンツの実装方法【デモ付き】

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

更新日：2022/04/28

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

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

それではどうぞ。

1 今回作成する診断ツール
2 HTMLファイルを準備
- 2.1 data属性
3 jQueryで呼び出す
4 まとめ

今回作成する診断ツール

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

質問は2つ
各質問ごとに3つの選択肢のうちから1つだけを選択
診断結果は5パターン

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

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

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

HTMLファイルを準備

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

ソースの表示


<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>Yes/No診断</title>
  <link href="css/style.css" rel="stylesheet" media="all">
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/common.js"></script>
</head>
<body>
  <div class="wrap">
    <div class="title-wrap">
      <div class="inner-block">
        <h1 class="title">
          Yes/No診断
        </h1>
      </div>
    </div>
    <div class="diagnose-wrap">
      <div class="inner-block">
        <div class="btn-wrap">
          <button type="button" class="tool-btn start-btn" data-box-link="q1">診断スタート</button>
        </div>
        <div class="box-wrap">
          <!-- Q1 質問内容① -->
          <div id="q1" class="box">
            <span class="close-btn">
              <span class="mark"></span>
            </span>
            <h2 class="title">
              <span class="num">Q1.</span>
              あなたは猫は<span class="ib">好きですか？</span><span class="small">（一つだけ選択）</span>
            </h2>
            <div class="select-wrap">
              <button type="button" class="select yes">はい</button>
              <button type="button" class="select no">いいえ</button>
              <button type="button" class="select vague">どちらとも言えない</button>
            </div>
            <div class="btn-wrap">
              <button type="button" data-box-link="q2" class="tool-btn next is-active">次の質問へ</button>
            </div>
          </div>

          <!-- Q2 質問内容② -->
          <div id="q2" class="box">
            <span class="close-btn">
              <span class="mark"></span>
            </span>
            <h2 class="title">
              <span class="num">Q2.</span>
              あなたは犬は<span class="ib">好きですか？</span><span class="small">（一つだけ選択）</span>
            </h2>
            <div class="select-wrap">
              <button type="button" class="select yes">はい</button>
              <button type="button" class="select no">いいえ</button>
              <button type="button" class="select vague">どちらとも言えない</button>
            </div>
            <div class="btn-wrap">
              <button type="button" class="tool-btn next result is-active">診断結果へ</button>
            </div>
          </div>

          <!-- A1 診断結果① -->
          <div id="a1" class="box result">
            <span class="close-btn">
              <span class="mark"></span>
            </span>
            <h2 class="title">
              あなたは動物好きです！
            </h2>
            <p class="txt">
              猫も犬も好きなあなたは<br class="sp">動物が好きな人です。
            </p>
            <div class="btn-wrap">
              <button type="button" class="tool-btn finish">診断終了</button>
            </div>
          </div>

          <!-- A2 診断結果② -->
          <div id="a2" class="box result">
            <span class="close-btn">
              <span class="mark"></span>
            </span>
            <h2 class="title">
              あなたは猫好きです！
            </h2>
            <p class="txt">
              猫が好きなあなたは<br class="sp">猫が好きな人です。
            </p>
            <div class="btn-wrap">
              <button type="button" class="tool-btn finish">診断終了</button>
            </div>
          </div>

          <!-- A3 診断結果③ -->
          <div id="a3" class="box result">
            <span class="close-btn">
              <span class="mark"></span>
            </span>
            <h2 class="title">
              あなたは犬好きです！
            </h2>
            <p class="txt">
              犬が好きなあなたは<br class="sp">犬が好きな人です。
            </p>
            <div class="btn-wrap">
              <button type="button" class="tool-btn finish">診断終了</button>
            </div>
          </div>

          <!-- A4 診断結果④ -->
          <div id="a4" class="box result">
            <span class="close-btn">
              <span class="mark"></span>
            </span>
            <h2 class="title">
              あなたは動物が苦手な人です！
            </h2>
            <p class="txt">
              猫も犬も苦手なあなたは<br class="sp">動物が苦手な人です。
            </p>
            <div class="btn-wrap">
              <button type="button" class="tool-btn finish">診断終了</button>
            </div>
          </div>

          <!-- A5 診断結果⑤ -->
          <div id="a5" class="box result">
            <span class="close-btn">
              <span class="mark"></span>
            </span>
            <h2 class="title">
              あなたは動物に興味がない人です！
            </h2>
            <p class="txt">
              これから好きになる<br class="sp">可能性が高いです。
            </p>
            <div class="btn-wrap">
              <button type="button" class="tool-btn finish">診断終了</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

<html>

<head>

</head>

<body>

Yes/No診断

</h1>

</div>

<button type="button" class="tool-btn start-btn" data-box-link="q1">診断スタート</button>

</div>

</span>

あなたは猫は<span class="ib">好きですか？</span><span class="small">（一つだけ選択）</span>

</h2>

<button type="button" class="select vague">どちらとも言えない</button>

</div>

<button type="button" data-box-link="q2" class="tool-btn next is-active">次の質問へ</button>

</div>

</span>

あなたは犬は<span class="ib">好きですか？</span><span class="small">（一つだけ選択）</span>

</h2>

<button type="button" class="select vague">どちらとも言えない</button>

</div>

<button type="button" class="tool-btn next result is-active">診断結果へ</button>

</div>

</span>

あなたは動物好きです！

</h2>

猫も犬も好きなあなたは<br class="sp">動物が好きな人です。

</p>

</div>

</span>

あなたは猫好きです！

</h2>

猫が好きなあなたは<br class="sp">猫が好きな人です。

</p>

</div>

</span>

あなたは犬好きです！

</h2>

犬が好きなあなたは<br class="sp">犬が好きな人です。

</p>

</div>

</span>

あなたは動物が苦手な人です！

</h2>

猫も犬も苦手なあなたは<br class="sp">動物が苦手な人です。

</p>

</div>

</span>

あなたは動物に興味がない人です！

</h2>

これから好きになる<br class="sp">可能性が高いです。

</p>

</div>

</body>

</html>

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

data属性

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


// 診断スタート
<div class="btn-wrap">
  <button type="button" class="tool-btn start-btn" data-box-link="q1">診断スタート</button>
</div>

// 次の質問へ
<div class="btn-wrap">
  <button type="button" data-box-link="q2" class="tool-btn next is-active">次の質問へ</button>
</div>

// 診断スタート

<button type="button" class="tool-btn start-btn" data-box-link="q1">診断スタート</button>

</div>

// 次の質問へ

<button type="button" data-box-link="q2" class="tool-btn next is-active">次の質問へ</button>

</div>

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

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

jQueryで呼び出す

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

「診断スタート」を押したら一番最初の質問内容を呼び出す
「次の質問へ」を押したら次の質問内容を呼び出す
選択肢を選択した時
「診断結果へ」を押したら合った診断結果を呼び出す
「診断終了」を押したら診断をやめる

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

ソースの表示


$(function () {

  //  スタートボタンがクリックされたら
  $('.tool-btn').on('click', function () {
    //  クリックした要素のdata属性を取得
    var target = $(this).data('box-link');
    //  上記で取得した要素と同じID名を持つ要素を取得
    var box = $('#' + target);
    //  その要素にclassを付け替える
    $(box).parent().addClass('is-inactive');
    $(box).fadeIn();
    $(this).parent().addClass('is-inactive');
  });

  //  「次の質問へ」がクリックされたら
  $('.box .tool-btn').on('click', function () {
    $(this).not($(this).parents('.box').fadeOut(1200));
    $(this).parents('.box').toggleClass('is-inactive');
  });

  //  選択肢がクリックされたら
  $('.select').on('click', function () {
    $(this).toggleClass('is-inactive');
    $(this).siblings($('.select')).not($(this)).removeClass('is-inactive');

    var select = $(this).parents('.box').find('.select');
    var toolBtn = $(this).parents('.box').find('.tool-btn.next');

    //  選択されていないとボタンをクリックできないようにする
    if (select.hasClass('is-inactive')) {
      toolBtn.removeClass('is-inactive');
    } else {
      toolBtn.addClass('is-inactive');
    }
  });

  // 診断結果の出し分け
  $('.tool-btn.result').on('click', function () {

    // それぞれの選択肢の数を数える
    var yesCnt = $('.select.yes.is-inactive').length;
    var noCnt = $('.select.no.is-inactive').length;
    var vagueCnt = $('.select.vague.is-inactive').length;

    // 「はい」が2つ以上の時
    if (yesCnt >= 2) {
      $('#a1').fadeIn();
    }
    // 「はい」が1つ かつ 「いいえ」が1つ または「どちらともいえない」が1つの時
    else if ((yesCnt == 1) && ((noCnt == 1) || (vagueCnt == 1))) {
      if($('#q1 .select.yes').hasClass('is-inactive')) {
        $('#a2').fadeIn();
      } else if($('#q2 .select.yes').hasClass('is-inactive')) {
        $('#a3').fadeIn();
      }
    }
    // 「いいえ」が2つ以上 または 「いいえ」が1つ かつ 「どちらともいえない」が1つの時
    else if ((noCnt >= 2) || ((noCnt == 1) && (vagueCnt == 1))){
      $('#a4').fadeIn();
    }
    // 「どちらともいえない」が2つ以上の時
    else if (vagueCnt >= 2) {
      $('#a5').fadeIn();
    }
  });

  //  診断を閉じる
  $('.close-btn, .tool-btn.finish').on('click', function () {
    $('.box').fadeOut("fast");
    $('.select, .btn-wrap, .box-wrap, .box').removeClass('is-inactive');
    $('.tool-btn.next').addClass('is-inactive');
  });

});

$(function () {

// スタートボタンがクリックされたら

$('.tool-btn').on('click', function () {

// クリックした要素のdata属性を取得

var target = $(this).data('box-link');

// 上記で取得した要素と同じID名を持つ要素を取得

var box = $('#' + target);

// その要素にclassを付け替える

$(box).parent().addClass('is-inactive');

$(box).fadeIn();

$(this).parent().addClass('is-inactive');

});

// 「次の質問へ」がクリックされたら

$('.box .tool-btn').on('click', function () {

$(this).not($(this).parents('.box').fadeOut(1200));

$(this).parents('.box').toggleClass('is-inactive');

});

// 選択肢がクリックされたら

$('.select').on('click', function () {

$(this).toggleClass('is-inactive');

$(this).siblings($('.select')).not($(this)).removeClass('is-inactive');

var select = $(this).parents('.box').find('.select');

var toolBtn = $(this).parents('.box').find('.tool-btn.next');

// 選択されていないとボタンをクリックできないようにする

if (select.hasClass('is-inactive')) {

toolBtn.removeClass('is-inactive');

} else {

toolBtn.addClass('is-inactive');

}

});

// 診断結果の出し分け

$('.tool-btn.result').on('click', function () {

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

var yesCnt = $('.select.yes.is-inactive').length;

var noCnt = $('.select.no.is-inactive').length;

var vagueCnt = $('.select.vague.is-inactive').length;

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

if (yesCnt >= 2) {

$('#a1').fadeIn();

}

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

else if ((yesCnt == 1) && ((noCnt == 1) || (vagueCnt == 1))) {

if($('#q1 .select.yes').hasClass('is-inactive')) {

$('#a2').fadeIn();

} else if($('#q2 .select.yes').hasClass('is-inactive')) {

$('#a3').fadeIn();

}

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

else if ((noCnt >= 2) || ((noCnt == 1) && (vagueCnt == 1))){

$('#a4').fadeIn();

}

// 「どちらともいえない」が2つ以上の時

else if (vagueCnt >= 2) {

$('#a5').fadeIn();

}

});

// 診断を閉じる

$('.close-btn, .tool-btn.finish').on('click', function () {

$('.box').fadeOut("fast");

$('.select, .btn-wrap, .box-wrap, .box').removeClass('is-inactive');

$('.tool-btn.next').addClass('is-inactive');

});

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

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


//  スタートボタンがクリックされたら
  $('.tool-btn').on('click', function () {
    //  クリックした要素のdata属性を取得
    var target = $(this).data('box-link');
    //  上記で取得した要素と同じID名を持つ要素を取得
    var box = $('#' + target);
    //  その要素にclassを付け替える
    $(box).parent().addClass('is-inactive');
    $(box).fadeIn();
    $(this).parent().addClass('is-inactive');
  });

// スタートボタンがクリックされたら

$('.tool-btn').on('click', function () {

// クリックした要素のdata属性を取得

var target = $(this).data('box-link');

// 上記で取得した要素と同じID名を持つ要素を取得

var box = $('#' + target);

// その要素にclassを付け替える

$(box).parent().addClass('is-inactive');

$(box).fadeIn();

$(this).parent().addClass('is-inactive');

});

data属性を取得


//  クリックした要素のdata属性を取得
  var target = $(this).data('box-link');
//  上記で取得した要素と同じID名を持つ要素を取得
  var box = $('#' + target);

// クリックした要素のdata属性を取得

var target = $(this).data('box-link');

// 上記で取得した要素と同じID名を持つ要素を取得

var box = $('#' + target);

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

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


//  その要素にclassを付け替える
  $(box).parent().addClass('is-inactive');  // ①
  $(box).fadeIn(); // ②
  $(this).parent().addClass('is-inactive'); // ③

// その要素にclassを付け替える

$(box).parent().addClass('is-inactive'); // ①

$(box).fadeIn(); // ②

$(this).parent().addClass('is-inactive'); // ③

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

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

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

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


 //  「次の質問へ」がクリックされたら
  $('.box .tool-btn').on('click', function () {
    $(this).not($(this).parents('.box').fadeOut());
    $(this).parents('.box').toggleClass('is-inactive');
  });

// 「次の質問へ」がクリックされたら

$('.box .tool-btn').on('click', function () {

$(this).not($(this).parents('.box').fadeOut());

$(this).parents('.box').toggleClass('is-inactive');

});

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

選択肢

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


//  選択肢がクリックされたら
  $('.select').on('click', function () {
    $(this).toggleClass('is-inactive');
    $(this).siblings($('.select')).not($(this)).removeClass('is-inactive');

    var select = $(this).parents('.box').find('.select');
    var toolBtn = $(this).parents('.box').find('.tool-btn.next');

    //  選択されていないとボタンをクリックできないようにする
    if (select.hasClass('is-inactive')) {
      toolBtn.removeClass('is-inactive');
    } else {
      toolBtn.addClass('is-inactive');
    }
  });

// 選択肢がクリックされたら

$('.select').on('click', function () {

$(this).toggleClass('is-inactive');

$(this).siblings($('.select')).not($(this)).removeClass('is-inactive');

var select = $(this).parents('.box').find('.select');

var toolBtn = $(this).parents('.box').find('.tool-btn.next');

// 選択されていないとボタンをクリックできないようにする

if (select.hasClass('is-inactive')) {

toolBtn.removeClass('is-inactive');

} else {

toolBtn.addClass('is-inactive');

}

});

選択肢を選択した時


$('.select').on('click', function () {
    $(this).toggleClass('is-inactive'); // ①
    $(this).siblings($('.select')).not($(this)).removeClass('is-inactive'); // ②
  });

$('.select').on('click', function () {

$(this).toggleClass('is-inactive'); // ①

$(this).siblings(