0 votes
in SoSci Survey (dt.) by s137634 (700 points)

Guten Tag,

für mein Projekt sollen die Probanden zunächst eine Frage vom Typ "Horizontale Auswahl" beantworten und danach ein Schieberegler eingeblendet werden, wo sie ihre subjektive Sicherheit für die beantwortete Frage ausdrücken können. Ich habe mich dafür auf der folgenden Seite informiert,

https://www.soscisurvey.de/help/doku.php/de:create:dynamic

und versucht, den JavaSkript-Code unter "Beispiel : Sichtbare Auswahl" für meine Zwecke anzupassen. Sprich, der Schieberegler mit der Kennung LG05_01 soll immer angezeigt werden, egal welche Antwortoption der Frage LG01 angeklickt wird. Das gilt ebenso für die Ausweichoption mit der Kennung "-1" (die ich in diesem ersten Versuch der Anpassung zunächst außen vor gelassen hatte).

Leider funktioniert der Code nicht und da ich wenig Ahnung von JavaSkript habe, weiß ich leider auch nicht genau, woran das liegt. Wie genau müsste ich den modifizieren, damit der Schieberegler erst später eingeblendet wird?

LG und vielen Dank im Voraus!

by SoSci Survey (302k points)
Für eine qualifizierte Antwort bräuchte ich bitte noch 2 Informationen:

1. Eine kurze Beschreibung: Was funktioniert und was nicht?

2. Einen Pretest-Link direkt (!) zur betroffenen Seite, dann kann ich nämlich einen Blick in die JavaScript-Fehlerkonsole des Browsers werfen. Es wäre nicht das erste mal, dass irgend eine Kleinigkeit (z.B. eine fehlende Klammer) das Problem verursacht. Und dann ist es zweckmäßig, das in den Fehlermeldungen nachzusehen anstatt stundenlang zu suchen.
by s137634 (700 points)
1. Die Seite wird zwar normal dargestellt, aber die Fragen werden beide gleichzeitig eingeblendet. Die Aufgabe des Java-Skripts, den Schieberegler zu verbergen, bis eines der Bilder ausgewählt wurde, wird nicht ausgeführt. Ich hoffe, dass das ausführlich genug ist?

2. https://www.soscisurvey.de/test196703/?act=yAeFCNrUzqLSD24l8L7rNXCM
ist der Pretest Link zu der Seite. Ich hoffe, dass das hilfreich ist. Falls noch Informationen fehlen, trage ich diese gerne nach.

Vielen Dank und LG
by SoSci Survey (302k points)
Die JavaScript-Fehlerkonsole im Browser sagt:

> SyntaxError: missing ( before condition

Mit Bezug auf folgende Zeile:

>  // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt?
>  if <span class="S2Tooltip anchor marker">optionA.checked) </span><span class="S2Tooltip container"><span class="S2Tooltip tiptext rounded shadow">| (optionB.checked) || (optionC.checked) || (optionD.checked) || (optionE.checked) || (optionF.checked</span></span> {
    // Wurde etwas ausgewählt, dann wird die Frage angezeigt
 
Genau, das haben Sie so nicht geschrieben. Hier hat unbeabsichtigt die Funktion für Pop-Up-Fenster zugeschlagen.

Bitte entfernen Sie einfach die Klammern und optionA.checked sondern nur einmal außenherum:

if (optionA.checked || optionB.checked || ...

Es wundert mich, dass der Fehler noch auftritt. Eigentlich hatten wir die Funktion so angepasst, dass die Fehlererkennung verhindert wird. Sehen wir uns gleich nochmal an...
by s137634 (700 points)
Vielen Dank für Ihre Nachricht, leider funktioniert mein Skript auch nach Entfernen der Klammern immer noch nicht. Die beiden Fragen werden weiterhin gleichzeitig angezeigt.
(Die Änderung müsste auch für den Pretest-Link oben gespeichert sein, sofern dieser Änderungen im Fragebogen übernimmt)

So sieht der Abschnitt nun aus:

function toogle() {
  // Die zwei Pipes (||) sind ein logisches "Oder"
  // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt?
  if (optionA.checked || optionB.checked || optionC.checked || optionD.checked || optionE.checked || optionF.checked) {
    // Wurde etwas ausgewählt, dann wird die Frage angezeigt
    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
    frage.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
  }
}
by SoSci Survey (302k points)
Gut, die nächste Fehlermeldung ist

>  No element specified for SoSciTools.attachEvent()

Das bezieht sich auf diese Zeile:

> SoSciTools.attachEvent(optionA, "click", toogle);

und bedeutet, dass optionA nicht definiert ist. Das wiederum liegt daran, dass die HTML-IDs der Auswahlfelder noch ein "a" am Ende hat. Korrekt also:

var optionA = document.getElementById("LG01_01a");  // HTML-ID der Auswahloption "D1"
var optionB = document.getElementById("LG01_02a");  // Option "D2"
var optionC = document.getElementById("LG01_03a");  // Option "D3"
var optionD = document.getElementById("LG01_04a");  // Option "D4"
var optionE = document.getElementById("LG01_05a");  // Option "D5"
var optionF = document.getElementById("LG01_06a");  // Option "T1"
by s137634 (700 points)
gut, auch das habe ich entsprechend angepasst. Aber es scheint leider noch mehr Probleme in dem Skript zu geben.

<script type="text/javascript">
<!--
var optionA = document.getElementById("LG01_01a");  // HTML-ID der Auswahloption "D1"
var optionB = document.getElementById("LG01_02a");  // Option "D2"
var optionC = document.getElementById("LG01_03a");  // Option "D3"
var optionD = document.getElementById("LG01_04a");  // Option "D4"
var optionE = document.getElementById("LG01_05a");  // Option "D5"
var optionF = document.getElementById("LG01_06a");  // Option "T1"
var frage = document.getElementById("LG05_01a");  // HTML-ID der Texteingabe


function toogle() {
  // Die zwei Pipes (||) sind ein logisches "Oder"
  // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt?
  if (optionA.checked || optionB.checked || optionC.checked || optionD.checked || optionE.checked || optionF.checked) {
    // Wurde etwas ausgewählt, dann wird die Frage angezeigt
    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
    frage.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
  }
}
 
// Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);
SoSciTools.attachEvent(optionE, "click", toogle);
SoSciTools.attachEvent(optionF, "click", toogle);
 
// Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist
// (z.B. ausblenden der Texteingabe zu Beginn)
toogle();
// -->
</script>
by SoSci Survey (302k points)
Sehen Sie die Fehlermeldungen gerne auch selbst in der Fehlerkonsole Ihres Browser ein. Die nächste lautet:

> frage is null

Die Variable frage wird hier definiert:

> var frage = document.getElementById("LG05_01a");

Da hatten Sie ja bereits ein Fragezeichen in Ihrem ursprünglichen Code. Die korrekte Kennung lautet hier "LG05_qst" also

> var frage = document.getElementById("LG05_qst");
by s137634 (700 points)
Vielen Dank für Ihre Antwort, es scheint nun zu funktionieren.

Ich habe noch zwei Fragen zu dem Skript:
Zum einen möchte ich darin implementieren, dass der Schieberegler auch angezeigt wird, wenn die Auswahloption angezeigt wird. Zum anderen wäre es hilfreich, wenn zusammen mit dem Schieberegler auch ein Textbaustein eingeblendet wird. Da ich wie gesagt wenig Ahnung von JavaScript habe: Wie würde man dies in dem Code formulieren?

1 Answer

+1 vote
by SoSci Survey (302k points)

Sehr schön, wenn es nun funktioniert :)

Zum einen möchte ich darin implementieren, dass der Schieberegler auch angezeigt wird, wenn die Auswahloption angezeigt wird.

Sie meinen die Ausweichoption, oder? Deren Kennung ist LG01_R1a - einfach wie eine "normale" Option behandeln.

Zum anderen wäre es hilfreich, wenn zusammen mit dem Schieberegler auch ein Textbaustein eingeblendet wird.

Sie müssen dafür nur das

frage.style.display = "";

um eine weitere Zeile ergänzen, welche den Text einblendet. Also oben eine Variable definieren, welche den Text repräsentiert, z.B.

var frage = document.getElementById("LG05_qst");
var text = document.getElementById("LG06_qst");

Und dann weiter unten

frage.style.display = "";
text.style.display = "";

und noch weiter unten natürlich auch

frage.style.display = "none";
text.style.display = "none";
by s137634 (700 points)
Vielen Dank :)

Leider... funktioniert es immer noch nicht ganz so, wie es soll.

Nun kann ich zwar die Ausweichoption anklicken und der Schieberegler erscheint, aber leider funktioniert das mit dem Text noch nicht. Er wird weiterhin direkt eingeblendet. Hängt das ggf. mit der Benennung des Textes ("Fragetext GS02") zusammen?

Zudem wird der Schieberegler nun anfänglich nicht mittig auf der Skala platziert angezeigt, sobald diese erscheint. Stattdessen befindet er sich darunter und springt beim anklicken zurück an seinen eigentlichen Platz (wenn auch nicht mittig). Gibt es dafür eine Lösung mit JavaSkript oder muss das in den Einstellungen der Frage angepasst werden?

Hier ist noch einmal der Pretest-Link:
https://www.soscisurvey.de/test196703/?act=yAeFCNrUzqLSD24l8L7rNXCM

(Ich könnte selbst mit der Konsole suchen, wo die Fehler im Skript liegen. Das Problem ist, dass ich sie trotzdem nicht beheben kann, weil ich JavaSkript nicht kenne und nicht verstehe, was falsch ist. Deswegen Vielen Dank für Ihre Geduld!)

<script type="text/javascript">
<!--
var optionA = document.getElementById("LG01_01a");  // HTML-ID der Auswahloption "D1"
var optionB = document.getElementById("LG01_02a");  // Option "D2"
var optionC = document.getElementById("LG01_03a");  // Option "D3"
var optionD = document.getElementById("LG01_04a");  // Option "D4"
var optionE = document.getElementById("LG01_05a");  // Option "D5"
var optionF = document.getElementById("LG01_06a");  // Option "T1"
var optionG = document.getElementById("LG01_R1a"); //Ausweichoption
var frage = document.getElementById("LG05_qst");  // HTML-ID der Texteingabe
var text = document.getElementById("Fragetext_GS02_qst"); //sub. Bewertung Text


function toogle() {
  // Die zwei Pipes (||) sind ein logisches "Oder"
  // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt?
  if (optionA.checked || optionB.checked || optionC.checked || optionD.checked || optionE.checked || optionF.checked || optionG.checked) {
    // Wurde etwas ausgewählt, dann wird die Frage angezeigt
    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
    frage.style.display = "";
    text.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
    text.style.display = "none";
  }
}
 
// Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);
SoSciTools.attachEvent(optionE, "click", toogle);
SoSciTools.attachEvent(optionF, "click", toogle);
SoSciTools.attachEvent(optionG, "click", toogle);
 
// Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist
// (z.B. ausblenden der Texteingabe zu Beginn)
toogle();
// -->
</script>
by SoSci Survey (302k points)
Ihr Text ist als Textbaustein angelegt, nicht als "Text" im Fragenkatalog, oder? Der hat einfach keine HTML-ID. Option A: Speichern Sie es als "Text" im Fragenkatalog. Option B: Ergänzen Sie im HTML-Tag eine ID, also z.B. vorangestellt (im HTML-Code des Textbausteins) ein <div id="Fragetext_GS02_qst"> und am Ende passend dazu das </div>.
by s137634 (700 points)
Super, vielen Dank! Das löst das Problem mit dem Text. Das letzte verbleibende Problem ist allerdings, dass der Schieberegler nach wie vor sehr unschön unter der Skala hängt, wenn diese eingeblendet wird. Gibt es da eine Möglichkeit, dass anzupassen?
Im Idealfall sollte der Schieberegler zu Beginn in der Mitte der Skala angezeigt werden.
by SoSci Survey (302k points)
Am einfachsten stellen Sie den Schieberegler so ein, dass der Regler zu Beginn nicht sichtbar ist - das ist ohnehin sinnvoll für die Datenerhebung - damit man "nicht beachtet" von "in der Mitte belassen" unterscheiden kann.

Wenn das nicht die gewünschte Lösung ist, muss ich nochmal in den Quellcode schauen, wie man dem Regler mitteilt, dass er die Darstellung aktualisieren soll.

Ursache des Problems ist, dass der Schieberegeler zu Beginn seine Maße nicht kennt, weil er ja ausgeblendet ist. Eine weitere Lösung bestünde darin, dass sie den Schieberegler nicht mit display:none komplett verschwinden lassen, sondern ihn mit position:absolute;left:-9999px aus dem Sichtbereich verschieben.
by s137634 (700 points)
Am idealsten wäre es tatsächlich, wenn der Schieberegler von Beginn an in der Mitte der Skala zu sehen ist. Wenn Sie die Möglichkeit haben, das im Quellcode nachzusehen, wäre das klasse.

Bei der zweiten Lösung müsste ich dann nur den einen Befehl mit dem anderen ersetzen oder wie genau wird das in JavaScript implementiert?
by SoSci Survey (302k points)
> Wenn Sie die Möglichkeit haben, das im Quellcode nachzusehen, wäre das klasse.

Es müsste funktionieren, wenn Sie nach dem Einblenden den aktuellen Wert noch einmal neu setzen. Also direkt unter

text.style.display = "";

noch ergänzen...

var slider = SoSciSliders.getSlider("SL01_01");
slider.setValue(slider.getValue());

> Bei der zweiten Lösung müsste ich dann nur den einen Befehl mit dem anderen ersetzen oder wie genau wird das in JavaScript implementiert?

Sie müssten in Ihrem JavaScript-Code das

  frage.style.display = "none";

Austauschen gegen

 frage.style.left = "-99999px";
 frage.style.position = "absolute";

Und anstatt des display="" müssten Sie diese Änderungen wieder zurücknehmen.

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

...