JavaSkript für das Anzeigen eines Schiebereglers nach Beantwortung einer Frage

Question

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!

Comments

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.

---

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

---

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

---

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

---

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"

---

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>

---

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");

---

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?

Answer 1

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";

Comments

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>

---

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

---

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.

---

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.

---

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?

---

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