{{ block title }}
    Instructions
{{ endblock }}
{{ block content }}

    <div class="tab">
    <p>
    <b>General Setting</b>
    </p>
    <p>
        You will observe the price development of 3 fictional stocks (stock A, B, and C).
        Each stock is either in a <i>good</i> state or in a <i>bad</i> state, which is fixed throughout the entire experiment.
        The state of a stock is randomly determined at the beginning of the experiment.
        <br>
        Stock prices change in every period.
        The state of a stock determines the likelihood of price changes in every period as follows:
        <p>
        <table>
            <tr>
                <th style="text-align: center; padding-right: 10px; padding-left: 10px; font-weight: normal">Price Change</th>
                <th style="text-align: center; padding-right: 10px; padding-left: 10px; font-weight: normal">Good State</th>
                <th style="text-align: center; padding-right: 10px; padding-left: 10px; font-weight: normal">Bad State</th>
            </tr>
            <tr>
                <td style="text-align: center">+6</td>
                <td style="text-align: center">25%</td>
                <td style="text-align: center">15%</td>
            </tr>
            <tr>
                <td style="text-align: center">+3</td>
                <td style="text-align: center">35%</td>
                <td style="text-align: center">25%</td>
            </tr>
            <tr>
                <td style="text-align: center">-3</td>
                <td style="text-align: center">25%</td>
                <td style="text-align: center">35%</td>
            </tr>
            <tr>
                <td style="text-align: center">-6</td>
                <td style="text-align: center">15%</td>
                <td style="text-align: center">25%</td>
            </tr>
        </table>
    </p>
        For example, if a stock is in the <i>good</i> state, the probability of a price change of +6 is 25% whereas it is only 15% when a stock is the <i>bad</i> state.
        As such, price changes are indicative of the randomly determined state of each stock.
        <br>
        The states of the stocks are independent of each other, i.e. the price changes of stock A are not indicative of the state of the other stocks and vice versa.
        <br>
        The stocks have different starting prices which are unrelated to the states of the stocks.
    </p>
    <p>
        On the next page the task is described.
    </p>
    <br>
    <p>
        <button type="button" class="otree-btn-next btn btn-primary" data-offset="1">Next</button>
    </p>
    </div>
    <div class="tab">
    <!-- Duplicate this div if you have more than 3 pages of instructions ... -->
    <p>
    <b>Task</b>
    </p>
    <p>
        You will see the historic price development from periods -3 to 0 to be able to form initial estimates about the states of the stocks in period 0.
        You will then see the price development from periods 1 to 3 and are asked to provide your estimates about the states of the stocks in every period.
    </p>
    <p>
        In particular, your task in period 0 as well as in periods 1 to 3 is the following:
        <br>
        <!--First, you have to select whether it is more likely that the stocks are either in the <i>good</i> state or in the <i>bad</i> state.
        <br>
        Second, you have provide your specific estimate of the likelihood that the stocks are in the <i>good</i> state.
        In particular, you have to enter an integer percentage number between 0% and 100%.
        <br>
        Note that if you select the good state to be more likely than the bad state, the likelihood that the stock is in the <i>good</i> state should be above 50%.
        Similarly, if you select the bad state to be more likely than the good state, the likelihood that the stock is in the <i>good</i> state should be below 50%.
        -->
        You have to choose the best stock, i.e. the stock with the highest likelihood of being in the <i>good</i> state.
        Moreover, you have to provide your estimates of the likelihood that the stocks are in the <i>good</i> state by entering an integer percentage number between 0% and 100%.
    </p>
    <p>
        On the next page the compensation scheme is described.
    </p>
    <br>
    <p>
        <button type="button" class="otree-btn-next btn btn-primary" data-offset="-1">Previous</button>
        <button type="button" class="otree-btn-next btn btn-primary" data-offset="1">Next</button>
    </p>
    </div>

    <div class="tab">
    <!-- Duplicate this div if you have more than 3 pages of instructions ... -->
    <p>
    <b>Compensation</b>
    </p>
    <p>
    In addition to the participation fee of £1.25, you can earn a bonus payment in the estimation task.
    <br>
    In every period one of your estimates is randomly selected. Your compensation increases by £0.30 for each estimate which is within 5% of the correct statistical likelihood that the stock is in the good state (e.g. the correct likelihood is 50% and your estimate is between 45% and 55%).
    <br>
    <p>
    If you feel that you understand the instructions, press "Next" to proceed to answer a few comprehension questions before the experiment starts.
    </p>
    <br>
    <p>
        <button type="button" class="otree-btn-next btn btn-primary" data-offset="-1">Previous</button>
        <button type="button" class="otree-btn-next btn btn-primary" data-offset="1">Next</button>
    </p>
    </div>

    <div class="tab">
    <b>
    Please answer the following questions to demonstrate that you understand the setting.
    </b>
    <p>
        {{ formfields }}
        {{ formfield_errors "consistency_states" }}
    </p>
    <br>
    <p>
        <button type="button" class="otree-btn-next btn btn-primary" data-offset="-1">Previous</button>
        <button class="otree-btn-next btn btn-primary">Next</button>
    </p>
    </div>

    <style>
        .tab {
        display: none;
        }
    </style>

<script>

    let activeTab = 0;
    let tabs = document.getElementsByClassName('tab');

    function showCurrentTabOnly() {
      for (let i = 0; i < tabs.length; i++) {
        let tab = tabs[i];
        if (i === activeTab) {
          tab.style.display = 'block';
          tab.scrollIntoView();
        } else {
          tab.style.display = 'none';
        }
      }
    }

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