Kopfzeile mit Fenster scrollen

Question

Hallo!

Ich habe eine Frage mit 5 Items, die auf Schiebereglern/ Slidern von 0 bis 100% beantwortet werden sollen.

Mit JavaScript habe ich einen Textbaustein auf dieselbe Fragebogenseite eingefügt, in dem die aktuelle Summe der Schieberegler berechnet wird.

<script type="text/javascript"> 

//Summe interaktiv auf der Seite anzeigen

window.addEventListener("load", function() {
    var slider = s2.CC03;
    var items = slider.items;
 
    function refresh() {
        var sum = 0;
        for (var key in items) {
            var value = items[key].value;
            if (value > 0) {
                sum += Math.round(value) - 1;
            }
        }

        document.getElementById("output_prozent").innerHTML = sum;
    }
 
    for (var key in items) {
        items[key].addEventListener("change", refresh);
    }
    refresh();
});

</script>

Mit dem Ausdruck - kann ich dann diese Summe auf der Seite live anzeigen lassen. Momentan steht dieser Ausdruck in der Instruktion der Frage selbst (CC03).

Unter "Kopfzeile und Items" habe ich ausgewählt, dass die Kopfzeile mit dem Fenster mitscrollen soll. Leider scrollt er die Instruktion im Pretest Link nicht mit (im Preview Modus allerdings schon).

Wenn ich den Ausdruck - als Kopfzeile einfüge, kann er wiederum die Summe nicht anzeigen, es erscheint nur ein "-".

Haben Sie eine Idee, wie ich die aktuelle Summenanzeige mit dem Browserfenster mitlaufen lassen kann - sowohl für Desktop als auch für Smartphone-Nutzer?

Vielen Dank für Ihre Hilfe!
Mit freundlichen Grüßen

Hier der Pretest-Link: https://www.soscisurvey.de/parentingbehaviour/?act=24TWwV2TYNcuuRc965rof1R7 (betrifft S. 14, 16 und 18)

Comments

Der Ausdruck lautet: "Aktuell haben Sie   <b><span id="output">-</span></b> Stunden vergeben."

Answer 1

Ob die Instruktionen mitscrollen oder nicht, das hängt von deren Höhe, der Höhe der Verankerung und der verfügbaren Bildschirm-Höhe ab. Deshalb kann es in der Vorschau und im Pretest (also dann im großen Fenster) zu unterschiedlichem Verhalten kommen.

Aber in Ihrem Fall verschwindet die Anzeige einfach nur hinter der orangen Info-Leiste des Pretests. Wenn Sie den Fragebogen mit dem grünen Knopf unter Fragebogen zusammenstellen starten, sollte die Anzeige brav mitscrollen.

Wenn das noch nicht in allen Variationen ausreicht, könnte man Element noch mit dem CSS-Code display: sticky; top: 10px; fixieren.