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

{% block title %}Receiving Feedback{% 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>
            The interval you submitted will be shown on the graph via a black straight line additionally the next price will be showed as a green point on the graph. 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/Feedback_page.jpeg' %}" />
<br>
<br>

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

       <br>
                <p>
         You will see at the bottom left hand of the screen the values you inputted for the upper and lower band. The next price will also be given. On the bottom right-hand side of the screen will be the payoff that was earned for that round additionally the cumulative payoff in the rounds since receiving the feedback. We will next discuss the application of the Arm Wrap.

    </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 %}