アンケート部分の例を作ってみました。 - インストールレスプログラミング( ´ー`)

どういうコードを吐き出させればいいのかを確かめるため，とりあえずアンケートフォームを作ってみました。

画面はこんな感じ
f:id:chemiphys:20190110192917p:plain

送信ボタンを押すと，

 <div id="answer"></div>

にアンケートの結果をとりあえず出すように作りました。

最終的にはこれを望む場所に放り込むよう作ればいい。

フォーム内部もできるだけシンプルになるように作ってみた。できるだけタグをそぎ落として，必要最小限にし，構造ができるだけ似通うようにして，

マクロでコードを吐く部分が楽になるようにしてみた。

コードを載せます。JavaScriptもすこーしは慣れてきたかな。。

今回のものはhtmlのままでもちゃんといけますし，htaにしても動きます。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
  <style type="text/css">
    table{border-collapse: collapse;}
    table,tr,td{border: solid 2px black;}
    td.bango{text-align: center;background-color: black;font-weight: bold;color: white;width:15px}
    td.setsumon{padding-left: 5px;font-weight: bold;background-color: black;color: white;width:400px}
    td.kaitou{padding-left: 20px;background-color: antiquewhite}
  </style>
  <script>
    
    function result(){
      var mondaiName=["toi1","toi2","toi3","toi4"]
      var mondaiType=["radio","check","text","multi"]
      var html=[]
      for (var i=0;i<mondaiName.length;i++){
        html.push(i+1 + "_" + getData(mondaiName[i],mondaiType[i])+"◇")
      }
      document.getElementById("answer").innerHTML=html.join("")
    }
    
    function getData(name,type){
      switch(type){
        case "radio":
        case "check":
          return getCheck(name);
          break;
        case "text":
        case "multi":
          return document.getElementsByName(name)[0].value.replace(/\r?\n/g,"■");
          break;
      }
    }
    
    function getCheck(name){
      var CHECK=document.getElementsByName(name)
      var tmp=""
      for(var i=0;i<CHECK.length;i++){
        if(CHECK[i].checked) tmp+="," +CHECK[i].value
      }
      return tmp.substring(1)
    }
  </script>
</head>

<body>
  <form name="form1">
  <table>
    <tr>
      <td class="setsumon">1 授業は全体的にわかりやすいですか。</td>
    </tr>
    <tr>
      <td class="kaitou">
        <input type="radio" name="toi1" value="1">とても分かりやすかった<br>
        <input type="radio" name="toi1" value="2">分かりやすかった<br>
        <input type="radio" name="toi1" value="2">あまり分からない<br>
      </td>
    </tr>
  
    <tr>
      <td class="setsumon">2 好きな科目をいくつか選びなさい</td>
    </tr>
    <tr>
      <td class="kaitou">
        <input type="checkbox" name="toi2" value="国">国語<br>
        <input type="checkbox" name="toi2" value="英">英語<br>
        <input type="checkbox" name="toi2" value="数">数学<br>
        <input type="checkbox" name="toi2" value="理">理科<br>
        <input type="checkbox" name="toi2" value="社">社会<br>
      </td>
    </tr>
  
    <tr>
      <ul><td class="setsumon">3 一言メッセージ</td></ul>
    </tr>
    <tr>
      <td class="kaitou">
        <input type="text" name="toi3" size="45" />
      </td>
    </tr>

    <tr>
      <td class="setsumon">4 ご意見ご要望</td>
    </tr>
    <tr>
      <td class="kaitou">
        <textarea name="toi4" rows="5" cols="46" ></textarea>
      </td>
    </tr>
  </table>
  <input type="button" href="#" value="送信する" onClick="result()"/>
  </form>

  <p>回答</p>
  <div id="answer"></div>
 </body>
</html>

Excel側でテキストコードを吐き出すのも楽にできそうだったので，けっこう進んだ気がします。