{{ extends "global/Page.html" }}
{{ load otree static }}

{{ block title }}
調査へのご協力のお願い（インフォームド・コンセント）
{{ endblock }}

{{ block content }}
<style>
  .intro-container { max-width: 900px; margin: 0 auto; }
  h2 { font-size: 1.25rem; margin-top: 1.2rem; }
  .notice { background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; }
  .consent-box { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-top: 12px; }
  ul { padding-left: 1.2em; }
  .muted { color: #6b7280; font-size: .95rem; }
</style>

<div class="intro-container">
  <p>この度は本調査にご参加いただきありがとうございます。以下をお読みいただき、内容に同意のうえで参加をお願いいたします。</p>

  <h2>調査の概要</h2>
  <ul>
    <li>所要時間：<strong>5~７分程度</strong></li>
    <li>対象：安田女子大学学生</li>
    <li>内容：アンケート（選択式・自由記述を含む）</li>
    <li>謝礼：<strong>菓子折り </strong></li>
  </ul>

  <h2>自由意思・途中離脱</h2>
  <ul>
    <li>参加は<strong>完全に任意</strong>です。いつでも<strong>理由を問わず中止（離脱）</strong>できます。</li>
    <li>回答途中でページを閉じた場合、それまでのデータは保存されない場合があります。</li>
  </ul>

  <h2>データの取り扱い</h2>
  <ul>
    <li>収集したデータは<strong>匿名化</strong>し、研究目的以外には使用しません。</li>
    <li>個人が特定できる情報（氏名・住所・メール等）は収集しません。</li>
    <li>研究成果は学術発表・論文等で公開されることがありますが、個人が特定されることはありません。</li>
  </ul>

  <h2>想定される不利益・リスク</h2>
  <ul>
    <li>特段の身体的リスクはありませんが、質問内容に不快感を覚える可能性があります。<br>
        その場合は回答をスキップするか、参加を中止してください。</li>
  </ul>

  <h2>問い合わせ先</h2>
  <p class="muted">研究代表者：平田結菜（所属：安田女子大学心理学部ビジネス心理学科）<br>
    連絡先：<a href="23163133@st.yasuda-u.ac.jp">23163133@st.yasuda-u.ac.jp</a><br>
  </p>

  <h2>操作上の注意（oTree）</h2>
  <div class="notice">
    <ul>
      <li><strong>ブラウザの「戻る」ボタン</strong>は使わないでください（回答が失われる可能性）。</li>
      <li>タブやウィンドウを<strong>更新（リロード）</strong>しないでください。</li>
      <li>通信切断を避けるため、できれば<strong>安定したネットワーク</strong>下で実施してください。</li>
      <li>スマホより<strong>PC/タブレット</strong>を推奨（表示崩れ防止）。</li>
    </ul>
  </div>

  <div class="consent-box">
    <label>
      <input type="checkbox" id="consentCheck">
      上記説明を読み、参加に<strong>同意</strong>します（いつでも途中で離脱できることを理解しました）。
    </label>
  </div>

  <p class="muted" style="margin-top:10px;">
    「次へ」を押すと、アンケートが開始します。
  </p>

  {{ next_button }}
</div>

<script>
  (function() {
    // oTreeのNextボタンを取得（標準クラス名）
    const nextBtn = document.querySelector('.otree-btn-next');
    const consent = document.getElementById('consentCheck');

    function updateButton() {
      if (consent.checked) {
        nextBtn.removeAttribute('disabled');
        nextBtn.classList.remove('disabled');
        nextBtn.title = '';
      } else {
        nextBtn.setAttribute('disabled', 'disabled');
        nextBtn.classList.add('disabled');
        nextBtn.title = '同意にチェックしてください';
      }
    }

    // 初期状態を無効化
    if (nextBtn && consent) {
      updateButton();
      consent.addEventListener('change', updateButton);
      // 念のため submit前チェック（キーボード操作等）
      nextBtn.addEventListener('click', function(e) {
        if (!consent.checked) {
          e.preventDefault();
          alert('参加に同意するチェックを入れてください。');
        }
      });
    }

    // うっかり離脱を軽減（このページのみ）
    window.addEventListener('beforeunload', function (e) {
      // チェックありでも確認する場合は条件を外す
      if (!consent.checked) {
        e.preventDefault();
        e.returnValue = '';
      }
    });
  })();
</script>
{{ endblock }}