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


{% block content %}

{% if form.errors %}
  {% include "global/field_validation_error.html" %}
{% endif %}

{% include "global/fopen_bt.html" %}
Information on Part 4
{% include "global/fopen_at.html" %}
<!-- Tab navigation -->
<div class="sticky bar_container">
<ul class="nav nav-tabs navbar-light bg-light justify-content-center bar" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link instructions-tab active" id="instructions-tab" data-bs-toggle="tab" href="#instructions" role="tab" aria-controls="instructions" onclick="topFunction();">
            Instructions
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link control-tab" id="control-tab" data-bs-toggle="tab" href="#control" role="tab" aria-controls="control" onclick="topFunction();">
            Control
        </a>
    </li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" id="instructions" role="tabpanel" aria-labelledby="instructions-tab">

<p>
We will now ask you how much you value receiving the recommendation.
For this purpose, we will show you <b>{{Constants.no_decisions}} scenarios</b>. You can see an illustration of the decisions in the figure below.
Each of the decisions reflects a different cost of the recommendation.
The actual cost of the recommendation will be randomly determined after you have made your decisions.
Depending on your decision in that scenario you may or may not receive a recommendation for the next <b>{{Constants.play_rounds}} rounds</b>.
</p>
<p>
If you choose the option on the right, you <b>will get a recommendation</b>.
You will also have to pay the cost listed in the right option in <b>each of the {{Constants.play_rounds}} rounds.</b>
Hence, each round we will subtract the selected amount from your overall payoff.
</p>
<p>
If you choose the option on the left, you will <b>not get a recommendation.</b>
You will then have to pay the cost listed in the left option in <b>each of the {{Constants.play_rounds}} rounds.</b>
Hence, each round we will subtract the selected amount from your overall payoff.
</p>
<p>
For example, if you click on the right column for the first decision, it means that you would want to receive the recommendation if it comes at a cost of 16 points per round.
If you click on the left row in the final scenario 13, it means that you would want to receive <b>no recommendation even if you have to pay 8 points per round to not receive the recommendation.</b>
</p>
<p>
To simplify the process, you can simply click on the decision for which you want to switch from not receiving the recommendation to receiving the recommendation.
Your preferred options will then be highlighted in blue.
</p>
</p>

<br>
<img align="middle" width="50%" class="center" src="{% static "images/MPL_example.png" %}"/>
<br>
<p>
There will be two screens with {{Constants.no_decisions}} scenarios.
Each screen refers to a different payment level for the completion of the tasks.
After you have made your choices, one of the payment levels is randomly selected for you.
Because the payment levels are randomly selected, you cannot affect which payment level is chosen.
<b>Instead, on the following screens, you will make decisions assuming that a given payment level is chosen.</b>
</p>
<br>
<div class="no-center">
<button onclick="topFunction();" type="button" class="nexttab btn-primary btn next">Next</button>
</div>
</div>

<div class="tab-pane" id="control" role="tabpanel" aria-labelledby="control-tab">
<br>
{% formfield player.control_q1 label="If one of the scenarios is selected and you chose the option on the RIGHT, what would happen?" %}
<br>
{% formfield player.control_q2 label="How often do you have to pay the selected amount?" %}
<br>
<button onclick="topFunction();" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="otree-btn-next btn btn-primary">Next</button>

</div>

</div>
 {% include "global/fclose.html" %}
<!-- To hide the next button, use css ("display: none" on the "otree-btn-next" class) -->
<input type="hidden" name="MPL_Instructions_time_spent" value="0" id="MPL_Instructions_time_spent"/>
<input type="hidden" name="MPL_Instructions_warnings" value="0" id="MPL_Instructions_warnings"/>
{% endblock %}

{% block styles %}
<style>
  .center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
 }
  #myTab {
  display: none;
  }
  .no-center {
    text-align: right;
  }
  .center-me {
    text-align: right;
  }
  .nexttab {
    float: right;
  }
  .otree-form-errors {
    visibility: hidden;
    display: none;
  }
  .alert-danger {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: .25rem;
  }

  img {
  border: 1px solid #ced4da;
  }
</style>
{% endblock %}

{% block scripts %}
<script src="{% static 'back_button_v1/js/prev_next_button.js' %}"></script>

{% if form.errors %}
<script>
    $('.nexttab').click()
</script>
{% endif %}

{% endblock %}