{{ extends 'global/Page.html' }}
{{ block title }}1回目の実験ページへようこそ{{ endblock }}

{{ block content }}

<div style="line-height: 200%">
<font size="4">
この度は、株取引実験に参加いただき、ありがとうございます。
</font>
</div>

<div class="attention">
<font size="4">
本実験の注意事項を確認いただけましたら、「確認した」をチェックして、「次へ」をクリックしてください。
</font>
</div>

<div class="caution">
<h5>注意事項</h5>
<ol>
<font size="4">
<li>必ず3回の実験すべてに参加してください。各実験の所要時間は、説明や練習を含めて30分ほどです。</li>
<li>実験では、株特有の用語がいくつか出てきますが、一度の説明だけで100％理解する必要はありません。実験本番前に練習を設けていますので、株取引を実際に体験する中で理解いただければ問題ありません。</li>
<li>メモの有無は結果に重大な影響を及ぼしますので、実験中は一切メモを取らないでください。</li>
<li>インストラクションの確認には、メールで配布したPDFファイルを参照してください。</li>    
<li>ページがフリーズした場合は、アクセスし直してください。中断したページから再開できます。</li>
<li>ブラウザの「戻る」ボタンは使わないでください。誤って押した場合には、ページがサーバーと同期するまで待ってください。</li>
<li>本研究は進行中ですので、実験内容などをSNSに載せないでください。</li>
<li>謝金は、全被験者がすべての実験を終えた後、各実験での成績順位に応じて、Amazonギフト券でお支払いします（詳細は後述）。</li>
</font>
</ol>
</div>     

<div class="form-check">
  <input name="consent" class="form-check-input" type="checkbox" value="1" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    <font size="4">確認した</font>
  </label>
</div>

<button class="btn btn-primary" id="btn">次へ</button>

<script>
let fcd = document.getElementById("flexCheckDefault")
let btn = document.getElementById("btn")

btn.disabled = true

fcd.addEventListener("change", function() {
    if(fcd.checked) {
        btn.disabled = false
    } else {
        btn.disabled = true
    }
})
</script>

<style>
.attention {
  padding-top: 20px;  
  padding-bottom: 20px;
  line-height: 200%;  
}

.caution {
  background-color:#EDF7FF;
  padding:20px;
  border:1px solid #ccc;
  line-height: 200%;
}
    
.form-check {
  padding-top: 20px;
  padding-bottom: 20px;
}

.form-check input{
	position:relative;
	top:1px;
}
</style>

{{ endblock }}