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

{{ block title }}
    <div align = "center"><h4>（1）から（10）までのことばがあなた自身にどのくらい当てはまるかについて、<br>
        下の枠内の1から7までの数字のうちもっとも適切なものを括弧内に入れてください。<br>
        文章全体を総合的に見て、自分にどれだけ当てはまるかを評価してください。</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 }}
<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>
<br>
<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 }}