Getimeter Weiter-Button funktioniert nur am PC und nicht am Smartphone

Question

Hallo Zusammen,

ich habe in meinem Fragebogen auf einer Seite einen Weiterbutton mit einem Timer eingestellt (im besten Fall soll er auf 110 Minuten stehen). Leider funktioniert dieser nicht richtig, wenn der Fragebogen über ein Smartphone bearbeitet wird (Javascript ist aktiviert). Stelle ich beispielsweise einen Timer von 5 Minuten ein, dann erscheint der Weiterbutton entweder gar nicht oder irgendwann viel später.
Über den Laptop funktoniert aber alles ordnungsgemäß.

Woran könnte das liegen?

Danke schon mal!

Comments

Was passiert, wenn Sie 10 Sekunden einstellen?

Könnten Sie einen Pretest-Link direkt (!) zur betroffenen Seite posten, damit ich mir das einmal ansehen kann? Bitte mit 10 Sekunden Timeout zum Testen. Danke.

---

Bei 10 Sekunden funktioniert es perfekt..

Hier der Link zu der Seite: https://www.soscisurvey.de/mk_unterhaltung/?act=eKDm7byDjSj5tgJdNOBWbKVj

Momentan ist der Timer auf 5 Minuten eingestellt.

Answer 1

Bei 10 Sekunden funktioniert es perfekt..

Wenn es bei 10 Sekunden perfekt funktioniert, nicht aber bei einer (deutlich) längeren Zeit, dann liegt das Problem wahrscheinlich nicht im JavaScript-Code.

Womöglich hat es damit zu tun, dass das Display des Mobilgeräts abschaltet? Vielleicht wird die Seite zwischendurch neu geladen (was auch den Timer neu startet)? Auf jeden Fall wird das Problem in der aktuellen Form nicht leicht nachzuvollziehen sein.

Ich empfehle daher, einen etwas aufwändigeren Code zu verwenden.

1. Verwenden Sie den Code, der einen Countdown anzeigt.

2. Verwenden Sie im JavaScript-Code keinen festen Countdown (im Code-Beispiel sind es 30 Sekunden, ziemlich weiter oben im Code), sondern verwenden Sie einen Platzhalter und ein wenig zusätzlichen PHP-Code, damit der Countdown auch beim Neu-Laden der Seite nicht erneut startet.

Comments

Danke für den Tipp! Leider funktioniert es immer noch nicht. Immer wenn der Bildschirm ausgeht oder man in eine andere App wechselt etc. stoppt der Timer und zählt erst dann weiter, wenn man die Seite wieder offen hat (bis der Bildschirm dann wieder schwarz wird). Egal was ich an der Funktion umstelle oder änder, das Problem lässt sich nicht lösen. Ich habe bis jetzt erst mal nur bis 10 Minuten getestet und es hat trotzdem nicht funktioniert (auch bei weit weniger wie 3 Minuten nicht).

Liegt es am Code oder funktioniert die Funktion mit dem getimten Weiterbutton für Smartphones einfach nicht?

Hier ist der Code, denn ich jetzt verwendet habe (habe aber auch schon alle möglichen Variationen ausprobiert):

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

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Knöpfe
function showButtons() {
  var buttons = document.getElementById("buttonsAuto");
  // Den normalen Anzeigemodus wiederherstellen
  buttons.style.visibility = "";
}
 
// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Die Knöpfe identifizieren
    var buttons = document.getElementById("buttonsAuto");
    // Die Knöpfe ausblenden (mit Platzhalter)
    buttons.style.visibility = "hidden";
    // Den Timer starten
    window.setTimeout(showButtons, 300000); // Nach 1 Min = 60.000 ms
  }
);

// Ablauf der Zeit als Variable $timeout speichern
if (!isset($timeout)) {
  $timeout = strtotime('+30 seconds');
  registerVariable($timeout);
}
// -->
</script>

---

>  Immer wenn der Bildschirm ausgeht oder man in eine andere App wechselt etc. stoppt der Timer und zählt erst dann weiter, wenn man die Seite wieder offen hat (bis der Bildschirm dann wieder schwarz wird).

Na, ist doch wunderbar. Erstens messen Sie nur die Zeit, die man tatsächlich auf dem Fragebogen ist und zweitens sind Sie der Ursache schon deutlich nher gekommen :)

Keine Sorge, auch das lässt sich lösen. Und zar können Sie mit new Date() die Echtzeit-Uhr des Mobilgeräts verwenden. Und mit dieser können Sie natürlich auch sekündlich abgleichen.

Oben brauchen Sie erstmal noch zwei Variablen:

var countdown = 30;  // Wie gehabt
var initTime = new Date();
var timeOut = initTime.getTime() + countdown;

Und dann ersetzen Sie die Funktion countDown() testweise einmal wie folgt:

function countDown() {
  var now = new Date();
  countdown = timeOut - now.getTime();
  if (countdown > 1) {
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    // Display nextbutton
    var button = document.getElementById(buttonID);
    button.style.display = "";
    // Remove countdown
    button.parentNode.removeChild(countdownDisplay);
  }
}

Vorsicht: Das Neu-Laden der Seite ist damit noch nicht abgefangen. Dafür müssen Sie den ursprünglichen Zeitstempel bzw. `timeOut`noch in PHP-Code speichern und mittels Platzhalter an das JavaScript übergeben.

---

Leider konnte ich das Problem auch dieses Mal nach langem rumprobieren, umstellen und rätseln nicht lösen. Ich vermute, dass sich in meinem Code irgendwo ein Fehler eingeschlichen hat, den ich partout nicht finden kann..

Das ist nun mein aktueller Code:

<script type="text/javascript">
<!--
 
var countdown = 30;
var countdownDisplay;
var countdownTimer;
var initTime = new Date();
var timeOut = initTime.getTime() + countdown;
// "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() {
  var now = new Date();
  countdown = timeOut - now.getTime();
  if (countdown > 1) {
    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>

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Knöpfe
function showButtons() {
  var buttons = document.getElementById("buttonsAuto");
  // Den normalen Anzeigemodus wiederherstellen
  buttons.style.visibility = "";
}
 
// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Die Knöpfe identifizieren
    var buttons = document.getElementById("buttonsAuto");
    // Die Knöpfe ausblenden (mit Platzhalter)
    buttons.style.visibility = "hidden";
    // Den Timer starten
    window.setTimeout(showButtons, 300000); // Nach 1 Min = 60.000 ms
  }
);

// Ablauf der Zeit als Variable $timeout speichern
if (!isset($timeout)) {
  $timeout = strtotime('+30 seconds');
  registerVariable($timeout);
}
// -->
// JavaScript zur Anzeige der verbleibenden Zeit
$timeLeft = $timeout - time();
// Statt JS01 muss hier die Kennung des Textes eingetragen werden
show('JS01', array(
  $timeLeft
));
</script>

Was genau bewirkt die 1000 in der Zeile "  countdownTimer = window.setInterval(countDown, 1000);" eigentlich? Egal was ich daran drehe und wende, es scheint für das Ergebnis keinen Unterschied zu machen.

Danke schon mal für die Rückmeldung!

---

Funktioniert der Code auf dem Desktop-Rechner? Wenn nicht, dann liefert des Browser's Fehlerkonsole erstmal Hinweise, wo es hakt.

> Was genau bewirkt die 1000 in der Zeile "  countdownTimer = window.setInterval(countDown, 1000);"

Diese Zeile sorgt dafür, dass sekündlich die Funktion countDown() aufgerufen wird. In der Original-Version hatte diese den Countdown um 1 nach unten gezählt. In der modifizierten Version stößt sie einfach nur die Berechnung der Restzeit an.

---

Am Rechner funktioniert alles nach wie vor super..

Okay also an der Zeile am besten nichts ändern, weil das letztlich nicht das Problem sein kann, oder?

---

Okay, Sie haben da noch folgenden Code-Block, der entfernt werden kann:

// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Die Knöpfe identifizieren
    var buttons = document.getElementById("buttonsAuto");
    // Die Knöpfe ausblenden (mit Platzhalter)
    buttons.style.visibility = "hidden";
    // Den Timer starten
    window.setTimeout(showButtons, 300000); // Nach 1 Min = 60.000 ms
  }
);


Stattdessen muss das showButtons() aufgerufen werden, wenn der Countdown abgelaufen ist, also hier:

function countDown() {
  var now = new Date();
  countdown = timeOut - now.getTime();
  if (countdown > 1) {
    countdownRefresh();
  } else {
    window.clearTimeout(countdownTimer);
    // Display nextbutton
    var button = document.getElementById(buttonID);
    button.style.display = "";
    // Remove countdown
    button.parentNode.removeChild(countdownDisplay);
    // NEU
    showButtons();
  }
}

Funktioniert es dann noch auf dem Desktop-PC?

---

Nicht wirklich, jetzt steht da ca. für eine Sekunde "30 sek." und dann erscheint der Weiterbutton.

https://www.soscisurvey.de/mk_unterhaltung/?act=eKDm7byDjSj5tgJdNOBWbKVj

---

Danke für den Pretest-Link. Der folgende Code muss (!) als PHP-Code eingebunden werden, nicht als HTML-Code:

// Ablauf der Zeit als Variable $timeout speichern
if (!isset($timeout)) {
  $timeout = strtotime('+30 seconds');
  registerVariable($timeout);
}
// -->
// JavaScript zur Anzeige der verbleibenden Zeit
$timeLeft = $timeout - time();
// Statt JS01 muss hier die Kennung des Textes eingetragen werden
show('JS01', array(
  $timeLeft
));

Der JavaScript-Code muss in JS01 stehen, welches aber nicht (!) in den Fragebogen hineingezogen werden darf - es wird von obigem PHP-Code eingebunden.