{{ block title }}Comprehension Check{{ endblock }}
{{ block content }}

    <p>
        Please answer a few questions about this study and the game before proceeding to the next games.
        You can refer to the instruction at the bottom of the screen if needed.
    </p>

    <p><b>IMPORTANT:</b> You will have <b>three chances</b> to provide the correct answers.
        If you fail this comprehension check, you will be requested to return your submission, and the experiment will be concluded.
    </p>
    <p style="color:#b22222;">You have {{ remaining_attempt }} chance(s).</p>


{{ formfield 'task' }}
{{ formfield 'cost' }}
{{ formfield 'income' }}


<p>
    4. Please indicate the extent of commitment you perceive towards the business on a scale of 1 to 10.
    <u>There is NO right or wrong answer to this question</u>.
</p>
<style>
  #myTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  #myTable th,
  #myTable td {
    border: none;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;

  }
  #myTable tr:first-child {
    border-bottom: 1px solid black;
  }
</style>

<table id="myTable">
    <tr>
        <th style="text-align: center ; vertical-align: middle;">1 (Low)</th>
        <th style="text-align: center ; vertical-align: middle;">2</th>
        <th style="text-align: center ; vertical-align: middle;">3</th>
        <th style="text-align: center ; vertical-align: middle;">4</th>
        <th style="text-align: center ; vertical-align: middle;">5</th>
        <th style="text-align: center ; vertical-align: middle;">6</th>
        <th style="text-align: center ; vertical-align: middle;">7</th>
        <th style="text-align: center ; vertical-align: middle;">8</th>
        <th style="text-align: center ; vertical-align: middle;">9</th>
        <th style="text-align: center ; vertical-align: middle;">10 (High)</th>
    </tr>
    <tr>
        {{ for choice in form.commit }}
        <td style="text-align: center ; vertical-align: middle;">{{ choice }}</td>
        {{ endfor }}
    </tr>
</table>

<br>

{{ next_button }}

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="23"
          aria-valuemin="0" aria-valuemax="100" style="width:23%">
    </div>
</div>

{{ endblock }}