{% block title %}
    Waiting Task
{% endblock %}

{% block content %}

    {{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
    {{ endif }}

    <p>
        In this study you will go through a <strong>Waiting Task</strong>.
        To complete this waiting task, you will have to stay on a blank page, the <strong> Waiting page</strong>, for a
        minimum of <strong>{{ C.WAIT_TIME }} minutes</strong>.
    </p>
    <p>
        If you do not pay attention to the page, the time will increase.<span id="dots0"></span>
    </p>
<button type="button" class="otree-btn-next btn btn-primary" onclick="showMore0()" id="myBtn0">What happens while you
    wait?</button>
<span id="more0">
    <h4>Pop-Up Button   <button type="button" class="btn btn-secondary" id="popUp" data-bs-container="body"
                                data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Click this button
                                whenever it appears.">Pop-Up</button></h4>
    <p>
        While on the Waiting Page, a <strong>button will pop-up</strong> on the page at <strong>random intervals of time
        between {{ C.MIN_TIME_POPUP }} and {{ C.MAX_TIME_POPUP }} seconds.</strong>
    </p>
    <p>
        Each time the pop-up button appears, you have <strong>{{ C.POP_UP_DURATION }} seconds</strong> to click it
        before it disappears.
        <span id="dots"></span>
    </p>
    <button type="button" class="otree-btn-next btn btn-primary" onclick="showMore()" id="myBtn">What happens if you miss a pop-up?</button>
</span>
<span id="more">
    <h4>Missing a pop-up</h4>
    <p>
        Each time you don't click on the pop-up button, we will <strong>add some seconds to your overall waiting time</strong>.
        <span id="dots2"></span>
    </p>
    <button type="button" class="otree-btn-next btn btn-primary" onclick="showMore2()" id="myBtn2">Can I take a break during the task?</button>
    </span>
    <span id="more2">
    <h4>Pause Button   <button type="button" class="btn btn-warning" id="pauseButton" data-bs-container="body"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Use this button to
                               pause the task once.">Pause</button> </h4>
    <p>
        While you are in the Waiting Task, you can take <strong>one break</strong> by clicking on a <strong>Pause Button</strong>.
        The Pause Button does two things:
        <ol>
            <li>It stops the timer that counts how long you have spent on the page</li>
            <li>It stops the pop-up button from showing up</li>
        </ol>
        You can keep the task paused as long as you want.
        Once you resume the task, the timer starts from the point where it was stopped, and pop-up buttons will start
        appearing again.
    </p>
    <p>
        When you are ready, continue to go through a <strong>{{ C.WAIT_TRIAL_TIME }} seconds practice session of the Waiting
        Task.
    </strong></p>

    <button style="float: right" class="btn btn-primary btn-large">Start Practice Session</button>
</span>

{% endblock %}



{% block styles %}

    <style>
#more0 {display: none;}
#more {display: none;}
#more2 {display: none;}
</style>

{% endblock %}

{% block scripts %}
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
    })

        function showMore0() {
  var dots = document.getElementById("dots0");
  var moreText = document.getElementById("more0");
  var btnText = document.getElementById("myBtn0");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.style.display = "none"
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
    function showMore() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.style.display = "none"
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
function showMore2() {
  var dots = document.getElementById("dots2");
  var moreText = document.getElementById("more2");
  var btnText = document.getElementById("myBtn2");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.style.display = "none"
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
</script>
{% endblock %}