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

{{ block title }}
    <div align = "center"><h3>次の質問に答えてください</h3></div>
{{ endblock }}


{{ block styles }}
<style>
        .white-container {
            background-color: #fafafa;
            padding: 20px; /* Adjust padding as needed */
            border-radius: 10px; /* Optional: Add rounded corners */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle box shadow */
        }

        .radio-container {
            display: flex;
            justify-content: space-between;
            margin: 0 10px;
        }

        .radio-container > div {
            flex: 1; /* ラジオボタンコンテナの幅を均等にする */
            text-align: center;
        }
</style>
{{ endblock }}










{{ block content }}
<div align = "center"><h5>全ての質問の答えを選ぶと「次へ」ボタンが表示されます</h5></div><br>


{{ if group.treatment != 5}}
    <div class="white-container" style="color: #333333;">
                <p>{{form.qTotalA.label}}</p>
                <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                    {{ for eachopt in form.qTotalA}}
                        <div align="center">
                            {{ eachopt }} <br> <!-- ラジオボタン -->
                            <div style="font-size: 0.8em;">
                            {{ eachopt.label }}<!-- ラベル -->
                            </div>
                        </div>
                    {{ endfor }}
                </div>
            </div>
            <br>
            <br>

<div class="white-container" style="color: #333333;">
                <p>{{form.qTotalB.label}}</p>
                <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                    {{ for eachopt in form.qTotalB }}
                        <div align="center">
                            {{ eachopt }} <br> <!-- ラジオボタン -->
                            <div style="font-size: 0.8em;">
                            {{ eachopt.label }}<!-- ラベル -->
                            </div>
                        </div>
                    {{ endfor }}
                </div>
            </div>
            <br>
            <br>
{{ endif }}


     <div class="white-container" style="color: #333333;">
            <p>{{form.qMoneyA.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in form.qMoneyA }}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 0.8em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
    </div>
        <br>
        <br>

    <div class="white-container" style="color: #333333;">
            <p>{{form.qMoneyB.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in form.qMoneyB }}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 0.8em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
    </div>
        <br>
        <br>

{{ if group.treatment != 5}}

    <div class="white-container" style="color: #333333;">
            <p>{{form.qTaskA.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in form.qTaskA }}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 0.8em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
    </div>
        <br>
        <br>
    <div class="white-container" style="color: #333333;">
            <p>{{form.qTaskB.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in form.qTaskB }}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 0.8em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
    </div>
        <br>
        <br>

{{ endif }}



    <div class="white-container" style="color: #333333;">
        {{ if group.treatment  == 5}}
            <p>Q. <span class = red><strong>最低いくら</strong></span>もらえれば、パート１の作業をもう１セットしても良いですか？</p>
        {{ else }}
            <p>Q. <span class = red><strong>最低いくら</strong></span>もらえれば、先ほどの作業をもう１セットしても良いですか？</p>
        {{ endif }}
        
        {{ form.MarginalTaskValue }}
        <p style="font-size: 0.9em;"> 　円（単位は不要で半角数字のみ）</p>
    </div>
    <br>
    <br>

    <hr style="border-bottom: 4px solid #FFFFFF;">
        
    <br>
    <br>
    <div class="white-container" style="color: #333333;">
            <p>{{form.qUnderstanding.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in form.qUnderstanding }}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 0.7em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
    </div>
        <br>
        <br>
    <div class="white-container" style="color: #333333;">
            <p>{{form.qDifficulty.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in form.qDifficulty}}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 0.7em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
    </div>
    <br>
    <br>

    <div class="white-container" style="color: #333333;">
            <p>{{form.qGender.label}}</p>
            <div class="radio-container" style="display: flex; justify-content: space-between; margin: 0 10px;">
                {{ for eachopt in form.qGender }}
                    <div align="center">
                        {{ eachopt }} <br> <!-- ラジオボタン -->
                        <div style="font-size: 1em;">
                        {{ eachopt.label }}<!-- ラベル -->
                        </div>
                    </div>
                {{ endfor }}
            </div>
    </div>
    <br>
    <br>
    
    <div align = "center">
        <button id="buttonA">次へ</button>
            <div class="popup-container">
                <button type="button" id="buttonB">次へ</button>
                <div class="popup">
                　全選択で「次へ」ボタン表示
                </div>
            </div><button id="hidden_submit_button" type="submit" hidden="true"></button>
    </div>
{{ endblock }}











{{ block scripts }}
<script>
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++;
                }
            });
            // ラジオボタンの総数の1/7がチェックされた場合にボタンの表示を切り替える
            if (checkedCount > Math.floor(allRadioButtons.length / 7)) {
                buttonB.style.display = 'none';
                buttonA.style.display = 'block';
            } else {
                buttonB.style.display = 'block';
                buttonA.style.display = 'none';
            }
        });
    });
});

document.addEventListener('DOMContentLoaded', function() {
    var buttonA = document.getElementById('buttonA');
    var hiddenSubmitButton = document.getElementById('hidden_submit_button');

    buttonA.addEventListener('click', function() {
        // ボタンをクリックしてフォームを送信
        hiddenSubmitButton.click();
    });
});
</script>
{{ endblock }}