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

{{ block title }}
<div align="center">
    <h4>説明をよく読んで次の質問に答えてください</h4>
</div>
{{ endblock }}

{{ block styles }}
<style>
    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;
    }
</style>
{{ endblock }}








{{ block content }}
<div class="container_wh">
    <p style="color: #333333;">
        <strong>説明：</strong>(1)から(10)までのことばがあなた自身にどのくらい当てはまるかについて、下の枠内の1から7までの数字のうちもっとも適切なものを選んでください。文章全体を総合的に見て、自分にどれだけ当てはまるかを評価してください。
    </p>


    <table>
        <tr>
            <th>全く違うと思う</th>
            <th>おおよそ違うと思う</th>
            <th>少し違うと思う</th>
            <th>どちらでもない</th>
            <th>少しそう思う</th>
            <th>まあまあそう思う</th>
            <th>強くそう思う</th>
        </tr>
        <tr>
            <td><strong>1</strong></td>
            <td><strong>2</strong></td>
            <td><strong>3</strong></td>
            <td><strong>4</strong></td>
            <td><strong>5</strong></td>
            <td><strong>6</strong></td>
            <td><strong>7</strong></td>
        </tr>
    </table>
</div>
<br>

<h5>私は自分自身のことを......</h5><br>

{{ for eachfield in form }}
<div class="container_wh">
    <strong>（{{ forloop.counter }}）</strong> {{ eachfield.label }}<br>
    <div style="margin-top: 10px;"></div>

    <div class="container_radio">
        {{ for eachopt in eachfield }}
        <div align="center">
            {{ forloop.counter }}<br>{{ eachopt}}<br>
            <span style="font-size: 70%;">{{ eachopt.label }}</span>
        </div>
        {{ endfor }}
    </div>
</div>
<br>
<br>

{{ endfor }}

<div align="center">
    <button id="buttonA">次へ</button>
    <div class="popup-container">
        <button type="button" id="buttonB">次へ</button>
        <div class="popup">
            　全選択で「次へ」ボタン表示
        </div>
    </div>
</div>

{{ if is_defined('view.is_debug') and view.is_debug }}
<div align="center">
    <br><br>
    <button id="cheatButton" onclick="cheatButtonClick(event)">Cheat</button>
</div>
{{ endif}}
{{ 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 }}