{% 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/Calculator_2.mp4' %}" type="audio/mpeg"></audio>

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

        <p>
            Your interval will also be shown on the graph via a black straight line. Please see an example of this below. Every time you click calculate it will adjust the black straight line to your new interval.
</p>



    </div>
    </div>

<br>
<br>
<img style = "width:102%" src="{% static 'image/priceSeriesBound.jpeg' %}" />
<br>
<br>

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

        <p>
         You will see many sets of prices during today’s study and submit a number of prediction intervals. We will randomly generate the next price in each series, and you will learn the results of each of your price interval predictions at the end of the experiment.
</p>
        <br>
        <p> At the end of the session, after you complete the final questionnaire, you will be directed to the screened desk at the front of the room to receive your cash 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()
    },
    43*1000 // 5 seconds here. # updated to  52 seconds
);
</script>

{% endblock %}