Frage erst nach bestimmter Zeit anzeigen lassen

Question

Hallo, ich habe ein Anliegen, bei dem ich alleine leider nicht weiterkomme.

Ich möchte für eine Studie eine Frage auf einer Seite erst nach 10 Sekunden anzeigen lassen. Allerdings müsste ich einen Code so schreiben, dass dies für alle Bedingungen der Randomisierung funktioniert.
Aus den Support Seiten habe ich versucht, einen Code zu schreiben (s.unten), dieser tut aber leider nicht das, was ich möchte. Außerdem weiß ich nicht so ganz, welche ID ich angeben müsste, wenn dieser Code für mehrere Fragen innerhalb eines Fragebogenbausteins gelten soll, ohne, dass alle Fragen in jeder Bedingung gezeigt werden.

Ich würde mich total freuen, wenn mich jemand dabei unterstützen könnte.
Vielen Dank im Voraus! :)

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Frage
function showContent() {
  var content = document.getElementById("M101");
  // Den normalen Anzeigemodus wiederherstellen
  content.style.display = "";
}
 
// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("M101");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 10000); // Nach 10 Sek = 10.000 ms
  }
);
 
// -->
</script>

Answer 1

Im Prinzip sieht das schon ganz gut aus. Die ID ist vermutlich M101_qst, vgl. Fragen bei Auswahl einer bestimmten Option sofort einblenden.

Diese ID gehört zu dem "Block", der um eine Frage außenherum steht. Und wenn Sie mehrere Fragen ausblenden möchten, wiederholen Sie den Befehl für jede Frage:

document.getElementById("M101_qst").style.display = "";
document.getElementById("M102_qst").style.display = "";
document.getElementById("M103_qst").style.display = "";

Wenn es nicht klappt, hilft in aller Regel ein Blick in die JavaScript-Fehlerkonsole: JavaScript im Fragebogen. Wenn Sie damit nicht weiterkommen, können Sie auch einen Pretest-Link direkt (!) zur betroffenen Seite posten.

Comments

Hallo,
ich habe den Code weiter angepasst, aber leider wird mir noch folgende Fehlermeldung in der JavaScript-Fehlerkonsole angezeigt.
Uncaught TypeError: Cannot read property 'style' of null
    at preview.php?o=textelement&it=codeMontag:71

Leider konnte ich das bisher aber nicht alleine lösen.
Hoffentlich können Sie mir dabei noch weiterhelfen. :)

Hier der Pretest-Link zu der Fragebogenseite:
https://www.soscisurvey.de/was_gibt_s_heute_in_der_mensa/?act=K013YFYF8GzWCxkHSkIyKt3n

Und hier der angepasste Code:
<script type="text/javascript">
// <!--

// Funktion zum Einblenden der Frage
function showContent() {
  var content = document.getElementById("M101_qst").sytle.display="";
document.getElementById("M102_qst").style.display ="";
document.getElementById("M103_qst").style.display ="";
document.getElementById("M104_qst").style.display ="";
document.getElementById("M105_qst").style.display ="";

 }

// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("M101_qst").style.display = "none";
document.getElementById("M102_qst").style.display = "none";
document.getElementById("M103_qst").style.display = "none";
document.getElementById("M104_qst").style.display = "none";
document.getElementById("M105_qst").style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 6000); // Nach 6 Sek = 6.000 ms
  }
);
 
// -->
</script>

---

> Uncaught TypeError: Cannot read property 'style' of null

Das bedeutet, dass das was vor .style steht nicht existiert. Schauen Sie doch einmal, auf welche Zeile der Fehler verweist. Meist reicht ein Klick auf die Zeilennummer.

Ach ja, diese Zeile macht inhaltlich keinen Sinn:

var content = document.getElementById("M101_qst").sytle.display="";

Lassen Sie das "var content =" vorne weg. Diese Variable verwenden Sie ja nicht (mehr). Und: Haben Sie 4 oder 5 Fragen?

---

Das wundert mich, denn was vor .style steht, existiert definitiv innerhalb des Fragebogens (nämlich HTML-ID's der Fragen).

Der Fehler "Uncaught TypeError: Cannot read property 'style' of null" bezieht sich auf folgende Zeile des Codes.
document.getElementById("M101_qst").style.display = "none";

Insgesamt sind es 5 Fragen. Auch, wenn ich var content = weglasse, fuktioniert der Code leider immer noch nicht richtig.

---

> Das wundert mich, denn was vor .style steht, existiert definitiv innerhalb des Fragebogens

Aber vielleicht nicht in der Reihenfolge. Der JavaScript-Code muss unter den Fragen stehen, denn der HTML-Code wird von oben nach unten abgearbeitet. Wenn die Frage zu dem Zeitpunkt, wenn der JavaScript-Code ausgeführt wird (=im HTML kommt) noch nicht definiert wurde, wird sie nicht gefunden. Könnte es daran liegen?

---

Ich habe den JavaScript-Code als einen Textbaustein im HTML-Format angelegt. Diesen Textbaustein habe ich unter den PHP-Code im Fragebogen eingefügt, in welchem die (randomisierten) Fragen enthalten sind.
Dann müssten die Fragen doch bereits abgelaufen sein und das JavaScript im Anschluss normal ablaufen können, oder?
Oder muss der JavaScript-Code mit in den PHP-Code im Fragebogen und dann platziert unterhalb der Fragen?

---

Unter dem PHP-Code sollte das schon passen. Zeigen Sie alle 5 Fragen oder nur eine davon? Wenn Sie nämlich nur eine zeigen, dann dürfte Ihr JavaScript-Code auch nur die eine ansprechen - die anderen gibt es dann auf der Seite nämlich nicht.

Möglichkeit 1: Schreiben Sie die Frage-Kennung in einen Platzhalter und verwenden Sie diesen im HTML-Code.

Möglichkeit 2: Fügen Sie im JavaScript-Code eine Schleife ein, die für jede Frage-Kennung prüft, ob es diese gibt. Das ist aber ein wenig komplizierter.

---

Eine Frage pro Bedingung soll mit Verzögerung angezeigt werden. Also es wird eine der 5 Fragen, je nach Randomisierung, auf der Seite angezeigt. Daran könnte es dann vielleicht liegen.

Bisher habe ich immer die HTML-Kennung der Frage verwendet, sowohl im PHP-Code, als auch im JavaScript. Würde man den Platzhalter dann im JavaScript definieren da dann verwenden und den PHP-Code so lassen, wie er ist?

---

Im PHP-Code müssten Sie nicht nur die Frge anzeigen, sondern mittels replace() auch einen Platzhalter mit deren ID definieren, z.B. replace('%qst%', 'M102');

Im JavaScript würden Sie dann statt M102_qst schreiben %qst%_qst.

Eben mit dem Code, den Sie verwenden, wenn Sie nur eine Frage ein-/ausblenden möchten.