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

{#{% block title %}#}
{#    Instructions#}
{#{% endblock %}#}


{% block styles %}

    <link href="{% static "blackjack/styles.css" %}" rel="stylesheet">

    <style>

        .center {
            margin: auto;
            width: 100%;
            padding: 10px;
            text-align: center;
        }

        .btn {
            border-radius: 0;
        }

    </style>

{% endblock %}


{% block content %}

    <div class="center">
        <img src="{% static "blackjack/images/cards-collection.svg" %}" width="200px">
        <p><b>Highest Two Card Combination Instructions</b></p>
    </div>

    <div class="instructions well well-lg">

        <p>
            In the following game, you will draw two cards and add up their numbers based on the following rules:
        </p>

        <ol>
            <li>Aces count as 1</li>
            <li>There are no Jacks, Queens or Kings</li>
            <li>Cards are privately revealed one at a time and a hand is made up of only 2 cards.</li>
        </ol>

        <p>
            The game will consist of 20 time periods with 1 card drawn per period; after each draw, the card is
            reinserted into the deck and it is shuffled before the next draw. After taking an initial draw,
            you may decide to either:
        </p>

        <ol type="A">
            <li>Hold on to your card (accept) and draw the next card to make a full hand.
                The full hand is then stored in your score card and then you will start the process over again
                with 2 periods used up.
            </li>
            <li>Not accept the card and start the process over immediately in the next period with 1 period used up.</li>
        </ol>

        <p>
            You have 60 seconds to make the above decision. Otherwise the card the automatically accepted.
        </p>

        <p>
            At the end of 20 periods, the maximum score among all the completed hands will be your final score.
        </p>

        <p>
            An additional monetary prize may be given at the end of the experiment depending on your final score.
            The higher your final score, the higher the prize.
        </p>

    </div>

    <button type="submit" class="btn btn-dark btn-large" style="width: 100%;">Continue</button>

{% endblock %}


{% block scripts %}

    <script>

        localStorage.setItem('timeLeft', 60);
        localStorage.setItem('first-card-revealed', "false");

    </script>

{% endblock %}