{{ extends 'global/Page.html' }}
   {{ block title }}
 <div style="text-align: center;">
     <h1>BLOCK 1: Instructions</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">
                <br>

<h2> Structure of the block </h2>
<ul>
  <li> You will face 14 rounds in this block. </li>
  <li> <b>Each round is independent of other rounds</b>. </li>
  <li> <b>Each round is equally likely to be selected for your payment</b>. </li>
  <li> Thus, it is important for you to take each round seriously. </li>
</ul>

<h2> Structure of the round </h2>
<ul>
    <li> In each round there are two players: First Mover and Second Mover. </li>
    <li> <span style="color: red;"><b>First Mover is the only active player</b></span>. </li>
    <li> First Mover decides what action to take: A or B. </li>
    <li> First Mover’s decision <b>determines</b> the payment for both First Mover and Second Mover. </li>
    <li> An example below illustrates the payment structure: </li>
</ul>
<br>
    <table class="mx-auto">
        <tr>
            <td colspan="3"> </td>
            <td> First Mover payment </td>
            <td> Second Mover payment </td>
        </tr>
        <tr>
            <td rowspan="2"> First Mover choice </td>
            <td><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td class="hide_left"> A </td>
            <td> 400 tokens </td>
            <td> 350 tokens </td>
        </tr>
        <tr>
            <td><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td class="hide_left"> B </td>
            <td> 500 tokens </td>
            <td> 150 tokens </td>
        </tr>
    </table>
<br>
<ul>
    <li>In this example, if First Mover decides:
        <ul>
            <br>
            <li> A, then First Mover will earn 400 tokens and Second Mover will earn 350 tokens </li>
            <li> B, then First Mover will earn 500 tokens and Second Mover will earn 150 tokens. </li>
            <br>
        </ul>
    </li>
    <li> In each round, once you made a decision you can proceed to the next round. </li>

    <li> In each round you will be presented with the new payment structure within the same decision problem:
        <ul>
            <br>
            <li> The only decision is done by First Mover picking A or B. </li>
            <li> Payments corresponding to each of actions vary. </li>
        </ul>
    </li>
</ul>
<h2> Payment </h2>
Your payment in Block 1 is determined as follows.
<ul>
    <li> One of the rounds will be randomly selected for your payment. </li>
    <li> You are randomly matched with the other participant in this room. </li>
    <li> You are randomly assigned a role: First Mover or Second Mover. </li>
    <li> The decision of First Mover is implemented. </li>
    <li> You will only see outcomes at the end of the experiment. </li>
    <li> Your payment: <b>1 token = 1 penny</b> </li>
</ul>

            </div>
        </div>
        <br>

{{ 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 }}