{{ block title }}
    Task 2 of 3
{{ endblock }}
{{ block content }}

{{ include_sibling 'progress.html' }}

<br>

<h5>Here you will find an example round to test your understanding of the game. Please read the charts and fill in the information below:</h5>

<br>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

<div id="highchart"></div>

<script>
Highcharts.chart('highchart', {
    chart: {
        type: 'pie'
    },
    title: null,
    xAxis: {
        categories: []
    },
    yAxis: {
        visible: false
    },
    plotOptions: {
        series: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: [{
                enabled: true,
                distance: 20
            }, {
                enabled: true,
                distance: -40,
                format: '{point.y}',
                style: {
                    fontSize: '1.2em',
                    textOutline: 'none',
                    opacity: 0.7
                },
                filter: {
                    operator: '>',
                    property: 'percentage',
                    value: 1
                }
            }],
            animation: false
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Payoffs',
        data: [
            {
                name: 'How much you are offered',
                y: 1,
                color: '#FFA500',
                borderColor: 'white'
            },
            {
                name: 'How much Player P wants to keep for himself',
                y: 3,
                color: '#003388',
                borderColor: 'white'
            }
        ]
    }]
});
</script>

<br>

    {{ formfield 'responder_payoff' }}

<br>

    {{ formfield 'proposer_payoff' }}

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Click to open or close Instructions
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    {{ include_sibling 'Instructions.html' }}
  </div>
</div>

<br>

    {{ next_button }}

{{ endblock }}