0 votes
in SoSci Survey (dt.) by s107216 (250 points)

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

by SoSci Survey (297k points)
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?
by s107216 (250 points)
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?
by SoSci Survey (297k points)
> 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.
by s107216 (250 points)
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?

1 Answer

+1 vote
by SoSci Survey (297k points)
selected by s107216
 
Best answer

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";
by s107216 (250 points)
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.
by SoSci Survey (297k points)
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) {
  // ....
}
by s107216 (250 points)
top, das funktioniert perfekt!

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...