jQueryで作る回答内容で質問が変わる質問チャート

jQueryで作る回答内容で質問が変わる質問チャート

こんにちは稲垣です。

先月、愛車が2台とも動かなくなったためしばらく電車通勤をしていました。

故障するからには何らかの原因があるはずなのですが、いかんせん素人のために原因がわかりません。

そこで今回は、専門知識を持たないユーザーを正しい情報へ導くための質問チャート(バイク故障編:キャブ車用)を作ってみました。

Webサービスのユーザーサポートのページなどでよく使われている気がします。

目次

  1. デモ
  2. html、CSS
  3. 動きの実装
  4. まとめ

デモ

まずは完成イメージです。

回答によって派生するのは最初の質問のみとなっています。

作った人間の知識が乏しいためこれを見てもたぶん解決しません。

html、CSS

html

各質問や回答画面など、必要になる全ての画面をあらかじめ準備します。

CSS

基本的に画面のレイアウトを整えるものになります。

最初の画面以外には左マージンをいれ、overflow: hidden;で見えないようにしました。

動きの実装

それでは動きの部分になります。

まずは必要になる変数と関数を準備しましょう。

各画面へ遷移する関数をそれぞれ用意しました。

最後の画面は引数によって画面が変わるようになっています。

関数の準備ができたならあとは各ボタンをクリックした際の挙動を書いたら完成です!

まとめ

以上で完成です!最後にコードをまとめて載せます。

ifで分岐するのみの拡張性の低い作りになってしまいました…。

次回またなにか作る時はもう少し使い回しやすさをきちんと考えようと思います。

同じカテゴリー(WEB制作・デザイン)の記事