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

{{ block content }}

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

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

<div class="caution">
<h5>注意事項</h5>
<ol>
<font size="4">
<li>3回目の実験にも必ず参加してください。</li>
<li>実験1回目の成績は、実験2回目の成績順位に影響を与えません。</li>
<li>メモの有無は結果に重大な影響を及ぼしますので、実験中は一切メモを取らないでください。</li>
<li>株取引ゲームの基本ルールの確認には、実験1回目のメールで配布したPDFファイルを参照してください。</li>
<li>ページがフリーズした場合は、アクセスし直してください。中断したページから再開できます。</li>
<li>ブラウザの「戻る」ボタンは使わないでください。誤って押した場合には、ページがサーバーと同期するまで待ってください。</li>
<li>本研究は進行中ですので、実験内容などをSNSに載せないでください。</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 }}