{% block script %}

    <!-- JS for button show/hide instructions - from: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp -->
    <script>
    var info_button_clicks = 0;
    console.log("info button clicks: ", info_button_clicks)

    function info_button() {
        var x = document.getElementById("background");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }

        info_button_clicks += 1
        document.getElementById("info_button_clicks").value = info_button_clicks;
        console.log("info button clicks: ", info_button_clicks)
    }
    </script>

    <!-- JS for slider -->
	<script src="{{ static 'js/slider.js' }}"></script>


{% endblock %}

{% block title %}
	Experiment {{super_round}}, Round {{ display_round }}
{% endblock %}

{% block content %}

    <div class="alert alert-danger" id="alert" style="display:none;">
        Please move the slider to answer the question.
    </div>

    <p>
<br> <br>
        <b>Background:</b>
        <br>

        <input type="hidden" name="info_button_clicks" id="info_button_clicks" value="0"/>

        <button type="button" onclick="info_button()">Show/hide instructions provided in the first study</button>

        <div style="display:none" id="background">
            <br>
            <p>
            There are two urns, one red and one blue, as displayed below. One of the two urns was chosen in the beginning.
            It will remain the same throughout this study. You do not know which of the 2 urns was selected.
            <div>
                <img src="{{ static 'img/red_or_blue_urn.png' }}" style="width:30%;"/>
            </div>
            <br>
            <p>
                The 4 informative balls, labeled with an 'I', from the selected urn were added to the black box displayed below.
                You do not know the color of the urn that was selected.
                The 4 added balls are therefore displayed in grey.
                But these are either 3 red balls and 1 blue ball or 3 blue balls and 1 red ball.
                The black box also contains 6 other uninformative balls, labeled with a 'U', that do not come from the urn.
                A ball is drawn from the black box. The color of the ball is shown to you and
                the ball is put back into the box with the other balls.
            </p>
            <div>
                <img src="{{ static 'img/black_box.png' }}" style="width:30%;"/>
            </div>
            </p>
        </div>

    </p>
    <br>
    <p>
        <b>Important note:</b> <br />
        The grey ball is <b>no</b> indication of the color of the ball drawn. You do not know whether it was blue or red.
    </p>

    <p>
        <b>History:</b>


        <style>
            #t1 tr td  {
                border:2px solid;
                width:70px;
                text-align:center;
            }
        </style>

        <table id="t1">
        <tr>
            <td>Ball 1</td>
            <td>Ball 2</td>
        </tr>
        <tr style="height: 70px">
            <td>
                <img src="{{ static pic1 }}" width="40" height="auto"/>
            </td>
            <td>
                <img src="{{ static pic2 }}" width="40" height="auto"/>
            </td>
        </tr>
        </table>
        <br>
        {% if display_round == 1 %}
            One ball is drawn from the blackbox. This is called <b>Ball 1</b>.
            The other participant saw the color of the ball, but did not know whether it was informative or uninformative.
        {% endif %}

        {% if display_round == 2 %}
            Another is drawn from the blackbox. This is called <b>Ball 2</b>.
            The other participant saw the color of the ball, but did not know whether it was informative or uninformative.
        {% endif %}

        {% if display_round > 1 and player.treat > 1%}
            <br>
            <br>
            You previously thought it was <b>{{prev_belief}}%</b> likely that the selected urn is blue.
        {% endif %}

        {% if display_round == 1 and player.treat == 2 %}
            <br>
            This is the first round. Nothing to display yet.
        {% endif %}

    </p>
{% if display_round == 1 and super_round > 1 %}
        <br>
        <b style="font-size:16px;">Reminder: This is a new experiment. The reports from the previous experiment should be disregarded in your estimation. Focus only on the information provided in this experiment.</b>
        {% endif %}

    <p>
        <br>
        <b>New Information:</b>
        <br>
        {% if display_round < 3%}
        The other participant thought it was <b>{{other_report}}%</b> likely that the selected urn is blue.
        {% endif %}

        <!-- check how to handle the treat. -->
        {% if display_round == 3%}
        The signal that the other participant received was <b>{{other_report}}</b>.
        {% endif %}
    </p>

    <p>
        <b>Question:</b>
        <br>
        What do you think are the chances (in %) that the <span style="color:#0271c0;">BLUE URN</span>&nbsp;was picked in the beginning?
    </p>

    <!-- SLIDER -->

    <!-- Slider styling -->
    <link href="{{ static 'css/slider.css' }}" rel="stylesheet">

    <!-- Additional inputs -->
    <input type="hidden" name="minus_button_clicks" id="minus_button_clicks" value="0"/>
    <input type="hidden" name="plus_button_clicks" id="plus_button_clicks" value="0"/>

    <!-- Slider placement -->
	<table style="width:80%">
		<tr>
			<td>
                <div class="range-box">
                <div title="Decrease" class="control-minus">-</div>
                <input id="belief" name="belief" type="range" class="slider2" min="0" max="100" value="50">
                <span class="legend-min">0</span>
                <span class="legend-max">100</span>
                <div title="Increase" class="control-plus">+</div>
                </div>
            </td>
		</tr>

		<tr style="height: 30px">
			<td style="text-align: center"><b><span id="show_belief"></span>%</b></td>
		</tr>
	</table>








    <!-- Next button -->
    <style>
        .next {float: right; margin: 40px auto;}
    </style>
    <button name="slider_check" id="slider_check" class="btn btn-primary next" onclick="checkTouched()">Next</button>


{% endblock %}