{{ extends "global/Page.html" }}

{{ block title }}
<div align="center">
    <h2>ご協力ありがとうございました</h2>
</div>
{{ endblock }}

{{ block styles }}
<style>
    body {
        color = #333333;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #ddd;
        color: #333333;
        font-size: 95%;
        border-radius: 6px;
        overflow: hidden;
    }

    th,
    td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #cacaca;
        font-weight: normal;
        border-right: 1px solid #cacaca;
        text-align: center;
    }

    /* th {
        background-color: #f1f1f1;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    } */

    /* 各 opt を均等な幅に */
    .container_radio {
        display: flex;
        justify-content: space-between;
    }

    .container_wh {
        width: 750px; /* もともとの幅 */
        margin: 0 auto; /* 左右のマージンを自動で調整して中央に寄せる */
        text-align: left; /* 中央揃えの影響を打ち消す */
    }
</style>
{{ endblock }}








{{ block content }}
<div class="container_wh" style="width: 750px;">
<br>
    <p>　・順番に謝金をお渡ししています。</p>
    <p>　・スタッフが伺うまで、片付けをしながらお待ちください。</p>
    <p>　・配布物は持ち帰らずに、全て机の上に置いておいてください。</p>
    <p>　・これ以降スマートホンをご使用いただいたり、書籍をお読みいただいても構いません。</p>
<br>
<hr>
<br>
<p>　・あらためまして、本日は実験にご協力いただきありがとうございました。</p>
<p>　・お忘れ物のなきよう、お気をつけてお帰りください。</p>
<br>


</div>
{{ endblock }}








{{ block scripts}}
<script>
    document.addEventListener('keypress', function (e) {
        if (e.keyCode === 13 || e.key == 'Enter') {
            e.preventDefault();
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        var allRadioButtons = document.querySelectorAll('input[type="radio"]');
        var buttonB = document.getElementById('buttonB');
        var buttonA = document.getElementById('buttonA');

        allRadioButtons.forEach(function (radioButton) {
            radioButton.addEventListener('change', function () {
                var checkedCount = 0;
                allRadioButtons.forEach(function (radioButton) {
                    if (radioButton.checked) {
                        checkedCount++;
                    }
                });
                if (checkedCount === 10) {
                    buttonB.style.display = 'none';
                    buttonA.style.display = 'block';
                } else {
                    buttonB.style.display = 'block';
                    buttonA.style.display = 'none';
                }
            });
        });
    });

    function cheatButtonClick(event) {
        // ボタンのデフォルトの動作を防止する（ページが再読み込みされないようにする）
        event.preventDefault();

        // 全てのラジオボタンを取得
        var allRadioButtons = document.querySelectorAll('input[type="radio"]');

        // 全てのラジオボタンの選択状態を4に設定する
        allRadioButtons.forEach(function (radioButton) {
            radioButton.checked = (radioButton.value === '4');
        });

        // 次のページに進むためのボタンをクリックする
        document.getElementById('buttonA').click();
    }

</script>
{{ endblock }}