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

{% block styles %}
    <link href="{% static 'Ambiguity_New/css/custom.css' %}" rel="stylesheet"/>

    <style>
        #customers {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 80%;
        }

        #customers td, #customers th {
            border: 1px solid grey;
            padding: 8px;
        }

        #customers tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: center;
            background-color: #808080;
            color: white;
        }

        .decision-wrap {
            max-width: 980px;
            margin: 0 auto;
            font-size: 18px;
            line-height: 1.6;
        }

        .charts-row {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 30px;
            flex-wrap: wrap;
        }

        .chart-box {
            width: 360px;
            text-align: center;
        }

        .chart-caption {
            margin-top: 8px;
            font-weight: 600;
        }

        .options {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 28px;
            flex-wrap: wrap;
        }

        .options label {
            font-size: 20px;
            font-weight: 600;
        }

        .options input[disabled] {
            cursor: not-allowed;
        }

        #unknown_pie_main,
        #known_pie_main,
        #unknown_pie_modal,
        #known_pie_modal {
            min-height: 280px;
        }
    </style>
{% endblock %}

{% block title %}
    Part 3 – Quiz
{% endblock %}

{% block content %}
    <div class="decision-wrap">

        <p>
            Please consider the choice example below. Then answer the two questions at the bottom of the page.
        </p>

        <div align="center" style="font-size: 16px">
            <b>Which box do you prefer?</b>
        </div>

        <!-- 主页面示意图：K = 75/25 -->
        <div class="charts-row">
            <div class="chart-box">
                <div id="unknown_pie_main"></div>
                <div class="chart-caption">Choice U<br>($5: ?%, $0: ?%)</div>
            </div>
            <div class="chart-box">
                <div id="known_pie_main"></div>
                <div class="chart-caption">Choice K<br>($5: 75%, $0: 25%)</div>
            </div>
        </div>

        <div class="options">
            <label><input type="radio" disabled> Choice U</label>
            <label><input type="radio" checked> Indifferent</label>
            <label><input type="radio" disabled> Choice K</label>
        </div>

        <p>
            <b>Question 1</b><br>
            Let’s assume you have chosen <i>Indifferent</i> in the example task above, for which the winning condition is that the drawn ball is
            <span style="color:purple; font-weight:600;">purple</span>.
            Further assume this example task was selected for payment and the ball drawn was
            <b><span style="color:purple; font-weight:600;">purple</span></b>.
            {% formfield player.q1a %}
            {% formfield player.q1b %}
        </p>

        <p>
            <b>Question 2</b><br>
            Let’s now assume you have chosen <i>Box K</i> in the last round of the example task above, for which the winning condition is again that the drawn ball is
            <span style="color:purple; font-weight:600;">purple</span>.
            Further assume this example task was selected for payment.
            {% formfield player.q2 %}
        </p>

        <div align="center">
            <button name="Next" value="True" class="btn btn-primary btn-large">Next</button>
            <button type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#InstructionsModal"
                    style="background-color:grey; border-color:grey">
                Instructions
            </button>
        </div>

        <!-- Instructions Modal -->
        <div class="modal fade" id="InstructionsModal" tabindex="-1" role="dialog" aria-labelledby="InstructionsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" style="max-width: 80%; font-size: 14px" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="InstructionsModalLabel">Part 3 - Instructions</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <style>
                            #modal_table {
                                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                                border-collapse: collapse;
                                width: 78%;
                            }

                            #modal_table td, #modal_table th {
                                border: 1px solid grey;
                                padding: 8px;
                            }

                            #modal_table tr:nth-child(even) {
                                background-color: #f2f2f2;
                            }

                            #modal_table th {
                                padding-top: 12px;
                                padding-bottom: 12px;
                                text-align: center;
                                background-color: #808080;
                                color: white;
                            }
                        </style>

                        <p>
                            <b>Task</b><br>
                            The next part of this study will consist of three tasks.
                            In each task, you will repeatedly choose between two boxes, labeled <i>U</i> and <i>K</i>.
                            Each box contains 100 balls.
                        </p>

                        <p>
                            Depending on the task, the boxes may consist of either two colors (purple and yellow), or of ten different colors.
                            The composition of colors is known (<i>K</i>) for box <i>K</i> and unknown (<i>U</i>) for box <i>U</i>.
                            In every task, a specific winning condition will be clearly stated.
                            After you make your choice, one ball will be randomly drawn from the box you selected.
                            If the drawn ball meets the stated winning condition, you will receive a reward of $5.
                            If the drawn ball does not meet the winning condition, you will receive $0 for the task.
                        </p>

                        <!-- modal 示意图：K = 50/50 -->
                        <div class="charts-row">
                            <div class="chart-box">
                                <div id="unknown_pie_modal"></div>
                                <div class="chart-caption">Choice U<br>($5: ?%, $0: ?%)</div>
                            </div>
                            <div class="chart-box">
                                <div id="known_pie_modal"></div>
                                <div class="chart-caption">Choice K<br>($5: 50%, $0: 50%)</div>
                            </div>
                        </div>

                        <div class="options">
                            <label><input type="radio" disabled> Choice U</label>
                            <label><input type="radio" disabled> Indifferent</label>
                            <label><input type="radio" checked> Choice K</label>
                        </div>

                        <p align="center"><i>Figure 1 - Example of choice page</i></p>

                        <p style="margin-top:20px;">
                            As you can see in <i>Figure 1</i>, if the winning condition is that the drawn ball is
                            <span style="color:purple; font-weight:600;">purple</span>, then choosing box <i>K</i>
                            means that you have a 50% chance of winning the reward of $5 and a 50% chance of winning $0.
                            Choosing box <i>U</i> means that the probability of winning is unknown
                            (it may be higher than, lower than, or equal to 50%).
                        </p>

                        <p>
                            In each task, you may make up to 6 decisions (rounds).
                            Across rounds within a task, the composition of box <i>K</i> will change,
                            while box <i>U</i> will always contain balls with unknown composition.
                            After each round, you will again choose between box <i>U</i> and box <i>K</i>.
                        </p>

                        <p>
                            If at any point you consider both boxes equally attractive,
                            you may select <i>Indifferent</i>.
                            Once you select <i>Indifferent</i>, the current task will end immediately,
                            and you will proceed to the next task.
                        </p>

                        <p>
                            Since there are three tasks and each task consists of up to 6 rounds,
                            you may make up to 18 decisions in total.
                        </p>

                        <p>
                            <b>Payoff</b><br>
                            In case your choice is selected for payment, your payoff in this part will be paid today.
                            Once you have completed all the choices, the computer will randomly draw one of the tasks in this part for real payment.
                            We will then draw a ball from the selected box to determine the outcome.
                            If you select <i>Indifferent</i>,
                            there is a 50% chance that the ball will be drawn from box <i>K</i> and a 50% chance that it will be drawn from box <i>U</i>.
                            As a result, you will receive either $5 or $0.
                            The ball will be drawn at the end of the study,
                            which means that you will learn about your earnings in this task at the end of this study as well.
                        </p>

                        <p>
                            <b>Example</b><br>
                            Suppose the computer has randomly drawn the task from <i>Figure 1</i> for payment,
                            for which the winning condition is that the drawn ball is
                            <span style="color:purple; font-weight:600;">purple</span>.
                            Suppose you have chosen box <i>K</i> at the end of that task.
                            Further, suppose a <span style="color:purple; font-weight:600;">purple</span> ball was drawn from box <i>K</i>.
                            Then you would receive $5 for this task at the end of the study.
                        </p>

                        <p>
                            <b>Important</b><br>
                            Please note again that the questions are not designed to test you.
                            There are no right or wrong answers.
                            Simply choose the box that you prefer the most.
                        </p>

                        <p>
                            Please think carefully before confirming your choice.
                            Once you click the Next button on a decision page,
                            your choice will be recorded and cannot be changed.
                            You will not be able to return to previous pages during this task.
                        </p>
                    </div>

                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-primary btn-large"
                                style="background-color:grey; border-color:grey"
                                data-bs-dismiss="modal">
                            Return
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block scripts %}
    <script src="{% static 'Ambiguity_New/js/highcharts.js' %}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(window).keydown(function(event){
                if ((event.keyCode == 13) || (event.keyCode == 32)){
                    event.preventDefault();
                    return false;
                }
            });
        });
    </script>

    <script>
        $('form').on('focus', 'input[type=number]', function () {
            $(this).on('wheel.disableScroll', function (e) {
                e.preventDefault();
            });
        });

        $('form').on('blur', 'input[type=number]', function () {
            $(this).off('wheel.disableScroll');
        });

        $(document).ready(function() {
            $("input[type=number]").on("focus", function() {
                $(this).on("keydown", function(event) {
                    if (event.keyCode === 38 || event.keyCode === 40) {
                        event.preventDefault();
                    }
                });
            });
        });
    </script>

    <script>
        (function () {

            const PIE_SIZE = 260;

            function drawKnownPie(containerId, purpleShare, yellowShare) {
                Highcharts.chart(containerId, {
                    chart: {
                        type: 'pie',
                        spacingRight: 60,
                        animation: false,
                        events: {
                            load: function () {
                                this.reflow();
                            }
                        }
                    },
                    title: { text: '' },
                    credits: { enabled: false },
                    tooltip: { enabled: false },
                    accessibility: { enabled: false },
                    plotOptions: {
                        series: {
                            animation: false,
                            enableMouseTracking: false,
                            states: {
                                hover: { enabled: false },
                                inactive: { opacity: 1 }
                            }
                        },
                        pie: {
                            size: PIE_SIZE,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                distance: 18,
                                softConnector: true,
                                allowOverlap: true,
                                crop: false,
                                useHTML: true,
                                connectorPadding: 8,
                                style: {
                                    fontWeight: '600',
                                    color: '#000',
                                    textOutline: 'none',
                                    whiteSpace: 'nowrap'
                                },
                                formatter: function () {
                                    return (this.point && this.point.name === 'Purple') ? 'Purple' : null;
                                }
                            }
                        }
                    },
                    series: [{
                        data: [
                            { name: 'Purple', y: purpleShare, color: 'purple' },
                            { name: 'Yellow', y: yellowShare, color: 'yellow' }
                        ]
                    }]
                });
            }

            function drawUnknownPie(containerId) {
                Highcharts.chart(containerId, {
                    chart: {
                        type: 'pie',
                        animation: false,
                        events: {
                            load: function () {
                                this.reflow();
                            }
                        }
                    },
                    title: { text: '' },
                    credits: { enabled: false },
                    tooltip: { enabled: false },
                    accessibility: { enabled: false },
                    plotOptions: {
                        series: {
                            animation: false,
                            enableMouseTracking: false,
                            states: {
                                hover: { enabled: false },
                                inactive: { opacity: 1 }
                            }
                        },
                        pie: {
                            size: PIE_SIZE,
                            dataLabels: { enabled: false },
                            showInLegend: false,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        data: [
                            { y: 100, color: 'lightgray' }
                        ]
                    }]
                });
            }

            // 主页面：75/25
            drawKnownPie('known_pie_main', 75, 25);
            drawUnknownPie('unknown_pie_main');

            // modal：50/50
            const modalEl = document.getElementById('InstructionsModal');
            if (modalEl) {
                modalEl.addEventListener('shown.bs.modal', function () {
                    if (!modalEl.dataset.chartLoaded) {
                        drawKnownPie('known_pie_modal', 50, 50);
                        drawUnknownPie('unknown_pie_modal');
                        modalEl.dataset.chartLoaded = 'true';
                    }
                });
            }

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