Weiter Knopf für 10 Minuten ausblenden (Smartphone)

Question

Ich habe folgendes HTML-Skript eingefügt:

<script type="text/javascript">
<!--
SoSciTools.submitButtonsHide();
window.setTimeout(SoSciTools.submitButtonsDisplay, 600000)
</script>

Wenn man die Seite am Smartphone öffnet, dann geht zählt die Zeit leider nicht weiter, sobald man das Browserfenster (also die App) auf seinem Smartphone minimiert. Was kann ich einfügen, damit die 10 Minuten im Hintergrund weiterlaufen?

Answer 1

Es ist sehr wahrscheinlich, dass das Smartphone die Seite im Hintergrund schließt und neu lädt, wenn man den Browser wieder öffnet. Sie müssten also die Zeit im Hintergrund speichern, wann die Seite das erste mal geöffnet wurde.

Das könnte so ähnlich aussehen wie in der Anleitung Timer: Countdown über mehrere Seiten. Erstmal ein wenig PHP-Code

// Ablauf der Zeit als Variable $timeout speichern
if (!isset($timeout)) {
  $timeout = strtotime('+60 seconds');
  registerVariable($timeout);
}
// Noch ein Platzhalter für das JavaScript unten
replace('%timeLeft%', $timeout - time());

Und dann der JavaScript-Code, welcher auf diesen Timeout zugreift.

<script type="text/javascript">
<!--
 
// Verbleibende Zeit initialisieren
var timeLeft = %timeLeft%;
if (timeLeft >  0) {
    SoSciTools.submitButtonsHide();
    window.setTimeout(SoSciTools.submitButtonsDisplay, timeLeft * 1000);
}

// -->
</script>

Comments

Leider funktioniert der JavaSkript-Code nicht, der Weiter-Button erscheint überhaupt nicht

---

Was sagt denn die Javascript-Konsole? Funktioniert es im normalen Browser - wenn Sie die Seite erneut laden? Fügen Sie gerne mal ein console.log() ein:

var timeLeft = %timeLeft%;
console.log(timeLeft);

Und posten Sie gerne mal einen Pretest-Link direkt (!) zur betroffenen Seite.

---

https://www.soscisurvey.de/LinkedInNutzung_und_Stimmung/?act=l8c91rHENwIoT9y3M2Sut0pQ
https://www.soscisurvey.de/LinkedInNutzung_und_Stimmung/?act=lqWE28spB3xxkSqkblYiHVCB
Hier die zwei Links (es gibt zwei verschiedene Versionen des Fragebogens)

---

Im Fragebogen steht für timeLeft der Wert 6000, also 6000 Sekunden statt 60 Sekunden. Könnten Sie bitte Ihren PHP- und javaScript-Code nochmal posten ... ich denke, da steckt noch irgendwo eine Null zu viel, oder zwei.

---

<script type="text/javascript">
<!--
 
// Verbleibende Zeit initialisieren
var timeLeft = %timeLeft%;
console.log(timeLeft);
if (timeLeft >  0) {
    SoSciTools.submitButtonsHide();
    window.setTimeout(SoSciTools.submitButtonsDisplay, timeLeft * 1000);
}

// -->
</script>

Und PHP:

if (!isset($timeout)) {
  $timeout = strtotime('+600 seconds');
  registerVariable($timeout);
}
// Noch ein Platzhalter für das JavaScript unten
replace('%timeLeft%', $timeout - time());

Ich dachte beim PHP-Code, dass man für 60 sek. den entsprechenden Wert eintragen muss, also da ich den Weiter-Button nach 10 Minuten einblenden will, wären 600sek doch richtig, oder?

---

Die Zahl im Code stimmt jetzt auch (600) und unter dem o.g. Pretest-Link erscheint bei Ablauf des Timers auch der Weiter-Knopf rechts unten. Sieht also gut aus.

Zum Testen, ob es auch mit einem Neu-Laden der Seite noch funktioniert, bräuchten wir einen Pretest-Link, welcher auf der vorigen Seite startet.