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



{% block title %}
    {% trans " " %}
{% endblock %}

{% block content %}

<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->

<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->

   <table class="table">

<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
<!-- ----------------               LOTTERY 2 AND 3        -------------------------------------------------------------------------------- -->
   <tr>
   <td>
   <div style="text-align:center;vertical-align:middle;">
        <div id="L2" style="width: 200px; height: 200px; margin: 0 auto"></div>
        <br>
       {% if  player.p2a  > 0 %}
        a {{ player.p2a }} % chance of winning ${{ player.x2a }}   <br/>
       {% endif %}

       {% if player.p2b > 0 %}
        a {{ player.p2b }} % chance of winning ${{ player.x2b }} <br/>
       {% endif%}

       {% if  player.p2c  > 0 %}
        a {{ player.p2c }} % chance of winning ${{ player.x2c }}  <br/>
       {% endif %}

       {% if player.p2d > 0 %}
        a {{ player.p2d }} % chance of winning ${{ player.x2d }}  <br/>
       {% endif%}

        <input type="radio" name="choice"  value="B" required>
    </div>
    </td>

    <td>

        <div style="text-align:center;vertical-align:middle;">
        <div id="L3" style="width: 200px; height: 200px; margin: auto"></div>
        <br>
        {% if player.p3a > 0 %}
        a {{ player.p3a }} % chance of winning ${{ player.x3a }}  <br/>
        {% endif %}

        {% if player.p3b > 0 %}
        a {{ player.p3b }} % chance of winning ${{ player.x3b }}  <br/>
        {% endif %}

        {% if player.p3c > 0 %}
        a {{ player.p3c }} % chance of winning ${{ player.x3c }} <br/>
        {% endif %}

        {% if player.p3d > 0 %}
        a {{ player.p3d }} % chance of winning ${{ player.x3d }}  <br/>
        {% endif %}

        <input type="radio" name="choice" value="C" required>
        </div>
    </td>
   </tr>
<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
<!-- ----------------               LOTTERY 4 AND 5        -------------------------------------------------------------------------------- -->
       <tr>
       <td>
        <div style="text-align:center;vertical-align:middle;">
        <div id="L4" style="width: 200px; height: 200px; margin: 0 auto"></div>
        <br>
        {% if player.p4a > 0 %}
        a {{ player.p4a }} % chance of winning ${{ player.x4a }}  <br/>
        {% endif %}

        {% if player.p4b > 0 %}
        a {{ player.p4b }} % chance of winning ${{ player.x4b }} <br/>
        {% endif %}

        {% if player.p4c > 0 %}
        a {{ player.p4c }} % chance of winning ${{ player.x4c }}   <br/>
        {% endif %}

        {% if player.p4d > 0 %}
        a {{ player.p4d }} % chance of winning ${{ player.x4d }}  <br/>
        {% endif %}

        <input type="radio" name="choice" value="D" required></div>
       </td>

       <td>
       <div style="text-align:center;vertical-align:middle;">
       <div id="L5" style="width: 200px; height: 200px; margin: 0 auto"></div>
        <br>
        {% if player.p5a > 0 %}
        a {{ player.p5a }} % chance of winning ${{ player.x5a }}  <br/>
        {% endif %}

        {% if player.p5b > 0 %}
        a {{ player.p5b }} % chance of winning ${{ player.x5b }}  <br/>
        {% endif %}

        {% if player.p5c > 0 %}
        a {{ player.p5c }} % chance of winning ${{ player.x5c }} <br/>
        {% endif %}

        {% if player.p5d > 0 %}
        a {{ player.p5d }} % chance of winning ${{ player.x5d }}  <br/>
        {% endif %}

        <input type="radio" name="choice" value="E" required>
        </div>
       </td>
   </tr>
<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
</table>
<!-- -------------------------------------     LOTTERY 1       --------------------------------------------------------------------------- -->


<div class="wrapper">

    <section>

       <div style="text-align:center;vertical-align:middle;">
       <div id="L1" style="width: 200px; height: 200px; margin: 0 auto"></div>

       <br/>
        {% if  player.p1a  > 0 %}
        a {{ player.p1a }} % chance of winning  ${{ player.x1a }}   <br/>
        {% endif %}

        {% if  player.p1b  > 0 %}
        a {{ player.p1b }} % chance of winning ${{ player.x1b }}  <br/>
        {% endif %}

        {% if  player.p1c  > 0 %}
        a {{ player.p1c }} % chance of winning  ${{ player.x1c }}   <br/>
        {% endif %}

        {% if  player.p1d  > 0 %}
        a {{ player.p1d }} % chance of winning ${{ player.x1d }}  <br/>
        {% endif %}

        <input type="radio" name="choice" value="A" required>
       </div>

</section>
</div>


<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
<div style="float:right">
   {% next_button %}
</div>

{% endblock %}


{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}

{% block scripts%}
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
Highcharts.chart('L1', {
    credits: false,
    chart: {
        type: 'pie'
    },
    title: {
        text: " "
    },

    tooltip: {
        formatter: function () {
            return this.y + ' % chance of winning ' + '$' + this.point.name ;
            }
    },
    plotOptions: {
        pie: {
            size:'100%',
            colors:['#e5eff4','#c1d9e5','#9dc3d7','#79adc8'],
            },
        series: {
            dataLabels: {
                enabled: true,
                distance: -50,
                formatter: function(){
                    if (this.y >0)
                    return '$' + this.point.name ;
                }
            }
        }
    },
    series: [
        {
            colorByPoint: true,
            data: [
                {
                    name: {{ player.x1a }},
                    y: {{ player.p1a }}
                },
                {
                    name: {{ player.x1b }},
                    y: {{ player.p1b }}
                },
                {
                    name: {{ player.x1c }},
                    y: {{ player.p1c }}
                },
                {
                    name: {{ player.x1d }},
                    y: {{ player.p1d }}
                },
            ]
        }
    ],

});

<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
Highcharts.chart('L2', {
    credits: false,
    chart: {
        type: 'pie'
    },
    title: {
        text: " "
    },
    tooltip: {
        formatter: function () {
            return this.y + ' % chance of winning ' + '$' + this.point.name ;
            }
    },
    plotOptions: {
        pie: {
            size:'100%',
            colors:['#e5eff4','#c1d9e5','#9dc3d7','#79adc8'],
            },
        series: {
            dataLabels: {
                enabled: true,
                distance: -50,
                formatter: function(){
                    if (this.y >0)
                    return '$' + this.point.name ;
                }
            }
        }
    },
    series: [
        {
            colorByPoint: true,
            data: [
                {
                    name: {{ player.x2a }},
                    y: {{ player.p2a }}
                },
                {
                    name: {{ player.x2b }},
                    y: {{ player.p2b }}
                },
                {
                    name: {{ player.x2c }},
                    y: {{ player.p2c }}
                },
                {
                    name: {{ player.x2d }},
                    y: {{ player.p2d }}
                },
            ]
        }
    ],

});
<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
Highcharts.chart('L3', {
    credits: false,
    chart: {
        type: 'pie'
    },
    title: {
        text: " "
    },
    tooltip: {
        formatter: function () {
            return this.y + ' % chance of winning ' + '$' + this.point.name ;
            }
    },
    plotOptions: {
        pie: {
            size:'100%',
            colors:['#e5eff4','#c1d9e5','#9dc3d7','#79adc8'],
            },
        series: {
            dataLabels: {
                enabled: true,
                distance: -50,
                formatter: function(){
                    if (this.y >0)
                    return '$' + this.point.name;
                }
            }
        }
    },
    series: [
        {
            colorByPoint: true,
            data: [
                {
                    name: {{ player.x3a }},
                    y: {{ player.p3a }}
                },
                {
                    name: {{ player.x3b }},
                    y: {{ player.p3b }}
                },
                {
                    name: {{ player.x3c }},
                    y: {{ player.p3c }}
                },
                {
                    name: {{ player.x3d }},
                    y: {{ player.p3d }}
                },
            ]
        }
    ],

});
<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
Highcharts.chart('L4', {
    credits: false,
    chart: {
        type: 'pie'
    },
    title: {
        text: " "
    },
    tooltip: {
        formatter: function () {
            return this.y + ' % chance of winning ' + '$' + this.point.name ;
            }
    },
    plotOptions: {
        pie: {
            size:'100%',
            colors:['#e5eff4','#c1d9e5','#9dc3d7','#79adc8'],
            },
        series: {
            dataLabels: {
                enabled: true,
                distance: -50,
                formatter: function(){
                    if (this.y >0)
                    return '$' + this.point.name;
                }
            }
        }
    },
    series: [
        {
            colorByPoint: true,
            data: [
                {
                    name: {{ player.x4a }},
                    y: {{ player.p4a }}
                },
                {
                    name: {{ player.x4b }},
                    y: {{ player.p4b }}
                },
                {
                    name: {{ player.x4c }},
                    y: {{ player.p4c }}
                },
                {
                    name: {{ player.x4d }},
                    y: {{ player.p4d }}
                },
            ]
        }
    ],

});
<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->
Highcharts.chart('L5', {
    credits: false,
    chart: {
        type: 'pie',
    },
    title: {
        text: " "
    },
    tooltip: {
        formatter: function () {
            return this.y + ' % chance of winning ' + '$' + this.point.name;
            }
    },
    plotOptions: {
        pie: {
            size:'100%',
            colors:['#e5eff4','#c1d9e5','#9dc3d7','#79adc8'],
            },
        series: {
            dataLabels: {
                enabled: true,
                distance: -50,
                formatter: function(){
                    if (this.y >0)
                    return '$' + this.point.name;
                }
            }
        }
    },
    series: [
        {
            colorByPoint: true,
            data: [
                {
                    name: {{ player.x5a }},
                    y: {{ player.p5a }}
                },
                {
                    name: {{ player.x5b }},
                    y: {{ player.p5b }}
                },
                {
                    name: {{ player.x5c }},
                    y: {{ player.p5c }}
                },
                {
                    name: {{ player.x5d }},
                    y: {{ player.p5d }}
                },
            ]
        }
    ],

});
<!-- ------------------------------------------------------------------------------------------------------------------------------------- -->

</script>
{% endblock %}
{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}