{{extends 'pre_survey/BasePage.html'}}
{{ load otree static }}



{% block title %}
{% endblock %}


{% block content %}

    <!-- site-specific CSS -->
    <style type="text/css">

        #hsgraph {
            height: 400px;
        }

        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 310px;
            max-width: 800px;
            margin: 1em auto;
        }

        .highcharts-data-table table {
            font-family: Verdana, sans-serif;
            border-collapse: collapse;
            border: 1px solid #ebebeb;
            margin: 10px auto;
            text-align: center;
            width: 100%;
            max-width: 500px;
        }

        .highcharts-data-table caption {
            padding: 1em 0;
            font-size: 1.2em;
            color: #555;
        }

        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }

        .highcharts-data-table td,
        .highcharts-data-table th,
        .highcharts-data-table caption {
            padding: 0.5em;
        }

        .highcharts-data-table thead tr,
        .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }

        .highcharts-data-table tr:hover {
            background: #f1f7ff;
        }

    </style>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <!-- this next line would add the context menu -->
    <!-- <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>    

    <div class="container">
        <div class="panel info">
            <h3 class="lead center">
                <b>Allocation task: Instructions</b>
            </h3>
        </div>
    </div>


   <div class="container">
        <div class="block block-radius block-primary">
            <div class="block-content">

                <p>
                    In this task you will make <strong> 5 choices</strong>, in each you will be asked <strong> to determine the allocation of points between yourself and another anonymous participant</strong>. Each time you can choose between 7 different allocations.
                </p>

                <h3 class="lead center">
                    <strong>Example</strong>
                </h3>
                <p>
                    The following figure illustrates such a choice as it will appear on your screen.
                </p>
                
                <figure class="highcharts-figure">
                    <div id="hsgraph"></div>
                    <!--
                    <p class="highcharts-description">
                        Bar chart showing Somalian population distribution by using a mirrored
                        horizontal column chart with stacking and two x-axes.
                    </p>
                    -->
                </figure>
                <p>
                    For instance, in the example:
                </p>
                <ul>
                    <li>Choosing Allocation &#35; 3 allocates 335 Points to you and 275 Points to the other person. The total amount awarded for this allocation is 610 Points.</li>
                    <li>Choosing Allocation &#35; 7 allocates 155 Points to you and 335 Points to the other person. The total amount distributed in this allocation is 490 Points.</li>
                </ul>
    
                <p>
                    In each choice you select your preferred allocation from a dropdown menu. You can change your decisions until you click on the &ldquo;Next&rdquo; button at the bottom. Afterwards, the next choice situation will appear on your screen.
                </p>

                <p>
                    At the end of the laboratory part of the experiment the computer will randomly select one of five choices you made to be paid. You will get the allocation chosen in that choice, and computer will pay one randomly selected participant in the session based on your allocation.
                </p>
                    Similarly, you will be paid as "other person" in allocation chosen by one randomly chosen participant.
                <p>

                </p>
        
            </div>
        </div>
    </div>  


    <div class="container">
        <div class="center">
            <button name="Confirm" value="True" class="btn btn-primary btn-large">Next</button>
        </div>
    </div>


<!-- script for chart -->
<script>

    // Custom template helper
    Highcharts.Templating.helpers.abs = value => Math.abs(value);
    
    // Age categories
    const categories = [
        '1', '2', '3', '4', '5', '6', '7'
    ];
    
    Highcharts.chart('hsgraph', {
        chart: {
            type: 'bar'
        },
        title: {
            text: null
        },
        /*
        subtitle: {
            text: 'Source: <a ' +
                'href="https://countryeconomy.com/demography/population-structure/somalia"' +
                'target="_blank">countryeconomy.com</a>',
            align: 'left'
        },
        accessibility: {
            point: {
                valueDescriptionFormat: '{index}. Age {xDescription}, {value}%.'
            }
        },
        */
        xAxis: [{
            categories: categories,
            reversed: true,
            labels: {
                format: 'Allocation # {abs value}'
    
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            /*
            accessibility: {
                description: 'Age (male)'
            }
            */
        }, { // mirror axis on right side
            opposite: true,
            reversed: true,
            categories: categories,
            linkedTo: 0,
            labels: {
                enabled: false
            },
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            /*
            accessibility: {
                description: 'Age (female)'
            }
            */
        }],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            /*
            accessibility: {
                description: 'Percentage population',
                rangeDescription: 'Range: 0 to 5%'
            }
            */
        },
        tooltip: {
            format: '<b>{series.name}, age {point.category}</b><br/>' +
                'Population: {(abs point.y):.1f}%'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        color =  this.y < 0.0 ? '#8FA2CA' : '#9CAD9F';
                        return '<span style="color: ' + color + '">' + Math.abs(this.y) + ' </span>'; 
                        
                        // return Math.abs(this.y);
                    },
                    inside: false,
                    padding: 10,
                    y: -1
                }
            },
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Points you receive',
            data: [
                -425, -380, -335, -290, -245, -200, -155
            ],
            enableMouseTracking: false,
            color: '#8FA2CA'
        }, {
            name: 'Points other person receives',
            data: [
                245, 260, 275, 290, 305, 320, 335
            ],
            enableMouseTracking: false,
            color: '#B5C6B8'
        }],
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'top',
            floating: false,
            x: 0,
            y: 0
        },
        credits: {
            enabled: false
        },
    });
    
    
    </script>    


  
{{ endblock }}