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

<div class="card bg-light description">
    <div class="card-body">
<p>
In this experiment, you will take on the role of a financial analyst. Today’s task is to examine a set of graphs of the last 100 periods of a stock’s price and to predict the interval within which the next price will occur.
</p>
<p>
    <strong> The prices will look like this:</strong>
</p>
</div>
</div>

<br>
<br>

<img src="{% static 'image/priceSeries.jpeg' %}" style = "display: block;margin-left: auto;margin-right: auto;width:100%;height:75%;"/>



<br>
<br>


        <div class="card bg-light description">
    <div class="card-body">

<p>
To get information on an individual time period’s price, hover over with the cursor on a point on the graph, a point is represented by a circle.
</p>

<p>
Each price series has been generated using a formula that involves some randomness.
</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()
    },
    35*1000 // 5 seconds here. # updated to  41 seconds
);
</script>

{% endblock %}