1問ずつ質問に答えていく一問一答形式のアンケートをjQueryで作るシンプルな方法

どうもこんにちは。
Web/App/UIデザイナーのサトウです。

今回は、1問ずつ質問に答えていく一問一答アンケートをjQueryで作るシンプルな方法をご紹介します。

一問一答形式のアンケート

アンケートのUIとしては縦長のページで下にスクロールしながら答えていくというのがオーソドックスですね。
あらかじめ全体像を把握することができるので、ユーザーにとっては安心感のある形式です。
ただ、この形式は場合によってはユーザーに「質問がたくさんあるなぁ」「長いアンケートだなぁ」という印象を与えてしまう可能性もあります。

一方、別の方法として、スクロールさせず1画面に1問ずつ質問を表示して、答えるごとに次の質問を表示していくというUIも考えられます。
このUIだと、目の前にある小さなタスクの積み重ねなので、ユーザーに与える心理的負担を軽減する効果が期待できます。
ただしこの場合、ユーザーのストレスにならないよう、全部で何問あるのか、いま何問目なのかを表示してあげる必要がありますね。

一問一答形式アンケートのシンプルな作り方

考え方はシンプルです。

つまり、

ということです。
例えばこんな感じです。

記述例

See the Pen
Question and answer by foolishlife (@foolishlife)
on CodePen.

html

questionというclassのdivを1問とし、このdiv単位で表示／非表示を制御します。
div.questionの中には質問と一緒に次へ／前へのボタンも設置します。

<form action="">
  <div class="question">
    犬派？　猫派？（1/3）<br>
    <input type="radio" name="animal" id="animal-01" checked="checked"><label for="animal-01">犬派</label><br>
    <input type="radio" name="animal" id="animal-02"><label for="animal-02">猫派</label><br>
    <input type="radio" name="animal" id="animal-03"><label for="animal-03">それ以外</label><br>
    <button type="button" class="next-btn">次へ</button>
  </div>
  <div class="question">
    何カレーが好き？（2/3）<br>
    <input type="radio" name="curry" id="curry-01" checked="checked"><label for="curry-01">ビーフカレー</label><br>
    <input type="radio" name="curry" id="curry-03"><label for="curry-03">チキンカレー</label><br>
    <input type="radio" name="curry" id="curry-04"><label for="curry-04">それ以外</label><br>
    <button type="button" class="prev-btn">前へ</button>
    <button type="button" class="next-btn">次へ</button>
  </div>
  <div class="question">
    Mac派？　Windows派？（3/3）<br>
    <input type="radio" name="computer" id="computer-01" checked="checked"><label for="computer-01">Mac派</label><br>
    <input type="radio" name="computer" id="computer-02"><label for="computer-02">Windows派</label><br>
    <input type="radio" name="computer" id="computer-03"><label for="computer-03">それ以外</label><br>
    <button type="button" class="prev-btn">前へ</button>
  </div>
</form>

css

最初のdiv.question以外を非表示にします。

.question:not(:first-child) {
  display: none;
}

jQuery

「次へ」ボタンがクリックされると、そのボタンを含むdiv.questionが非表示になり、htmlの記述上その次に位置するdiv.questionが表示されます。
「前へ」ボタンがクリックされると、そのボタンを含むdiv.questionが非表示になり、htmlの記述上その前に位置するdiv.questionが表示されます。

$('.next-btn').on('click', function (e) {
  e.preventDefault();
  $(this).parents('.question').hide();
  $(this).parents('.question').next('.question').show();
});
$('.prev-btn').on('click', function (e) {
  e.preventDefault();
  $(this).parents('.question').hide();
  $(this).parents('.question').prev('.question').show();
});

まとめるとしたらこんなふうにまとめられそうですね。

$('button').on('click', function (e) {
  e.preventDefault();
  $(this).parents('.question').hide();
  if ($(this).hasClass('next-btn')) {
    $(this).parents('.question').next('.question').show();
  } else if ($(this).hasClass('back-btn')) {
    $(this).parents('.question').prev('.question').show();
  }
});

button が複数ある場合は class や id を割り当ててその名前で指定します。
また、「else if 〜」は button を「Aかそれ以外」と区別できるなら「else」だけで大丈夫です。

jQueryのshow()メソッドとhide()メソッド

show()メソッド

非表示になっている要素を表示するメソッドです。
今回の記述例のように、cssでdisplay:none;にした要素も、jQueryでhide()した要素も、区別なく表示します。

show() – jQuery 日本語リファレンス

hide()メソッド

表示されている要素を非表示にするメソッドです。

hide() – jQuery 日本語リファレンス

WordPressプラグインContactform7でも使える

やっていることは至極シンプルなので、Contactform7などでも使うことができます。

ただし、例えばContactform7の場合だとform開始直後にプラグイン都合の要素が出力されるので、初期状態で1問目以外を隠す処理に工夫をする必要があります。
記述例①のように外側に親要素を追加するか、記述例②のように:not(.first-question)等名前で指定するようにしましょう。

Contactform7での記述例①

html

<div class="questionnaire">

  <div class="question">
    お名前<br>
    [text your-name]<br>
    <button type="button" class="next-btn">次へ</button>
  </div>

  <div class="question">
    メールアドレス<br>
    [email your-email] <br>
    <button type="button" class="prev-btn">戻る</button>
    <button type="button" class="next-btn">次へ</button>
  </div>

  <div class="question">
    お問い合わせ内容<br>
    [textarea your-message] <br>
    <button type="button" class="prev-btn">戻る</button>
    [submit "送信"]
  </div>
  
</div>

Contactform7での記述例②

html

<div class="question first-question">
  お名前<br>
  [text your-name]<br>
  <button type="button" class="next-btn">次へ</button>
</div>

<div class="question">
  メールアドレス<br>
  [email your-email] <br>
  <button type="button" class="prev-btn">戻る</button>
  <button type="button" class="next-btn">次へ</button>
</div>

<div class="question">
  お問い合わせ内容<br>
  [textarea your-message] <br>
  <button type="button" class="prev-btn">戻る</button>
  [submit "送信"]
</div>

css

.question:not(.first-question) {
  display: none;
}

さて、今回は、1問ずつ質問に答えていく一問一答アンケートをjQueryで作るシンプルな方法をご紹介しました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。