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

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

        <p>
            To assist you with making your decisions today we will provide you with a special on-screen calculator which will show the amount you will earn if the price falls within the interval range. You can try out different interval ranges using this calculator before submitting your decision.

</p>
        <br>

        <strong> <p> This is what on-screen calculator looks like: </p> </strong>


    </div>
    </div>

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

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

                <p>When you press <strong>calculate</strong>, it will show you the payment if the next price falls within the interval range .


</p>
        <p> Remember that if the price does not fall within the interval you submit you will earn nothing.   </p>
        <p> By pressing submit, you are submitting your final answer and you will move on to the next round. </p>

        <br>

        <strong> <p> You can try out this calculator in the practice rounds which will start shortly. </p> </strong>

    </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()
    },
    48*1000 // 5 seconds here. # updated to 55 seconds
);
</script>
{% endblock %}