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

{% block title %}
    Your draws from the bag
{% endblock %}

{% block content %}
<p>
A bag type has been chosen randomly.
</p>
<p>
Your first draw from the bag is <b>{% if player.first_draw == "blue" %} <font color="blue"> {{ player.first_draw }} </font> {% else %} <font color="red"> {{ player.first_draw }}</font> {% endif %}</b>
</p>
<p>
Your second draw from the bag is <b>{% if player.second_draw == "blue" %} <font color="blue"> {{ player.second_draw }} </font> {% else %} <font color="red"> {{ player.second_draw }}</font> {% endif %}</b>
</p>

{% formfield player.probReservation_CostThenSignal1 label="How many nickels must the box have for you to want to be reimbursed based on the draw from the box?" %}

{{ form.touched_slider.errors }}

<input type="hidden" name="touched_slider" value="" id="id_touched_slider"/>

{% block scripts %}
    <script>
        $('input[name=probReservation_CostThenSignal1]').on('input',function(){
            $('#id_touched_slider').val(1);
        });
    </script>
{% endblock %}

    {% next_button %}

{% endblock %}