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

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

{% block content %}
    An <b>algorithm has determined a demand forecast</b> for the {{ total_number_products }} products.
    The algorithm applies <b>artificial intelligence</b>: it is a <b>neural network</b> that imitates the human brain. It uses elements called neurons to process information, analyze complex problems, and make decisions.
    <br>
    <br>
    Our neural network consists of an input layer and an output layer:
    <br>
    <br>
    <img src="/static/img/fc_neural_network_explanation.JPG" alt="The basic structure of a Neural Network" width="940">
    <br>
    <br>
    The <b>input layer</b> is the <b>demand history</b>. Each demand in the demand history is one input node. Moreover, the algorithm contains a bias node. 
    The result of the <b>output layer</b> is the <b>demand forecast for period 11</b>.
    <br>
    <br>
    The algorithm calculates the demand forecast for period 11 for a product by executing the following steps:
    <br>
    <br>
    <ol>
        <li> 
            It normalizes the demands of the demand history to values between 0 and 1:
            <br>
            \[\text{demand period }t_{norm} = \frac{\text{demand period }t - \text{demand}_{min}}{\text{demand}_{max} - \text{demand}_{min}}\]
            <br>
            \(\text{demand}_{min}\) and  \(\text{demand}_{max}\) are the minimum and maximum demand values observed so far.
            <br>
            <br>
        </li>
        <li>
            It multiplies the normalized demands and the bias unit with the weights \(w_1,…,w_{10},w_{bias}\):
            <br>
            \[\text{weighted demand period }t_{norm} = \text{demand period }t_{norm} \cdot w_t\]
            <br>
        </li>
        <li>
            It sums up all weighted demands and the weighted bias node:
            <br>
            \[\text{demand forecast period }11_{norm} = \text{weighted demand period }1_{norm} + ... + \text{weighted demand period }10_{norm} + \text{weighted bias node}_{norm}\]
            <br>
        </li>
        <li>
            It transforms the normalized values back to real values:
            <br>
            \[\text{demand forecast period }11 = \text{demand forecast period }11_{norm} \cdot {(\text{demand}_{max} - \text{demand}_{min})} + \text{demand}_{min}\]
            <br>
        </li>
    </ol>
    To compute a forecast for period 11, the weights \(w_1,…,w_{10},w_{bias}\) are required. The algorithm has been trained with <b>100,000 structurally similar demand 
    histories</b> to determine appropriate weights. 
   <!--   <br>
    The neural network determines a forecast for period 11 using the weights \(w_1,…,w_{10},w_{bias}\). To estimate these weights, the neural network is trained with <b>100,000 structurally similar demand 
    histories</b>.-->
    <br>
    <hr>
    <h4>Example</h4>
    <br>
   <!-- <b>Example:</b>-->
    <figure class="highcharts-figure">
        <div id="container"></div>
        <p class="highcharts-description">
        </p>
    </figure>
    <!-- Being trained with <b>100,000 structurally similar demand histories</b>, the neural network suggests a demand forecast of <b>500 units</b> for Period 11.
    -->
    <br>
    The following table displays the results of steps 1 to 4 of the algorithm: the demands, normed demands, weights and weighted normed demands for the demand history 
    (periods 1 to 10). Finally, the normed demand forecast for period 11 is transferred back to real values. 
    <br>
    Having been trained with <b>100,000 structurally similar demand histories</b>, the neural network suggests a demand forecast of <b>500 units</b> for Period 11.
    <br>
    <br>
    {{ nn_table }} 
    <br>
    <hr>
    <br>
    In the following, <b>you will see the {{ total_number_products }} products again</b>. You will see your <b>initial forecast</b> and the <b>forecast of the algorithm</b>. If you wish, <b>you can update your final forecast</b> 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 type="hidden" name="{{ nn_table }}" id="id_nn_table" /> -->

    <!-- 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(){
            // document.getElementById('nn_table_placeholder').innerHTML = document.getElementById('id_nn_table').name

            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'
        },

        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'
                    }
                }
            }]
        }

        });

       
    </script>

{% endblock %}