{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Instructions
{% endblock %}

{% block content %}

<h1>Example </h1>

<img src="{% static "minimum_effort_game/MEGPayoffMatrix.png" %}"/>

<p> The minimum effort in the group determines the payoff of all the group members. </p>
<p>Lets say you chose 4 as your level of effort and the other three group members chose 3, 5, and 7. The lowest effort level chosen (3) is the minimum effort choice in the group. Looking at the table below, your own choice is 4 and the minimum effort choice is 3, which would give you a payoff of 80 points. </p>


<p> Players: </p>
<table style="width:100%; border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black"> Level of effort </th>
    <th style="border: 1px solid black"> Payoff </th>
  </tr>
  <tr style="background-color: #ffffbc">
    <td style="border: 1px solid black; background-color: #ffffbc">4 effort units</td>
    <td style="border: 1px solid black; background-color: #ffffbc"> 80 points</td>
  </tr>
  <tr style="background-color: #ff7f7f">
    <td style="border: 1px solid black; background-color: #ff7f7f">3 effort units</td>
    <td style="border: 1px solid black; background-color: #ff7f7f">90 points</td>
  </tr>
   <tr>
    <td style="border: 1px solid black">5 effort units</td>
    <td style="border: 1px solid black"> 70 points</td>
  </tr>
  <tr>
    <td style="border: 1px solid black">7 effort units</td>
    <td style="border: 1px solid black"> 50 points</td>
  </tr>
</table>

<p>(You are highlighted in yellow, and the minimum effort is highlighted in red)</p>


<p style="padding-top: 50px;">If you chose 3 and the minimum effort was also 3, you would have received a payoff of 90 points. </p>

<p> Players: </p>
<table style="width:100%; border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black"> Level of effort </th>
    <th style="border: 1px solid black"> Payoff </th>
  </tr>
  <tr style="background-color: #ffbb7f">
    <td style="border: 1px solid black; background-color: #ffbb7f">3 effort units</td>
    <td style="border: 1px solid black; background-color: #ffbb7f"> 90 points</td>
  </tr>
  <tr style="background-color: #ff7f7f">
    <td style="border: 1px solid black; background-color: #ff7f7f">3 effort units</td>
    <td style="border: 1px solid black; background-color: #ff7f7f">90 points</td>
  </tr>
   <tr>
    <td style="border: 1px solid black">5 effort units</td>
    <td style="border: 1px solid black"> 70 points</td>
  </tr>
  <tr>
    <td style="border: 1px solid black">7 effort units</td>
    <td style="border: 1px solid black"> 50 points</td>
  </tr>
</table>
<p>(You chose the minimum effort, so you are highlighted in orange.  Other players who chose the minimum effort are highlighted in red)</p>



<p style="padding-top: 50px;">If you were to choose 1 and everyone else chose 7, you will receive 70 points and everyone else will receive 10 points. </p>

<p> Players: </p>
<table style="width:100%; border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black"> Level of effort </th>
    <th style="border: 1px solid black"> Payoff </th>
  </tr>
  <tr style="background-color: #ffbb7f">
    <td style="border: 1px solid black; background-color: #ffbb7f">1 effort units</td>
    <td style="border: 1px solid black; background-color: #ffbb7f"> 70 points</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">7 effort units</td>
    <td style="border: 1px solid black;">10 points</td>
  </tr>
   <tr>
    <td style="border: 1px solid black">7 effort units</td>
    <td style="border: 1px solid black"> 10 points</td>
  </tr>
  <tr>
    <td style="border: 1px solid black">7 effort units</td>
    <td style="border: 1px solid black"> 10 points</td>
  </tr>
</table>
<p>(You chose the minimum effort, so you are highlighted in orange.)  </p>



<p style="padding-top: 50px;"> Potential payoffs are highest when everyone allocates higher levels of effort.  For instance, if everyone chooses 7, each player makes 130 points. </p>


<p> Players: </p>
<table style="width:100%; border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black"> Level of effort </th>
    <th style="border: 1px solid black"> Payoff </th>
  </tr>
  <tr style="background-color: #ffbb7f">
    <td style="border: 1px solid black; background-color: #ffbb7f">7 effort units</td>
    <td style="border: 1px solid black; background-color: #ffbb7f"> 130 points</td>
  </tr>
  <tr style="background-color: #ff7f7f">
    <td style="border: 1px solid black; background-color: #ff7f7f">7 effort units</td>
    <td style="border: 1px solid black; background-color: #ff7f7f">130 points</td>
  </tr>
  <tr style="background-color: #ff7f7f">
    <td style="border: 1px solid black; background-color: #ff7f7f">7 effort units</td>
    <td style="border: 1px solid black; background-color: #ff7f7f">130 points</td>
  </tr>
  <tr style="background-color: #ff7f7f">
    <td style="border: 1px solid black; background-color: #ff7f7f">7 effort units</td>
    <td style="border: 1px solid black; background-color: #ff7f7f">130 points</td>
  </tr>
</table>
<p>(You chose the minimum effort, so you are highlighted in orange.  Other players who chose the minimum effort are highlighted in red)</p>






<div id="next">
    {% next_button %}
</div>

<div style="display: none">
    {% formfield player.timeonpage_Instructions3 %}
</div>

<script>
start=new Date().getTime()
timebox=document.getElementById("id_timeonpage_Instructions3")

function getPageTime(){
    pagetime=(new Date().getTime() - start)/1000
    return pagetime;
}

function compute_page_vals(){
    timebox.value=getPageTime()
}

document.getElementById("next").addEventListener("click", compute_page_vals);
</script>


{% endblock %}