Newer
Older
pj / questionnaire.html
<!DOCTYPE html>
<html>
<head>
  <title>アンケート</title>
  <link rel="stylesheet" type="text/css" href="アンケート.css">
</head>
<body>
  <h1>東北公益文科大学</h1>
  <h3>この度、アンケートに協力していただきありがとうございます。<br>
  このアンケートは東北公益文科大学のプロジェクト型応用演習の講義で使わせていただきます。<br>
  どうぞよろしくお願いいたします。</h3>

  <div class="item">
    <p class="label">1.あなたの性別は?</p>
    <div class="inputs">
      <form id="genderForm">
        <input type="radio" name="gender" value="男性">男性
        <input type="radio" name="gender" value="女性">女性
      </form>
    </div>
  </div>

  <!-- 他の質問とフォームを追加 -->
  
  <p>4.結婚する人の年収はいくらが良い?</p>
  <form id="salaryForm">
    <select name="salary" id="salary-select">
      <option value="指定しない">指定しない</option>
      <option value="~300万円">~300万円</option>
      <option value="~400万円">~400万円</option>
      <option value="~600万円">~600万円</option>
      <option value="~800万円">~800万円</option>
      <option value="1000万円~">1000万円~</option>
    </select>
  </form>

  <p>5.その理由は?</p>
  <form id="reasonForm">
    <textarea rows="10" cols="50" id="reasonInput">ここに記入してください</textarea>
  </form>

  <input type="submit" value="送信する" class="button" onclick="saveData()">
  
  <script>
    function saveData() {
      const gender = document.querySelector('input[name="gender"]:checked').value;
      const salary = document.getElementById('salary-select').value;
      const reason = document.getElementById('reasonInput').value;

      // CSV形式の文字列を作成
      const csvData = `"${gender}","${salary}","${reason}"\n`;

      // CSVファイルに書き込むための処理
      const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      if (link.download !== undefined) {
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', 'アンケート.csv');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        alert('ダウンロードがサポートされていません。');
      }
    }
  </script>
</body>
</html>