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

{% block title %}

{% endblock %}

{% block scripts %}
    <link rel="stylesheet" href="{% static "jquery-ui.css" %}">


    <script src="{% static "jquery-1.12.4.js" %}"></script>
    <script src="{% static "jquery-ui.js" %}"></script>

    <script src="{% static "jquery-ui-slider-pips.js" %}"></script>
    <script src="{% static "highcharts.js" %}"></script>
    <script src="{% static "series-label.js" %}"></script>
    <script src="{% static "exporting.js" %}"></script>




    <script>
        var $currency_name = $('#id_currency_name').val();
        var Euro = {{ Euro|json }};

        Highcharts.chart('container_euro', {
/*
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
*/
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },

            yAxis: {
                title: {
                    text: 'Earnings in ' +$currency_name
                },
                max: null,
                minTickInterval: 1
            },
            xAxis: {
                    title: {
                        text: 'Number of chips (purchased in period)'
                    },
                    max: 1000,
                    min: 0,
                    minTickInterval: 100
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    marker: {
                        enabled: false
                    },
                    pointStart: 1
                }
            },
            series: Euro,

            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br>Earnings in ' + $currency_name +':' + this.point.y  + '</b><br>Number of chips: ' + this.point.x;
                }
            },
            navigation: {
                buttonOptions: {
                    enabled: true
                    }
            },
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 100
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });

    </script>

    <script>
        document.getElementById("show_hide").style.display = "none"
        function count_click() {
                 if (document.getElementById("show_hide").style.display == "none") {
                        document.getElementById("show_hide").style.display = "block";
                    }
                 else if (document.getElementById("show_hide").style.display == "block") {
                        document.getElementById("show_hide").style.display = "none";
                    }
        }
    </script>


{% endblock %}

{% block content %}
{% csrf_token %}

<input type="hidden" id="id_currency_name" value='{{ player.Currency_name }}'>

<div class="card bg-light instructions">

    <div  class="row generalrow">
        <div class="form-group col-md-10 form-inline">
            <h2>
            Quiz
            </h2>
        </div>

        <div class="form-group col-md-2 form-inline">

            <button type="button" class="btn btn-danger" id="randomG_button" name="RandomNumber" onclick="count_click()">Instruction</button>

        </div>



    </div>

            {% include Constants.instructions_template %}


<p>
1. Imagine that in a given period, you purchase 3 packages in currency A and 1 in currency B. </p>
<p>
                (a) How many chips did you purchase?</p>
                {% formfield player.Q1_1  %}

        <p>(b) How many {{ player.Currency_name}}s did you make? (Please keep two decimal points)</p>
        {% formfield player.Q1_2  %}
        <p>
2. Imagine that you are a seller and your ask is 3 packages at 10 units of currency A.
There is a buyer whose bid is 2 packages at 18 units of currency A. Which one
of the following apply?
            {% formfield player.Q2  %}

     </p>
    <p style="display: {% if player.Currency_exchange_on == 0 %}none{% endif %};">

3. Imagine that you had 1000 units of currency A and 100 units of currency B. You
exchanged 500 units of currency A against currency B and the exchange rate
was 2.5 (i.e. 1 unit of currency A gives you 2.5 units of currency B). How many
currency A and B do you own after the exchange?
        {% if player.Currency_exchange_on == 1 %}{% formfield player.Q3  %}{% endif %}
        </p>

</div>
</div>
    {% next_button %}


{% endblock %}