Mehrere offene Textfelder nacheinander nach einer bestimmten Dauer anzeigen

Question

Liebes SoSci Survey Team,

für eine Datenerhebung möchten wir den Teilnehmenden mehrere offene Textfelder nacheinander nach einer bestimmten Dauer einblenden (nach 10 Minuten, nach 20 Minuten, nach 30 Minuten und nach 40 Minuten).

Für ein Textfeld habe ich das auch schon ausprobiert und es hat geklappt, und zwar mit dem folgenden Code (hier die Frage "LD01_qst" erst einmal nur zum Ausprobieren nach 5 Sekunden eingeblendet):

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden des Textfeldes
function showContent() {
  var content = document.getElementById("LD01_qst");
  // 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("LD01_qst");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 5 Sek = 5.000 ms
  }
);
 
window.setTimeout(function() {
  document.getElementById("audio").play();
}, 5000);

// -->
</script>

Wenn ich jetzt aber mehrere dieser Felder hintereinander einblenden möchte, und den obigen Code quasi mehrmals nacheinander nutze (natürlich immer auf die jeweilige Frage bzw. das jeweilige Textfeld bezogen), so wird immer nur das LETZTE offene Textfeld, das ich unter "Fragebogen zusammenstellen" per Drag & Drop auf die Seite ziehe, eingeblendet. Aber ich möchte ja ALLE Textfelder im Abstand von je 10 Minuten einblenden lassen. Können Sie mir weiterhelfen?

Auch würde ich sehr gern ein Audio abspielen lassen, wenn die Textfelder erscheinen, um die Teilnehmenden auf dieses Textfeld aufmerksam zu machen. Das habe ich im letzten Teil des Codes probiert, es funktioniert aber leider nicht. Könnten Sie mir da auch weiterhelfen?

Vielen Dank!!

Answer 1

Wenn ich jetzt aber mehrere dieser Felder hintereinander einblenden möchte, und den obigen Code quasi mehrmals nacheinander nutze ...

Die Herausforderung ist, dass beim Kopieren auch die Funktions- und Variablennamen geändert werden müssen. Alternativ können Sie die Funktionen in eine weitere Funktion "kapseln" - das hat auch den Vorteil, dass Sie nicht vier Kopien desselben Codes pflegen müssen. Wie das ungefähr aussehen kann, sehen Sie hier: Mehrere gleichartige Fragen

Auch würde ich sehr gern ein Audio abspielen lassen

Ich empfehle, dass Sie den play()-Aufruf direkt in die Funktion stecken, welche auch die Frage anzeigt. Außerdem müssen Sie zwischen den Textfeldern das Audio zurückspulen. Wenn es dann noch nicht funktioniert, wäre ein Blick in die JavaScript-Fehlerkonsole Ihres Browsers ratsam.

Comments

Hallo,
ich habe das mit dem "kapseln" mal ausprobiert, kriege es aber nicht hin. Ich würde also vielleicht doch die Option mit Kopieren und Verändern der Variablennamen nutzen. Können Sir mir vielleicht sagen, wie ich das für den obigen Code verändern müsste?
Auch die Einbindung des Audios klappt leider nicht - ich bin etwas frustriert :D. Da probiere ich aber auf jeden Fall noch weiter rum. Falls Sie noch einen Tipp haben wäre ich sehr dankbar.

---

Was zeigt denn die Fehlerkonsole im Browser? Und posten Sie gerne mal einen Pretest-Link direkt (!) zur betroffenen Seite. Ich muss das auch im Kontext sehen ;)

---

Hallo, vielen Dank!
Die Fehlerkonsole sagt:
"Mutations-Ereignisse sollten nicht mehr verwendet werden. Verwenden Sie MutationObserver stattdessen." und
"Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/"

Ich poste mal zwei Pretest-Links:
1.) Hier funktioniert das Einblenden eines einzelnen offenen Textfeldes nach 5 Sekunden (allerdings funktioniert das Abspielen des Audios noch nicht): https://www.soscisurvey.de/befragunglehramtsstudierende/?act=9bBcaRW6EgpX07PftYLb1HEA
2.) Hier funktioniert das Einblenden mehrerer offener Textfelder nicht (es erscheint nur eins): https://www.soscisurvey.de/befragunglehramtsstudierende/?act=apoemr9kgwisM7Y95uszkFZ2

Ganz lieben Dank für Ihre Hilfe und ich lade auch gerne noch mehr hoch, wenn es hilft! :-)

---

Ich fange mal mit dem zweiten an - da müssten Sie den Namen der Funktion

function showContent()

jeweils anpassen, wenn Sie es einfahc nur dröge kopieren möchten. Also:

function showContent1()...

function showContent2()...

---

Fantastisch, das klappt schon mal - so einfach kann es sein. :-)
Haben Sie auch noch einen Tipp, wie ich die Audios automatisch abspielen lassen kann, sobald sich ein Textfeld öffnet?
Hier habe ich das mit einem Audio probiert: https://www.soscisurvey.de/befragunglehramtsstudierende/?act=9bBcaRW6EgpX07PftYLb1HEA
Es spielt aber leider nicht ab.

---

Das Problem ist wohl einfach, dass es das Event "present" nicht gibt - der Code wird also nie aufgerufen. Ich würde (wie oben schon geschrieben) einfach das showContent() ergänzen:

function showContent1() {
  var content = document.getElementById("LD01_qst");
  // Den normalen Anzeigemodus wiederherstellen
  content.style.display = "";
  // Audio
  var audio = document.getElementById("Audio1");
  audio.currentTime = 0;
  audio.play();
}

Aber machen SIe sich ob des Audio keine falschen Hoffnungen. Viele Befragte werden die Boxen nicht eingeschaltet oder die Kopfhörer nicht auf den Ohren haben.

---

Super, vielen vielen Dank, jetzt funktioniert alles so wie ich es mir vorgestellt habe :-)