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

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

        <p>
 For each price series the lowest price to construct your lower bound is 0 and the highest price to construct your upper bound will be indicated on the screen.
            <br>
            <br> The range of the interval is defined as the highest price minus the lowest price that you submitted.
</p>
        <br>

        <stong><p> The maximum amount you can earn today is $42. </stong>
        <strong><p> The maximum points you can earn if the next price falls within the range of your interval is 100 points. Every 100 points you will earn will be converted to 70 cents at the end of the experiment. </p> </strong>
        <br>
        <li>  The amount of points you will earn depends on the range of the interval.</li>
        <li> A smaller interval range will result in more points. </li>
        <li> A larger interval range will result in fewer points. </li>
        <br>
        <strong><p> If the next price does not fall within the interval you submit you will receive nothing. </p></strong>
        <p> We will provide you with an on-screen calculator to compute the amount of points you will receive if the next price falls within your interval range; this will be discussed next.</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()
    },
    62*1000 // 5 seconds here. # updated to  1 minute and 13 seconds
);
</script>
{% endblock %}