{{ block title }}
    Instructions (1/2): Tasks
{{ endblock }}

{{ block content }}
<style>
.table  {
  border-collapse: collapse;
}

.table ,  th, td {
  border: 1px solid black;
}

.table, th, td {
  padding: 8px;
  text-align: center;
}

</style>
<ul style="font-size:18px">

    <ul>
        <li>We ran a previous study to measure the abilities of 282 workers.</li>
    <ul>
        {{ if player.order0 < 3 }}
        <li>The workers completed a task that measures social skill.</li>
    <input type="button" onclick="ShowAndHideS(); CheckLogS()" style="font-weight:bold; color:blue; position:static; clip:auto; width:auto; height:auto" value="Social Skill Task Details"/>
    <input type="hidden" value="0" name="instlog" id="Scheck"/>
    <div id="taskS" style="display:none">
        <ul>
        <li>In this task, they evaluated whether a decision maker's (called Ann) behavior is socially appropriate.</li>
            <ul>
            <li>"Socially appropriate" means most people think the behavior is a "correct" or "ethical" thing to do.</li>
            </ul>
        <li>The following is the specific scenario they considered.</li>
            <ul>
            <li>There are two people, Ann and Bob. Each has $5 and they do not know each other.</li>
            <li>Ann can decide whether to take money from Bob or give money to Bob.</li>
            <li>The giving/taking amount can be from $0 to $5.</li>
            </ul>
        <li>Their job was to decide how socially appropriate each giving/taking behavior would be. </li>
        <li>For each behavior, they earned points if their choice is the same as the one that is most often chosen by all other workers of the study.</li>
        </ul>
    </div>

        <li>A worker is one of two types: Low (<50% of points)  or High (&geq; 50% of points).</li>
        {{ endif }}


        {{ if player.order0 == 5 }}
        <li>The workers completed a task that measures a math skill.</li>
    <input type="button" onclick="ShowAndHideM(); CheckLogM()" style="font-weight:bold; color:blue; position:static; clip:auto; width:auto; height:auto" value="Math Skill Task Details"/>
    <input type="hidden" value="0" name="instlog" id="Mcheck"/>
    <div id="taskM" style="display:none">
        <ul>
            <li>They had 10 multiple-choice math questions.</li>
            <li>For each question, they had up to 15 seconds to solve.</li>
            <li>They could pass any question but cannot come back to that question.</li>
             <li>They got 1 point per correct question.</li>
            <li>Questions that were passed or unfinished will earn 0 point.</li>
        <li> The following is an example question they had:<br> <img src="{{ static 'q3.png' }}" width="400"/></li>
        </ul>
    </div>

        <li>A worker is one of two types: Low (<50% correct)  or High (&geq; 50% correct).</li>
        {{ endif }}


        {{ if player.order0 == 3 || player.order0 == 4 || player.order0 == 6 }}
        <li>The workers completed a Combined Skill task, which measures both math and social skills.</li>
    <input type="button" onclick="ShowAndHideC(); CheckLogC()" style="font-weight:bold; color:blue; position:static; clip:auto; width:auto; height:auto" value="Combined Skill Task Details"/>
    <input type="hidden" value="0" name="instlog" id="Ccheck"/>
    <div id="taskC" style="display:none">
        <ul>
        <li>Consider the following situation.</li>
    <ul>
    <img src="{{ static 'comb_inst.png' }}" width="540"/>
    <li>There is a box that starts off empty, but every second, an increasing number of points is added to it.</li>
        <ul>
            <li>The accumulation of points continues for a total of 10 seconds.</li>
            <li>At one second, the box contains 2/3 of points.</li>
            <li>After that, the number of points in the box is multiplied by 1.5 every second.</li>
        </ul>
    <li>There are two players who divide the money in the box.</li>
        <ul>
            <li>Each player chooses when to stop the clock and take the money (points) currently in the box.</li>
            <li>The one who stops first will get 80% of the total money in the box at that time, and the other one gets the remaining 20%.</li>
            <li>If both stop at the same time, they will equally divide the money in the box.</li>
        </ul>
        <li> Workers actually played this game against every other person who participates in the study.</li>
        <li>But they chose when to stop only once, and that choice gets used for all 281 games.</li>
        <li>They earned the average payoff from all games.</li>
    </ul>
        </ul>
    </div>

        <li>A worker is one of two types: Low (<1.6 pts)  or High (&geq; 1.6 pts).</li>
        {{ endif }}


        <li>The workers are US citizens, currently living in the US.</li>
    </ul>

    <li>We ran another study where managers offer wages to the workers.</li>
    <ul>
        <li>Some managers were informed about the race of workers and others were not.</li>
    </ul>

    <br>
    <li>You will distribute 25 pts ($2.50) wages between two workers.</li>
    <li>You will have the following information: </li>
        <ul style="font-size:18px">
    <li>Information about the two workers' resumes</li>
            {{ if player.order1 == 0 && player.order0 == 1  }}
            <img src="{{ static 'resume012.png' }}" width="350"/><br>
            {{ endif }}
            {{ if player.order1 == 0 && player.order0 == 2  }}
            <img src="{{ static 'resume012.png' }}" width="350"/><br>
            {{ endif }}
            {{ if player.order1 == 0 && player.order0 == 3  }}
            <img src="{{ static 'resume0346.png' }}" width="350"/><br>
            {{ endif }}
            {{ if player.order1 == 0 && player.order0 == 4  }}
            <img src="{{ static 'resume0346.png' }}" width="350"/><br>
            {{ endif }}
            {{ if player.order1 == 0 && player.order0 == 6  }}
            <img src="{{ static 'resume0346.png' }}" width="350"/><br>
            {{ endif }}
            {{ if player.order1 == 0 && player.order0 == 5  }}
            <img src="{{ static 'resume05.png' }}" width="280"/>
            {{ endif }}

            {{ if player.order1 == 1 && player.order0 == 1  }}
            <img src="{{ static 'resume112.png' }}" width="380"/><br>
            {{ endif }}
            {{ if player.order1 == 1 && player.order0 == 2  }}
            <img src="{{ static 'resume112.png' }}" width="380"/><br>
            {{ endif }}
            {{ if player.order1 == 1 && player.order0 == 3  }}
            <img src="{{ static 'resume134.png' }}" width="370"/><br>
            {{ endif }}
            {{ if player.order1 == 1 && player.order0 == 4  }}
            <img src="{{ static 'resume134.png' }}" width="370"/><br>
            {{ endif }}
            {{ if player.order1 == 1 && player.order0 == 5  }}
            <img src="{{ static 'resume15.png' }}" width="350"/><br>
            {{ endif }}
            {{ if player.order1 == 1 && player.order0 == 6  }}
            <img src="{{ static 'resume16.png' }}" width="350"/><br>
            {{ endif }}



    {{ if player.order1 == 0 }}
    <li>The average offered wages for a group that each worker belongs to.</li>
    <ul>
    <li>You will see the average wages from managers who could see the race of workers (Group Aware) and managers who could not (Group Blind).</li>
    <img src="{{ static 'wage_control.png' }}" width="300"/>
    </ul>
    {{ endif }}

    {{ if player.order1 == 1 }}
    <li>The average offered wages for a race group that each worker belongs to.</li>
    <ul>
    <li>You will see the average wages from managers who can see the race of workers (Race Aware) and managers who could not (Race Blind).</li>
        {{ if player.order0 < 5 }}
        <img src="{{ static 'wage_A.png' }}" width="300"/>
        {{ endif }}
        {{ if player.order0 > 4 }}
        <img src="{{ static 'wage_B.png' }}" width="300"/>
        {{ endif }}

    </ul>
    {{ endif }}
     </ul>
    <li>You will then receive additional information about the revenue that workers may generate for the managers.
        <ul>
            <li> 'Actual % 20 pts' means a probability that a worker brings the revenue of 20 pts.</li>
            <li> 'Actual % 10 pts' means a probability that a worker brings the revenue of 10 pts.</li>
        </ul>
        Then you can modify the distribution of wages between the two workers. </li>
        {{ if player.order1 == 0 }}
        <img src="{{ static 'wage_control_add.png' }}" width="300"/>
        {{ endif }}
        {{ if player.order1 == 1 }}
        {{ if player.order0 < 5 }}
        <img src="{{ static 'wage_A_add.png' }}" width="290"/>
        {{ endif }}
        {{ if player.order0 > 4 }}
        <img src="{{ static 'wage_B_add.png' }}" width="300"/>
        {{ endif }}
        {{ endif }}

</ul>
    </ul>

<br>

<span style="font-size:18px"><b>Comprehension Check</b></span>
    <ul>
        <li> Which one of the following is <span style="color:green"><b>True</b></span>? <br>
            <input type="radio" name="compG1" value="1" id="comp_c" oninput="checkComp(this);"/>
            <label for="comp_c">All the mangers were given the same information about race.</label> <br>
            <input type="radio" name="compG1" value="2" id="comp_c2" oninput="checkComp(this);">
            <label for="comp_c2">You will have two chances to distribute wages.</label><br>
            <p id="errorC"></p>
        </li>
    </ul>
<script>
    function ShowAndHideM() {
    var x = document.getElementById('taskM');
    if (x.style.display == 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
    }

    function CheckLogM() {
        var y = document.getElementById('Mcheck');
        y.value = 1;
    }

    function ShowAndHideS() {
    var x = document.getElementById('taskS');

    if (x.style.display == 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
    }

    function CheckLogS() {
        var y = document.getElementById('Scheck');
        y.value = 1;
    }

    function ShowAndHideC() {
    var x = document.getElementById('taskC');

    if (x.style.display == 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
    }

    function CheckLogC() {
        var y = document.getElementById('Ccheck');
        y.value = 1;
    }

    function checkComp(field) {
    if (field.value === '1' ) {
        document.getElementById("errorC").innerText = "False! Some managers were informed about the race of workers while others were not.";
        document.getElementById("errorC").style.color = "red";
    } else if (field.value === '2') {
        document.getElementById("errorC").innerText = "True! You will enter your decision, and then will be given further information and have a chance to change it. ";
        document.getElementById("errorC").style.color = "green";
    }
}
</script>
{{ next_button }}
{{ endblock }}