{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block styles %}
<style>
  .bordered {
    width: 940px;
    height: 120px;
    padding: 20px;
    border: 1px solid darkorange;
    border-radius: 8px;
  }
td
{
    text-align: center;
    vertical-align: middle;
}
</style>
{% endblock %}

{% block title %}

<h4><center><strong>Relation between the Green player's performance and the wheels of fortune</strong></center></h4><br>

{% endblock %}

{% block content %}

<div class="instructions well well-lg" >
   <p> Remember that you are paired with  <strong>{{ Constants.nameperformer }}</strong> who is your <strong>Green player</strong>.</p>
    <p>Below you can see how each addition solved correctly by <strong>{{ Constants.nameperformer }}</strong> affected
        the <i>wheel of fortune </i> that was assigned to you as the <strong>Yellow player</strong>.  </p>
</div><br>

<h6>
  <table class="table table-bordered text-center" style="width: auto; margin: auto">

                <tr >
                    <td><strong>Number of correct answers by {{ Constants.nameperformer }}</strong> </td>
                    <td><strong>led to</strong></td>
                    <td><strong>Wheel of fortune earned by you</strong></td>
                </tr >

                <tr>
                    <td style="text-align: center; vertical-align: middle;"><strong>Between 0 to 2 correct answers</strong></td>
                    <td style="text-align: center; vertical-align: middle;">–></td>
                     <td align="left"><p align="center"><img  class="center" align="center" width="300" height="200" src="{% static "pictures/Picture4AA.png" %}"/>
</li></td>
                </tr>
                <tr>
                <td style="text-align: center; vertical-align: middle;"><strong>Between 3 to 4 correct answers</strong></td>
</li></td>
                    <td style="text-align: center; vertical-align: middle;">–></td>
                     <td align="left"><p align="center"><img  class="center" align="center" width="265" height="200" src="{% static "pictures/Picture4AB.png" %}"/>
</li></td>
                </tr>
                 <tr>
           <td colspan="3"> Remember, red corresponds to <strong>$0</strong>, purple corresponds to <strong>$1</strong> and blue corresponds to <strong>$2.</strong> </td>
      </tr>

             </table></li>  <br>

</h6>




    {% next_button %}


{% endblock %}