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

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

{% block scripts %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>


<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Income distribution according to economic programs A and B'
  },
  xAxis: {
    categories: ['Ind. 1', 'Ind. 2', 'Ind. 3', 'Ind. 4', 'Ind. 5', 'Ind. 6', 'Ind. 7', 'Ind. 8', 'Ind. 9', 'Ind. 10']
  },
  yAxis: {
    title: {
        text: 'Income'
    },
  },
  plotOptions: {
        series: {
            enableMouseTracking: false
        }
    },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Program A',
    data: [25, 40, 40, 40, 40, 40, 40, 40, 40, 40]
  }, {
    name: 'Program B',
    data: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
  }]
});
</script>
{% endblock %}

{% block title %}
    Instructions
{% endblock %}


{% block content %}
    <div class="wrapper textbox">
        <p>
            In this survey, you will be presented different <b>rules</b> that can potentially
            be applied to rank <b>two different economic programs</b>
            where money is divided between <b>10 individuals</b>.
        </p>
        <p>
            In particular, we will verbally present to you a <b>rule</b> which can <b>potentially</b>
            be used to <b>compare and rank</b> economic programs. <br>
            Furthermore, we will explicitly present to you a pair of economic programs, A and B,
            using <b>bar charts</b>. For each <b>individual</b>, you will see two bars.
            The <b>blue bar</b> for each individual corresponds to the income that this individual would
            receive <b>under program A</b>. Respectively, the <b>black bar</b>
            corresponds to the income that the same individual would receive <b>under program B</b>.
            <br><br>
            Your task is to <b>apply the rule</b> and rank the two programs according to the rule,
            if possible. In case the rule can not be applied to rank the programs, you should state
            that the rule is <b>not applicable</b>.
         </p>
    </div>
    <div class="wrapper textbox">
        <p>
            <b><u>Here is an example:</u></b>
        </p>
        <p>
            Consider the following rule: <br>
            Program X is <b>preferable</b> compared to Y if the <b>lowest income</b> in X is <b>larger
            than</b> the <b>lowest income</b> in Y.
        </p>
    </div>
    <div class="wrapper textbox">
        <p>
            Consider the following economic programs A and B depicted in the bar charts below.
            The <b>first bar</b> for each individual corresponds to the income that this individual would
            receive <b>under program A</b>. Respectively, the <b>second bar</b> for each individual
            corresponds to the income that the same individual would receive <b>under program B</b>.
        </p>
        <figure class="highcharts-figure">
            <div id="container"></div>
        </figure>
    </div>
    <div class="wrapper attentionbox">
       <p>
            <br>
            You will then have <b>three options</b> to chose from. <br><br>
            The first option is <b>"According to the rule, program A is preferable."</b>
            You should chose this option, if you think that, <b>according to the rule above</b>,
            program A is preferable out of the two programs.
            <br><br>
            The second option is <b>"According to the rule, program B is preferable."</b>
            You should chose this option, if you think that, <b>according to the rule above</b>,
            program B is preferable out of the two programs.
            <br><br>
            The third option is <b>"The rule is not applicable to find the preferable program
            out of these options."</b> You should choose this option, if you think that the rule is
            <b>not applicable</b> to find the preferable program out of A and B.
        </p>
    </div>

    <button class="otree-btn-next btn btn-primary">Continue</button>

{% endblock %}