{{ block title }}Instructions for Guessing Game{{ endblock }}
{{ block content }}



    <p>
        Please watch the following Video carefully. You can rewind and pause as often as you like, forward skipping is not possible.
        You have to watch the video before the next button will appear. It is best to pause if you don’t understand a certain point.

        1000 points is equivalent to 1$.
    </p>



      <!-- Video -->
    <video id="video" controls width="960" height="630">
        <source src="{% static 'videoinstruction.webm' %}" type=”video/webm”>
        <source src="{% static 'videoinstruction.mp4' %}" type="video/mp4">
        <p>
          Sorry, your browser doesn't support the video tags. Since you can’t continue, please leave the experiment.
        </p>

    </video>

    <script>
    (function () {
        var video = document.getElementById('video'),
            previousTime = 0;

        video.addEventListener('timeupdate', function (evt) {
            if (!video.seeking) {
                previousTime = Math.max(previousTime, video.currentTime);
            }
        }, false);

        video.addEventListener('seeking', function (evt) {
            console.log('seeking', video.currentTime, previousTime);
            if (video.currentTime > previousTime) {
                video.currentTime = previousTime;
                console.log('reset time to ', video.currentTime);
        }
         }, true);
    }());
    </script>

    <script>
    var pageTimeElapsed = 0;
    var pageTimerID = -1;

    function pageTick() {
      pageTimeElapsed++
      document.getElementById("timeSpentInstructions").value = pageTimeElapsed;
    }

    window.onload = function() {
      if(pageTimerID == -1){
        pageTimerID = setInterval(pageTick, 1000);
      }
    };
    </script>

    <input type="hidden" name="timeSpentInstructions" id="timeSpentInstructions"/>



    <script>
    window.onload = function () {
        setTimeout(function(){document.querySelector("#Next").style.visibility = "visible";}, 120000);

    }
    </script>

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



{{ endblock }}