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

{{ block title }}
What your are going to do
{{ endblock }}
{{ block content }}



<!-- Load React -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- Load ChoiceList and ChoiceSimple Component -->
<script type="text/babel" src="{{ static 'global/choice_list.js'}}"></script>
<script type="text/babel" src="{{ static 'global/choice_simple.js'}}"></script>

<style>
    ul {
        list-style-type: circle;
    }
</style>

<input type="hidden" id="binary_choice_list_choose_risky" name="binary_choice_list_choose_risky" value="-9999"></input>
<div id="root"></div>

<h3>Calculation of bonus</h3>
<p>
    You already read some details about how your payoff is determined before, but below there is the complete decision
    tree.
</p>
<img class="img-fluid mx-auto d-block border border-secondary mb-3"
    src="{{ static 'global/PayoffDecisionTree.svg' }}" />

<!-- Keeping the Decision tree as hierarchical list as a precaution -->
<!-- <ul>
    <li>One of the four rounds is determined to determine your payoff:</li>
    <ul>
        <li>
            One of the first three rounds is selected:
        </li>
        <ul>
            <li>
                You chose the lottery Option A:
            </li>
            <ul>
                <li>
                    It is randomly determined that you receive the higher bonus.
                </li>
                <li>
                    It is randomly determined that you receive the lower bonus.
                </li>
            </ul>
            <li>
                You chose the certain Option B, and you receive the certain bonus.
            </li>
        </ul>

        <li>
            The last (4<sup>th</sup>) round is selected:
        </li>
        <ul>
            <li>
                The random amount "offered" is not among those for which you indicated you would take Option B. &rArr;
                You receive Option A:
            </li>
            <ul>
                <li>
                    It is randomly determined that you receive the higher bonus.
                </li>
                <li>
                    It is randomly determined that you receive the lower bonus.
                </li>
            </ul>
            <li>
                The random amount "offered" is among those for which you indicated you would take Option B. &rArr; You
                receive Option B and receive the certain bonus.
            </li>
        </ul>
    </ul>
</ul> -->



<script type="text/babel">
    class WrapperPage extends React.Component {
        render() {
            return (
                <div>
                    <h3>Types of choices</h3>
                    <p>
                        During the experiment you will make two types of choices. For each choice you will be presented with an Option A containing a randomized bonus
                        and a certain Option B and be asked which one you prefer. In the end of the experiment, one
                        of the choices you made will be randomly selected to calculate your bonus. That means any of your choices could determine you bonus and you
                        should think about every single one of them carefully.
                        </p>
                    <p>
                        Option A will always take the form of a so called lottery. In this experiment, the lotteries will always
                        present two options, one offering a higher bonus and the other offering a lower bonus:
                        </p>
                    <p className="text-center">
                        With probability <strong>45%:</strong> Get <strong>$19</strong> <br></br>
                            With probability <strong>55%:</strong> Get <strong>$6</strong>
                    </p>
                    <p>
                        If at the end of the experiment a round is selected to determine your bonus in which you chose the lottery Option A,
                        this lottery itself is also resolved randomly.
                        </p>
                    <p>
                        While Option A will always look the same, there are two different ways we will present the certain Option B.
                        The first three choices you make will present the certain options similarly to the lotteries and your overall choice will
                        look like this:
                        </p>
                    <ChoiceSimple prob_up={50} pay_up={15} pay_down={3} pay_certain={7} />
                    <p>
                        In these first three rounds, you will simply be asked which of the two options you prefer.
                        </p>
                    <p>
                        In the last (4<sup>th</sup>) choice, the Option B will be presented as a list. You will then be
                            asked to indicate for each row whether you prefer the lottery Option A on the left or the certain Option B on the
                            right. You indicate your preferences by clicking either on the left button or the right one. The bottom most row
                            gives you instant feedback on how we interpret your inputs.
                            <br></br>
                            The list below is not connected to any of your choices. Feel free to play around with it to get a feeling for
                            the mechanism.
                        </p>
                    <ChoiceList prob_up={50} pay_up={15} pay_down={3} initialListItems={5} listLabels={[0, 1, 2, 3, 4]} deactivated={false} />
                    <p>
                        If round 4 is selected to determine your bonus, a random row of Option B is selected as our "offer" to you. If you indicated you would take the certain Option B for this amount, you receive Option B. Otherwise, you receive the lottery Option A which is resolved as described before.
                        </p>
                </div>
            )
        }
    }



    ReactDOM.render(<WrapperPage />, document.getElementById('root'));


</script>


{{ next_button }}

{{ endblock }}