{% block title %}
    Checking Your Understanding
{% endblock %}

{% block content %}

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


    <p>
        Before we move on to the main part of the experiment, we want to make sure you understand how it works.
        Please, answer the following questions.
    </p>
    <p>
        {{ formfields }}
    </p>

    <button class="otree-btn-next btn btn-primary">Submit</button> &emsp;

    <button id="opener" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
        Review instructions</button>

{% endblock %}

{% block styles %}

{% endblock %}

{% block scripts %}
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModalLong" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Instructions</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <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.
    </p>
    <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.
    </p>
          <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>.
    </p>
          <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 {{ C.WAIT_TRIAL_TIME }} seconds practice session of the Waiting
        Task.
    </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}