{% 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 Questionnaire</b></p>
    </div>

{#    <div class="was-validated">#}
        <p><b>How many total cards are in the deck?</b></p>
        <p id="warning-message" style="display: none; color: red"><b>Please review your answer by reading the instructions again below...</b></p>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="customControlValidation1" name="radio-stacked"
                   required>
            <label class="custom-control-label" for="customControlValidation1">24</label>
        </div>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked"
                   required>
            <label class="custom-control-label" for="customControlValidation2">40</label>
        </div>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked"
                   required>
            <label class="custom-control-label" for="customControlValidation3">52</label>
        </div>
        <div class="custom-control custom-radio mb-3">
            <input type="radio" class="custom-control-input" id="customControlValidation4" name="radio-stacked"
                   required>
            <label class="custom-control-label" for="customControlValidation4">54</label>
            <div class="invalid-feedback">Select an answer</div>
        </div>
{#    </div>#}

    <button id="check-button" type="button" class="btn btn-outline-dark" onclick="checkAnswer()" style="margin-bottom: 20px">
        Check
    </button>

    <div id="instructions" class="instructions well well-lg" style="display: none">

        <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>
            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 id="submit-button" type="submit" class="btn btn-dark btn-large" style="width: 100%; display: none">Start practice rounds</button>

{% endblock %}


{% block scripts %}

    <script>

        function checkAnswer() {
            if(document.getElementById('customControlValidation2').checked === true){
                document.getElementById('warning-message').style.display = 'none';
                document.getElementById('instructions').style.display = 'none';
                document.getElementById('submit-button').style.display = 'block';
                document.getElementById('check-button').style.display = 'none';
            } else {
                document.getElementById('warning-message').style.display = 'block';
                document.getElementById('instructions').style.display = 'block';
            }
        }

    </script>

{% endblock %}