Countdown für Weiter-Button erst nach Abspielen einer Audio-Datei einblenden

Question

Liebes Team,

ich möchte auf einer Fragebogenseite den Weiter-Button erst dann einblenden, wenn eine Audio-Datei abgespielt wurde. Die Idee ist, dass nach dem Laden der Seite zunächst der Satz "Hören Sie zuerst die Audio-Datei an, um auf die nächste Seite zu kommen" eingeblendet wird und nach dem betätigen des Play-Buttons ein Countdown von 20 Sekunden beginnt. Dabei wird die Audio-Datei randomisiert auf Basis einer vorher vergebenen Zufallsvariablen zugewiesen, indem mittels PHP-Code vorgefertigte HTML-Textbausteine zugewiesen werden.

Ich habe mit dem Countdown-Code aus der Einführung etwas experimentiert, aber keine Lösung gefunden. Ist mein Vorhaben möglich?

Audiobausteinbeispiel:

Hören Sie sich die Aufnahme jetzt an: 
   <audio id="HB1" controls  controlsList="nodownload" style="width: 200px; height: 80px"> <source src="HB1.mp3" type="audio/mpeg" /></audio>

Einbindung der Audio auf der Fragebogenseite:

 $zahl = value('BE01');

if ($zahl == 1) {
  question('AU01');
} elseif ($zahl == 2) {
  question('AU02');
} elseif ($zahl == 3) {
  question('AU03');
} elseif ($zahl == 4) {
  question('AU04');
} elseif ($zahl == 5) {
  question('AU05');
} elseif ($zahl == 6) {
  question('AU06');
} elseif ($zahl == 7) {
  question('AU07');
}

Code für Countdown:

    <script type="text/javascript">
<!--
 
var countdown = 20;
var countdownDisplay;
var countdownTimer;
// "submit0" ist der Weiter-Knopf,
// mit "buttonsAuto" kann man auch den Zurück-Knopf ausblenden
var buttonID = "submit0";  
 
function countdownStart() {
  // Next button
  var button = document.getElementById(buttonID);
  // Create countdown element
  countdownDisplay = document.createElement("div");
  var cd = countdownDisplay;
  cd.style.display = "inline-block";
  cd.style.textAlign = "center";
  cd.style.fontWeight = "bold";
  cd.style.width = button.offsetWidth + "px";
  cd.style.height = button.offsetHeight + "px";
  // Init countdown
  button.parentNode.appendChild(countdownDisplay);
  countdownRefresh();
  // Hide next button
  button.style.display = "none";
  // Start countdown
  countdownTimer = window.setInterval(countDown, 1000);
}
 
function countDown() {
  if (countdown > 1) {
    countdown--;
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    // Display nextbutton
    var button = document.getElementById(buttonID);
    button.style.display = "";
    // Remove countdown
    button.parentNode.removeChild(countdownDisplay);
  }
}
 
function countdownRefresh() {
  // Clear
  while (countdownDisplay.lastChild) {
    countdownDisplay.removeChild(countdownDisplay.lastChild);
  }
  // Display
  var content = document.createTextNode(countdown + " Sek.");
  countdownDisplay.appendChild(content );
}
 
SoSciTools.attachEvent(window, "load", countdownStart);
 
// -->
</script>

Comments

Vielleicht könnten Sie nochmal kurz beschreiben, was funktioniert und was nicht?

Wenn etwas am JavaScript nicht funktioniert, dann posten Sie bitte entweder einen Pretest-Link zum Fragebogen und/oder den Inhalt der JavaScript-Fehlerkonsole Ihres Browsers. Danke.