Weiter-Button trotz Ausblende-Script kurz zu sehen (auf manchen Geräten)

Question

Im aktuellen Fragebogen nutzen wir JavaScript und php, um nach Ablauf eines Timers die Versuchspersonen auf die nächste Seite zu leiten:
1. php:

$listening_time = 63;
$time0 = time();
if(time() > $time0 + $listening_time){
    goToPage('next');
}
// Die verbleibende Zeit muss auch dem JavaScript-Code bekannt gemacht werden
$remain = $time0 + $listening_time - time();
replace('%remain%', $remain);

1. JS:

    <script type="text/javascript">
    <!--
    // Funktion zur Weiterleitung
    function weiter() {
      // Den Teilnehmer zur nächsten Seite weiterleiten
      SoSciTools.submitPage();
    }
    // Initialisierung der Weiterleitung
    SoSciTools.attachEvent(window, "load", function(evt) {
      // Weiter-Knopf ausblenden
      SoSciTools.submitButtonsHide();
      // Timer für automatische Weiterleitung starten
      window.setTimeout(weiter, %remain% * 1000);
    });
    // -->
    </script>

Beim Pretest und auch beim Ausprobieren während des Befragungszeitraums war der Weiter-Button konsequent bei manchen Endgeräten kurz zu sehen, bevor er verschwand. Dieses Phänomen scheint nicht an bestimmte Betriebssystem-Browser-Kombinationen gebunden zu sein (z.B. tritt es bei einem Windows 10 Rechner mit Firefox auf und auf einem anderen nicht).
Das ist sehr ungünstig, da die Teilnehmenden auf dieser Seite ein Klangbeispiel hören sollen (über autoplay) ohne selbst die nächste Seite aufrufen zu können.

Muss das Phänomen in Kauf genommen werde, dass manche Personen ungewünscht weiter gehen können oder gibt es eine Lösung, den Button bei wirklich allen ausgeblendet und nicht kurz sichtbar zu haben?

Answer 1

Beim Pretest und auch beim Ausprobieren während des Befragungszeitraums war der Weiter-Button konsequent bei manchen Endgeräten kurz zu sehen, bevor er verschwand.

Das liegt daran, wann der Knopf ausgeblendet wird. Konkret in diesen Zeilen:

SoSciTools.attachEvent(window, "load", function(evt) {
  // Weiter-Knopf ausblenden
  SoSciTools.submitButtonsHide();
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});

Damit wird der Befehl SoSciTools.submitButtonsHide(); erst dann ausgeführt, wenn die Seite fertig geladen hat - also inkl. Stil-Definitionen und ggf. Grafiken.

Wenn Sie möchten, können Sie den Knopf auch schon beim Laden des Scripts ausblenden:

SoSciTools.attachEvent(window, "load", function(evt) {
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});

// Weiter-Knopf ausblenden
SoSciTools.submitButtonsHide();

Comments

Vielen Dank, es funktioniert