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

{% block title %}
Decision
{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.highcharts-figure, .highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.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: 400px;
}
.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;
}
.highcharts-title{
    font-weight: bold;
}
</style>
{% endblock %}

{% block content %}

{% if player.diluted_selection == "add take" %}
<div class="card info">

    <p>
        In a previous study, participants were given the choice we described to you before: whether to take 5 points from the charities, leave the allocation unchanged, or give 5 points to the charity.
    </p>
    <p>
        We have randomly chosen ten individuals who have previously participated in this study. They made a choice in the situation we explained to you previously.
For seven of them, we are displaying their true choices. However, for three of them, their choices are displayed as “Take from Charities,” irrespective of how they truly chose. Thus, these three cases, counted as “Take from Charities,” could have taken from the charities, but could also have given to the charities or left the situation unchanged.

    </p>
</div>
<br>
<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div class="card info" style="width: 60%; display: table-cell;">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <figure class="highcharts-figure">
                <div id="container"></div>
                    <p class="highcharts-description">
                        <span style="font-size: 15px"> Chart shows distribution of choices among ten randomly selected participants, but three choices switched to “Take from Charities” </span>
                    </p>
            </figure>
        </div>
        <div class="card info" style="display: table-cell;vertical-align: top;">
            <p>
                You and the charities have an initial endowment of 10 points each. <br><br>

            <p>
        You are given three choices to re-allocate points between you and the charities:
    </p>
   <strong> 1) Take 5 points from the charity for yourself </strong>
    <ul>
        <li> Outcome: 15 points for yourself and 5 points for the charity. </li>
    </ul>

    <strong> 2) No change; leave allocation as it is </strong>
    <ul>
        <li> Outcome: 10 points for yourself and 10 points for the charity. </li>
    </ul>
    <strong> 3) Give 5 points from yourself to the charity </strong>
    <ul>
        <li> Outcome: 5 points for yourself and 15 for charity. </li>
    </ul>

            {% formfield player.charity_decision_diluted_take %}
        </div>
    </div>
</div>
<div class="card info">
    <p>
        <strong>Final Allocation:</strong> You will have <span id="InputSelf" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points and the charity will have <span id="InputCharity" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points.
    </p>
</div>

{% endif %}


{% if player.diluted_selection == "add give" %}
<div class="card info">
    <p>
        In a previous study, participants were given the choice we described to you before: whether to take 5 points from the charities, leave the allocation unchanged, or give 5 points to the charity.
    </p>
    <p>
        We have randomly chosen ten individuals who have previously participated in this study. They made a choice in the situation we explained to you previously.
For seven of them, we are displaying their true choices. However, for three of them, their choices are displayed as “Give to Charities,” irrespective of how they truly chose. Thus, these three cases, counted as “Give to Charities,” could have given to the charities, but could also have taken from the charities or left the situation unchanged.

    </p>
</div>
<br>
<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div class="card info" style="width: 60%; display: table-cell;">
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <figure class="highcharts-figure">
                <div id="container"></div>
                    <p class="highcharts-description">
                        <span style="font-size: 15px"> Chart shows distribution of choices among ten randomly selected participants, but three choices switched to “Give to Charities” </span>
                    </p>
            </figure>
        </div>
        <div class="card info" style="display: table-cell;vertical-align: top;">
            <p>
                You and the charities have an initial endowment of 10 points each. <br><br>
            </p>
            <p>
        You are given three choices to re-allocate points between you and the charities:
    </p>
   <strong> 1) Take 5 points from the charity for yourself </strong>
    <ul>
        <li> Outcome: 15 points for yourself and 5 points for the charity. </li>
    </ul>

    <strong> 2) No change; leave allocation as it is </strong>
    <ul>
        <li> Outcome: 10 points for yourself and 10 points for the charity. </li>
    </ul>
    <strong> 3) Give 5 points from yourself to the charity </strong>
    <ul>
        <li> Outcome: 5 points for yourself and 15 for charity. </li>
    </ul>
            {% formfield player.charity_decision_diluted_take %}
        </div>
    </div>
</div>
<div class="card info">
    <p>
        <strong>Final Allocation:</strong> You will have <span id="InputSelf" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points and the charity will have <span id="InputCharity" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points.
    </p>
</div>
{% endif %}

<br><br>
<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="GroupChoices_time" id="GroupChoices_time" step="0.000001">
<input type="hidden" name="group_give_count" id="group_give_count" step="1">
<input type="hidden" name="group_statusquo_count" id="group_statusquo_count" step="1">
<input type="hidden" name="group_take_count" id="group_take_count" step="1">


{% endblock %}

{% block scripts %}
<script>
var startTime;
var give_count = {{ give_count }};
var statusquo_count = {{ statusquo_count }};
var take_count = {{ take_count }};

$(document).ready(function() {
    startpage_time = Date.now();
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('GroupChoices_time').value=page_time;
    document.getElementById('group_give_count').value=give_count;
    document.getElementById('group_statusquo_count').value=statusquo_count;
    document.getElementById('group_take_count').value=take_count;
};
$('#id_charity_decision_diluted_take_0').change(function () {
    document.getElementById('InputSelf').innerHTML = 15;
    document.getElementById('InputCharity').innerHTML = 5;
        });
$('#id_charity_decision_diluted_take_1').change(function () {
    document.getElementById('InputSelf').innerHTML = 10;
    document.getElementById('InputCharity').innerHTML = 10;
        });
$('#id_charity_decision_diluted_take_2').change(function () {
    document.getElementById('InputSelf').innerHTML = 5;
    document.getElementById('InputCharity').innerHTML = 15;
        });


// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '<span style="font-size: 20px"> Distribution of Choices </span>',
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'category',
        labels: { style: {
			                fontSize: '15px',
			                color: '#000000'
		        }
	}
    },
    yAxis: {
        title: {
            text: '<span style="font-size: 15px"> Count </span>'
        },
                labels: { style: {
			                fontSize: '15px',
			                color: '#000000'
		        }
	}

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: false,
                format: '{point.y1:.0f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y1:.0f}%</b> of total<br/>'
    },

    series: [
        {
            name: "Choices",
            colorByPoint: false,
            data: [
                {
                    name: "Take from Charity",
                    drilldown: null,
                    y: take_count,
                    y1: take_count*10
                },
                {
                    name: "No Change",
                    drilldown: null,
                    y: statusquo_count,
                    y1: statusquo_count*10
                },
                {
                    name: "Give to Charity",
                    drilldown: null,
                    y: give_count,
                    y1: give_count*10
                }
            ]
        }
    ],
credits:{
	enabled: false
}

});
</script>
{% endblock %}