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

{% block title %}
    Questionnaire
{% endblock %}

{% block content %}

    <b>Please answer the following questions with respect to the algorithm and its recommendations:</b>
    <br>
    <br>
    {{ questionnaire_1 }}
    {{ formfield_errors 'questions_trust_answers'}}

    <!-- <button type="button" class="normal-button" onclick="saveSelection()">Test</button> -->
    <br>
    <hr>
    <b>Please answer the following questions about yourself:</b>
    <br>
    <br>
    {% formfield player.gender%}

    {% formfield player.age%}

    {% formfield player.education%}
    <br>
    <p id="message"><br></p>
    <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_trust_answers" id="id_answers" />
    <!-- <input type="hidden" name="questions_appropriateness_answers" id="id_answers_appropriateness" /> -->

    <!-- Debug Information -->
    {{ form.errors }}
   
    <script>
     $('#questionnaire_placeholder').html(document.getElementById("id_questionnaire_1").name);
    
    
    //When the window is loaded we assign the onclick functions
    $(function(){
        
        var show_trust_question = document.getElementById("id_questionnaire_1").name

        // if(show_appropriateness_question == 1){
        //     $('#questionnaire_appropriateness_placeholder').html(document.getElementById("id_questionnaire_appropriateness").name);
        // }
        
        checkIfAllQuestionsAnsweredAndSave();
        $(".answer").click(function(){
            checkIfAllQuestionsAnsweredAndSave();
        })

        
        
    });

    //Check if all questions are answered and try to save
    function checkIfAllQuestionsAnsweredAndSave(){
        var show_trust_question = document.getElementById("id_questionnaire_1").name

        var table = document.getElementById("likert_table");
        var rows = table.rows;
        var answers = [];

        var show_trust_question = document.getElementById("id_questionnaire_1").name
        var rows_a_lenght = 4; //DAS IST HIER HART REIN GECODED!!!!!!!!
        
        var answers_a = [];
        
        console.log("Länge Rows ist " + rows.length);
        console.log("Schleife bis " + (rows.length - 2)/2);
        try{
            //Perceived value questionnaire
            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;

            //Appropriateness questionnaire
            for(var i = 1; i <= (rows_a_lenght - 2)/2; i++){
                console.log(i);
                
                if(show_trust_question==0){
                    var answer = 0;
                }else{
                    var answer = document.querySelector('input[name=q_a_' + i.toString() + ']:checked').value;
                }
                
                answers_a.push(answer);
            }
            console.log(answers_a);
            document.getElementById("id_answers_questionnaire_1").value = answers_a;

            //If all has worked (i.e. all answers were given), the Next button is enabled
            document.getElementById("Next_Button").disabled = false
        }
        catch(err){
            document.getElementById("Next_Button").disabled = true;
            console.log(err);
        }  
    }

    </script>

    
{% endblock %}