{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
<h3 class="panel-sub-heading">
        <div align="center">
        <strong>You will play the game for a few rounds.</strong></span><p></p>
        </div>
    </h3>
{% endblock %}

{% block content %}
<hr style="border: 1.5px dashed black;" />
<p style="text-align: left;"><strong><span style="font-size: large;">Important reminders:</span></strong></p>
<p style="text-align: left;"><span style="font-size: large;">1. You will now play the game with&nbsp;other&nbsp;<span style="color: #ff0000;"><strong><em>real</em></strong></span> players.</span></p>
<p style="text-align: left;"><span style="font-size: large;">2. In each round you will be paired with 3 other brand-new players.</span></p>
<p style="text-align: left;"><span style="font-size: large;">3. Everyone will make their decisions privately. </span></p>
<p style="text-align: left;"><span style="font-size: large;">4. However, <b>unlike the practice trial, you will&nbsp;<span style="color: #ff0000;"><strong><em>not</em></strong></span>&nbsp;find out the decisions of&nbsp;other members in the group </b>(and other will not&nbsp;know which decisions are made by you).</span></p>
<p style="text-align: left;"><span style="font-size: large;">5. <u>This is because some people might need&nbsp;longer time to make their decisions, and we do not want to keep you waiting for too long.</u></span></p>
<p style="text-align: left;"><span style="font-size: large;">6. Your earnings will be calculated after the experiment is over.&nbsp;</span></p>
<p style="text-align: left;"><span style="font-size: large;">7. People vary in how they make economic decisions. There are no right or wrong answers.</span></p>
</br>

<p style="text-align: left;"><span style="font-size: large;">Click <strong>Next</strong> when you are ready to proceed.</span></p>

<center><hr style="border: 1.5px dashed black;" />
<p style="text-align: left;"><span style="font-size: large;">The 'Next' button will appear in <span id="countdowntimer"> 15 </span> seconds.</span></p>
<hr /></center>
<p>
        <input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Next"/>
    </p>

    <script>

    var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
    var counter = 15 ;
    var newElement = document.createElement("p");
    newElement.innerHTML = "";
    var interval;

    showButton.parentNode.replaceChild(newElement, showButton);

    interval = setInterval(function() {
        counter--;
        if(counter < 0) {
            newElement.parentNode.replaceChild(showButton, newElement);
            clearInterval(interval);
        } else {
            newElement.innerHTML = "";
        }
    }, 1000);

    </script>

<script type="text/javascript">
    var timeleft = 15 ;
    var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0)
        clearInterval(downloadTimer);
    },1000);
</script>


{% endblock %}