Leeres Textfeld nach bestimmter Zeit erst einblenden lassen

Question

Hallo zusammen,

Ich würde gerne erst nach Abspielen einer Audiosequenz, in der eine Frage gestellt wird, ein Textfeld erscheinen lassen, in dem man dann seine Antwort eintippen kann. Die Audiosequenz ist als Button implementiert. Ich habe bereits den Weiter-Button so programmiert, dass er erst nach der bestimmten Zeit erscheint, mit einem Textfeld hat es leider nicht geklappt, da ich die entsprechende Soscisurvey-Variable von Javascript (falls es so etwas gibt) nicht kenne.

Der Code sieht bisher folgendermaßen aus:

**<script type="text/javascript">
<!--
 
// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Die Knöpfe ausblenden
    SoSciTools.submitButtonsHide();
     }
);
 
// -->
</script>
<audio id="bflat" src="Geschlecht_kurz_m.mp3"></audio>
<center><div style="display: none;" id="hiddenText"><center><h3>Um die Audio-Datei erneut abzuspielen, können Sie noch einmal auf den Button klicken.</h3><br><br></center></div></center>
<center><input type="image" src="chat.png" id="myButton1" style="height:220px; width:250px; margin-bottom:50px; "  onclick="document.getElementById('bflat').play(); document.getElementById('hiddenText').style.display='block'; window.setTimeout(SoSciTools.submitButtonsDisplay, 3000); return false;">
</center>**

Der zugehörige Vorschaulink ist hier zu finden:

https://www.soscisurvey.de/bamemp17/?act=5fC0AWANBflTCbNl9PaJLIY4

Gäbe es eine Möglichkeit das Textfeld statt als eigenes Item wie den Weiterbutton erst nach Abspielen der Audiosequenz einzupflegen?

Vielen Dank vorab für die Hilfe!

Answer 1

Ihr Code ruft 300ms nach Klick auf den Knopf die Funktion SoSciTools.submitButtonsDisplay() auf:

window.setTimeout(SoSciTools.submitButtonsDisplay, 3000);

Im Prinzip könnten Sie aber auf eine beliebige andere Funktion aufrufen, z.B.

window.setTimeout(postPlay, 3000);

Und diese würden dann einfach in dem <script> definieren, das Sie oben ohnehin schon haben:

<script type="text/javascript">
// Wie bisher

function postPlay() {
  // Knopf einblenden
  SoSciTools.submitButtonsDisplay();
  // Text einblenden
  document.getElementById("hiddenText").style.display = "block";
}

</script>

Klar, dass Sie das display="block" dann aus dem onclick-Attribut Ihres Knopfes entfernen müssen.

Comments

Leider funktioniert es immer noch nicht, jetzt ist es leider so, dass keine Audiodatei abgespielt wird und es direkt zur nächsten Seite navigiert:

<script type="text/javascript">
<!--
 
// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",

  function() {
    // Die Knöpfe ausblenden
    SoSciTools.submitButtonsHide();
     }

function postPlay() {
  // Knopf einblenden
  SoSciTools.submitButtonsDisplay();
  // Text einblenden
  document.getElementById("hiddenText").style.display = 'block';}
);
 
// -->
</script>

<audio id="bflat" src="Alter_kurz_m.mp3"></audio>
<center><div style="display: none;" id="hiddenText"><center><h3>Um die Audio-Datei erneut abzuspielen, können Sie noch einmal auf den Button klicken.</h3><br><br></center></div></center>
<center><input type="image" src="chat.png" id="myButton1" style="height:220px; width:250px; margin-bottom:50px; "  onclick="document.getElementById('bflat').play(); window.setTimeout(postPlay, 3000);
window.setTimeout(SoSciTools.submitButtonsDisplay, 3000);
 return.false;">
</center>

Bin ich gerade auf dem falschen Weg?

---

Die Audiodatei funktioniert nicht, weil mit der mp3 irgend etwas nicht stimmt - zumindest laut Fehlerkonsole im Browser.

Außerdem müssten Sie den Befehl window.setTimeout(SoSciTools.submitButtonsDisplay, 3000);  noch aus dem onclick="..." entfernen.

Und dann schrieben Sie von einem Textfeld. Wenn Sie nicht "hiddenText" meinen (also die Info, dass man die Datei nochmal abspielen kann), dann müssten Sie bitte verraten, welches Textfeld Sie meinen?

---

Tut mir leid, da war ich etwas missverständlich! Ich würde gerne ein leeres Eingabefeld noch erscheinen lassen, um dort die Antwort auf die Frage, die in der Audiodatei gefragt wird, einzutippen, also z.B. sagt die Audiodatei "Wie alt sind Sie?" und die Versuchsperson soll in ein (nach der abgespielten Datei so wie der Weiterbutton) erscheinendes Eingabefeld sein Alter eintippen.

---

Nun, dann packen Sie bitte erstmal die entsprechende Frage noch auf die Seite. Wie Sie diese dann aus- und in der neuen Funktion postPlay() wieder einblenden, steht im Großen und Ganzen hier: https://www.soscisurvey.de/help/doku.php/de:create:dynamic

---

Vielen Dank! Das leere Textfeld habe ich nun schon eingebunden, jedoch erscheint es mit dem Klick auf den Button und nicht erst nach der bestimmten Zeit wie der Weiter-Button. D.h. die postPlay - Funktion klappt noch nicht.


<script type="text/javascript">
<!--
 var frage = document.getElementById("FR02_01");

// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",

 
 function() {
    // Die Knöpfe ausblenden
    SoSciTools.submitButtonsHide();
    document.getElementById('hiddenText').style.display='block';
    frage('FR02_01').style.display = 'none';

     }

function postPlay() {
  // Knopf einblenden
  SoSciTools.submitButtonsDisplay();
  // Text einblenden
   frage('FR02_01').style.display= "";}
 
);
 
// -->
</script>

<audio id="bflat" src="Alter_kurz_m.mp3"></audio>
<center><div style="display: none;" id="hiddenText"><center><h3>Um die Audio-Datei erneut abzuspielen, können Sie noch einmal auf den Button klicken.</h3><br><br></center></div></center>
<center><input type="image" src="chat.png" id="myButton1" style="height:220px; width:250px; margin-bottom:50px; "  onclick="document.getElementById('bflat').play(); document.getElementById('hiddenText').style.display='block';  frage('FR02_01').style.display = 'none';
window.setTimeout(postPlay, 3000);
window.setTimeout(SoSciTools.submitButtonsDisplay, 3000);
 return.false;">
</center>  

Können Sie mir da vielleicht noch einen Rat geben? Ich habe die Frage eigentlich bereits definiert, und auch unter der jeweiligen function ein oder ausblenden lassen.

noch einmal ein Vorschaulink:

https://www.soscisurvey.de/bamemp17/?act=C0KG85pZj6F5r1v8aNmYY0zj

 - Seite 5 in der Debugversion

Vielen Dank vorab!

---

Eine Funktion   frage('FR02_01')   gibt es nicht. Entsprechend bricht der Code hier vermutlich ab. Bitte suchen Sie einmal die JavaScript-Fehlerkonsole Ihres Browsers, das macht die Suche nach dem Problem deutlich einfacher.

Zum "Ansprechen" von Fragen s. auch https://www.soscisurvey.de/help/doku.php/de:create:dynamic - statt frage(...).style.display müsste es heißen: document.getElementById("FR02_qst").style.display

Nehmen Sie bitte einmal alles außer dem play(), dem window.setTimeout(postPlay, 3000); und dem resturn false; aus dem onclick-Parameter heraus. Und dann, wie gesagt, bräuchten wir die (Fehler-)Konsole Ihres Browsers.