{% load otree_tags staticfiles %}

<div class="instructions well well-lg">

    <div>
        <p>
            In this task, you will be randomly paired with another person,
            whom we will refer to as <strong>the other</strong>. This other person is someone you do not
            know and will remain mutually anonymous.
        </p>
        <p>
            You will be making a series of decisions about allocating resources between you
            and this other person. For each of the following questions, please indicate the
            distribution you prefer most by <strong>moving the slider along the scale
            to your preferred payoff allocation</strong>.<br>
            You can only make one selection for each question.
        </p>
    </div>

{#—for each experimental session four subjects were#}
{#randomly selected after making their choices and for each#}
{#selected person one of their allocation decisions was implemented (i.e., their allocation choice was carried out#}
{#such that they received some chosen payoff, as well as#}
{#did some other randomly selected person, according to#}
{#their actual choice).#}

    <div>
        <p>Your decisions will yield money for both yourself and the other person.
            In the example below, a person has chosen to distribute money so that he/she receives 50 points, while the anonymous other person receives 40 points.
        </p>
    </div>


    <div class="panel-body" style="margin-top: 2em; margin-bottom: 2em; border: 1px solid #ddd">
       <div class="row"">
           <div class="col-sm-2" align="center"><strong><em>--EXAMPLE--</em></strong></div>
           <div class="col-sm-1"></div>
           <div class="col-sm-7"></div>
           <div class="col-sm-2"></div>
       </div>
       <div class="row">
           <div class="col-sm-2" align="center">You receive</div>
           <div class="col-sm-1" align="center"><span class="slider-value">50</span></div>
           <div class="col-sm-7"><div class="slider-reference"><div class="value-start">30</div><div class="value-end">70</div></div></div>
           <div class="col-sm-2"></div>
       </div>
       <div class="row">
           <div class="col-sm-2" align="center"></div>
           <div class="col-sm-1" align="center"></div>
            {% if type == "discrete" %}
           <div class="col-sm-7 slider-horizontal-col"><input id="example" type="text" data-slider-tooltip="hide" data-slider-min="1" data-slider-max="9" data-slider-step="1" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9]" data-slider-value=5 data-slider-enabled="false" /></div>
            {% elif type == "continuous" %}
            <div class="col-sm-7 slider-horizontal-col">
                <input id="example" type="text" data-slider-tooltip="hide" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" data-slider-value=50 data-slider-enabled="false"/>
            </div>
            {% endif %}
           <div class="col-sm-2"><button type="button" class="btn btn-primary btn-large" disabled="True">Confirm</button></div>
       </div>
       <div class="row">
           <div class="col-sm-2" align="center">Other receives</div>
           <div class="col-sm-1" align="center"><span class="slider-value"">40</span></div>
           <div class="col-sm-7"><div class="slider-reference"><div class="value-start">80</div><div class="value-end">0</div></div></div>
           <div class="col-sm-2"></div>
        </div>
        <br>
    </div>
</div>

{#    <div>#}
{#        <p>#}
{#            There are no right or wrong answers, this is all about personal preferences. <br>#}
{#            <strong>After you have made#}
{#                your decision by moving the slider, make it final by pressing the <em>Confirm </em>button to the right of the scale.</strong>#}
{#            As you can see, your choices will influence both the amount of points you receive and the#}
{#            amount of points the other receives. When you have made all your decisions, <strong>press the <em>Continue#}
{#            </em>button at the bottom of the screen</strong> to complete this decision task.#}
{#        </p>#}
{#    </div>#}

    <div>
        <p>
            As you can see, your choices will influence both the amount of points you receive and the amount of points the other receives. <br>
            Your decisions effectively carry <strong>financial consequences</strong>: when all participants similarly recruited in Prolific have submitted their answers,
            <ul>
            <li>10 participants will be randomly selected;</li>
            <li>5 of those 10 participants will have one of their allocation choices implemented (also chosen at random) earning what they defined in "You receive",</li>
            <li> while the other 5 will be matched in pairs with them and earn what was defined in "Other receives" in those same allocation choices.
            <li> 100 points are worth £1.</li>
        </ul>
        </p>
        <p>
            There are no right or wrong answers, this is all about your personal preferences. <br>
        </p>
{#        There	are	no	right	or	wrong	answers,	this	is	all	about	personal	preferences.	After	you	#}
{#have	made	your	decision,	select	the	resulting	distribution	of	money	by	clicking	on	#}
{#button	below	your	choice.	As	you	can	see,	your	choices	will	influence	both	the	amount	#}
{#of	money 	you	receive	as	well	as	the	amount	of	money	the	other	receives.”#}
{#http://ryanomurphy.com/styled-2/downloads/files/Implementing%20the%20Murphy%20et%20al%20(2011)%20SVO%20Slider%20Items%20in%20Qualtrics.pdf#}
        <p>
            <em>To complete this task:</em><br>
            Click anywhere on the scale bar. The slider will pop up where you clicked.<br>
            Move the slider to where you want it to be such that it reflects your preferences.<br>
{#            Third, click the <em>Confirm</em> button to the right of the scale bar making your decision final for that slider. <br>#}
{#            Once you have done that for all 6 decisions, #}
            Once you are sure of your decision, click the <em>Confirm</em> button at the right of the scalebar.<br>
            <strong>Warning: You will not be able to change your decision once you click the <em>Confirm</em> button!</strong><br>
            Click the <em>Next</em> button to move on to the next decision in this task.
        </p>
{#            <strong>After you have made#}
{#                your decision by moving the slider, make it final by pressing the <em>Confirm </em>button to the right of the scale.</strong>#}
{#            As you can see, your choices will influence both the amount of points you receive and the#}
{#            amount of points the other receives. When you have made all your decisions, <strong>press the <em>Continue#}
{#            </em>button at the bottom of the screen</strong> #}
{#        </p>#}
    </div>

{% block scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.3/bootstrap-slider.min.js"></script>
    <script>
    $("#example").slider({});
    </script>
{% endblock %}