{{ block title }}
Task 2 of 3
{{ endblock }}
{{ block content }}
<ul>
    <li>If you want to see the details again, click the following button.<br>
    <input type="button" onclick="ShowAndHideG1()" style="font-weight:bold; color:blue; position:static; clip:auto; width:auto; height:auto" value="Scenario Details"/>
    <div id="firstgame" style="display:none">
        <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>
    </div>
    </li>
    <li>For each behavior of <i>Ann</i>, please choose the social appropriateness.</li>
</ul>
<script>
function ShowAndHideG1() {
    var x = document.getElementById('firstgame');
    if (x.style.display == 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

<style>
ol {
  display         : flex;
  justify-content : center;
  margin          : 50px auto;
  color           : #335;
  list-style      : none;
  padding         : 0;
  font-size       : 15px;
}

ol li:not(:first-child) {
  margin-left: 1.5em;
}

input {
  position : absolute;
  clip     : rect(0 0 0 0);
  width    : 1px;
  height   : 1px;
}

label {
  display: inline-block;
  padding: .3em .75em;
  background: #9bc;
  color: #556;
  cursor: pointer;
  transition: all .5s 0s;
  border-radius: 5px;
}

:checked +  label {
  background: #556;
  color: #fff;
  cursor: defaOLt;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #556;
}
</style>
<ol>
    <li>
        <b>Take $5 <br>(Ann:$10<br>Bob:$0)</b>
    </li>
     <li style="margin-left: 1em">
       <input type="radio" name="a1" value="1" id="a1ch1"/>
       <label for="a1ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a1" value="2" id="a1ch2"/>
       <label for="a1ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a1" value="3" id="a1ch3"/>
       <label for="a1ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a1" value="4" id="a1ch4"/>
       <label for="a1ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Take $4 <br>(Ann:$9<br>Bob:$1)</b>
    </li>
     <li>
       <input type="radio" name="a2" value="1" id="a2ch1"/>
       <label for="a2ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a2" value="2" id="a2ch2"/>
       <label for="a2ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a2" value="3" id="a2ch3"/>
       <label for="a2ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a2" value="4" id="a2ch4"/>
       <label for="a2ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Take $3 <br>(Ann:$8<br>Bob:$2)</b>
    </li>
     <li>
       <input type="radio" name="a3" value="1" id="a3ch1"/>
       <label for="a3ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a3" value="2" id="a3ch2"/>
       <label for="a3ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a3" value="3" id="a3ch3"/>
       <label for="a3ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a3" value="4" id="a3ch4"/>
       <label for="a3ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Take $2 <br>(Ann:$7<br>Bob:$3)</b>
    </li>
     <li>
       <input type="radio" name="a4" value="1" id="a4ch1"/>
       <label for="a4ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a4" value="2" id="a4ch2"/>
       <label for="a4ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a4" value="3" id="a4ch3"/>
       <label for="a4ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a4" value="4" id="a4ch4"/>
       <label for="a4ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Take $1 <br>(Ann:$6<br>Bob:$4)</b>
    </li>
     <li>
       <input type="radio" name="a5" value="1" id="a5ch1"/>
       <label for="a5ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a5" value="2" id="a5ch2"/>
       <label for="a5ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a5" value="3" id="a5ch3"/>
       <label for="a5ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a5" value="4" id="a5ch4"/>
       <label for="a5ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Take/Give <br>$0 <br>(Ann:$5<br>Bob:$5)</b>
    </li>
     <li style="margin-left: 0.8em">
       <input type="radio" name="a6" value="1" id="a6ch1"/>
       <label for="a6ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a6" value="2" id="a6ch2"/>
       <label for="a6ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a6" value="3" id="a6ch3"/>
       <label for="a6ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a6" value="4" id="a6ch4"/>
       <label for="a6ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Give $1 <br>$0 <br>(Ann:$4<br>Bob:$6)</b>
    </li>
     <li>
       <input type="radio" name="a7" value="1" id="a7ch1"/>
       <label for="a7ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a7" value="2" id="a7ch2"/>
       <label for="a7ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a7" value="3" id="a7ch3"/>
       <label for="a7ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a7" value="4" id="a7ch4"/>
       <label for="a7ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Give $2 <br>(Ann:$3<br>Bob:$7)</b>
    </li>
     <li>
       <input type="radio" name="a8" value="1" id="a8ch1"/>
       <label for="a8ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a8" value="2" id="a8ch2"/>
       <label for="a8ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a8" value="3" id="a8ch3"/>
       <label for="a8ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a8" value="4" id="a8ch4"/>
       <label for="a8ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Give $3 <br>(Ann:$2<br>Bob:$8)</b>
    </li>
     <li>
       <input type="radio" name="a9" value="1" id="a9ch1"/>
       <label for="a9ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a9" value="2" id="a9ch2"/>
       <label for="a9ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a9" value="3" id="a9ch3"/>
       <label for="a9ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a9" value="4" id="a9ch4"/>
       <label for="a9ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Give $4 <br>(Ann:$1<br>Bob:$9)</b>
    </li>
     <li>
       <input type="radio" name="a10" value="1" id="a10ch1"/>
       <label for="a10ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a10" value="2" id="a10ch2"/>
       <label for="a10ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a10" value="3" id="a10ch3"/>
       <label for="a10ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a10" value="4" id="a10ch4"/>
       <label for="a10ch4">very socially appropriate</label>
     </li>
</ol>

<ol>
    <li>
        <b>Give $5 <br>(Ann:$0<br>Bob:$10)</b>
    </li>
     <li style="margin-left: 1em">
       <input type="radio" name="a11" value="1" id="a11ch1"/>
       <label for="a11ch1">very socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a11" value="2" id="a11ch2"/>
       <label for="a11ch2">somewhat socially inappropriate</label>
     </li>
     <li>
       <input type="radio" name="a11" value="3" id="a11ch3"/>
       <label for="a11ch3">somewhat socially appropriate</label>
     </li>
    <li>
       <input type="radio" name="a11" value="4" id="a11ch4"/>
       <label for="a11ch4">very socially appropriate</label>
     </li>
</ol>
After <span id="timer">60</span> seconds you can move to the next page whenever you are ready. <br>

<button class="o-tree-btn-next btn btn-primary" id="Next" style="visibility:hidden;">Next</button>
<script>
    window.onload = function () {
    setTimeout(function(){document.querySelector("#Next").style.visibility = "visible";}, 120000);
}

var startTime, countAmt, interval;

function now() {
return ((new Date()).getTime());
}

function tick() {
var elapsed = now() - startTime;
var cnt = countAmt - elapsed;
var elem = document.getElementById("timer");
if (cnt > 0) {
elem.innerHTML = Math.round(cnt / 1000);
} else {
elem.innerHTML = "0";
clearInterval(interval);
}
}

function startTimer(secs) {
clearInterval(interval);
document.getElementById("timer").innerHTML = secs;
countAmt = secs * 1000;
startTime = now();
interval = setInterval(tick, 1000);
}

startTimer(120);



</script>
{{ endblock }}