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


{% block content %}
{% include "global/fopen_bt.html" %}
Information on Part 4
{% include "global/fopen_at.html" %}
<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 to make decisions about how you value getting the recommendation.
    </p>

    <p>
      You will go through two screens of decisions where each screen has a different payment level.
      <b>Each payment level is equally likely to be selected.</b>
    </p>
    <p>
    Because they 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. Your choices for a given payment level
    only apply if this payment level is randomly selected.</b>
    </p>
    <p>
    This means that it is in your best interest to make each decision carefully and honestly.
    </p>
    <p>
    In addition to the decisions you make, there is a chance that a computer randomly assigns you to either get the recommendation or not.
    </p>
    <br>
    <br>
    <div class="no-center">
    <button class="otree-btn-next btn btn-primary no-center">Next</button>
    </div>

</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="Instructions_2_time_spent" value="0" id="Instructions_2_time_spent"/>
<input type="hidden" name="Instructions_2_warnings" value="0" id="Instructions_2_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;
  }

  .input-group, input.form-control, select.form-control {
    max-width: 50px;
  }

  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 %}