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

{% block title %}Part 1{% endblock %}

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
</style>



<audio autoplay><source src="{% static 'audio/Individual_Task.mp4' %}" type="audio/mpeg"></audio>

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

        <h3>Individual Task</h3>
        On the next page we will ask you to make ten decisions between 'Option A' and 'Option B'.
        <br>
        For example:
        <ul>
            <li>Option A could be $3.00 with probability 3/10  and $0.50 with probability 7/10</li>
            <li>Option B could be $2.00 with probability 3/10 and $1.75 with probability 7/10</li>
            </ul>

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

        <br>
        <br>
        <h3>How choices affect earnings:</h3>

        <strong>Stage 1</strong>
        <br>
        One of your ten choices will be chosen randomly.
        <br>
        Each of the 10 decisions are equally likely.
        <br>
        <br>
        <strong>Stage 2</strong>
        <br>
        Another random draw from 1-10 will then be made to determine your payment.
        <br>
        Each number is equally likely.
        <br>
        <br>
        For example, if you chose Option A $3.00 with probability 3/10 and $0.50 with probability (7/10):
        <ul>
        <li> If the random draw is 1,2 or 3 you will earn $3.00.</li>
            <li>If the random draw is 4,5,6,7,8, 9 or 10 you will earn $0.50.</li>
        </ul>
        <br>

        <strong>Summary</strong>
        <br>
        Even though you will make ten decisions, only one of these will end up affecting your earnings today and
        you will not know in advance which decision will be used.
        <br>
        Each decision has an equal chance of being used in the end and these random numbers will be different for each participant in today's session.

    </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()
    },
    87*1000 // 5 seconds here. # updated to 1 minute and 13 seconds
);
</script>




{% endblock %}