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

{% block title %}The Experiment{% endblock %}

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
</style>

<audio autoplay><source src="{% static 'audio/Treatment_Instructions_2.mp4' %}" type="audio/mpeg"></audio>

      <div class="card bg-light description">
    <div class="card-body" style ="font-size:120%;">

<p>
    After you have submitted your interval the next price in that series will be randomly generated using the same formula that was used to generate the prices that were shown to you.
</p>
<br>
        <br>

<p>
    If the next price falls within the interval you have submitted, you will receive a payment.
</p>
        <br>
        <br>
<p>
    Next, we will talk about this payment.

</p>

    </div>
      </div>

<button class="otree-btn-next btn btn-primary" style="float: right">Next--></button>

<script>
    // Hide the next button until the audio completes
$(".otree-btn-next").hide();

// Reveal the next button after the audio completes
setTimeout(
    function () {
        //alert("Time has run out. Please make your decision.");
        $(".otree-btn-next").show()
    },
    21*1000 // 5 seconds here. # updated to  27 seconds
);
</script>

{% endblock %}