{{ 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">
    <li>You will have a task that distribute certain amount of money between two workers.</li>
    <ul>
        <li>We ran a previous study to measure the abilities of 282 workers.</li>
    <ul>
        <li>The workers performed three tasks that measure <br>(1) Math skill, (2) Social skill, and (3) Combined (Math+Social) skill.</li>
    <li>If you want to know the details of tasks, click the following buttons. <br>
    <input type="button" onclick="ShowAndHideM(); CheckLogM()" style="font-weight:bold; color:blue; position:static; clip:auto; width:auto; height:auto" value="Math skill"/>
    <input type="hidden" value="0" name="mathlog" 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>
    <input type="button" onclick="ShowAndHideS(); CheckLogS()" style="font-weight:bold; color:blue; position:static; clip:auto; width:auto; height:auto" value="Social skill"/>
    <input type="hidden" value="0" name="soclog" 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>
    <input type="button" onclick="ShowAndHideC(); CheckLogC()" style="font-weight:bold; color:blue; position:static; clip:auto; width:auto; height:auto" value="Combined (Math+Social) skill"/>
    <input type="hidden" value="0" name="comblog" 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>
        <li>For each ability, a worker is one of two types: High  or Low.</li>
        <ul>
            <li>Types for each task are defined as,
            <table>
                 <tr>
                 <th>Task</th>
                 <th>Low</th>
                     <th>High</th>
                 </tr>

                 <tr>
                 <td>Math</td>
                 <td>< 50% correct</td>
                  <td>&geq; 50% correct</td>
                 </tr>

                 <tr>
                 <td>Social</td>
                 <td>< 50% of points</td>
                 <td>&geq; 50% of points</td>
                 </tr>

                <tr>
                 <td>Combined</td>
                 <td>< 1.6 pts</td>
                 <td>&geq; 1.6 of points</td>
                 </tr>
             </table></li>
        </ul>
        <li>The workers are US citizens, currently living in the US now.</li>
    </ul>
        <li>We ran another study to measure wage offer for the workers.</li>
        <ul>
            <li>The group identity of the workers were <i>not</i> identically revealed across participants.</li>
        </ul>
    <li>You will have the following information: </li>
        <ul style="font-size:18px">
    <li>The two workers' common information on their resumes</li>
    <li>The average offered wages for a group that each worker belongs to.</li>
    <ul>
        <li>You will be given two wages for each worker: When the group identity is revealed, and when the group identity is not revealed</li>
    </ul>
</ul>
    <li>You will have additional information after make a decision, and then will have a chance to modify your answer.</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> about the evaluation task? <br>-->
<!--            <input type="radio" name="compG1" value="1" id="comp_c" oninput="checkComp(this);"/>-->
<!--            <label for="comp_c">Some of the workers do not live in the US or are not US citizens.</label> <br>-->
<!--            <input type="radio" name="compG1" value="2" id="comp_c2" oninput="checkComp(this);">-->
<!--            <label for="comp_c2">The combined skill task requires both math and social skills.</label><br>-->
<!--            <input type="radio" name="compG1" value="3" id="comp_c3" oninput="checkComp(this);">-->
<!--            <label for="comp_c3">For each worker, only one skill will be evaluated.</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! All the workers are the US citizens who live in the US now.";
        document.getElementById("errorC").style.color = "red";
    } else if (field.value === '2') {
        document.getElementById("errorC").innerText = "True! Combined task requires both skills. ";
        document.getElementById("errorC").style.color = "green";
    } else if (field.value === '3') {
        document.getElementById("errorC").innerText = "False! You will evaluate all three skills.";
        document.getElementById("errorC").style.color = "red";
    }
}
</script>
{{ next_button }}
{{ endblock }}