{% 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>
         In all rounds you will learn your results of price interval prediction you submitted, we will discuss this next. You will also get an overview of your results of your price intervals 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 %}