プログラミング

【ウェブカツ】JavaScript(jQuery)を使って、WordPress記事中で合計の点数を計算してみた。

じょん(@fffff3434)です。

今回は、オンラインプログラミング学習スクール『ウェブカツ!!』の「HTML・CSS部入門」で学んだ知識を生かして、WordPress内の記事に「診断テスト」を作ってみました。

機能を実装して作成した記事は以下になります。

【YouTube】メンタリストDaiGoの『隠れナルシスト判定テスト』をやってみたら……じょん(@fffff3434)です。 僕は「メンタリストDaigo」さんの動画を聴きながら作業することをルーティーンとしているので...

HTMLの「ラジオボタン」を使って診断結果の点数を計算し、JavaScript(jQuery)と組み合わせて点数の合計が表示されるようにしました。駆け出しエンジニアのお遊びなので、温かい目で見てくれると嬉しいです。

「記事中(テキストモード)」HTML

ワードプレスの記事作成に利用できる通常のビジュアルモードではなく「テキストモード」に以下のコードを入力しました。

質問の答えの選択肢のvalueに各々数字を代入して、最後にその数字の合計が表示される仕組みができるように作成してみました。

「header.php」内のjavaScript

WordPressのサイドバーにある「外観」→「テーマの編集」→「テーマヘッダー(header.php)」を探し、以下のコードを末尾に記載しました。

 

もっとキレイなコードを書きたい。日々邁進。

【ウェブカツ】プログラミングを本気で習得して年収UPしたい君にオンライン学習スクール『ウェブカツ』を薦めたい。じょん(@fffff3434)です。 今記事では、Twitterなどで結構話題になっているオンラインプログラミング学習スクール『ウ...