{{ block title }}
    Page title 2
{{ endblock }}
{{ block content }}

You can move to the next page after: <span id="timer">60</span> seconds. <br>
<div>
 <input type="button" onclick="ShowAndHide1(); " value="Koala Panda" style="font-weight:bold;" id="idw"/>
    <div class="divin1" id="test1" style="display:none">
     <img src="{{ static 'resume2.pdf' }}" width="300"/>
        <br>
        You can enter your answer after: <span id="countdown1"></span> seconds.
        <label>I think when <b>communication</b> was allowed, <b>Koala Panda's</b> payoff in the <span style="color:red;">second game</span>  was (between 0 and 16)
            </label>
    <input name= 'game1_1' type="text" id="testgame1" style="display: none;"/>
{{ formfield_errors 'game1_1' }}
</div>

<div>
 <input type="button" onclick="ShowAndHide2();" value="Koala Panda2" style="font-weight:bold;" id="id2" disabled />
  <div class="divin1" id="test2" style="display:none">
    <img src="{{ static 'resume2.pdf' }}" width="300" />
  </div>
</div>
<div>
 <input type="button" onclick="ShowAndHide3(); " value="Koala Panda3" style="font-weight:bold;" id="id3" disabled />
    <div class="divin1" id="test3" style="display:none">
     <img src="{{ static 'resume2.pdf' }}" width="300"/>
</div>


<script>
 var timerStarted1 = false;
  var timerStarted2 = false;
  var countdown1 = 10;
  var countdown2 = 10;

  document.querySelector('#idw').addEventListener('click', function() {
    if (!timerStarted1) {
      setTimeout(function() {
        document.querySelector('#testgame1').style.display = 'block';
        document.querySelector('#id2').disabled = false;
      }, countdown1 * 1000);
      timerStarted1 = true;

      var timerId1 = setInterval(function() {
        countdown1--;
        document.querySelector('#countdown1').textContent = countdown1;

        if (countdown1 <= 0) {
          clearInterval(timerId1);
        }
      }, 1000);
    }
  });

  document.querySelector('#id2').addEventListener('click', function() {
    if (!timerStarted2) {
      setTimeout(function() {
        document.querySelector('#id3').disabled = false;
      }, countdown2 * 1000);
      timerStarted2 = true;

      var timerId2 = setInterval(function() {
        countdown2--;
        if (countdown2 <= 0) {
          clearInterval(timerId2);
        }
      }, 1000);
    }
  });

function ShowAndHide1() {
    var x = document.getElementById('test1');
    var x2 = document.getElementById('test2');
    var x3 = document.getElementById('test3');

    if (x.style.display == 'block') {
        x.style.display = 'none';
        x2.style.display = 'none';
        x3.style.display = 'none';
    } else {
        x.style.display = 'block';
        x2.style.display = 'none';
        x3.style.display = 'none';
    }
}
function ShowAndHide2() {
    var x = document.getElementById('test1');
    var x2 = document.getElementById('test2');
    var x3 = document.getElementById('test3');

    if (x2.style.display == 'block') {
        x.style.display = 'none';
        x2.style.display = 'none';
        x3.style.display = 'none';
    } else {
        x.style.display = 'none';
        x2.style.display = 'block';
        x3.style.display = 'none';
    }
}
function ShowAndHide3() {
    var x = document.getElementById('test1');
    var x2 = document.getElementById('test2');
    var x3 = document.getElementById('test3');

    if (x3.style.display == 'block') {
        x.style.display = 'none';
        x2.style.display = 'none';
        x3.style.display = 'none';
    } else {
        x.style.display = 'none';
        x2.style.display = 'none';
        x3.style.display = 'block';
    }
}
window.onload = function () {
    setTimeout(function(){document.querySelector("#Next").style.visibility = "visible";}, 15000);
}

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(15);



</script>

<button class="o-tree-btn-next btn btn-primary" id="Next" style="visibility:hidden;">Next</button>

{{ endblock }}