{{ extends 'global/Page.html' }}
   {{ block title }}
 <div style="text-align: center;">
     <h1>Comprehension Test</h1>
 </div>
    {{ endblock }}

{{ block content }}

        <style>
            .ribbon {
               position: relative;
               top: -16px;
               right: -706px;
            }
        </style>

<div style="text-align: justify;" class="card bg-light mb-3">
    <div class="card-body">

<ul>
    <li> Before proceeding with the formal session, you need to answer the following questions correctly. </li>
</ul>

<h2> Your payment </h2>
<ul>

    <li>In this block, how much you are able to receive at least:</li>
                {{form.quiz1}}
                {{ formfield_errors 'quiz1' }}
    <li>In this block, how much you are able to receive at most:</li>
                {{form.quiz2}}
                {{ formfield_errors 'quiz2' }}
    <li>In this block, which one of the following payment you might receive:</li>
                {{form.quiz3}}
                {{ formfield_errors 'quiz3' }}

</ul>

<h2> Calculation rule </h2>
<ul>

    <li> In this block, will the choices made by you in block 2 affect your payment?</li>
                {{form.quiz4}}
                {{ formfield_errors 'quiz4' }}
    <li> In this block, will the choices made by other participants in block 2 affect your payment?</li>
                {{form.quiz5}}
                {{ formfield_errors 'quiz5' }}
    <li> In this block, what should you do to maximize your payment?</li>
                {{form.quiz6}}
                {{ formfield_errors 'quiz6' }}

</ul>

        <br>
    </div>
</div>

<div style="flush:center; text-align: center;">
    {{ next_button }}
</div>
{{ endblock }}


{{ block app_styles }}
    <style>
        table {
            border: 1px solid black;
        }
        td {
           border: 1px solid black;
           background-color: bg-light mb-3;
           color: black;
           font-weight: solid;
           font-size: 19px;
           padding: 10px 10px 10px 10px;
           text-align: center;
        }
        tr.hide_all > td, td.hide_all{
           border-style:hidden;
        }
        tr.hide_right > td, td.hide_right{
           border-right-style:hidden;
        }
        tr.hide_left > td, td.hide_left{
           border-left-style:hidden;
        }
        tr.hide_top > td, td.hide_top{
           border-top-style:hidden;
        }
        tr.hide_bottom > td, td.hide_bottom{
           border-bottom-style:hidden;
        }
        tr.width_bottom > td, td.width_bottom{
           border-bottom-width:4px;
        }
    </style>
{{ endblock }}