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

{% block title %}

<h4><center><strong>Relation between performer's performance and earnings of the decider</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 {{ Constants.Pronounperformer }} Yellow player</strong></td>
                </tr >

                <tr>
                     <td><strong>Between 0 to 2 correct answers</strong></td>
                    <td>--></td>
                     <td align="left"><p align="center"><img  class="center" align="center" width="300" height="200" src="{% static "pictures/Picture4.png" %}"/>
</li></td>
                </tr>
                <tr>
                    <td><strong>Between 3 to 4 correct answers</strong></td>
                    <td>--></td>
                     <td align="left"><p align="center"><img  class="center" align="center" width="265" height="200" src="{% static "pictures/Picture5.png" %}"/>
</li></td>              </tr>
             </table></li>  <br>

</h6>

 <div class="instructions well well-lg" >

     <p> Remember red corresponds to <strong>$0</strong>, purple corresponds to <strong>$1</strong> and blue corresponds to <strong>$2.</strong></p>
       <p> Once the researcher knows the <i>wheel of fortune</i> that was assigned to you, they will spin it for you and
       tell you the outcome of the wheel.</p>
</div><br>

    {% next_button %}



{% endblock %}