{{ block title }}
    {{ if player.pagenumber != 99 }} Instructions: Phase 2
{{ else }}  {{ endif }}
{{ endblock }}
{{ block content }}
{{ if player.pagenumber != 99 }}
<h4 style="text-align: center;" data-mce-style="text-align: center;">The instructions of phase 2 are almost the same as
    in phase 1, <br>
    <strong><span style="color: rgb(224, 62, 45);" data-mce-style="color: #e03e2d;">all the differences are highlighted</span></strong>.&nbsp;</h4>
{{ endif }}
{{ if player.pagenumber == 1 }}
<p><strong>What should I do?</strong></p>
<p>The bargaining rules for phase 2 are identical to those for phase 1, with the only exception that
    <strong><span style="color: rgb(224, 62, 45);" data-mce-style="color: #e03e2d;">you do not know the value of
        the public good for your match</span>.&nbsp;</strong></p>
<p>In each round, your task is to decide how much you’re willing to contribute to a public good.</p>
<p>The <strong>value</strong> of this public good to you could be <strong>either {{ Constants.pg_valueL }} token or
    {{ Constants.pg_valueH }} tokens, each with 50% probability</strong>. The same holds for your match. Thus, there
    are <strong>4 possible situations</strong>, as is illustrated in the table below.</p>
<table table style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto; height: 118px;"
       border="1" data-mce-style="border-collapse: collapse; width: 100%; margin-left: auto; margin-right: auto; height: 118px;">
    <tbody><tr>
        <td style="width: 298.8px; text-align: center; border-style: solid;" data-mce-style="width: 298.8px; text-align: center;">
        Situation</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            Your Value</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            Your Match's Value</td>
    </tr>
    <tr>
        <td style="width: 298.8px; text-align: center; border-style: solid;" data-mce-style="width: 298.8px; text-align: center;">
            A</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>1</sub>={{ Constants.pg_valueL }}</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>2</sub>={{ Constants.pg_valueL }}</td>
    </tr>
    <tr>
        <td style="width: 298.8px; text-align: center; border-style: solid;" data-mce-style="width: 298.8px; text-align: center;">
            B</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>1</sub>={{ Constants.pg_valueH }}</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>2</sub>={{ Constants.pg_valueL }}</td>
    </tr>
    <tr>
        <td style="width: 298.8px; text-align: center; border-style: solid;" data-mce-style="width: 298.8px; text-align: center;">
            C</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>1</sub>={{ Constants.pg_valueL }}</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>2</sub>={{ Constants.pg_valueH }}</td>
    </tr>
    <tr>
        <td style="width: 298.8px; text-align: center; border-style: solid;" data-mce-style="width: 298.8px; text-align: center;">
            D</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>1</sub>={{ Constants.pg_valueH }}</td>
        <td style="width: 298.4px; text-align: center; border-style: solid;" data-mce-style="width: 298.4px; text-align: center;">
            V<sub>2</sub>={{ Constants.pg_valueH }}</td>
    </tr></tbody></table>
{{ endif }}

{{ if player.pagenumber == 2 }}
<p><strong>What should I do?</strong></p>
<p>The production of this public good <strong>costs 2, which must be covered by your contribution (x), and the
    contribution of your match (y)</strong>.</p>
<p><strong>If</strong> you and your match <strong>reach an agreement</strong> on how to share the production cost of
    the public good, then the public good is produced, and <strong>your payoff </strong>in the round is equal to:</p>
<p style="text-align: center;" data-mce-style="text-align: center;"><em>&nbsp;<strong>V<sub>1 </sub></strong>
    (value of the public good for you) <strong>- </strong></em><em><strong>x </strong>(your contribution)</em></p>
<p><strong>Your match’s payoff</strong> in the round is equal to:</p>
<p style="text-align: center;" data-mce-style="text-align: center;"><em><strong>&nbsp;V<sub>2</sub></strong>
    (value of the public good for your match) <strong>- y</strong></em><em>&nbsp;(your match’s contribution)</em></p>
<p><strong>If</strong> instead you and your match <strong>fail</strong> to reach an agreement on how to share the
    production cost of the public good, the public good will not be produced, and <strong>both of you will lose 1 token
    </strong>.</p>
{{ endif }}

{{ if player.pagenumber == 3 }}
<p><strong>What should I do? - The Game Structure of A Round in Phase 2 </strong></p>
<p style="text-align: center;" data-mce-style="text-align: center;">
    <img src="{{static 'Picture4_The_game_structure_of_a_round_in_phase_2.png'}}" alt="">
    <br data-mce-bogus="1"></p>
{{ endif }}

{{ if player.pagenumber == 4 }}
<p><strong>How do you bargain with your match?</strong></p>
<ol><li>Before bargaining starts, you will be informed of <span style="color: rgb(224, 62, 45);" data-mce-style="color: #e03e2d;"><strong>only your value (V<sub>1</sub></strong><strong>). </strong></span>That is, <span style="color: rgb(224, 62, 45);" data-mce-style="color: #e03e2d;"><strong>you do not know your match’s value (V<sub>2</sub></strong><strong>)</strong>.</span></li>
    <li>At the beginning of bargaining, which is regarded as the 1<sup>st</sup> stage, you have <strong>1 minute</strong>  to choose your proposed
        contribution, which can be <strong>0, 1 or 2.</strong></li>
    <li>The outcome of the bargaining stage depends on the sum of your proposed contribution and your match’s proposed
        contribution.
        <ol style="list-style-type: lower-alpha;" data-mce-style="list-style-type: lower-alpha;">
            <li>If the sum of your and your match’s <strong>contribution </strong>is<strong> &gt; 2</strong>&nbsp;,
                the program will randomly pick one of the proposals as the final cost sharing plan, and this public
                good will be successfully produced. This round of bargaining is over.</li>
            <li>If the sum of your and your match’s<strong> contribution </strong>is<strong> = 2</strong>, this public
                good will be successfully produced with this cost sharing plan, and this round of bargaining is over.</li>
            <li>If the sum of your and your match’s <strong>contribution </strong>is<strong> &lt; 2</strong>&nbsp;,
                you two will move to next stage and continue bargaining.</li></ol></li></ol>
<p><br><br></p>
{{ endif }}

{{ if player.pagenumber == 5 }}
<p><strong>How do you bargain with your match?</strong></p>
<p style="padding-left: 15px;" data-mce-style="padding-left: 15px;">
    4. From the 2<sup>nd</sup> stage of the bargaining process, you have <strong>{{ Constants.time_bargainafter }}
    seconds</strong> to choose to either keep the <strong>same proposal (+0)</strong> or <strong>increase your poposed
    contribution (+1, +2)</strong>. Your proposed contribution can’t exceed 2.</p>
<p style="padding-left: 15px;" data-mce-style="padding-left: 15px;">5. The outcome of each bargaining stage is
    determined as in step 3. If the sum of your match’s and your proposed contribution is &lt;2 and <strong>both</strong>
    you and your match choose to repeat the previous proposal <strong>(+0) </strong>in a bargaining stage, then
    bargaining fails, the round is over, and your payoff and your match’s payoff in this round are both equal to
    <strong>{{ Constants.conflict }}</strong>.<br></p>
<p><br><br></p>
{{ endif }}

{{ if player.pagenumber == 6 }}
<p><strong>Earnings</strong></p>
<p>At the end of each round, you can check the outcome and <span style="color: rgb(224, 62, 45);" data-mce-style="color: #e03e2d;">
    <strong>make a guess on your match’s value (V<sub>2</sub>) in this round</strong></span>.</p>
<p>You’ll play
    <strong>{{ Constants.num_rounds_phase1 }} rounds </strong>&nbsp;of this game, and at the end of this study,
    <strong>{{ Constants.num_rounds_choseneachphase }} rounds will be randomly chosen</strong> to determine your final
    earnings, according to the following exchange rate <strong>{{ Constants.transfer_rate }} tokens = 1 euro.
    </strong><br></p>
<p>
    <span style="color: rgb(224, 62, 45);" data-mce-style="color: #e03e2d;"><strong>A third round different from the previous two will also be randomly
        chosen, and you will get 1 extra euro if your guess on your match’s value is correct.</strong></span>
</p>
<p><br><br></p>
{{ endif }}

<br>
<div style="float: left">
{{ if player.pagenumber != 1 and player.pagenumber != 99 }}
<button  type="button" onclick="lastpage()">
   Previous Page
        </button>
{{ endif }}
</div>
<div style="text-align: right">
{{ if player.pagenumber != Constants.num_instructionpage2 and player.pagenumber != 99 }}

<button type="button" onclick="nextpage()">
            Next Page
</button>
{{ endif }}
{{ if player.pagenumber == Constants.num_instructionpage2 }}

<button style="background-color: rgb(100, 150, 255);" type="button" onclick="doneinstru()">
            <span style="color: rgb(255, 255, 255);" data-mce-style="color: #000000;">
                I fully understand all the content in the instruction
                </span>
</button>

{{ endif }}
</div>

{{ if player.pagenumber != 99 }}
<p>Page Number: {{ player.pagenumber }}</p>
{{ endif }}

{{ if player.pagenumber == 99 }}
    {{ if player.quizpagenumber == 1}}
        {{ include Constants.Quiz2_Page1_TF }}
    {{ endif }}
    {{ if player.quizpagenumber == 2 }}
        {{ include Constants.Quiz2_Page2_TF }}
    {{ endif }}
    {{ if player.quizpagenumber == 3}}
        {{ include Constants.Quiz_endpage }}
    {{ endif }}


{{ endif }}




    {{ formfields }}
<script>
    function lastpage() {
        liveSend({'pagechange': -1});
    }

    function nextpage() {
        liveSend({'pagechange': 1});
    }

    function doneinstru() {
        liveSend({'doneinstru': 1})
    }

    function liveRecv(data){
        if('news' in data) {
            location.reload(true);
        }
    }
</script>
{{ endblock }}