{% 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 5 Green Circular tiles and 5 Yellow Circular tiles.</p>
      <img src="{% static 'Exo.png' %}" width="350px"/>
    <br>
    <br>
     <p> The game proceeds as below:</p>

      <p>1. First, the computer randomly selects a tile. Each of 20 tiles has equal chance of being selected. You won't know which tile has been chosen until the end of the game.</p>
      <p>2. Then you make a choice whether to <b>look</b> or <b>not look</b>.  </p>
      <p>3. If you choose to <b>look</b>, you get either a Green hat or a Yellow hat. If the computer selected a Green tile, you get a Green hat, and if the computer selected a Yellow tile, you get a Yellow hat.</p>
      <p> If you choose to <b>not look</b>, you get a Yellow Hat.  </p>

      <p><b>Your payoff</b></p>
      <p>You earn 100 points if the computer selected a Circular tile, and you got a Yellow Hat</p>
      <p>You earn X points if computer selected a Square tile, and you got a Green hat. X will be randomly chosen from 20, 40, 60 and 80 points. You will be informed what X is before you make your choice.  </p>
      <p>You earn 0 points in all other cases. </p>

</div>
    </div>


{% endblock %}