{{ block title }}
    Main Task 1: Additional Task
{{ endblock }}
{{ block content }}

<script>
function showHide() {
  var x = document.getElementById("revealMessage");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<script>
function showHide0() {
  var x = document.getElementById("revealMessage0");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<script>
function showHide1() {
  var x = document.getElementById("revealMessage1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<script>
function showHide2() {
  var x = document.getElementById("revealMessage2");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<script>
function showHide3() {
  var x = document.getElementById("revealMessage3");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

{{ if C.prob_rounds.0 == player.round_number }}
    <p>
        Remember that every several rounds, you will be asked a few questions about what you think about one of the other
        citizens in this round. This will happen 5 times in total.
    </p>

    <ul>
        <li>The better your guesses, the more likely you are to win an additional payment of $1 for each question,
            adding up to a possible total bonus payment of $3 in each additional task round.</li>
        <li>At the end of the experiment, one of the 5 additional task rounds will be drawn at random and the bonus
            payment from that round will be added to your total payment.</li>
    </ul>

    <p>
        If you would like to see the exact calculation for how the computer determines if you win the bonus payment
        for each question, click the red button below. Otherwise, press the blue button to continue.
    </p>

    <button type="button" class="btn btn-outline-danger btn-large" onclick="showHide()">Click here to see how the bonus
    payment is calculated</button>

    <div id="revealMessage" style="display:none">
        {{ include C.instructions_template1 }}



    </div>

    <br><br>

{{ elif C.prob_rounds.4 == player.round_number }}
    <p>
        You will now, for the final time, be asked a few questions about what you think about one of the other citizens in this
        round.
    </p>

{{ else }}
    <p>
        You will now, again, be asked a few questions about what you think about one of the other citizens in this round.
    </p>

{{ endif }}

<button type="button" class="btn btn-primary btn-large" onclick="showHide1()"> Continue </button>

<div id="revealMessage1" style="display:none">
    <br>

    Remember that in the round you just played, you were
    {{ if player.knowledge_level == 0 }}
        not contacted by a messenger, and you didn't hear anything on the loudspeaker.
        <br><br>
    {{ elif player.knowledge_level < 4}}
        contacted by a messenger:
        <ol>
            <li>
                She showed you a message with the word 'Protest'.
            </li>
            <li>
                She said that
                {{ if player.knowledge_level == 1 }}
                    she did not have any information about what the other citizens may know.
                {{ else }}
                    she had seen other messengers showing the same message to all 3 of the other citizens.
                {{ endif }}
            </li>
            {{ if player.knowledge_level > 1 }}
                <li>
                    She also said that
                    {{ if player.knowledge_level == 2}}
                        she did not have any more information about what the other citizens may know.
                    {{ else }}
                        she knew that all the other messengers saw her coming to see you with the message, and
                        would have told the other citizens this. However, she did not have any more information about
                        what the other citizens may know.
                    {{ endif }}
                </li>
            {{ endif }}
        </ol>

    {{ else }}
        not contacted by a messenger, but the loudspeaker announced the word 'Protest'.
    {{ endif  }}

    Remember also that <b>you chose {{ if player.protest_action == 0 }} not {{ endif }} to protest in this round.</b>

    <br><br>

    <button type="button" class="btn btn-primary btn-large" onclick="showHide0()"> Go to Q1 </button>

    <div id="revealMessage0" style="display:none">
        <br>

        <p>
            <b>Q1:</b> How likely do you think it is that the other citizen chose to protest in this round?
        </p>

        <img style="position:relative; left:30px" src="{{ static 'lvl1_protest.jpg' }}" alt="lvl1sqr" width="800" height="600">

        <br>

        <br>

        <input type="range" style="width: 500px" name="HOB1" min="0" max="100" step="5" value="0" oninput="updateDescription1(this)">
        <p id="description1"></p>

        <script>
            let description1 = document.getElementById('description1');
            function updateDescription1(input) {
                let prob = parseInt(input.value);
                description1.innerText = `There is a ${prob}% chance that they protested.`
            }
        </script>

        <button type="button" class="btn btn-primary btn-large" onclick="showHide2()"> Go to Q2 </button>

        <div id="revealMessage2" style="display:none">
            <br>

            <p>
                <b>Q2:</b> How likely do you think the other player thinks it is that you chose to protest in this round?
            </p>

            <p>
                <i>(Note that this is the same as guessing what the other player answered for Q1).</i>
            </p>

            <img style="position:relative; left:30px" src="{{ static 'lvl2_protest.jpg' }}" alt="lvl1tri" width="800" height="600">

            <br>

            <br>

            <input type="range" style="width: 500px" name="HOB2" min="0" max="100" step="5" value="0" oninput="updateDescription2(this)">
            <p id="description2"></p>

            <script>
                let description2 = document.getElementById('description2');
                function updateDescription2(input) {
                    let prob = parseInt(input.value);
                    description2.innerText = `They think that there is a ${prob}% chance that I protested.`
                }
            </script>

            <button type="button" class="btn btn-primary btn-large" onclick="showHide3()"> Go to Q3 </button>

            <div id="revealMessage3" style="display:none">
                <br>

                <p>
                    <b>Q3: </b> How likely do you think the other player thinks you think it is that they chose to protest in this round?
                </p>

                <p>
                    <i>(Note that this is the same as guessing what the other player answered for Q2).</i>
                </p>

                <img style="position:relative; left:30px" src="{{ static 'lvl3_protest.jpg' }}" alt="lvl1tri" width="800" height="600">

                <br>

                <br>

                <input type="range" style="width: 500px" name="HOB3" min="0" max="100" step="5" value="0" oninput="updateDescription3(this)">
                <p id="description3"></p>

                <script>
                    let description3 = document.getElementById('description3');
                    function updateDescription3(input) {
                        let prob = parseInt(input.value);
                        description3.innerText = `They think that I think that there is a ${prob}% chance that they protested.`
                    }
                </script>

                {{ next_button }}

                </div>

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


{{ endblock }}