{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

{% endblock %}

{% block content %}

<div class="card bg-light instructions">
  <div class="card-body">
      <p>
      <b>Instructions of the Game</b>
      </p>
    <p>
        The picture below shows a collection of tiles: The first row contains 10 Green Square tiles, whereas the second row consists of 10 Circular tiles and is initially empty.  </p>
      <img src="{% static 'Endo.png' %}" width="350px"/>
    <br>
    <br>
     <p> Every two players will be randomly paired into a group. One will play as "Player 1" and the other as a "Player 2". The game proceeds as below:</p>


      <p>1. First Player 1 selects the number of Circular tiles to color Green. The rest of the Circular tiles will have color Yellow.   </p>
      <p>2. Next the computer randomly selects a tile. Each of 20 tiles has equal chance of being selected. Players won't know which tile has been chosen until the end of the game.  </p>
      <p>3. After being informed the number of Circular tiles Player 1 has colored Green, Player 2 makes a choice whether to <b>look</b> or <b>not look</b>.  </p>
      <p>4. If Player 2 chooses to <b>look</b>, he or she gets either a Green hat or a Yellow hat. If the computer selected a Green tile, Player 2 gets a Green hat. If the computer selected a Yellow tile, Player 2 gets a Yellow hat. </p>
      <p> If Player 2 chooses to <b>not look</b>, he or she gets a Yellow Hat.  </p>

      <p><b>Player 1's payoff</b> </p>
      <p>Player 1 earns 100 points if Player 2's hat is Green and 0 points if Player 2's hat is Yellow.  </p>

      <p><b>Player 2's payoff</b></p>
      <p>Player 2 earns 100 points if the computer selected a Circular tile, and Player 2 got a Yellow hat.</p>
      <p>Player 2 earns X points if the computer selected a Square tile, and Player 2 got a Green hat. X will be randomly chosen from 20, 40, 60 and 80 points. Both Player 1 and Player 2 will be informed what X is before any choice is made.  </p>
      <p>Player 2 earns 0 points in all other cases. </p>

</div>
    </div>


{% endblock %}