{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
{% endblock %}

{% block styles %}
<style>
.content {
    height: 100%;
    justify-content: center;
    align-items: center;
    border: 5px solid black;
    font-size: 1.3rem;
    text-align: center;
    padding-top: 5%;
}
.page-header {
    margin: 0px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-weight: normal;
}

p { text-align: justify }
body {background-color:black;}
</style>
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-8">
      <p>This is <b><font color="red">Phase 2</font></b> of the study.</p>
      <p>Phase 2 consists of four questions, two on this page and two on the next one.</p>
    <br>
{% if OwnFirst == 1 and OwnOrder == 1 %}

      <p> Consider the task <b><font color="red">you</font></b> completed in Phase 1.</p>
      <br>
            <h2>Question 1</h2>
        <p>
    Consider only trials where the number on the screen was <b><font color="red">between 52 and 58</font></b>.
    In what percentage of these trials do you think <b><font color="red">you</font></b> gave a correct answer, that is, you correctly classified whether the number was smaller or larger than 55?
            Give us your forecast on a scale between 0% and 100% where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
        If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of your true accuracy, you will earn &#163;{{ Constants.forecast_prize }}.
{% formfield player.forecast_own_close %}
    </p>
        <p></p>

            <h2>Question 2</h2>
    <p>
    Consider only trials where the number on the screen was <b><font color="red">smaller than 52 or larger than 58</font></b>.
    In what percentage of these trials do you think <b><font color="red">you</font></b> gave a correct answer, that is, you correctly classified whether the number was smaller or larger than 55?
            Give us your forecast on a scale between 0% and 100% where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
        If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of your true accuracy, you will earn &#163;{{ Constants.forecast_prize }}.
    {% formfield player.forecast_own_far %}
    </p>

{% elif OwnFirst == 1 and OwnOrder == 2%}

          <p> Consider the task <b><font color="red">you</font></b> completed in Phase 1.</p>
          <br>
          <h2>Question 1</h2>
  <p>
  Consider only trials where the number on the screen was <b><font color="red">smaller than 52 or larger than 58</font></b>.
  In what percentage of these trials do you think <b><font color="red">you</font></b> gave a correct answer, that is, you correctly classified whether the number was smaller or larger than 55?
          Give us your forecast on a scale between 0% and 100% where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
      If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of your true accuracy, you will earn &#163;{{ Constants.forecast_prize }}.
  {% formfield player.forecast_own_far %}
  </p>
  <p></p>
  <h2>Question 2</h2>
            <p>
        Consider only trials where the number on the screen was <b><font color="red">between 52 and 58</font></b>.
        In what percentage of these trials do you think <b><font color="red">you</font></b> gave a correct answer, that is, you correctly classified whether the number was smaller or larger than 55?
                Give us your forecast on a scale between 0% and 100% where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
            If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of your true accuracy, you will earn &#163;{{ Constants.forecast_prize }}.
    {% formfield player.forecast_own_close %}
        </p>

{% elif OwnFirst == 0 and OtherOrder == 1 %}
<p>There are 99 other participants in this study.</p>
<p>Consider the task completed by <b><font color="red">the other participants</font></b> in Phase 1.</p>
    <br>
        <h2>Question 1</h2>
    <p>Consider only trials where the number on the screen was <b><font color="red">equal to 47</font></b>. In what percentage of these trials do you think <b><font color="red">the other participants</font></b> gave a correct
    answer, that is, they correctly classified whether the number was smaller or larger than 55? Give us your forecast on a scale between 0% and 100%, where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
    If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of the true percentage, you will earn &#163;{{ Constants.forecast_prize }}.
    {% formfield player.forecast_other_47 %}
    </p>

    <p></p>
    <h2>Question 2</h2>
<p>Consider only trials where the number on the screen was <b><font color="red">equal to 54</font></b>. In what percentage of these trials do you think <b><font color="red">the other participants</font></b> gave a correct
answer, that is, they correctly classified whether the number was smaller or larger than 55? Give us your forecast on a scale between 0% and 100%, where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of the true percentage, you will earn &#163;{{ Constants.forecast_prize }}.
{% formfield player.forecast_other_54 %}
</p>

{% elif OwnFirst == 0 and OtherOrder == 2 %}
<p>There are 99 other participants in this study.</p>
<p>Consider the task completed by <b><font color="red">the other participants</font></b> in Phase 1.</p>
    <br>
    <h2>Question 1</h2>
<p>Consider only trials where the number on the screen was <b><font color="red">equal to 54</font></b>. In what percentage of these trials do you think <b><font color="red">the other participants</font></b> gave a correct
answer, that is, they correctly classified whether the number was smaller or larger than 55? Give us your forecast on a scale between 0% and 100%, where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of the true percentage, you will earn &#163;{{ Constants.forecast_prize }}.
{% formfield player.forecast_other_54 %}
</p>
    <p></p>

    <h2>Question 2</h2>
<p>Consider only trials where the number on the screen was <b><font color="red">equal to 47</font></b>. In what percentage of these trials do you think <b><font color="red">the other participants</font></b> gave a correct
answer, that is, they correctly classified whether the number was smaller or larger than 55? Give us your forecast on a scale between 0% and 100%, where 0% means you believe no answer in these trials was correct and 100% means you believe all answers in these trials were correct.
If your forecast is within plus or minus {{ Constants.forecast_tolerance }}% of the true percentage, you will earn &#163;{{ Constants.forecast_prize }}.
{% formfield player.forecast_other_47 %}
</p>
{% endif %}

    <div class="col-2" style="border: 2px solid black; text-align: center;"></div>

<br>
<br>
<p>Press ENTER to confirm your answers.</p>
    </div>

</div>

<button id="confirm" type="submit" style="display:none;"></button>

{% endblock %}


{% block scripts %}
<script>
    var confirm = document.getElementById("confirm");

    function confirmClicked() {
        confirm.click();
    }

    document.onkeydown = function (e) {
        var keyCode = e.keyCode;
        // When ENTER is pressed
        if(keyCode == 13) {
            confirmClicked();
        }
    };
</script>
{% endblock %}