{% load otree static %}

{% block styles %}
    {% include '_templates/styles/intro_page.html' %}
{% endblock %}

{% block content %}
<div class="tab" id="instructions_1" style="display: block">
    <div class="card">
        <h5 class="card-header">Payment</h5>
        <div class="card-body">
             <p class="block-sentence">
                 At the beginning of the experiment, you will receive an  <b>initial endowment of {{ participation_fee }} Pounds</b>.
                 During the experiment, you can earn more money by accumulating {{ currency_plural }}.
             </p>
            <p class="block-sentence">
                All {{ currency_plural }} you earn will be converted to Pounds at the end of the experiment. The exchange rate will be
            </p>
             <p style="margin-left: 50px;">
                    <b>1 {{ currency }} = {{ exchange_rate }} Pounds</b>.
             </p>
            <p class="block-sentence">
                The amount earned will depend on your decisions and those of the other participants.
                You will be paid via PayPal after the experiment is completed.
            </p>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>


<div class="tab" id="instructions_2" style="display: none">
    <div class="card">
        <h5 class="card-header">Instructions - Part 1</h5>
        <div class="card-body">
            <p class="block-sentence">
                This set of instructions describes the first part of the experiment.
                After you finish the first part, there will be another set of instructions for the second part.
                The second part is very similar to the first part.
            </p>
            <p class="block-sentence">
                Please read the following instructions carefully.
                After the instructions, you will be asked a <b>set of questions to ensure you understand</b> the instructions.
                The experiment will begin after every participant has answered all questions.
            </p>
            <p class="block-sentence">
                If you have any <b>questions, please raise your hand</b>.
                We will answer your questions at your cubicle.
            </p>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>


<div class="tab" id="instructions_3" style="display: none">
    <div class="card">
        <h5 class="card-header">General Information</h5>
        <div class="card-body">
          <p class="block-sentence">
              The experiment is divided into {{ total_rounds }} rounds, {{ shock_after_rounds }} rounds in the first part and {{ rounds_part_two }} rounds in the second part.
            </p>
            <p class="block-sentence">
                You have been randomly assigned to one of two roles: either an employer or a worker.
            </p>
            <p style="margin-left: 50px;">
                    <b>You will take the role of {{ player.participant.string_role }}</b>.
                    You will keep this role for the entire course of the experiment.
            </p>
            <p class="block-sentence">
                In the first part, you will interact in a group of {{ players_in_your_group }} randomly assigned participants.
                Each group has {{ employers_in_your_group }} employers and {{ workers_in_your_group }} workers.
            </p>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>

<div class="tab" id="instructions_4" style="display: none">
    <div class="card">
        <h5 class="card-header">Short Overview of the Experimental Procedures</h5>
        <div class="card-body">
           <p class="block-sentence">
               In each round, employers choose to employ zero, one, or two workers.
               To employ a worker, an employer needs to pay a wage. In return, employed workers provide effort.
               Employers' profits depend on the number of workers they employ, the wages they pay, and the effort each worker provides.
               They will make profits if the wage they pay is lower than the effort worth they receive.
            </p>
            <p class="block-sentence">
            On the other hand, your profits will depend on:
            </p>
            <ol class="list" style="margin-top: -10px">
                    <li>whether you are employed</li>
                    <li>the wage you receive</li>
                    <li>the effort you provide</li>
                </ol>

            <p class="block-sentence">
                Effort is costly to you, so you make profits only if your effort cost is lower than the wage you receive.
            </p>
            <p>
               The first part lasts for {{ shock_after_rounds }} rounds. Each round has two phases:
            </p>
            <p class="block-sentence">
                1. First, a <b>market phase</b> lasting for {{ market_time }} seconds.
                During this phase, employers can submit job offers, which workers can accept.
                When submitting a job offer, an employer specifies two things
            </p>
                <ul class="list" style="margin-top: -10px">
                    <li>	The wage they will pay  </li>
                    <li>	The effort they want the worker to provide </li>
                </ul>

            <p class="block-sentence">
           Once employers submit offers, workers get to see them and decide which to accept.
                The first worker to accept an offer will get it.
                <b>Each worker can accept at most one job offer in each round.
                Each employer can employ at most two workers.</b>
                Unaccepted offers are deleted at the end of the market phase.
            </p>
             <p class="block-sentence">
                 Employers can also send a private <b>re-employment offer to each worker they employed in the previous round</b>.
                Only the worker to whom the offer is directed can accept a private offer.
            </p>
            <p class="block-sentence">
                2. After the market phase, workers who accepted a job offer enter the <b>production phase</b>.
                In this phase, workers decide their effort.
                <b>You are not forced to provide the effort desired by the employer.
                You are free to choose any effort.</b>
            </p>
            <p class="block-sentence">
                Once all workers have chosen their effort, everyone's profits are calculated and the next round starts.
                The sum of your profits across all rounds will determine your earnings for the experiment.
            </p>
        </div>
    </div>
    <br>
  <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>


<div class="tab" id="instructions_5" style="display: none">
    <div class="card">
        <h5 class="card-header">The Market Phase in Detail</h5>
        <div class="card-body">
           <p class="block-sentence">
            Each round begins with a <b>market phase</b>.
           </p>
            <p class="block-sentence">
                The figure below shows a preview of the market phase screen.
                The white box below the timer gives <b>information</b> about the state of the market.
            </p>
            <p class="block-sentence">
                Employers will send job offers to the market.
                They can submit up two open job offers at a time.
                They can also submit no offer at all or cancel open offer.
                The offers employers send will appear in the "<b>Open offers</b>" table in the left-bottom of the page.
                An offer includes a wage between 0 and {{ max_wage }} {{ currency_plural }}, a desired effort level which is either "{{ name_high_effort }}" or "{{ name_low_effort }}", and a unique Job ID for each job.
            </p>
            <div style="display: flex; justify-content: center;">
                {% if player.participant.currency_is_points == True %}
                    <img src="{% static 'instruction/worker_points_1.jpg' %}" alt="Worker 1 points" style="max-width: 80%;"/>
                {% else %}
                    <img src="{% static 'instruction/worker_tokens_1.jpg' %}" alt="Worker 1 tokens" style="max-width: 80%;"/>
                {% endif %}
            </div>
            <p class="block-sentence" style="margin-top: 5px">
            To <b>accept a job</b> offer, you must:
            </p>
                <ol class="list" style="margin-top: -10px">
                    <li>enter the Job ID of the job you wish</li>
                    <li>click on "Accept Offer"</li>
                </ol>
            <p class="block-sentence; padding-bottom: 5px;" style="margin-top: 10px;">
            You can accept an offer as long as it is "open".
            The first worker to accept an offer will get the job.
            You will see an error message in case you type a wrong job ID or the job is no longer open.
            </p>
            <p class="block-sentence">
                <b>You can accept at most one offer during each round</b>, and each job offer can only be accepted by one worker.
                If you accept an offer, you will see a notification and the offer will appear in the "Accepted Offers" table.
                You can no longer accept other offers in this round.
                See the figure below for an example of how the screen will look after you accepted a job offer.
            </p>
            <div style="display: flex; justify-content: center;">
                {% if player.participant.currency_is_points == True %}
                    <img src="{% static 'instruction/worker_points_2.jpg' %}" alt="Worker 2 points" style="max-width: 80%;"/>
                {% else %}
                    <img src="{% static 'instruction/worker_tokens_2.jpg' %}" alt="Worker 2 tokens" style="max-width: 80%;"/>
                {% endif %}
            </div>
            <p class="block-sentence" style="margin-top: 5px">
                The market phase <b>ends</b> when all workers have accepted an offer, all employers are done hiring,
                or else when the time limit of {{ market_time }} seconds is reached.
                The time left in the current round will be displayed in a yellow box at the top of the page.
                When the market phase is over, no offers can be submitted or accepted.
            </p>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>




<div class="tab" id="instructions_6" style="display: none">
    <div class="card">
        <h5 class="card-header">The Production Phase in Detail</h5>
        <div class="card-body">
            <p class="block-sentence">
                Following the market phase, all workers who have accepted a job offer enter the production phase.
               In this phase, workers choose their effort. <b>The effort requested by employers is not binding</b>.
               Hence, you can choose <b>{{ name_high_effort }}</b> or <b>{{ name_low_effort }}</b> effort irrespective of the effort indicated in the job offer.
            </p>

            <div style="display: flex; justify-content: center; margin-bottom: 10px">
                {% if player.participant.currency_is_points == True %}
                    <img src="{% static 'instruction/worker_points_3.jpg' %}" alt="Worker 3 points" style="max-width: 80%;"/>

                {% else %}
                    <img src="{% static 'instruction/worker_tokens_3.jpg' %}" alt="Worker 3 tokens" style="max-width: 80%;"/>
                {% endif %}
            </div>
            <p class="block-sentence">
              The page you will see looks like the one shown above.
                At the top of the page, you will see the wage you accepted and the effort requested by the employer.
                Below, you see the cost of each effort choice.
            </p>
            <ul class="list" style="margin-top: -10px; margin-bottom: 10px;">
                <li> The <b>cost of {{ name_high_effort }} effort is {{ high_effort_points_tokens }} {{ currency_plural }}  </b></li>
                <li> The <b>cost of {{ name_low_effort }} effort is {{ low_effort_points_tokens }} {{ currency_plural }} </b></li>
            </ul>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>


<div class="tab" id="instructions_7" style="display: none">
    <div class="card">
        <h5 class="card-header">Private Re-Employment Offers</h5>
        <div class="card-body">
            <p class="block-sentence">
               Your previous rounds employer can you send a <b>private re-employment offer</b> in the following round. Only you can see and accept this offer.
                The offer will appear at the top of the market page. To accept the offer, click on "Accept private offer".
            </p>
            <p class="block-sentence">
               The offer can only be seen by you. As such, private offers allow you to <b>establish a longer-term relationship</b> with your employer.
            </p>
            <div style="display: flex; justify-content: center; margin-bottom: 10px">
                {% if player.participant.currency_is_points == True %}
                    <img src="{% static 'instruction/worker_points_4.jpg' %}" alt="Worker 4 points" style="max-width: 80%;"/>

                {% else %}
                    <img src="{% static 'instruction/worker_tokens_4.jpg' %}" alt="Worker 4 tokens" style="max-width: 80%;"/>
                {% endif %}
            </div>
            <p class="block-sentence">
                Private offers work just as public offers. You can accept at most one offer per round.
            </p>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>



<div class="tab" id="instructions_8" style="display: none">
    <div class="card">
        <h5 class="card-header">How are your profits calculated?</h5>
        <div class="card-body">
            <p class="block-sentence">
                In each round, your profits depend on whether you are employed, you wage, and your effort level.
            </p>
            <ul class="list" style="margin-top: -10px;">
                <li> If you do not accept any job offer, you earn <b> {{ outside_option_workers_points_tokens }} {{ currency_plural }} </b>.</li>
                <li> If you accept a job offer and choose {{ name_low_effort }} effort, your profits equal wage minus cost of {{ name_low_effort }} effort: <b> wage – {{ low_effort_points_tokens }} {{ currency_plural }}  </b>.</li>
                <li> If you accept a job offer and choose {{ name_high_effort }} effort, your profits equal wage minus the cost of {{ name_high_effort }} effort: <b> wage – {{ high_effort_points_tokens }} {{ currency_plural }}  </b>.</li>
            </ul>
            <p class="block-sentence">
                <u>Example</u>: if you receive a wage of {{ worker_example_wage }}  {{ currency_plural }} and choose {{ name_high_effort }} effort, your profits in this round are {{ worker_example_wage }} –  {{ high_effort_points_tokens }} = {{ worker_example_profit_high_effort }} {{ currency_plural }}.
                If, instead, you choose {{ name_low_effort }} effort, the profits are  {{ worker_example_wage }} – {{ low_effort_points_tokens }} = {{ worker_example_profit_low_effort }}  {{ currency_plural }}.
            </p>
            <p class="block-sentence">
               As you can see, your profits are larger the higher the wage you receive.
                Your profits are also higher if you choose {{ name_low_effort }} effort.
                Note that you can make a loss if the effort costs are higher than your wage.
            </p>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>


<div class="tab" id="instructions_9" style="display: none">
    <div class="card">
        <h5 class="card-header">How are the employers profits calculated?</h5>
        <div class="card-body">
           <p class="block-sentence">
                The employers' profits in each round are determined by number of workers they employ, the wages they pay, and the effort their workers choose.
           </p>
            <p class="block-sentence">
                If they <b>do not employ any workers</b> in a round, they earn <b>0 {{ currency_plural }}</b> in that round.
                If they employ one or two workers, their profits are the difference between the total revenue and the wages they pay:
            </p>
            <p style="margin-left: 50px;">
                <b>Profit = Total revenue - total wage payments</b>.
            </p>
            <p class="block-sentence" style="margin-bottom: -1px">
                The total revenue depends on the number of workers they employ and the effort the workers provide.
            </p>
                 <ul style="margin-top: -2px">
                    <li> <b>If a worker provides {{ name_high_effort }} effort the employers revenue will be considerably larger than if the worker provides {{ name_low_effort }} effort</b>.
                         For example, the employer gets {{ gain_high_effort_1_worker }} {{ currency_plural }} revenue in case of {{ name_high_effort }} effort and
                         {{ gain_low_effort_1_worker }} {{ currency_plural }} in case of {{ name_low_effort }} effort.</li>
                    <li> <b>If they employ two workers, each worker becomes somewhat less productive</b>. The total revenue of two workers may still be larger, but not twice as large.
                         For example, an employer gets {{ gain_high_effort_2_workers }} {{ currency_plural }} for each worker providing {{ name_high_effort }} effort and
                        {{ gain_low_effort_2_workers }} {{ currency_plural }} for each worker providing {{ name_low_effort }} effort if they employ two workers.</li>
                </ul>
            <p class="block-sentence">
               The table below summarizes the total revenue in each case.
            </p>
           <div style="max-width: 80%; margin: 0 auto; padding: 10px;">
              <table style="border-collapse: collapse; width: 100%;">
                <tr>
                    <th style="border: 1px solid black;">Case</th>
                    <th style="border: 1px solid black;">Total revenue</th>
                </tr>
                <tr>
                    <td style="border: 1px solid black; word-break: break-word;">Employ one worker.<br>The worker chooses {{ name_high_effort }} effort.</td>
                    <td style="border: 1px solid black;">{{ gain_high_effort_1_worker }}</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; word-break: break-word;">Employ one worker.<br>The worker chooses {{ name_low_effort }} effort.</td>
                    <td style="border: 1px solid black;">{{ gain_low_effort_1_worker }}</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; word-break: break-word;">Employ two workers.<br>Both workers choose {{ name_high_effort }} effort.</td>
                    <td style="border: 1px solid black;">{{ gain_high_effort_2_workers }} + {{ gain_high_effort_2_workers }} = {{ total_gain_high_effort_2_workers }}</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; word-break: break-word;">Employ two workers.<br>One worker chooses {{ name_high_effort }} effort.<br>The other worker chooses {{ name_low_effort }} effort.</td>
                    <td style="border: 1px solid black;">{{ gain_high_effort_2_workers }} + {{ gain_low_effort_2_workers }} = {{ total_gain_mix_effort_2_workers }}</td>
                </tr>
                <tr>
                    <td style="border: 1px solid black; word-break: break-word;">Employ two workers.<br>Both workers choose {{ name_low_effort }} effort.</td>
                    <td style="border: 1px solid black;">{{ gain_low_effort_2_workers }} + {{ gain_low_effort_2_workers }} = {{ total_gain_low_effort_2_workers }}</td>
                </tr>
            </table>
            </div>
            <br>
            <p>
                <u>Example</u>: Suppose an employer employs two workers.
                They pay one worker a wage of 60 {{ currency_plural }} and the other worker a wage of 40 {{ currency_plural }}.
            </p>
            <ul>
                <li>
                    If both workers choose {{ name_high_effort }} effort, then their profits equal to {{ total_gain_high_effort_2_workers }} – 60 – 40 = {{ profit_employer_example_1 }} {{ currency_plural }}.
                </li>
                <li>
                    Alternatively, if one worker chooses {{ name_high_effort }} effort and the other {{ name_low_effort }} effort, then the employers profits equal {{ total_gain_mix_effort_2_workers }} – 60 – 40 = {{ profit_employer_example_2 }} {{ currency_plural }}.
                </li>
            </ul>
            <p>
               Note that employers <b>make</b> a loss if the total wage payments are larger than the total revenue.
            </p>
        </div>
    </div>
     <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToNext(this)" style="float: right;">Next</button>
    </p>
</div>


<div class="tab" id="are_you_ready_q" style="display: none">
    <div class="card">
        <h5 class="card-header">Are you ready?</h5>
        <div class="card-body">
            <p class="block-sentence">
               The experiment will not start until all participants are familiar with the instructions.
                To ensure this is the case, we ask you to <b>answer three questions</b> on the following pages.
            </p>
            <p class="block-sentence">
                Click on the next button below when you are ready to answer these questions.
            </p>
        </div>
    </div>
    <br>
    <p>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="MoveToPrevious(this)">Previous</button>
        <button type="button" class="btn-tab btn-secondary" data-offset="1" onclick="clickNext()" style="float: right;">Start Quiz</button>
    </p>
</div>

<br>

<button class="otree-btn-next btn otree-next-button invisible" id="to_next_page"></button>

{{ endblock }}


{{ block scripts }}
    <script src="{% static 'javascript/MoveToPrevious.js' %}"></script>
    <script src="{% static 'javascript/MoveToNext.js' %}"></script>
    <script src="{% static 'javascript/clickNext.js' %}"></script>

{{ endblock }}