{{ block content }}
<style>
    .otree-body {
        line-height: 1.6; /* Better line spacing */
        background-color: #f4f4f4; /* Light background for the page */
    }
    .page-header {
    padding-top: 5px;
    }

    th {
        font-weight: normal;
        font-size: 14px;
        text-align: left;
    }

    /* Set a fixed percentage width for the other headers; ensure it adds up to 75% */
    .table th:not(:first-child), .table td:not(:first-child) {
    width: 10.71%; /* This is (75% / 7) */
    }
</style>

<p style="font-size: 18px">To what extent do you agree with the following statements <strong>with regard to the tasks you just completed</strong>?</p>
<br><br>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover">
    <tr>
        <th></th>
        <th style="font-size: 14px">1 - <br>Strongly disagree</th>
        <th style="font-size: 14px">2 - <br>Disagree</th>
        <th style="font-size: 14px">3 - <br>Slightly disagree</th>
        <th style="font-size: 14px">4 - <br>Neither agree nor disagree</th>
        <th style="font-size: 14px">5 - <br>Slightly agree</th>
        <th style="font-size: 14px">6 - <br>Agree</th>
        <th style="font-size: 14px">7 - <br>Strongly agree</th>
    </tr>
    {{ for field in form }}
        {{ if field.name in ["q1_control", "q2_control","q3_control", "attention", "q1_satisfaction", "q2_satisfaction", "q3_satisfaction",] }}
            <tr>
                <th>{{ field.label }}</th>
                {{ for choice in field }}
                    <td>{{ choice }}</td>
                {{ endfor }}
            </tr>
        {{ endif }}
    {{ endfor }}
</table>

    {{ next_button }}
{{ endblock }}