{{ extends 'global/Page.html' }}
   {{ block title }}
 <div style="text-align: center;">
     <h1>BLOCK 2: 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> In this block there are <span style="color: red;"><b>two active players: First Mover and Second Mover.</b></span> </li>
  <li> In this block you will face 32 rounds:
      <ul>
          <br>
          <li> 16 assuming the role of First Mover, and, </li>
          <li> 16 assuming the role of Second Mover. </li>
          <br>
      </ul>
  </li>
  <li> <b>Each round is independent of other rounds when assuming the role of First Mover or Second Mover</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>There are two active players in each round, where </li>
        <ul>
            <br>
            <li><b>First Mover</b>:
                <ul>
                    <li>moves first </li>
                    <li>chooses A or B </li>
                </ul>
            </li>
            <li><b>Second Mover</b>:
                <ul>
                    <li>moves after knowing the choice of First Mover, then </li>
                    <li>decides to choose A or B </li>
                    <br>
                </ul>
            </li>
        </ul>
    <li> The table below provides an example of the payoff structure depending on the decisions of First Mover and Second Mover: </li>
</ul>
    <br>
        <table class="mx-auto">
        <tr>
            <td class="hide_top & hide_left", colspan="4"> </td>
            <td> First Mover  payment </td>
            <td> Second Mover payment </td>
        </tr>
        <tr>
            <td class="hide_top & hide_left & hide_bottom", rowspan="4"> First Mover <br> choice  </td>
            <td rowspan="2", class="width_bottom">  &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"， class="width_bottom"> Second Mover <br> choice </td>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td> 350 tokens </td>
            <td> 400 tokens </td>
        </tr>
        <tr>
            <td class="width_bottom">  &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td class="width_bottom"> 150 tokens </td>
            <td class="width_bottom"> 500 tokens </td>
        </tr>
        <tr>
            <td rowspan="2", >  &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"> Second Mover <br> choice </td>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td> 550 tokens </td>
            <td> 180 tokens </td>
        </tr>
        <tr>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td> 320 tokens </td>
            <td> 200 tokens </td>
        </tr>
    </table>
    <br>

<ul>
    <li>That is, if First Mover chooses:
        <ul>
            <br>
            <li>A, then if Second Mover chooses:
                <ul>
                    <li>A, then First Mover will earn 350 tokens and Second Mover will earn 400 tokens; </li>
                    <li>B, then First Mover will earn 150 tokens and Second Mover will earn 500 tokens. </li>
                </ul>
            </li>
            <li>B, then if Second Mover chooses:
                <ul>
                    <li>A, then First Mover will earn 550 tokens and Second Mover will earn 180 tokens; </li>
                    <li>B, then First Mover will earn 320 tokens and Second Mover will earn 200 tokens. </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<h2> Decision of First Mover </h2>
<ul>
    <li> <b>As First Mover you need to take a decision of A or B</b> </li>
    <li> You will be presented with the following interface: </li>
</ul>

    <br>
        <table class="mx-auto">
        <tr>
            <td class="hide_top & hide_left", colspan="5"> </td>
            <td> Your  payment </td>
            <td> Second Mover payment </td>
        </tr>
        <tr>
            <td class="hide_top & hide_left & hide_bottom", rowspan="4"> Your choice <br> (First Mover)  </td>
            <td class="hide_right & width_bottom", rowspan="2"><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td rowspan="2", class="width_bottom">A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"， class="width_bottom"> Second Mover <br> choice </td>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td> 350 tokens </td>
            <td> 400 tokens </td>
        </tr>
        <tr>
            <td class="width_bottom">  &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td class="width_bottom"> 150 tokens </td>
            <td class="width_bottom"> 500 tokens </td>
        </tr>
        <tr>
            <td class="hide_right", rowspan="2"><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td rowspan="2", > B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"> Second Mover <br> choice </td>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td> 550 tokens </td>
            <td> 180 tokens </td>
        </tr>
        <tr>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td> 320 tokens </td>
            <td> 200 tokens </td>
        </tr>
    </table>
    <br>
<ul>
    <li> In each round, once you made a decision you can proceed to the next round. </li>
</ul>
<br>
<h2> Decision of Second Mover </h2>
<ul>
    <li> <b>As Second Mover you need to take two decisions,</b></li>
        <ul>
            <br>
            <li> Choose A or B given First Mover has chosen A </li>
            <li> Choose A or B given First Mover has chosen B </li>
            <br>
        </ul>
    <li> You will be presented with the following interface: </li>
</ul>
        <br>
<br>
        <table class="mx-auto">
        <tr>
            <td class="hide_top & hide_left", colspan="5"> </td>
            <td> First Mover  payment </td>
            <td> Your payment </td>
        </tr>
        <tr>
            <td class="hide_top & hide_left & hide_bottom", rowspan="4"> First Mover <br> choice </td>
            <td rowspan="2", style="background-color:LightGoldenrodYellow;"， class="width_bottom"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"， class="width_bottom"> Your choice <br> (Second Mover) </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> 350 tokens </td>
            <td> 400 tokens </td>
        </tr>
        <tr>
            <td class="width_bottom"><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td class="hide_left & width_bottom"> B </td>
            <td class="width_bottom"> 150 tokens </td>
            <td class="width_bottom"> 500 tokens </td>
        </tr>
        <tr>
            <td rowspan="2", style="background-color:LightGray;"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"> Your choice <br> (Second Mover) </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> 550 tokens </td>
            <td> 180 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> 320 tokens </td>
            <td> 200 tokens </td>
        </tr>
    </table>
    <br>
<ul>
  <li> That is, you need to take two decisions:
      <ul>
          <br>
          <li> Choose A or B if First Mover chose A (the <span style="background-color:LightGoldenrodYellow;">Yellow</span> row) </li>
          <li> Choose A or B if First Mover chose B (the <span style="background-color:LightGray;">Gray</span> row)</li>
          <br>
      </ul>
  </li>
    <li> Note that <span style="color: red;"><b>both decisions are important because until the end of the experiment you do not know what First Mover will choose</b></span>. </li>
  <li> In each round, once you made your decisions you can proceed to the next round. </li>
</ul>

<h2> Payment </h2>
Your payment in Block 2 is determined as follows.
<ul>
    <li> You are <b>randomly</b>, </li>
    <ul>
        <br>
        <li> matched with the other participant in the room. </li>
        <li> assigned a role: First Mover or Second Mover. </li>
        <br>
    </ul>
    <li> One of the rounds will be <b>randomly</b> selected for payment. </li>
    <li> The decision you and the other participant made will be implemented (in the corresponding roles) and thus the payoff will be determined. Two examples should make this clear.</li>
    <ul>
        <br>
        <li> <b>Example 1</b>. Assume that the <u>computer randomly selects you to be First Mover. This implies that your payoff relevant decision will be your First Mover’s decision.</u> Assume that you choose A as the First Mover’s decision in the above example screen (Decision of First Mover). Assume that the other participant matched with you makes the following Second Mover’s decisions: he/she chooses A if you choose A, and chooses B if you choose B. As a consequence, you will earn 350 Tokens and the other participant will earn 400 Tokens. </li>
        <li> <b>Example 2</b>. Assume that the <u>computer randomly selects the other participant to be the First Mover. This implies that your payoff relevant decision will be your Second Mover’s decision.</u> Assume that you make the following Second Mover’s decisions: you choose B if the First Mover chooses A, and choose B if the First Mover chooses B in the above example screen (Decision of Second Mover). Assume that the other participant matched with you chooses A as the First Mover’s decision. As a consequence, you will earn 500 Tokens and the other participant will earn 150 Tokens. </li>
        <br>
    </ul>
    <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:3px;
        }
    </style>
{{ endblock }}