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

{% block content %}

<div align="center"> <font size="5"><b>Round {{player.round_number}} </b></font></div>
     </p>

<p> <b><font size="5"> Make a Decision - Look or Not Look  </font></b></p>
    <br>
    <br>
<b> In this round, X is {{ player.x }} points. </b>
    <br>
    <br>
<b> Here is the picture: </b>
    <br>
    <br>

 <img src="{% static 'Exo.png' %}" width="350px"/>

    <br>
    <br>

        <p><b>The computer has randomly chosen a tile. Would you like to look at its color?</b></p>
    <div>
    <button name="look_choice" value="1" class="btn btn-primary btn-large">Look</button>
    <button name="look_choice" value="0" class="btn btn-primary btn-large">Not Look</button>
    </div>
    <br>
    <br>
 <p>Recall that 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. If you choose to <b>not look</b>, you get a Yellow Hat. For the detail of payoffs, see the instructions below. </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>




{% endblock %}