【jQuery】Yes/No診断テストがバージョン3.0にアップしました!

この記事は約3分で読めます。
広告
いつも当ブログを見てくださりありがとうございます! 「Yes/No診断テスト」がバージョン3.0にアップしました!

バージョン1.0は、Yesの数を数えて結果を出すアンケートでした。
バージョン2.0は、各質問がYesまたはNoの場合を分岐できるようになりました。
そして今回のバージョン3.0では、アンケート結果をCSVに格納できるようになりました。
バージョン3.0のデモはこちら

バージョン2.0の時に、パパさんからいだたいたコメントで「アンケート結果を”スプレッドシートで”蓄積したい」と要望をいただいたのですが、Google Apps Script(GAS)の使い方がムズ過ぎて挫折してしまいました。パパさんすみません。

その代行手段として、アンケート結果をCSVに蓄積するのはどうかと思い今回作成してみました。

はじめに

「Yes/No診断テスト」は、HTML、CSS、javascriptに、ある程度理解のある方を対象としております。
「Yes/No診断テスト」は、javascriptライブラリ「jQuery3.2.1」を利用して作成しています。
カスタマイズした「Yes/No診断テスト」をサーバーへアップしてご利用ください。

利用方法

下のダウンロードボタンから「quesitons3.0.zip」をダウンロードしてご利用ください。

診断テスト3.0をダウンロード

診断テスト3.0の質問変更方法

診断テストの質問を変更する場合は「index.php」の「.questions」の中を編集してください。
質問数を増やす場合は、ちょっと大変だけど「index.php」の2ヵ所と「answer.php」の2ヵ所を修正します。(すべての変更箇所にはコメントアウトで「質問を追加する時はココを増やしてね」と書いてあります)

診断テスト3.0の結果変更方法

「answer.php」の質問の結果部分を編集します。
各質問がYesまたはNoの場合の分岐になるので結果が多くなっちゃいます。

CSVファイルの場所

CSVファイルはダウンロードした「quesitons3.0」フォルダの中の「file」フォルダに入っています。
CSVファイルの更新は、ダウンロードしたフォルダをご自身のサーバーにアップしていただくか、ローカルでPHPの動作環境を作成いただいてアンケートを結果まで進めると、CSVファイルに解凍結果が反映されています。

今回のソース変更について

前回の2.0まではフォームの値をセッションストレージでブラウザに記憶していたのでHTMLでファイル間の値のやり取りができたけど、今回は、CSVに書き込んだりの処理が有るので、phpでフォームの値を受け取る形に変更しました。

phpでの受け取りに変更したことで、診断テストの質問と回答が2つのファイルを修正するだけで可能になり、cssはデザインの処理、jsはアクションの処理と完全に分けることができました。

GASが難しくまた改めて勉強しなくちゃと思いました。
エンデ・バタローをフォローする
javascriptjQuery

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました