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

{% block title %}

{% endblock %}

{% block content %}

    <p>
        <br>
    </p>

    <p>
    {% formfield 'percaction' %}
    </p>
    <br>
    <img src="{% static 'bonus.png' %}"/>
    <p>{% formfield 'percnorm'%}</p>
    <p>
        <br>
        {% formfield 'stocks' %}
    </p>
    <p></p>
    <br>
    Inwieweit stimmen Sie folgenden Aussagen zu:
    
        {% formfield 'finknow' %}
    
    <p>
        {% formfield 'finesgmore' %}
    </p>
    <p>
        {% formfield 'finesgimpact' %}
    </p>
    <p>
        {% formfield 'finmoral' %}
    </p>
    <p></p>
    <br>
    Stellen Sie sich vor, Sie hätte heute die Möglichkeit, zu entscheiden, wie Sie das Geld, das Sie sparen möchten, in Zukunft anlegen.
    
        {% formfield 'habitinvest' %}
    
   

    {% next_button %}
    <script>
        let fields = [
            {
                id: "finknow",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "finesgmore",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "finesgimpact",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            },
            {
                id: "finmoral",
                scale_label_01: "stimme überhaupt nicht zu",
                scale_label_02: "stimme voll und ganz zu"
            }
            
        ]
    
        fields.forEach(field => {
            let label = document.querySelector(`label.col-form-label[for=id_${field.id}]`);
            let control = label.nextElementSibling || label.nextSibling;
            let scale_label_01 = document.createElement("div");
            let scale_label_02 = document.createElement("div");
            scale_label_01.classList.add("scale-label");
            scale_label_02.classList.add("scale-label");
            scale_label_01.textContent = field.scale_label_01;
            scale_label_02.textContent = field.scale_label_02;
            control.prepend(scale_label_01);
            control.append(scale_label_02);
            control.classList.add("with_labels");
        });
    </script>
{% endblock %}