Countdown Nicht Wiederholt Anzeigen

Question

Hallo Liebes SoSci Team,

ich habe gerade das Problem, dass ich auf einer Seite einen 45 Time habe bevor der Weiter Button erscheint. Nun ist es so, wenn TeilnehmerInnen vergessen eine Frage zu beantworten (alle mandatory) kommt der Timer nach dem Refresh nochmals. Und dann, wenn Sie alles ausgefüllt haben, wird die Seite nochmal refresht und der Timer erscheint nochmal.

Sprich, wenn ich als Teilnehmer vergesse eine Frage zu beantworten, läuft der Timer der Seite dreimal. Kann ich den Code irgendwie so anpassen, dass der Timer nur beim ersten Mal läuft? Sollte man eine Frage ausgelassen haben könnte man dann direkt weiter drücken.

Vielen Vielen Dank!

Das ist mein Code:

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

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

---

Hier oben nochmal der Code, in der Frage wurde er seltsam angezeigt

Answer 1

Der Trick besteht darin, dass Sie die Zahl 45 nicht fix vorgeben, sondern per JavaScript und Platzhalter einfügen, sodass beim erneuten Laden eine kleinere Zahl eingetragen wird.

Wie das funktioniert, erklärt die Anleitung Timer: Countdown über mehrere Seiten.

In Ihrem JavaScript-Code würden Sie nur

var countdown = 45;

ersetzen durch

var countdown = %time%;

Den Platzhalter %time% müssen Sie mit ein paar Zeilen PHP-Code vorbereiten.

Alternativ binden Sie den JavaScript-Code einfach nur beim ersten Laden der Seite ein. Dafür müssen Sie ihn in einen Text speichern (Darstellung "HTML-Code") und dann z.B.

if (!isset($firstView)) {
    $firstView = true;
    registerVariable($firstView);
    show('TX01');  // Der JavaScript-Code
}

Bei dieser Lösung kann der Timer aber durch Neu-Laden der Seite umgangen werden.