{{ block title }}
{{ if player.participant.id_in_session < 3 }}
    Student 1: {{name}}
{{ endif }}
{{ if player.participant.id_in_session > 2 }}
    Student 1
{{ endif }}

{{ endblock }}
{{ block content }}



<p>
<b><span style="font-size:110%;">Cognitive Ability Test</span></b>
    <ul>
    <li>{{name}}'s score for the <b>multiple-choice</b> math questions is
        <b><span style="font-size:110%; color:blue;">{{multi}}</span></b>. </li>
    <li>What is your guess for {{name}}'s score for <b>short-answer</b> math questions (out of 20)?</li>
</ul>
{{ formfield 'cog_1' }}
</p>

<p>
   <b><span style="font-size:110%;">Social Skill Test</span></b>
    <ul>
    <li> You can see the details of each game by clicking a button (For example, "Test 1 First Game Details"). </li>
    <li> Since your payoff depending on accuracy of your guess, you should know the details of the games to maximize your payoff.</li>
    <li> The details of each game are the same for all students (applicants).</li>
    <li> For each game (decision making problem), the student is randomly paired with a partner (undergraduate student).</li>
    </ul>
<ol>
   <li>Test 1</li>
    <ul>
        <li> <b>Test 1 First Game</b> </li>
        <ul>

                <li>
                    {{ if BoSid == 1 }}
When communication was allowed, {{name}}'s payoff was <b><span style="font-size:115%; color:blue;">higher</span></b>
                    than without communication. This could be because their choices changed, or due to luck.
{{ endif }}
{{ if BoSid == -1 }}
When communication was allowed, {{name}}'s payoff was <b><span style="font-size:115%; color:blue;">lower</span></b>
                    than without communication.
{{ endif }}
{{ if BoSid == 0 }}
{{name}} earned <b><span style="font-size:115%; color:blue;">the same</span></b> with communication as they did without communication.
{{ endif }}
                </li>
        </ul>

        <br>
        <li><b>Test 1 Second Game</b></li>
        <ul>
        <button onclick="ShowAndHide1_2()">Test 1 Second Game Details</button>
<div id="test1_2" style="display:none">
    <li>The student played the following game twice as the row player: once without communication, and once with communication. </li>
        <li>In both cases there was <b>no</b> chance that the student got additional points by luck .</li>
            <img src="{{ static 'bos2eval.png' }}" width="300"/>

</div>
        <li>When {{name}} played the Test 1 Second Game <b>without communication</b>, the payoff was  <b><span style="font-size:110%; color:blue;">{{BoSno}}</span></b>.</li>
        </ul>

        {{ formfield 'game1_1' }}
        {{ formfield 'game1amount_1' }}
    </li>
        </ul>
    <li>Test 2</li>
        <ul>
        <li> <b>Test 2 First Game</b> </li>
        <ul>
            <button onclick="ShowAndHide2()">Test 2 First Game Details</button>
<div id="test2" style="display:none">
    <li>The student played the following game twice as the row player: once without communication, and once with communication. </li>
        <li>When communication was allowed, there was a 1/4 chance the student got an additional 0.5 points by luck .</li>
             <img src="{{ static 'pd1eval.png' }}" width="300"/>

</div>

        <li>{{ if PDid == 1 }}
When communication was allowed, {{name}}'s payoff was <b><span style="font-size:115%; color:blue;">higher</span></b>
                    than without communication. This could be because their choices changed, or due to luck.
            {{ endif }}
{{ if PDid == -1 }}
When communication was allowed, {{name}}'s payoff was <b><span style="font-size:115%; color:blue;">lower</span></b>
            than without communication.
{{ endif }}
{{ if PDid == 0 }}
{{name}} earned <b><span style="font-size:115%; color:blue;">the same</span></b> with communication as they did without communication.
{{ endif }}
            </li>
        </ul>

        <br>
        <li><b>Test 2 Second Game</b></li>
        <ul>
        <button onclick="ShowAndHide2_2()">Test 2 Second Game Details</button>

<div id="test2_2" style="display:none">
     <li>The student played the following game twice as the row player: once without communication, and once with communication. </li>
        <li>In both cases there was <b>no</b> chance that the student got additional points by luck .</li>
                    <img src="{{ static 'pd2eval.png' }}" width="300"/>
</div>

        <li>When {{name}} played the Test 2 Second Game without communication, the payoff was <b><span style="font-size:110%; color:blue;">{{PDno}}</span></b>.</li>
        {{ formfield 'game2_1' }}
        {{ formfield 'game2amount_1' }}
    </ul>
    </ul>
    <li>Test 3</li>
     <ul>
        <li> <b>Test 3 First Game</b> </li>
        <ul>
            <button onclick="ShowAndHide3()">Test 3 First Game Details</button>
<div id="test3" style="display:none">
    <li>The student played the following game twice as the row player: once without communication, and once with communication. </li>
        <li> The student had to decide how to divide <b>40 pts</b> between themselves and their partner.</li>
    <li> Then their partner decided whether to accept the offer (the divided amount).</li>
    <li> If the student chose to keep X pts and the partner accepted, the student got X and the partner got 40-X.</li>
        <li>If the partner rejected, they both got 0.</li>
        <li>The student played this game twice: once without communication, and once with communication. </li>
                <li>When communication was allowed, there was a 1/4 chance the student got an additional 0.5 points by luck .</li>
</div>


                <li>{{ if Ultid == 1 }}
When communication was allowed, {{name}}'s payoff was <b><span style="font-size:115%; color:blue;">higher</span></b>
                    than without communication. This could be because their choices changed, or due to luck.
{{ endif }}
{{ if Ultid == -1 }}
When communication was allowed, {{name}}'s payoff was <b><span style="font-size:115%; color:blue;">lower</span></b>
                    than without communication.
{{ endif }}
{{ if Ultid == 0 }}
{{name}} earned <b><span style="font-size:115%; color:blue;">the same</span></b> with communication as they did without communication.
{{ endif }}</li>
        <br>
</ul>
            <li><b>Test 3 Second Game</b></li>
        <ul>
        <button onclick="ShowAndHide3_2()">Test 3 Second Game Details</button>

<div id="test3_2" style="display:none">
      <li>In this game, the student had to decide how to divide <b>30 pts</b> instead of 40.</li>
                <li>The student played this game twice: once without communication, and once with communication. </li>
        <li>In both cases there was <b>no</b> chance that the student got additional points by luck .</li>
</div>


                <li>When {{name}} played the Test 3 Second Game without communication, their payoff was <b><span style="font-size:110%; color:blue;">{{Ultno}}</span></b>.</li>
{{ formfield 'game3_1' }}
        {{ formfield 'game3amount_1' }}
    </ul>
    </ul>
    <li>Test 4</li>
    <ul>
        <li> <b>Test 4 First Game</b> </li>
        <ul>
            <button onclick="ShowAndHide4()">Test 4 First Game Details</button>
<div id="test4" style="display:none">
    <li>The student played the following game twice: once without communication, and once with communication. </li>
        <li>Both players started with 10 pts. Both had to decide how many points to put into a pot.</li>
        <li>If the pot contained at least 10 pts total, then each earned <i><b>19 - their contribution</b></i>.</li>
        <li>If the pot contained fewer than 10 pts, then each earned <i><b>10 - their contribution</b></i>.</li>
    <li>When communication was allowed, there was a 1/4 chance the student got an additional 0.5 points by luck .</li>
</div>



<li>{{ if Pubid == 1 }}
When communication was allowed, {{name}}'s payoff is <b><span style="font-size:115%; color:blue;">higher</span></b>
    than without communication. This could be because their choices changed, or due to luck.
{{ endif }}
{{ if Pubid == -1 }}
When communication was allowed, {{name}}'s payoff is <b><span style="font-size:115%; color:blue;">lower</span></b>
    than without communication.
{{ endif }}
{{ if Pubid == 0 }}
{{name}} earned <b><span style="font-size:115%; color:blue;">the same</span></b> with communication as they did without communication.
{{ endif }}</li>

            <br>
        </ul>
            <li><b>Test 4 Second Game</b></li>
        <ul>
        <button onclick="ShowAndHide4_2()">Test 4 Second Game Details</button>

<div id="test4_2" style="display:none">
      <li>Then the student played another version of this game twice: once without communication, and once with communication. </li>
        <li>In both cases there was <b>no</b> chance that the student got additional points by luck .</li>

                 <li>In this game, If the pot contained at least <b>12 pts</b>, then each earned
        <i><b>23 - their contribution</b></i>.</li>
    <li>Otherwise, their payoff was <i><b>12 - their contribution</b></i>.</li>
</div>


                <li>When {{name}} played the Test 4 Second Game without communication, their payoff was <b><span style="font-size:110%; color:blue;">{{Pubno}}</span></b>.</li>
        {{ formfield 'game4_1' }}
        {{ formfield 'game4amount_1' }}
    </ul>

</ol>

</p>

<p>
   <b><span style="font-size:110%;">Combined (Cognitive Ability + Social Skill) Test</span></b>
    <ul>
    <li> The Combined Test required both mathematical ability and communication skills.</li>
    <li>Using the task results given above about the cognitive abilities (math questions) and the social skills (the payoff improvements when communication is allowed)
    please infer the score for the Combined Test. </li>
    {{ formfield 'combG_1' }}
        {{ formfield 'combI_1' }}
</ul>

</p>



<!--<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>-->



<!--<p> The element will not take up any space when the display property set to "none".</p>-->

<script>
function ShowAndHide1() {
    var x = document.getElementById('test1');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<script>
function ShowAndHide2() {
    var x = document.getElementById('test2');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<script>
function ShowAndHide3() {
    var x = document.getElementById('test3');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<script>
function ShowAndHide4() {
    var x = document.getElementById('test4');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<script>
function ShowAndHide1_2() {
    var x = document.getElementById('test1_2');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<script>
function ShowAndHide2_2() {
    var x = document.getElementById('test2_2');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<script>
function ShowAndHide3_2() {
    var x = document.getElementById('test3_2');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<script>
function ShowAndHide4_2() {
    var x = document.getElementById('test4_2');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
    {{ next_button }}

{{ endblock }}