ブログフロントエンド10年目の僕がHTML、CSS、javascriptの忘れがちなことを日々書いています。HTMLCSSjavascriptPHP箱庭タウンズ【jQuery】Yes/No診断テストがバージョン3.0にアップしました!2023年12月04日この記事は約3分で読めます。「Yes/No診断テスト」がバージョン3.0にアップしました!バージョン1.0は、Yesの数を数えて結果を出すアンケートでした。バージョン2.0は、各質問がYesまたはNoの場合を分岐できるようになりました。今回のバージョン3.0では、アンケート結果をCSVに格納できるようになりました。Script(GAS)の使い方がムズ過ぎて挫折してしまいました。その代行手段として、アンケート結果をCSVに蓄積するのはどうかと思い今回作成してみました。今回のソース変更についてはじめに「Yes/No診断テスト」は、HTML、CSS、javascriptに、ある程度理解のある方を対象としております。「Yes/No診断テスト」は、javascriptライブラリ「jQuery3.2.1」を利用して作成しています。カスタマイズした「Yes/No診断テスト」をサーバーへアップしてご利用ください。下のダウンロードボタンから「quesitons3.0.zip」をダウンロードしてご利用ください。診断テストの質問を変更する場合は「index.php」の「.questions」の中を編集してください。質問数を増やす場合は、ちょっと大変だけど「index.php」の2ヵ所と「answer.php」の2ヵ所を修正します。「answer.php」の質問の結果部分を編集します。各質問がYesまたはNoの場合の分岐になるので結果が多くなっちゃいます。CSVファイルの場所CSVファイルはダウンロードした「quesitons3.0」フォルダの中の「file」フォルダに入っています。CSVファイルの更新は、ダウンロードしたフォルダをご自身のサーバーにアップしていただくか、ローカルでPHPの動作環境を作成いただいてアンケートを結果まで進めると、CSVファイルに解凍結果が反映されています。今回のソース変更について前回の2.0まではフォームの値をセッションストレージでブラウザに記憶していたのでHTMLでファイル間の値のやり取りができたけど、今回は、CSVに書き込んだりの処理が有るので、phpでフォームの値を受け取る形に変更しました。phpでの受け取りに変更したことで、診断テストの質問と回答が2つのファイルを修正するだけで可能になり、cssはデザインの処理、jsはアクションの処理と完全に分けることができました。GASが難しくまた改めて勉強しなくちゃと思いました。javascriptjQueryjavascriptjQuery診断テストこんな建物だれがどうしてつくったの?エンデ・バタローフロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。制作のご依頼はこちらから連絡ください。ブログ初めてのブログこの投稿関連の記事javascript【jQuery】要素があるかを判定する方法jQueryで特定要素が有るか調べる方法のご紹介です。//...2020年11月25日javascriptjQueryjavascriptjQueryで特定文字列より後ろを削除する方法jQueryで特定の文字列以降を削除する方法のご紹介です。特定の文字列以降を削除する時に自分の中で一番よく使う方法は「...2020年06月04日javascriptjQueryサイト制作javascript【jQuery】要素の追加方法(要素内のはじめ、後ろ、要素外のはじめ、後ろや要素を包む方法も)いつもjQueryで要素を追加する時に検索してトップに出てくるキータを見ています。cover」で自動トリミング|IE対応!枠の中に画像を縦横ピッタリと収めたい時、横幅100%か、縦幅100%かを指定するけど、画面サイズによって縦か横の余白が空...2023年04月03日CSSjavascriptjavascriptjQueryで端末判定&Androidバージョン判定jQueryでの端末を判定する方法のご紹介です。PC、スマホ、タブレットを判定するコードを紹介します。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)ホームjavascript【jQuery】Yes/No診断テストがバージョン3.0にアップしました!広告エンデ・バタローフロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。制作のご依頼はこちらから連絡ください。ブログ.メニューHTMLCSSjavascriptPHP箱庭タウンズ検索タイトルとURLをコピーしました。