Wordpressに、チェックリストを作成したい

##やりたいこと

wordpressにチェックリスト(html,css,javascrpitで作成したもの)を反映したい。

以下のようなプログラムを作成しました。だだしデザインは未完成です

プログラム機能
　　・６個のチェックボックスがあります。[図１]
　　・　それぞれのチェックボックスに、チェックするかしないか自分で、入れます。
　　・チェックが終わったら、送信ボタンを押します。


　送信のした後、
　チェックしたチェックボックスが３個以上だと赤信号
　１、２個だと黄色信号[図２]
　０個だと　青信号

[図１]
<img width="1213" alt="スクリーンショット 2019-02-12 21.02.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/167576/3cfe5e81-6614-9088-cf70-cd50ce7a78eb.png">

[図２]
<img width="1223" alt="スクリーンショット 2019-02-12 21.04.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/167576/ef4550c0-1283-e4c9-3cb4-04a7b593fe77.png">


##プログラムのコード内容(ローカル環境で動くプログラム)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Input to page</title>

    <link rel="stylesheet" href="style.css">

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

      <script src="main.js"></script>

  </head>
 <body>
<div>
    <h1>健康診断</h1>
    <ul>
    <li>aの問い<input type="checkbox" id="check1"></li>
    <li>bの問い<input type="checkbox" id="check2"></li>
    <li>cの問い<input type="checkbox" id="check3"></li>
    <li>dの問い<input type="checkbox" id="check4"></li>
    <li>eの問い<input type="checkbox" id="check5"></li>
    <li>fの問い<input type="checkbox" id="check6"></li>
    <input type="button" id="Button" value="送信">
    <br>
    </ul>

  <p><div id="output"><div></p>
</div>    
 </body>
</html>

```

```css:style.css

ul, ol {
  background: #fffcf4;
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  padding: 0.5em 0.5em 0.5em 2em;
}
ul li, ol li {
  line-height: 1.0;
  padding: 0.5em 0;
}

h1 {
  background: #b0dcfa; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}

```

```javascript:main.js
$(function() {
  $("#Button").click(function() {

    var count = 0;

    if ($("#check1").prop("checked")) {
      count += 1;
    }
    if ($("#check2").prop("checked")) {
      count += 1;
    }
    if ($("#check3").prop("checked")) {
      count += 1;
    }
    if ($("#check4").prop("checked")) {
      count += 1;
    }
    if ($("#check5").prop("checked")) {
      count += 1;
    }
    if ($("#check6").prop("checked")) {
      count += 1;
    }

    if (count >= 4) {

      $("#output").text("赤信号");

    }
    else if (count >= 1) {
      $("#output").text("黄色信号");
    }
    else {
      $("#output").text("青信号");
    }


  });

});

```

##wordpressにjqueryのプログラムに反映させたい。（調査編）

　調べた結果、２つのやり方で反映させることが可能だと知った

　　　・直接コードを打つ

　　 ・プラグインで設定する
　　　　->結果プラグインを入れなくても

##まず直接コードを打ち込むことにした。

->結果動かない
 理由は、jqueryコードだから。

javascrpitだと直接いけます。


下のURLは、wordpressにjavascrpitコードを反映させる記事です。

https://routecompass.net/post-838/#JavaScript

###なんとかなりそう



##やり方発見

jqueryを反映させる記事を見つけました

http://primarytext.jp/blog/1298

要約すると以下通りです。

######WordPressでjQueryを使いたいのに動かない時は、「jQuery(function($){ });」で前後を囲んでカプセル化してやれば簡単です。

######これで囲むと、その中では「$」が使えますので、サンプルコードもそのままコピーすれば動きます。カプセル化した中には普通のjQueryの書き方でOKです。特に修正は必要ありません。



##実際のコード

```html:qiita.rb
<meta http-equiv="content-type" charset="utf-8">

<div>
    <h1>健康診断</h1>
    <ul style="background:#fffcf4;">
    <li>aの問い<input type="checkbox" id="check1"></li>
    <li>bの問い<input type="checkbox" id="check2"></li>
    <li>cの問い<input type="checkbox" id="check3"></li>
    <li>dの問い<input type="checkbox" id="check4"></li>
    <li>eの問い<input type="checkbox" id="check5"></li>
    <li>fの問い<input type="checkbox" id="check6"></li>

    <br>
    </ul>
    <input type="button" id="Button" value="送信">

  <p><div id="output"><div></p>
</div>
<div>

<script type="text/javascript">
jQuery(function($){
  $("#Button").click(function() {
    var count = 0;
    if ($("#check1").prop("checked")) {
      count += 1;
    }
    if ($("#check2").prop("checked")) {
      count += 1;
    }
    if ($("#check3").prop("checked")) {
      count += 1;
    }
    if ($("#check4").prop("checked")) {
      count += 1;
    }
    if ($("#check5").prop("checked")) {
      count += 1;
    }
    if ($("#check6").prop("checked")) {
      count += 1;
    }
    if (count >= 4) {
      $("#output").html("<b>赤信号です。</b> 至急体重減らす");
      $("div b").append(document.createTextNode("!!!"))
            .css("color", "red");
    }
    else if (count >= 1) {
      $("#output").html("<b>黄色信号です。</b> 体重減らす");
      $("div b").append(document.createTextNode("!!!"))
            .css("color", "yellow");
    }
    else {
      $("#output").html("<b>青信号です。</b> 体重維持");
      $("div b").append(document.createTextNode("!!!"))
            .css("color", "blue");
    }
  });
});
</script>



```





##参考文献

https://routecompass.net/post-838/