プラグイン不要!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時間程度で作れれば十分かな?
簡単そうに見えても案外時間かかったりしますからね。

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

4 Comments

ダイブツ ダイブツ

>見習い21さいさん

質問項目を6つより多くしたい場合は、次の2つの手順を踏めばできます。

1、130行目にあるif (ManageStatus.No > 6){の6を変えたい質問の個数にする。
 例:8個の質問項目にしたいなら、if (ManageStatus.No > 8){

2、77~91行目の内容をコピーして、92行目に増やしたい質問項目分挿入する。
そして、caseの次の数字を6、7、8…のように順番に増えるように書き換える。

簡略化して書くとこんな感じです。
case 6:
if(no == “Yes”){
〇〇〇
}else if(no == “No”){
〇〇〇
}
break;
case 7:
if(no == “Yes”){
〇〇〇
}else if(no == “No”){
〇〇〇
}
break;
case 8:
if(no == “Yes”){
〇〇〇
}else if(no == “No”){
〇〇〇
}
break;

92行目に挿入するっていうのがミソなので、そこに注意して挿入してみてくださいね。

返信する
杉浦基

ありがとうございます。さっそく利用させていただきました!
既存のWordpressプラグイン(診断ジェネレータ作成プラグイン)では満足できなくて、こちらを探し当てました。
YesNo診断チャートを設置したいものの、私はプログラミングやjqueryに明るくないため、他のサイトの方法では実装できませんでした。
こちらのHTMLを利用して、無事、簡易診断を設置することができました。とても感謝してます。本当にありがとうございました。

返信する
ダイブツ

>杉浦さん

お役に立てたようで何よりです!

そうですよね、僕も以前調べたんですが既存のWordpressプラグインは求めているYesNoチャートと違うんですよね~。
他の人が取り入れても実際に使えることがわかって良かったです。
コメントありがとうございました!

返信する

気軽にコメントどうぞ!100%返信します。

内容を確認してから、下記の「コメントを送信する」ボタンを押してください。