プラグイン不要！WordPressでYesNo診断チャートを自作してみた

こんちゃ～～っす、ダイブツです～～。

前回の記事でも書いていましたが、Wordpressで使えるYesNo診断チャートを自作しました。

　⇒前回の記事はこちら

それだけじゃあなんなんで、内容についても公開していきます。

これガチで説明書いていくとめちゃめちゃ量が多くなっちゃうけどどうしよう・・・。

まずはどんな動作をしていたかおさらい

ソースコードが書いてあるページで実際の動作も見れないと分かりにくいですよね。

なので、被ってはしまいますが、もう一回貼りますね。

診断を開始します。

⇒診断開始に戻る

処理の大まかな流れ

簡単に言うとこんな流れの処理になってます。

スタートボタン押す
　↓
最初の質問表示　→(はい)　→結果表示
　↓(いいえ)
次の質問表示　→(はい)　→結果表示
　↓(いいえ)
・・・
　↓(いいえ)
最終結果表示

これに加えて、「⇒診断開始に戻る」を押せばいつでも上のフローの最初から始められるって感じです。

だいーぶざっくり書きましたが、大まかな仕様はこんな感じです。

実際に使用しているコード見せます

ブログの記事内にそのままコードを記述しているので、HTMLとJavaScriptのコードが混じっています。

前半がJavaScriptのコード、後半がHTMLのコードですね。
少し見にくいかもしれません。

YesNo診断チャートソースコード

WordPressで直接記述する為に、改行は全く入っていません。（改行があると余分なコードが入ってエラーになってしまう）

なので、Wordpressで実行する際は注意してください。

ちなみに改行全く入っていないし、HTMLとJavaScriptのコード分けとかしてないからなかなか読みづらいコードになってますね・・・。
そこはご了承ください。

あ、次の所は画像のボタンにしているんで、自分で設定したい画像に変更してください。
そこさえ変えたら後はコピペで使えるはず！

このプログラムでポイントになる機能

表示したい内容をdisplayで切り替えている

実際に使っている時にはあんまり気にならないと思うんですが、最初の画面では「スタート」のボタンだけ表示していたのを。「ハイ」「イイエ」ボタンに変更しています。

それと同じように、表示する質問内容とか診断結果の表示も変えていますね。

document.getElementById(“start”).style.display = “none”;

のように書くことで、そのタイミングによって表示したい内容、非表示にしたい内容を切り替えるようにしています。

進行状況をステータスとして管理している

常に進行状態が分かるように、次の段階に進む度にステータスという名のManageStatus.Noを更新して管理しています。

実際は只の番号でしか管理してないですけどね。
それぞれの番号での進行状態は次のようなイメージです。

0：診断開始
1：1つ目の質問
2：2つ目の質問
3：3つ目の質問
4：4つ目の質問
5：5つ目の質問
6：6つ目の質問

こうやって進行状況を管理することで、その時に必要な内容を表示することが出来ているんです。

どうですか、参考になりましたか？

後は細か～～いところまで書きたい所もあるんですが、そこまで細かく書くと量が膨大になっちゃうんで割愛します。

このぐらいの感じだったら4時間程度で作れれば十分かな？
簡単そうに見えても案外時間かかったりしますからね。

まずはそのぐらいのペースでコーディング出来るように意識していきましょう！