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

{% block title %}
    About yourself
{% endblock %}

{% block content %}

    Please answer the following questions about yourself:
    <br>
    <br>
    <br>
    {{ questionnaire_1 }}
    <!-- <button type="button" class="normal-button" onclick="saveSelection()">Test</button> -->
    <br>
    <br>

    {% formfield player.gender%}

    {% formfield player.age%}

    {% formfield player.education%}
    
    <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_personal_answers" id="id_answers" />

    <!-- Debug Information -->
    {{ formfield_errors 'questions_personal_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>

    
{% endblock %}