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

{% block title %}
    Task {% if player.participant.first_task_order == 0%}
        2
        {% elif player.participant.first_task_order == 1%}
        1
        {% endif %}: <br>Token Grabbing
{% endblock %}

{% block content %}

<br>
<br>

    <div class="instructions-text" style="margin-left:5%; margin-right: -5%">
You will now begin the Token Grabbing Task.<br><br>
        You will be matched with 5 other random participants in a group of 6. <Br>
        <br>
        Recall that there will be a pool of 60 virtual tokens.<Br><br>
        Every 6 seconds, each participant will have  the chance to grab a token from the pool, up to a maximum of 10 tokens.
<br><br>
        Any tokens left in the pool by the group will be multiplied by 1.8 and split evenly.
<br>
        <Br>
        Each token will be worth 1 ECU.<Br>
        <Br>
        Your earnings in ECUs =<br>
<div style="        text-align: center; margin-top: 0.2cm;">
                <strong><em>[No. of tokens you grabbed + (1.8 x tokens left in pool)/6 ] x1</em></div>
    </div>

<br>
<br>
<br>


<div style = " display: flex; justify-content: right; align-items: right;  ">
        <button class="btn btn-danger">Begin Task</button>
    </div>


<style>


    h2 {
        color: #2c3e50;
        text-align: center;
        margin-bottom: 25px;
    }

    .instructions-text {
        line-height: 1.6;
        font-size: 18px;
    }

    .key-points {
        background-color: #e8f4fc;
        padding: 15px;
        border-left: 4px solid #3498db;
        margin: 20px 0;
    }

    .earnings-formula {
        margin: 30px 0;
        text-align: center;
    }

    .formula {
        font-size: 20px;
        color: #2c3e50;
        margin-top: 10px;
    }

    .btn-next {
        display: block;
        width: 200px;
        margin: 30px auto 0;
        padding: 10px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
    }

    .btn-next:hover {
        background-color: #2980b9;
    }
</style>


{% endblock %}