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

{% block title %}
Belief about your score
{% endblock %}

{% block content %}

<p id="grouping">

<p id="judges"></p>


<p>
    All three judges observe whether <span class="sow"></span>.
    However, one of the three judges is super nice and would always tell you that <span class="good"></span> while another is super mean and would always tell you that <span class="bad"></span>.
    Only one of the three judges is realistic and would tell you the truth about whether <span class="sow"></span>.
</p>

<p>
    You do not know which one of the three judges you speak to.
</p>
<p>
    This means that while you cannot be sure whether <span class="sow"></span> after hearing one of the three judges, hearing that <span class="good"></span> makes it more likely that in fact <span class="good"></span>.
</p>

<p>
    You will hear from the judges 4 times.
    Each of the 4 times, you hear from one of the three judges not knowing which one.
    Which judge you heard already heard from does not affect the identity of the judge you hear from next.
    After each time you hear from a judge, we will ask you again about how likely it is you scored in the top half of performances.
</p>



<!--
<p>
    There are 3 computers whose job is to tell you the color of your Ball A and Ball B (Computer 1, Computer 2 and Computer 3).
    However, each computer can only <u>randomly see 1 of the 2 balls</u>, and will tell you the color of the ball that it sees. After you talk to each computer, we will ask you again about your belief about your probability of scoring in the top half.
</p>

<p>
    For example, suppose your Ball A is <span style="color:red;font-weight:bold">red</span>, and your Ball B is <span style="color:blue;font-weight:bold">blue</span>.
</p>

<p>
    Suppose Computer 1 sees Ball B. Computer 1 would then tell you that it sees a <span style="color:blue;font-weight:bold">blue</span> ball.
</p>

<p>
    Suppose computer 2 sees Ball A. Computer 2 would then tell you that it sees a <span style="color:red;font-weight:bold">red</span> ball.
</p>

<p>
    Suppose computer 3 sees Ball B. Computer 3 would then tell you that it sees a <span style="color:blue;font-weight:bold">blue</span> ball.
</p>

<p>
    The color of the ball each computer sees can thus give you some information about your performance. However, you will not learn whether your score is in the top half for sure.
</p>
-->

<p>
    We will now test your understanding of what the judges will tell you with some questions.
    Again, you will only be allowed to proceed if you answer all of these questions correctly.
</p>

{% next_button %}


<script>
var x = {{ treatment|json }};
if (x=='Control') {
    document.getElementById("grouping").innerHTML = 'Now that you have taken the IQ test and given us some information about how well you think you did, three judges are going to judge your performance.';
    document.getElementById("judges").innerHTML = 'We will give you feedback on whether you scored in the top half of performances, but it is not always accurate.';
    var elems = document.getElementsByClassName("sow");
    var i;
    for (i = 0; i < elems.length; i++) {
        elems[i].innerHTML = 'your score is in the top half or in the bottom half of performances';
    }
    elems = document.getElementsByClassName("good");
    for (i = 0; i < elems.length; i++) {
        elems[i].innerText = 'your score is in the top half of performances';
    }
    var elems = document.getElementsByClassName("bad");
    for (i = 0; i < elems.length; i++) {
        elems[i].innerText = 'your score is in the bottom half of performances';
    }
} else if (x=='RobotSG') {
    document.getElementById("grouping").innerHTML = 'Now that you have taken the IQ test and given us some information about how well you think you did, you have been randomly grouped into a <u>team</u> consisting of you and a robot who flipped a coin. The coin of the robot has two faces: top half and bottom half.';
    document.getElementById("judges").innerHTML = 'Three judges are going to judge your <u>team performance</u>. You are a <u>good</u> team if you scored in the top half performances and the coin of the robot you are paired with shows top half. If you scored in the bottom half of performances and the coin of the robot show bottom half, you are a <u>bad</u> team. In the case where either you scored in the top half of performances or the coin of the robot shows top half but not both, you are equally likely to be a <u>good</u> or <u>bad</u> team.';
    var elems = document.getElementsByClassName("sow");
    var i;
    for (i = 0; i < x.length; i++) {
        elems[i].innerText = 'you are a <u>good</u> or a <u>bad</u> team';
    }
    var elems = document.getElementsByClassName("good");
    for (i = 0; i < x.length; i++) {
        elems[i].innerText = 'you are a <u>good</u> team';
    }
    var elems = document.getElementsByClassName("bad");
    for (i = 0; i < x.length; i++) {
        elems[i].innerText = 'you are a <u>bad</u> team';
    }
} else if (x=='HumanSG') {
    document.getElementById("grouping").innerHTML = 'Now that you have taken the IQ test and given us some information about how well you think you did, you have been randomly grouped into a <u>team</u> consisting of you and a robot who flipped a coin.';
    document.getElementById("judges").innerHTML = ' Three judges are going to judge your <u>team performance</u>. You are a <u>good</u> team if your own score as well as your partners score are both in the top half of performances. If your own score and your partners score are both in the bottom half of performances, you are a <u>bad</u> team. In the case where one of you scored in the top half and the other scored in the bottom half of performances, you are equally likely to be a <u>good</u> or <u>bad</u> team.';
    var elems = document.getElementsByClassName("sow");
    var i;
    for (i = 0; i < x.length; i++) {
        elems[i].innerText = 'you are a <u>good</u> or a <u>bad</u> team';
    }
    var elems = document.getElementsByClassName("good");
    for (i = 0; i < x.length; i++) {
        elems[i].innerText = 'you are a <u>good</u> team';
    }
    var elems = document.getElementsByClassName("bad");
    for (i = 0; i < x.length; i++) {
        elems[i].innerText = 'you are a <u>bad</u> team';
    }
}

</script>


{% endblock %}