Darstellung Schieberegler: einzeln versetzt anzeigen

Question

Liebes SoSci-Team,

ich möchte auf einer Fragebogenseite insgesamt 48 Schieberegler verwenden - diese sind bereits angelegt. Die Regler sollen aber nicht alle untereinander und parallel zueinander dargestellt werden, sondern jeweils leicht nach links oder rechts versetzt sein, idealerweise zufällig. Gibt es hierfür eine Möglichkeit?

Viele Grüße

Comments

Was genau möchten Sie horizontal verschieben ... die ganzen Items (Zeilen mit Text und Box), die Schieberegler-Grafik, nur den Regler, oder etwas ganz anderes?

---

Verschoben werden soll aber jeweils sowohl Grafik + Regler. Ziel ist, dass die Schieberegler (Grafik + Regler) nicht direkt untereinander angezeigt werden (z.B. Regler-Item 1 - Mittig; Regler-Item 2 - y pixel nach links verschoben; ...). Wäre es z.B. auch möglich die einzelnen Boxen zu verschieben?

---

> Wäre es z.B. auch möglich die einzelnen Boxen zu verschieben?

Sowohl hinter den umgebenden "Boxen" als auch hinter den Schiebereglern liegen HTML-Elemente. Diese kann man mittels JavaScript und CSS manipulieren - zum Beispiel eine relative Positionierung einstellen und dann die Verschiebung erledigen.

> idealerweise zufällig

Dafür müssten Sie die Verschiebung erstmal im Fragebogen definieren und in inerne Variablen speichern (damit Sie in der Auswertung wissen, welche Zeile wohin verschoben wurde).

Und dann müssten Sie diese Werte an ein JavaScript (auf der Seite, unter den Schiebereglern) übergeben, welches sich dann um die Verschiebung kümmert.

---

ok, super, das ist schonmal gut zu wissen.

Welche JavaScript Funktion benötige ich denn für die Verschiebung? Also wie würde das konkret aussehen?

Answer 1

Welche JavaScript Funktion benötige ich denn für die Verschiebung?

Wenn Sie einen Pretest-Link direkt (!) zur betroffenen Seite posten, kann ich es ein wenig konkretisieren. Aber abstrakt gesprochen, brauchen Sie erstmal das Element, das Sie verschieben möchten - i.d.R. anhand der HTML-ID, z.B.

document.getElementById("AB01_xyz")

Und von diesem Element manipulieren Sie dann die Stil-Eigenschaften:

document.getElementById("AB01_xyz").style.position = "relative";
document.getElementById("AB01_xyz").style.left = "5px";

Comments

Super, hier ist der Pretest-Link (direkt die erste Seite): https://www.soscisurvey.de/test301368/?act=ePpHOmhb6doDZilFpGNLgFyO

Wie würde der Code denn insgesamt aussehen? Ich habe es schon mit "window.addEventListener("load", document.getElementById("AB01_xyz").style.left = "5px";) probiert, das hat aber nicht geklappt.

---

Hier mal ein funktionierter Code für ein Item

document.getElementById("ST03_03_button").parentNode.style.position = "relative";
document.getElementById("ST03_03_button").parentNode.style.left = "10px";

Wenn Sie das für die große Anzahl Schieberegler machen möchten, dann würde ich das in eine Funktion packen - oder in eine Schleife, welche direkt (aus dem PHP-Code heraus via json_encode() kodiert und mittels Platzhalter eingefügt) ein Array (Objekt) aus Item-Nummern und Verschiebung bekommt, also z.B.

$verschiebungen = [
  1 => 7,
  2 => -5,
  3 => 2,
];
show('JS01', ['%changes%' => json_encode($verschiebungen)]);

Und dann im JS-Code:

var changes = %changes%;
for (var itemID in changes) {
  // ....
}

---

top, das funktioniert perfekt!