{{ block app_styles }}
    
    <style>
    
        #lineSlider {
            width: 100%;
            margin-top: 0px;
            margin-left: 0px;
            box-sizing: border-box;
        }

    </style>

{{ endblock}}

{{ block title }}
    Instructions
{{ endblock }}

{{ block content }}

    <div style="text-align: justify;">

        <p><b>The Basics</b></p>

        <p>
            In this experiment, you will be making decisions for a firm deciding what quantity of some good to produce. 
            The experiment is divided into Rounds, and in each Round, you will complete some number of Tasks. 
            Each Task involves making one decision about the quantity to be produced by the firm.
            During each Task, you will see a graph showing how much money is earned by players of Type A, B and C, depending on the quantity produced. 
            See the example below.
        </p>

        <p>
            You will be assigned to be either a Type A or a Type B, and you will remain that type throughout today’s session. 
            Type C players are passive. 
            Any money given to Type C players will be paid by the experimenter to a charitable organization called Helen Keller International, which combats malnutrition, provides life-saving medical treatments, and treats vision deficits among children and families across the world and has been rated by GiveDirectly as a top charity in terms of impact-per-dollar.
            Please note that these are real payments that we will make to this charity at the end of the data collection.
            We will list the total amount paid to the charity in the paper reporting the results of this experiment.
        </p>

        <p>For today’s session, you will be of Type {{ mytype }}.</p>

        <p>
            In total, there are six (6) players in your group who may be affected by your decisions.
            There are four (4) active players in your group, two (2) of Type A and two (2) of Type B.
            There are also two (2) passive Type C players (representing the charity), who may be affected by your choice.
        </p>

        <div id="Example Task">

            <p style="text-align: center;"><strong>Example</strong></p>

            <section class="top-half">

                <!-- <section class="round-information">
                    <p> 
                        <strong>Round:</strong> {{ exp_round }} &nbsp; | &nbsp;
                        <strong>Task:</strong> {{ task_number }} &nbsp; | &nbsp;
                        <strong>Your type:</strong> {{ mytype }} &nbsp; | &nbsp;
                        <strong>Time remaining:</strong> --
                    </p>
                </section> -->
        
                <section class="graph-chat" style="display: flex;">
        
                    <section class="graph" style="width: 60%;">
                        <div id="graph_to_show"></div>
                        <input type="range" name="quantity_accept" id="lineSlider" min="0" max="10" step="0.1" value="0" class="slider" >
                        <label for="lineSlider" class="slider-label" style="width: 100%; margin: 0px; text-align: center">Use Slider to Adjust Quantity</label>
                    </section>
        
                </section>
        
            </section>

            <br>
        
            <section class="bottom-half" style="display: flex;">
        
                <div class="payoffs-left" style="display: flex; width: 49%;">
        
                    <div class="proposal-container" style="width: 49%;">
                        <p>Your Proposal:</p>
                        <div class="values" id="functionValues"></div>
                    </div>
        
                </div>
        
            </section>

        </div>

        <p>
            In the example above, you can see the quantity you chose and the payoffs for each type from a Task and this will be same for everyone in your group in each Task. 
            Earnings for Type A players for different quantities are represented by the <span style="color: rgb(68, 119, 170);">dark blue line</span> on the graph. 
            Similarly, earnings for Type B players for different quantities are represented by the <span style="color: rgb(102, 204, 238);">light blue line</span> on the graph, and earnings for Type C players are represented by the <span style="color: rgb(238, 102, 119);">red line</span>.
        </p>

        <p>
            At the end of the experiment, one of the Tasks from one of the Rounds will be randomly selected as the “Task that counts for payment”. 
            Your earnings will be determined by the decision of players(s) of your group in that Task. 
        </p>

        <p>
            Currently, the slider shows the quantity of <span id="example_q">?</span>.
            If this Task is chosen as the Task that counts, two <span style="color: rgb(68, 119, 170);">Type A</span> players will each earn <span id="example_pa">?</span>, two <span style="color: rgb(102, 204, 238);">Type B</span> players will each earn <span id="example_pb">?</span>, and two <span style="color: rgb(238, 102, 119);">Type C</span> (charity) players will each earn <span id="example_pc">?</span>.
        </p>

        <p>
            More details on this will come next.
        </p>
    
    
        <div style="text-align: center;">
            {{ next_button }}
        </div>

    </div>

{{ endblock }}

{{ block scripts }}

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.2.1/math.min.js" integrity="sha512-hNhZseI4UffZ3L9lqew2Jqi11l/m7ZSf1snwdIjC9vqi4DCzMf4pip+rlMMD+5LQbzCA15ebOEOGLnMu0vd+eg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{% static 'global/js/Graph_Mouli_V2.js' %}"></script>
    <link rel="stylesheet" href="{% static 'global/empty.css' %}">

    <script type="text/javascript">

        let sliderElement = document.getElementById('lineSlider');

        let equationsToPlot = js_vars.equations[js_vars.param_number-1];
        const equationColors = js_vars.colors;

        graph_to_show = new Graph(functionsToPlot=equationsToPlot, colors=equationColors, num=1);

        const example_q = 4;

        graph_to_show.moveVerticalLine(example_q);
        graph_to_show.plotFunctions(example_q);
        sliderElement.value = example_q;

        var currentypeAPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["A"],example_q);
        var currentypeBPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["B"],example_q);
        var currentypeCPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["C"],example_q);

        document.getElementById("example_q").innerHTML = example_q;
        document.getElementById("example_pa").innerHTML = currentypeAPayoff;
        document.getElementById("example_pb").innerHTML = currentypeBPayoff;
        document.getElementById("example_pc").innerHTML = currentypeCPayoff;

        sliderElement.addEventListener('input', function() {

            const currentSliderQuantity = parseFloat(this.value);             // 1. Read slider's value as a float
            graph_to_show.moveVerticalLine(currentSliderQuantity);            // 2. Move the vertical line on the Plotly graph

            currentypeAPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["A"],currentSliderQuantity);
            currentypeBPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["B"],currentSliderQuantity);
            currentypeCPayoff = graph_to_show.evaluateFunctionAt(equationsToPlot["C"],currentSliderQuantity);

            document.getElementById("example_q").innerHTML = currentSliderQuantity;
            document.getElementById("example_pa").innerHTML = currentypeAPayoff;
            document.getElementById("example_pb").innerHTML = currentypeBPayoff;
            document.getElementById("example_pc").innerHTML = currentypeCPayoff;
        
        });

    </script>

{{ endblock}}