{{ block title }}
{{ endblock }}
{{ block content }}
<!-- References: https://www.otreehub.com/projects/otree-snippets/  -->
<style>
    .tab {
        display: none;
    }
</style>

<div class="tab">
    <h3><center> Instructions </center></h3><br>
       <div id = "ins1" class="card bg-light m-3">
    <div class="card-body" style="background-color:#F5F5F5	;">
        <p>
           <u><center><strong>Your bonus payment is based on decisions in one round</strong></center></u><br>
        <ul>
            <li> There will be 5 rounds of the investment task.</li>
            <li> At the end, <strong>one</strong> round will be selected to be the "round that counts".</li>
            <li> Your decisions in the round that counts, and only in that round, will be implemented to determine your bonus payment.</li>
            <li> Since any round could be the round that counts, you should behave in each round as if it is the round that counts.</li>
        </ul>
        </p> </div></div>

    <p>
    <center><button id ="next" type="button" class="btn btn-primary btn-tab" data-offset="1"> >>> </button></center>
</div>

<div class="tab">
    <h3><center> Instructions </center></h3><br>
       <div id = "ins1" class="card bg-light m-3">
    <div class="card-body" style="background-color:#F5F5F5	;">
        <p>
           <u><center><strong>The investment task</strong></center></u><br>  
        <ul>
            <li> In each round, you will buy risky investments in up to two
           different accounts.</li>
            <li> Each account has separate budget and each investment generates
           returns depending on a roll of six-sided dice.</li>
            <li> You have a separate budget for each account that can be spent only in that account.  These budgets are denominated in Experimental Currency Units (ECUs) that have no value outside of the experiment.</li>
            <li> The dice will be rolled once, and you receive the returns from all your investments in all accounts in that round.</li>

    </ul>

           </p> </div></div>

    <p>
        <button id="back" type="button" class="btn btn-primary btn-tab" data-offset="-1"> <<< </button>
        <button id ="next" type="button" class="btn btn-primary btn-tab" data-offset="1"> >>> </button>
    </p>
</div>

<div class="tab">
       <h3><center> Instructions </center></h3><br>
       <div id = "ins1" class="card bg-light m-3">
    <div class="card-body" style="background-color:#F5F5F5;">
    <p>
    <u><center><strong>Example of how to calculate your bonus payment</strong></center></u><br>
        <ul>
           <li> Suppose that in the round-that-counts you have two accounts.
           <li> You have 20 ECU available in Account 1, which has two investments available;
                     each investment costs 1 ECU per unit.</li>
           <li> One unit in Asset A pays:
                <ul>
                    <li> $0.40 if the dice roll is 1, 2, or 3;</li>
                    <li> $0.10 if the dice roll is 4, 5, or 6.</li>
                </ul></li>
           <li> One unit in Asset B pays:
                <ul>
                    <li> $0.25 if the dice roll is 1, 2, or 3;</li>
                    <li> $0.25 if the dice roll is 4, 5, or 6.</li>
                </ul></li><br>

           <li> You have 15 ECU available in Account 2, which has two investments available;
                     each investment costs 1 ECU per unit.</li>
           <li> One unit in Asset C pays:
                <ul>
                    <li> $0.60 if the dice roll is 1 or 2;</li>
                    <li> $0.00 if the dice roll is 3, 4, 5, or 6.</li>
                </ul></li>
           <li> One unit in Asset D pays:
                <ul>
                    <li> $0.30 if the dice roll is 1 or 2;</li>
                    <li> $0.30 if the dice roll is 3, 4, 5, or 6.</li>
                </ul></li><br>
            <li><i>Suppose that</i></li>
                <ul>
                    <li>In Account 1: you allocate 5 ECU to Asset A and 15 ECU to Asset B;</li>
                    <li>In Account 2: you allocate 8 ECU to Asset C and 7 ECU to Asset D.</li>
                </ul>
           <li><i>Then,</i> if the dice roll is 2, you will be paid:</li>
                <ul>
                    <li>5 × $0.40 + 15 × $0.25 + 8 × $0.60 + 7 × $0.30 = $12.65.</li>
                </ul>

        </ul>


    </ul> </p> </div></div>
    <p>
        <button id="back" type="button" class="btn btn-primary btn-tab" data-offset="-1"> <<< </button>
        <button id="next2" type="button" class="btn btn-primary btn-tab" data-offset="1"> >>> </button>
    </p>
</div>
<div class="tab">
       <h3><center> Instructions </center></h3><br>
       <div id = "ins1" class="card bg-light m-3">
       <div class="card-body" style="background-color:#F5F5F5;">
       <p>
    <u><center><strong>Round</strong></center></u><br>
        <ul>
           {{ if participant.tab == 0  }}
           <li>For each round, the top of the page will outline the number of available accounts.</li>
           <li>The box for an account indicates the available assets, how much each asset pays for each possible dice roll, and the budget for that account.</li>
           {{ else }}
           <li>For each round, the top of the page will outline the number of available accounts.  Use the tabs on the screen to access each account in that round.</li>
           <li>The tab for an account indicates the available assets, how much each asset pays for each possible dice roll, and the budget for that account.</li>
           {{ endif }}
           <li> In each account, move the slider to select your preferred allocation between the available assets.  You can choose any combination that the slider allows.</li>
           {{ if participant.treatment == 3 or participant.treatment == 4  }}
           <li> If a round has two accounts, you should first examine both accounts, then purchase your
           investments.</li>
           {{ endif}}

       </ul>
              </p> </div></div>
    <p>
        <button id="back" type="button" class="btn btn-primary btn-tab" data-offset="-1"> <<< </button>
        <button id="next2" class="btn btn-primary"> >>> </button>
    </p>
</div>

<script>

    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

<style>


#next {
   float: right;
    }


#next2 {
   float: right;
    }
</style>
{{ endblock }}