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


{% block title %}
Your Rank in the Distribution - Your Decision
{% endblock %}

{% block content %}


<div class="instructions well well-lg" xmlns="http://www.w3.org/1999/html">

    <p>Your previous guess, that you are in the top half of the distribution in the Quiz, was {{ player.choice_prior_x }} percent.</p>

    <p>Please, find below the feedback that you received from the {{ urn }} evaluation system on your performance .</p>

</div>

{% if signal1 == 1 %}
  <div class="column"><p align="center"><img  class="ImageBorder" align="center" width="500" height="170"   src="{% static "pictures/positivesignal.png" %}"/></div>

{% elif signal1 == -1 %}
  <div class="column"><p align="center"><img  class="ImageBorder" align="center" width="500" height="170"   src="{% static "pictures/negativesignal.png" %}"/></div>

{% else %}
  <div class="column"><p align="center"><img  class="ImageBorder" align="center" width="500" height="170"   src="{% static "pictures/nosignal.png" %}"/></div>

{% endif %}

<div class="instructions well well-lg" xmlns="http://www.w3.org/1999/html">
<p>By adjusting the slider below, please state the probability with which you think that you scored in the top half of the distribution
(that is, as compared to other people who have completed the same task as you).</p>

<p align="justify"> Specifically, and just as before, your score was compared to all other participants' performances in today's experiment, except
for the score of one randomly chosen participant (who is your partner). The score of this participant was not part of the distribution.</p>

<p align="justify">Remember that the payment mechanism is such that reporting your true belief about your performance will maximize your chance of earning
        the higher payment of {{Constants.Highpayoff}}. (Again, if you would like to remember why it is in your best interest to tell us your true belief, please click
            on the button "Detailed Explanation" that you can find below the next button). </p>
</div>

<input type="hidden" name="checkurnF2" value="" id="id_checkurnF2"/>
<center>{% formfield player.choice_posterior1_x label="Please adjust the slider to state the probability with which you think that you are in the top half of the distribution." %}</center>

</div>


    {% next_button %}
<br>
<input class="favorite styled" value="Detailed Explanation" name="ale" id="id_button" onclick="myFunction()" /> <br><center> </center><br><br><br>


<script>
jQuery(document).ready(function(){
    jQuery('#id_button').on('click', function(event) {
        jQuery('#content').toggle('show');
    });
});
</script>

<script>
    $('input[name=ale]').on('click', function(){
        $('#id_checkurnF2').val(1);
    });
</script>


        <div id='content' class="instructions well well-lg" style="display:none">
                            <center><h4 class="panel-sub-heading"> Belief Elicitation Mechanism </h4> </center><br>
                <p align="justify">
        In this decision task, we will ask your belief regarding the probabilities of one event.
        The probability you state will affect your payment in this experiment. In particular,
        the payment method is such that you have the highest chance of earning (more) money by
        stating the true probability with which you think the event will occur.</p>

        <p align="justify">
        We will now explain you how the payment method works. For ease of understanding,
        let us consider a specific event: The probability that it rained yesterday in New York.
        Note that this example is only for illustrative purposes, in the experiment it will be replaced by another event.</p>

        <p align="justify">
        We give you {{ Constants.Highpayoff }} and you have to decide whether you want to place your bet on the lottery or the event:</p>

            <ul>
        <li><strong>The lottery</strong>: you earn the {{Constants.Highpayoff}} if a purple ball is drawn from an urn containing 100 purple and orange balls.
        The computer will randomly determine the composition of purple and orange balls (each possible composition is equally likely);</li>
        <li><strong>The event</strong>: you earn the {{Constants.Highpayoff}} if the event occurred (it rained yesterday in New York). </li></ul>

        <p align="justify">
         Should you place your bet on the lottery or the event (to have the highest chances of earning the {{Constants.Highpayoff}})?
         This will depend on the number of purple balls in the urn and the probability you think it rained yesterday in New York.</p>

        <p align="justify">
        For example, if there are 5 purple balls in the urn, the chance to win the {{Constants.Highpayoff}} by picking the lottery is only 5%.
        Hence, most people would choose the event since the chance that it rained in New York is probably higher than 5%.
        However, if there are 90 purple balls in the urn, picking the event will only give you a higher chance to win the {{Constants.Highpayoff}}
        if you believe the probability that it rained in New York is higher than 90%. Therefore in this case most people would pick the lottery.
        </p>

        <p align="justify"><strong>How are you going to place your bet? </strong></p>

        <p align="justify">
        We will ask you to state your belief regarding the probability with which the event occurred.
        The mechanism ensures that it is optimal for you to state your true belief. In particular, this is because the number you give
        determines how many purple balls need to be there (in the lottery) for you to prefer to place your bet in the lottery instead of the event.
        The computer will then determine the composition of the urn.
        If there happen to be fewer (or equally many) purple balls than the minimum you chose, you will be betting on the event.
        Thus, you will earn {{Constants.Highpayoff}} if it rained yesterday in New York and £0.00 otherwise.
        If there happen to be more purple balls than the minimum you chose,
        you will be betting on the lottery. Then the computer draws a ball.
        If the ball drawn is purple, you earn {{Constants.Highpayoff}}, if the ball is orange you earn {{Constants.Lowpayoff}}. This method guarantees that you have the highest
        chances of earning the {{Constants.Highpayoff}} if you report your true belief of the event occurring (if you wish, below the "next" button
        you can find a more detailed explanation of why this is the case).
        </p>

        <strong><p align="justify"> While this method may look complicated, its implications are simple:
            you have the highest chance of earning (more) money if you honestly report your best guess of the probability of the event occurring.
        For example, if you believe that it rained yesterday in New York with 80%, you should state 80%.</p></strong><br>

        </div>

<style type="text/css">
.show{display:block;}
.hide{display:none;}

.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(2, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(2, 2, 2, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}
</style>
{% endblock %}