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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'bret/css/custom.css' %}" rel="stylesheet"/>
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    {% trans "Instructions" %}
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}
    <script>
        function demoDisplay() {
            $("#button_start").show();
            $("#img_example").show();
            {#document.getElementById("img_example").style.visibility = "visible";#}
        }
    </script>

    <div class="instructions">
        <p>
                In this part of the experiment, you will see a {{ num_rows }}x{{ num_cols }}-matrix containing
                {{ num_boxes }} boxes on your screen, shown as below. You can earn points by collecting boxes.
        </p>

        <div style="text-align:center">
            <img src="{% static "bret/matrix.png" %}"/>
            <img src="{% static "bret/outcome.png"%}" id="img_example" style="display: none;" />
        </div>
        <p>
                Behind one of the boxes hides a bomb that destroys everything you collect.
                The remaining {{ num_nobomb }} boxes are worth {{ box_value }} points each.
                You do not know where the bomb is located, and the bomb can be in any place equally likely.
        </p>

        <p>
                Your task is to choose the box you want to collect. When you are done, click the 'Check' button.
                A dollar sign or a bomb sign will be shown on each of your collected boxes.
        </p>
        <p>
            If you does not collect the bomb, you gain the amount accumulated that far.
            If you collect the box where the bomb is located, the bomb will explode and you will earn zero.
            <input type="button" onclick="demoDisplay()" value="Here is an example.">
        </p>
        <p>
            You will play the game for {{ Constants.num_rounds }} rounds. One round will be randomly chosen at the end
            to determine your payoff.
        </p>
    </div>

        <div style="text-align:center">
        <button id="button_start" class="btn btn-success btn-lg" style="display:none">Start</button>
    </div>

{% endblock %}