Wie stelle ich einen runterlaufenden Countdown ein?

Question

Hallo,

in meiner Untersuchung wird via Zufallsgenerator dem Teilnehmer einer von acht manipulierten Artikel angezeigt. Gerne würde ich, dass jeder Proband mindestens 1:30min auf dem gezeigten Stimulus verweilt (Begründungen aus anderen Experimenten, auf denen ich aufbaue). Der Eintrag konnte mir bereits weiterhelfen: https://www.soscisurvey.de/help/doku.php/de:create:timer-display Wenn ich die Codes einfüge, funktioniert es gut. Allerdings wird statt des Weiter-Buttons dann nur statisch 90 Sekunden lang "90 Sek." als Text eingeblendet. Ich hätte jedoch gerne, dass die Zeit runterläuft. Allerdings soll nach Ablauf der Zeit NICHT automatisch auf die nächste Seite weitergeleitet werden, sondern dann einfach der "Weiter-Button" zu sehen sein, da die Teilnehmer durchaus auch länger zum Lesen brauchen könnten.

Kann mir jemand mit einem Code weiterhelfen?

Vielen Dank!

Comments

> Allerdings wird statt des Weiter-Buttons dann nur statisch 90 Sekunden lang "90 Sek." als Text eingeblendet.

Dann ist da irgend etwas schief gelaufen. Bitte prüfen Sie einmal die Fehlerkonsole in Ihrem Browser. Prüfen Sie auch, ob Sie den JavaScript-Code vollständig aus der Anleitung übernommen haben.

---

Reicht denn nicht nur:

<script type="text/javascript">
<!--
// Knopf zunächst ausblenden
SoSciTools.submitButtonsHide();
// Nach Ablauf von 90 Sek = 90000 ms wieder einblenden
window.setTimeout(
  SoSciTools.submitButtonsDisplay, 90000
)
// -->
</script>

Damit der Button erst nach 90sek eingeblendet wird (was funktioniert).
Und dann für den Countdown:

<script type="text/javascript">
<!--
 
var countdown = 90;
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>

---

Doch, vermutlich schon. Was sagt denn die Fehlerkonsole? Möchten Sie vielleicht einen Pretest-Link direkt (!) zur betroffenen Seite posten?

---

Danke! Hat sich schon geklärt. Man darf nur den Code für "Countdown" einfügen und nicht beides.