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

{% block title %}
 
{% endblock %}

{% block content %}

    <p>
       <b>Nun noch ein paar Fragen zum Schluss.</b>
    </p>

    {% formfields %}

    {% next_button %}

{% endblock %}

{{ block scripts }}
<script>
    let fields = [
        {
            id: "patience",
            scale_label_01: "Überhaupt nicht bereit, dies zu tun",
            scale_label_02: "Sehr bereit dies zu tun"
        },
        {
            id: "altruism2",
            scale_label_01: "Überhaupt nicht bereit, dies zu tun",
            scale_label_02: "Sehr bereit dies zu tun"
        },
        {
            id: "posreci",
            scale_label_01: "Beschreibt mich überhaupt nicht",
            scale_label_02: "Beschreibt mich perfekt"
        },
        {
            id: "procras",
            scale_label_01: "Beschreibt mich überhaupt nicht",
            scale_label_02: "Beschreibt mich perfekt"
        },
        {
            id: "politicalwing",
            scale_label_01: "links",
            scale_label_02: "rechts"
        }
    ]

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