{% 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.setOptions({
  lang: {
    numericSymbols: null
  }
});
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Income according to income 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
        }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Program A',
    data: [1212, 7196, 7196, 7196, 7196, 7196, 7196, 7196, 7196, 7196]
  }, {
    name: 'Program B',
    data: [5486, 5486, 5486, 5486, 5486, 5486, 5486, 5486, 5486, 5486]
  }]
});
</script>
{% endblock %}

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


{% block content %}
    <div class="wrapper textbox">
        <p>
            In this stage of the experiment you will be shown a <b>principle</b> of how <b>income</b> should be
            <b>distributed</b> between individuals. <br><br> Moreover, you will also be shown <b>two different
            income programs</b>, i.e. income programs where money is divided between <b>10 individuals</b>.<br><br>
            The <b>principle</b> can be <b>applied</b> to <b>decide</b> between the <b>two income programs</b>
            that propose how to divide money between 10 individuals.
        </p>
        <p>
            Your task is to <b>apply the principle</b> to <b>find out</b> which of the <b>two programs</b> is
            <b>preferable</b> according to the principle. Note that you do not need to agree with the principle.
            In this task, we are simply interested to see if you can find the program that is preferable according
            to the principle.<br><br>
            You will repeat this task for exactly <b>eight times</b>, each time with a <b>different pair</b> of
            income programs, but with the <b>same principle</b>.
        </p>
    </div>
    <div class="wrapper textbox">
        <p>
            <b><u>Here is an example:</u></b>
        </p>
        <p>
            <br>
            Consider the following principle: <br> <br> <b> Program X is preferable compared to program Y if the
            highest income in program X is larger than the highest income in program Y.</b> <br> <br>
            Further, consider the following income 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>
            You will then have <b>two options</b> to choose from. <br><br>
            The first option is <b>"Program A is preferable."</b>
            You should choose this option if you think that program A is preferable according to the principle.
            <br><br>
            The second option is <b>"Program B is preferable."</b>
            You should choose this option if you think that program B is preferable according to the principle.
            <br><br>
            Note that you do not need to agree with the principle. Your answer will not have any effects on any of
            these income programs being implemented or not. However, <b>your answer</b> will affect the <b>bonus
            payment</b> that you receive at the end of this survey.
        </p>
    </div>
    <div class="wrapper textbox">
        <p>
            <b><u>This is how it works:</u></b>
        </p>
        <p>
            At the end of the experiment, a <b>random mechanism</b> will determine which of your <b>eight answers</b>
            is chosen for payment. Each of your eight answers is equally likely to be chosen for payment.
            <br><br>
            If your answer is <b>correct</b>, you will receive a <b>bonus payment of 1.5 GBP</b>.
            <br><br>
            If your answer is <b>not correct</b>, you will <b>not receive a bonus payment</b> for this task.
        </p>
    </div>

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

{% endblock %}