Countdown mitwandern lassen, wenn man auf einer Seite runterscrollt

Question

In dem Fragebogen sollen die Leute auf einer Seite 99 Rechenaufgaben lösen und das ganze innerhalb einer bestimmten Zeit.
Ich habe den Timer wie es in der Erklärung steht eingerichtet und dieser funktioniert auch super.
Zu meiner Frage: Wenn die Leute allerdings Aufgaben weiter unten bearbeiten und runterscrollen, ist die ablaufende Zeit (der Countdown) leider nicht mehr zu sehen. Ist es möglich das so einzustellen, dass die ablaufende Zeit mitwandert, wenn man runter scrollt und sichtbar bleibt?
Danke schonmal!

Comments

Möchten Sie bitte den HTML-Code ergänzen, welchen Sie um den Countdown herum verwenden? Dann kann ich eine Empfehlung geben, wie Sie mit style="position: fixed" den Countdown mitwandern lassen.

---

Vielen Dank für die schnelle Antwort.

 Hier anbei ist der hTML-Code:
<b><h1><p>Verbleibende Zeit: <span id="remain"></span></p></h1></b><img src="Bild_3.png" style="max-width: 80%">

Und ich weiß nicht ob Sie das auch brauchen, aber hier ist auch noch der PHP-Code:
if (!isset($time0)) {
  $time0 = time();
  registerVariable('time0');  // Die Variable $time0 auch nach Ende des PHP-Codes aufbewahren
}
// Prüfung, ob die Zeit schon abgelaufen ist
// (z.B. weil der Teilnehmer die Seite neu geladen hat)
$timer = 240;  // Der Teilnehmer hat 1 Minute (60 Sekunden) Zeit zur Bearbeitung
if (time() >= $time0 + $timer) {
  goToPage('next');
}
// Die verbleibende Zeit muss auch dem JavaScript-Code bekannt gemacht werden
$remain = $time0 + $timer - time();
replace('%remain%', $remain);

Vielen Dank!

Answer 1

Sie binden den Countdown als Überschrift ersten Grades ein:

<h1><p>Verbleibende Zeit: <span id="remain"></span></p></h1>

(Nehmen Sie das <b> davor und dahinter und das <p> bitte raus, das ist so nicht korrekt.)

Im einfachsten Fall fixieren Sie die Überschrift (ein Block-Element) wie folgt:

<h1 style="position: fixed;">Verbleibende Zeit: <span id="remain"></span></h1>

Nun wird sich aber dieser Text mit dem daruntzer liegenden Inhalt überlagern, deshalb fügen wir einen weißen Hintergrund ein und sorgen dafür, dass diese auch ein wenig nach oben und unten reicht:

<h1 style="position: fixed; background-color: white; padding: 1em 0;">Verbleibende Zeit: <span id="remain"></span></h1>

Wenn es damit noch nicht klappt, posten Sie gerne einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen. Dann sehe ich mir das nochmal im Kontext an. Es kann sein, dass noch ein weißer Platzhalter an die Stelle der Überschrift muss, damit die Items oben nicht verdeckt werden. Eventuell muss auch die Position noch justiert werden.

Comments

Vielen Dank für ihre Hilfe!
Das mit dem flexiblen Countdown funktioniert dadurch. Nur leider überdeckt dieser die Items. Da die Items allerdings alle sehr kurz sind, wäre es super, wenn man den Countdown rechts auf der Seite positioniert.
Hier anbei noch der Pretest-Link für die betroffene Seite:
https://www.soscisurvey.de/tutorial194465/?act=SbqIiMf3hON9nPWKcwZj8nSl

---

Gibt es denn auch die Option, wie zum Beispiel in Excel, dass man einfach die obere Zeile mit dem Countdown festsetzt?

---

Im Moment scheint um Ihren HTML-Code herum das html() zu fehlen:

html('
  <h1 style="position: fixed; background-color: white; padding: 1em 0;">Verbleibende Zeit: <span id="remain"></span></h1>
');

Alternativ können Sie den HTML-Code natürlich auch als "HTML-Code" anstatt als "PHP-Code" in den Fragebogen einbinden.

> Gibt es denn auch die Option, wie zum Beispiel in Excel, dass man einfach die obere Zeile mit dem Countdown festsetzt?

Alles ist möglich. Aber das in HTML zu realisieren ist deutlich aufwändiger als in Excel: https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling/29812382