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

{% block title %}
    Algorithm Support
{% endblock %}

{% block content %}
    An algorithm has determined a demand forecast for the {{ total_number_products }} products. 
    It calculates the forecast for a product by following three steps: 1 - conducting a <b>linear regression</b>, 2 - <b>checking for a trend</b> in the demand history and 3 - <b>computing a forecast</b> that considers a trend if applicable.
    <br>
    <br>
    In the following, the procedure of the algorithm is explained in detail:
    <br>
    <br>
    <b>1 - Linear Regression</b>
    <br>
    The algorithm determines a linear function with the time as the independent variable and the function value as the dependent variable that fits best to the demand history. 
    The parameters of the linear function, that is, the intercept and the slope, are determined, such that the sum of the squared distances between the function values and the actual historical demands is minimized. 
    This method is called linear regression. This estimation describes a linear relationship between time \(t\) and demand. Mathematically, it can be written as:
    <br>
    \[\text{Demand for Period t} = a+b*t\]
    The coefficient \(a\) is the intercept at \(t=0\). The coefficient \(b\) indicates how the demand changes from period to period and is referred to as slope.
    <br>
    <br>
    <b>2 - Trend Check</b>
    <br>
    The algorithm uses the \(p\)-value as an indication of the significance of the slope. The \(p\)-value states the probability that the slope parameter is not significant. 
    A non-significant slope parameter \((p\geq5\%\)) indicates that the demand data have no trend.
    <br>
    <br>
    <b>3 - Forecast</b>
    <br>
    If the \(p\)-value is less than 5%, the estimation  of Step 1 is used to calculate the forecast of Period \(t=11\):
    <br>
    \[\text{Demand Forecast for Period 11} = a+b*11\]
    If the \(p\)-value is greater than or equal to 5%, the regression of Step 1 is repeated with a constraint on the slope of \(b=0\).
    <br>
    \[\text{Demand Forecast for Period 11} = c\]
    <br>
    <br>
    <hr>
    <h4>Example 1</h4>
    <br>
   <!-- <b>Example:</b>-->
    <figure class="highcharts-figure">
        <div id="container"></div>
        <p class="highcharts-description">
        </p>
    </figure>
    <br>
    The algorithmic demand forecast for Period \(t=11\) is computed by:
    <br>
    <br>
    <b>1 - Linear Regression</b>
    <br>
    The demand estimation that fits best into the demand history is:
    <br>
    \[\text{Demand for Period t} = 407+17*t\]
    <b>2 - Trend Check</b>
    <br>
    The slope parameter is <b>not significant</b> (\(p=41\%>5\%\)).
    <br>
    <br>
    <b>3 - Forecast</b>
    <br>
    The algorithm fits a linear regression <b>without trend</b>. The demand forecast for Period \(t=11\) is: \(500\)
    <br>
    <br>
    <br>
    <br>
    <br>
    <h4>Example 2</h4>
    <br>
   <!-- <b>Example:</b>-->
    <figure class="highcharts-figure">
        <div id="container2"></div>
        <p class="highcharts-description">
        </p>
    </figure>
    <br>
    The algorithmic demand forecast for Period \(t=11\) is computed by:
    <br>
    <br>
    <b>1 - Linear Regression</b>
    <br>
    The demand estimation that fits best into the demand history is:
    <br>
    \[\text{Demand for Period t} = 360+27.27*t\]
    <b>2 - Trend Check</b>
    <br>
    The slope parameter is <b>significant</b> (\(p=3\%<5\%\)).
    <br>
    <br>
    <b>3 - Forecast</b>
    <br>
    The algorithm uses the linear regression <b>with trend</b>. The demand forecast for Period \(t=11\) is: \(360+27.27*11\approx660\).
    <hr>
    <br>
    In the following, you will see the {{ total_number_products }} products again. You will see your initial forecast and the forecast of the algorithm. If you wish, you can update your final forecast for the product.
    <br>
    <br> 
    <b>Your bonus reward will only depend on the final forecast.</b>
    <br>
    <br>
    <hr>
    Please tell us what you think about the algorithm:
    <br>
    {{ questionnaire_1 }}
    <!-- <button type="button" class="normal-button" onclick="saveSelection()">Test</button> -->
    <br>
    <br>
    <button class="otree-btn-next btn btn-primary next-button otree-next-button" id="Next_Button" style="float: right;">Next</button>
    <br>
    <br>
    <p style="text-align:right">Please <b>answer all questions to continue.</b></p>
    <!-- Input Tags to get Data from oTree -->
    <!-- <input type="hidden" name="{{ questionnaire_1 }}" id="id_questionnaire_1" /> -->

    <!-- Input Tags to record answers -->
    <input type="hidden" name="questions_aft_explain_answers" id="id_answers" />

    <!-- Debug Information -->
    {{ formfield_errors 'questions_aft_explain_answers' }}

    <script>
        // $('#questionnaire_placeholder').html(document.getElementById("id_questionnaire_1").name);
        
        //When the window is loaded we assign the onclick functions
        $(function(){
            checkIfAllQuestionsAnsweredAndSave();
            $(".answer").click(function(){
                checkIfAllQuestionsAnsweredAndSave();
            })
            
        });
    
        //Check if all questions are answered and try to save
        function checkIfAllQuestionsAnsweredAndSave(){
            var table = document.getElementById("likert_table");
            var rows = table.rows;
    
            var answers = [];
            console.log("Länge Rows ist " + rows.length);
            console.log("Schleife bis " + (rows.length - 2)/2);
            try{ 
                for(var i = 1; i <= (rows.length - 2)/2; i++){
                    console.log(i);
                    
                    var answer = document.querySelector('input[name=q_' + i.toString() + ']:checked').value;
                    answers.push(answer);
                }
                console.log(answers);
                document.getElementById("id_answers").value = answers;
                document.getElementById("Next_Button").disabled = false;
            }
            catch(err){
                document.getElementById("Next_Button").disabled = true;
                console.log(err);
            }  
        }
    
    </script>

    <!-- HighCharts Libraries for the line chart -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <!-- MathJax Libraries for math formulas -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async  
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">  </script>

    <script type="text/javascript"  language="javascript" >

    

    //When the window is loaded we assign the onclick functions
    // $(function(){
    //     $('#demand_table_placeholder').html(document.getElementById('id_demand_table').name);
    // });

    Highcharts.chart('container', {

        title: {
            text: 'Demand History for an Example Product 1'
        },

        credits: {
            enabled: false
        },

        yAxis: {
            min: 0,
            tickInterval: 100,
            title: {
                text: 'Units'
            }
        },

        xAxis: {
            title: {
                text: 'Periods'
            }
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                label: {
                    connectorAllowed: false
                },
                pointStart: 1
            }
        },

        series: [{
            name : ' ',
            data: [300, 400, 700, 500, 300, 400, 700, 800, 500, 400]
        }],

  

        legend: {
            enabled: false
        },

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }

        });

        Highcharts.chart('container2', {

        title: {
            text: 'Demand History for an Example Product 2'
        },

        credits: {
            enabled: false
        },

        yAxis: {
            min: 0,
            tickInterval: 100,
            title: {
                text: 'Units'
            }
        },

        xAxis: {
            title: {
                text: 'Periods'
            }
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                label: {
                    connectorAllowed: false
                },
                pointStart: 1
            }
        },

        series: [{
            name : ' ',
            data: [300, 400, 600, 500, 400, 600, 500, 500, 700, 600]
        }],



        legend: {
            enabled: false
        },

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }

        });
       
    </script>

{% endblock %}