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

{% block title %} Number of sliders of the other participant {% endblock %}

{% block app_styles %}

<script>
    function showMethod() {
        document.getElementById('Method').style.display = "block";
    }
    function hideMethod() {
        document.getElementById('Method').style.display = "none";
    }
    function showButton() {
        document.getElementById('hideExplanation').style.display = "block";
    }
    function showIncentive() {
        document.getElementById('Incentive').style.display = "block";
    }
    function hideButton() {
        document.getElementById('hideExplanation').style.display = "none";
    }
    function hideIncentive() {
        document.getElementById('Incentive').style.display = "none";
    }
    function deactivateButton(button_id) {
        document.getElementById(button_id).disabled = true;
    }
    function activateButton(button_id) {
        document.getElementById(button_id).disabled = false;
    }
</script>

<style>
    #Method {display:none;}
    #Incentive {display:none;}
    #btnshowMethod {disabled:false;}
    #btnshowIncentive {disabled:false;}
</style>

{% endblock %}

{% block content %}

<p>
    You can earn an additional bonus of {{ bonus }} based upon your following answer.
    Note that you have an incentive to tell the truth.
    If you’re interested in the specific method that determines whether you get the bonus,
    then <button id="btnshowMethod" type="button" class="otree-btn-next btn btn-primary" onclick="showMethod(); showButton(); deactivateButton('btnshowMethod');">click here</button>.
</p>

<div id="Method">
    <p>
        The computer will randomly draw an integer <i>p</i> between 1 and 100 with each integer being equally likely to be chosen.
        There are two cases:
    </p>
    <ol>
        <li>
            If <i>p</i> is less than your answer then you receive the bonus of {{ bonus }} if the other participant had to move {{ sliders_low }} sliders.
        </li>
        <li>
            If <i>p</i> is greater than or equal to your answer then you will play a lottery.
            In this lottery the <i>p</i> will be compared to another random integer <i>q</i> that is also drawn by the computer and between 1 and 100 with each integer being equally likely to be chosen.
            If <i>q</i> is less than or equal to <i>p</i>, the lottery will pay you the bonus of {{ bonus }}.
            If <i>q</i> is greater than <i>p</i>, the lottery will pay you nothing.
        </li>
    </ol>
    If you’re interested in why you have an incentive to tell the truth,
    then <button id="btnshowIncentive" type="button" class="otree-btn-next btn btn-primary" onclick="showIncentive(); hideButton(); deactivateButton('btnshowIncentive');">click here</button>.
    <br>
    <div id="hideExplanation">
        <button type="button" class="otree-btn-next btn btn-primary" onclick="hideMethod(); activateButton('btnshowMethod');">Hide this explanation</button>
    </div>
</div>

<div id="Incentive">
    <p>
        To see that you have an incentive to tell the truth, suppose you believe that the chance is <i>X</i> percent but you enter a number <i>Y</i> that is larger than <i>X</i>. You exaggerate.
    </p>
    <ol>
        <li>
            If the random number <i>p</i> that is drawn by the computer is smaller than the chance <i>X</i> that you believe, then <i>p</i> is also smaller than <i>Y</i>, the number you entered.
            In this case, you get the bonus if the other participant had to move {{ sliders_low }} sliders, regardless of whether you entered what you truly believe (<i>X</i>) or exaggerated (<i>Y</i>).
        </li>
        <li>
            If the random number <i>p</i> that is drawn by the computer is larger than <i>Y</i>, the number you entered, then <i>p</i> is also larger than <i>X</i>, the chance you believe to be true.
            In this case, you play the lottery regardless of whether you entered what you truly believe (<i>X</i>) or exaggerated (<i>Y</i>).
        </li>
        <li>
            Hence, for these two cases, it does not matter whether you enter what you truly believe or exaggerate.
        </li>
        <li>
            However, if the random number <i>p</i> is between <i>X</i> and <i>Y</i>, so larger than the chance you believe to be true but smaller than the number you entered, then you receive the bonus if the other participant had to move {{ sliders_low }} sliders.
            But you believe that this is only the case with a chance of <i>X</i>. On the other hand, the lottery pays you the bonus if the second randomly drawn number <i>q</i> is smaller than <i>p</i>. As <i>p</i> is larger than <i>X</i>, it is more likely that you win the lottery than the other participant having to move {{ sliders_low }} sliders.
            Consequently, you would have been better off entering the chance you truly believe rather than to exaggerate. By entering what you truly believe you would have played the lottery in that case.
        </li>
        <li>
            The argumentation for understating what you truly believe is similar.
        </li>
    </ol>
    <br>
    <button type="button" class="otree-btn-next btn btn-primary" onclick="hideMethod(); hideIncentive(); activateButton('btnshowMethod'); activateButton('btnshowIncentive');">Hide the explanations</button>
</div>

<br>

Type in a number to indicate how you would answer the following:<br>
"I believe there is a _______% chance that the other participant had to move {{ sliders_low }} sliders."<br><br>

{% formfield player.belief label=""%}

<br>
<br>

{% next_button %}

{% endblock %}