{% 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 lottery </strong></center></h4><br>

{% endblock %}

{% block content %}

<div class="instructions well well-lg" >
   <p> 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>lottery</i> that was assigned to you as the <strong>Yellow player</strong>.  </p>
</div><br>

<p>Below you can see how each correct puzzle increases the probability of higher earnings for you. </p>
<br>
</div>
<h7>
  <table class="table table-bordered text-center" style="width: auto; margin: auto">

                <tr >
                     <td><strong>Number of correct answers by the Green player</strong></td>
                     <td><strong>Lottery earned by the Yellow player</strong></td>
                </tr >

                <tr>
                     <td>0 correct answers</td>
                     <td align="left"><li>with {{Constants.probability_c0}}% probability the outcome is {{ Constants.highpayoff }};</li>
                         <li>with {{Constants.probability_c0com}}% probability the outcome is {{ Constants.lowpayoff }}.</li></td>
                </tr>
                <tr>
                     <td>1 correct answer</td>
                     <td align="left"><li>with {{Constants.probability_c1}}% probability the outcome is {{ Constants.highpayoff }};</li>
                         <li>with {{Constants.probability_c1com}}% probability the outcome is {{ Constants.lowpayoff }}.</li></td>
                </tr>
                <tr>
                     <td>2 correct answers</td>
                     <td align="left"><li>with {{Constants.probability_c2}}% probability the outcome is {{ Constants.highpayoff }};</li>
                         <li>with {{Constants.probability_c2com}}% probability the outcome is {{ Constants.lowpayoff }}.</li></td>
                </tr>
                      <tr>
                     <td>3 correct answers</td>
                     <td align="left"><li>with {{Constants.probability_c3}}% probability the outcome is {{ Constants.highpayoff }};</li>
                         <li>with {{Constants.probability_c3com}}% probability the outcome is {{ Constants.lowpayoff }}.</li></td>
                </tr>
             </table></li>  <br>
</h7>
</div>


    {% next_button %}


{% endblock %}