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

{% block styles %}
    <link href="{% static 'global/empty.css' %}" rel="stylesheet">
{% endblock %}

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

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
    p.time {
      background-color: white;
      color: grey;
      text-align: right;
    }
</style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 25) {
                $('.otree-timer').show();
            }
        });
    });
</script>

    <p class="time">
        Time: {{ time }} seconds. 
    </p>


<div class="wrapper instructions">
    <p>
        In this part, you will indicate the <b>maximum amount that you would pay</b> for a <b>lottery ticket</b>.  
        The ticket rewards you with $2.00 with a 40% chance, and nothing ($0.00) with a 60% chance.
        At the end of the study, it will be determined whether your ticket wins.<br>
        <br> 
        You will pay and receive the ticket if the randomly determined price of the ticket is 
        less than or equal to your indicated amount.<br> 
        <br>    
        Your <b>best interest</b> is served by simply reporting the maximum amount 
            that you would pay for the lottery ticket.
    </p>

    <span style="color:#778899">
    This works as follows:   
    <p style="margin-left: 10px">
        <br>
        You will indicate the maximum amount you are willing to pay
        for the lottery ticket (between 0 and 100 cents). 
        Then, a random number between 0 and 100 will be drawn. This random number is the price that has 
        to be paid to get the lottery ticket.<br> 
        <br>
        If the amount of money you are willing to pay is <b>the same or higher</b> than this random price, 
        you will <b>pay</b> the randomly determined price and <b>get the lottery ticket</b>. The money you pay will 
        be deducted from your completion payment.<br>
        <br>
        If the amount of money you are willing to pay is <b>below</b> the random price, you will <b>not pay</b> 
        anything, but you will <b>not get the lottery ticket</b>. 
    </P></span>
    

    <p>
        Please click "Next" to start with the task. 
    </p>
</div>

    {% next_button %}

{% endblock %}