{{ 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 == 1 }}
        <li>The workers completed a task that measures social skills.</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 == 2 }}
        <li>The workers completed a task that measures math skills.</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 }}



        <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>
        <li>For managers who were not informed about the race, they were given other information such that their beliefs about the workers’ types were the same as the manager who could see the race.</li>
        <ul>
            <li><span style="color:red"> Therefore, any difference in wages <b>must</b> be due to the workers' race, and <b>NOT</b> their abilities.</span> </li>
        </ul>
    </ul>

    <br>
    <li>You will decide a new wage to a worker.</li>
    <li>You will have the following information: </li>
        <ul style="font-size:18px">


    <li>The average offered wages to a group that a worker belongs to.</li>
    <ul>
    <li>You will see the average wages from managers who could see the race of workers (Race Aware) and managers who could not (Race Blind).</li>
        {{ if player.order0 == 1 }}
    <img src="{{ static 'page1_A.png' }}" width="400"/>
        {{ endif }}
        {{ if player.order0 == 2 }}
    <img src="{{ static 'page1_B.png' }}" width="400"/>
        {{ endif }}
    </ul>

    </ul>
    <li>You will then receive additional information about the revenue that workers may generate for the managers.
        <ul>
            <li>'Actual % 20 pts' means the proportion of workers in the group that earned 20 pts for the manager.</li>
            <li>'Actual % 10 pts' means the proportion of workers in the group that earned 10 pts for the manager.</li>
        </ul>
        {{ if player.order0 == 1 }}
    <img src="{{ static 'page2_A.png' }}" width="300"/>
        {{ endif }}
        {{ if player.order0 == 2 }}
    <img src="{{ static 'page2_B.png' }}" width="300"/>
        {{ endif }}
        <br>
        Then you can modify the wages. </li>


</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"> Any difference between Race Blind and Race Aware managers in wages is due to the workers' abilities.</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! Any difference in wages must be due to the workers' race, and NOT their abilities.";
        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 }}