Mehrfach dieselbe Timeranzeige auf eine Fragebogenseite

Question

Ich habe einen 16 Minuten langen Test auf Soscisurvey entworfen. Während der Bearbeitung der Fragen zählt ein programmierter Timer von 16 Minuten herunter. Die Anzeige des Timers ist jedoch nur ganz oben auf der Seite zu sehen.

Um den Teilnehmern ständiges Scrollen zu ersparen, möchte ich die Zeitanzeige gerne mehrfach auf der Fragebogenseite anzeigen.
Kopiere ich den html Code der oberen Zeitanzeige, wird die Zeit nicht angezeigt.

Gibt es eine Möglichkeit, die Zeitanzeige mehrfach auf einer Seite einzufügen?

Answer 1

Ja, Sie können mehrere HTML-Tags für die Anzeige der Zeit vorsehen - aber Sie müssen diesen unterschiedliche Kennungen geben und dann (mit einer Schleife) jedes auch getrennt aktualisieren.

Wenn Ihr JavaScript-Code für die Anzeige also z.B. aktuell so aussieht:

  var display = document.getElementById("timeDisplay");
  if (!display) {
    return;
  }
  while (display.lastChild) {
    display.removeChild(display.lastChild);
  }
  var minutes = Math.floor(remain / 60);
  var seconds = String(remain - 60 * minutes);
  if (seconds.length < 2) {
    seconds = "0" + seconds;
  }
  var displayText = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(displayText);
  display.appendChild(displayNode);

Dann würden Sie es wie folgt ändern:

  var displayIDs = ["timeDisplay1", "timeDisplay2", "timeDisplay3", "timeDisplay4", "timeDisplay5"];
  for (var d=0; d<displayIDs.length; d++) {
    var display = document.getElementById(displayIDs[d]);
    if (!display) {
      return;
    }
    while (display.lastChild) {
      display.removeChild(display.lastChild);
    }
    var minutes = Math.floor(remain / 60);
    var seconds = String(remain - 60 * minutes);
    if (seconds.length < 2) {
      seconds = "0" + seconds;
    }
    var displayText = String(minutes) + ":" + seconds;
    var displayNode = document.createTextNode(displayText);
    display.appendChild(displayNode);
  }

Comments

Vielen Dank schonmal für die Antwort. Ich habe nun lange rumprobiert, hatte aber noch keinen Erfolg. Bei mir stand bisher statt "var display" "var out"
im Code. Außerdem hatte ich am Ende die Verbleibende Zeit mit remain angezeigt. Ich fürchte, ich brauche weitere Hilfe in meinem konkreten Code (3 Bausteine, PHP, Html, Html), um das Problem zu lösen:

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 = 960;  // Der Teilnehmer hat 16 Minuten (960 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);

<script type="text/javascript">
<!--
// Funktion zur Weiterleitung
function weiter() {
  // Eine Meldung anzeigen (optional)
  alert("Die Zeit ist vorbei.");
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}
// Countdown anzeigen
var date0 = new Date();
var timeout = date0.getTime() + %remain% * 1000;
function updateCountdown() {
  // Zeit berechnen
  var date = new Date();
  var time = Math.ceil((timeout - date.getTime() - 50) / 1000);  // Verbleibende Zeit in Sekunden
  // Zeit anzeigen
  var out = document.getElementById("remain");
  if (!out) {
    return;
  }
  while (out.lastChild) {
    out.removeChild(out.lastChild);
  }
  var minutes = Math.floor(time / 60);
  var seconds = String(time - 60 * minutes);
  if (seconds.length < 2) seconds = "0" + seconds;
  var display = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(display);
  out.appendChild(displayNode);
}
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Zusätzlicher Timer für die Aktualisierung des Countdowns
  window.setInterval(updateCountdown, 1000);
  updateCountdown();
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});
// -->
</script>


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

---

Nehmen Sie den JavaSccript-Code zwischen

   var out = document.getElementById("remain");

und

   out.appendChild(displayNode);

Das ist genau der Teil, der oben steht - und da muss das FOR außenherum.

Versuchen Sie es einmal und posten Sie dann einen Pretest-Link, der direkt auf diese Seite führt.

---

Hier der Testlink: https://www.soscisurvey.de/stavpsychtraining/?act=3HLljogEtwTjIgtYxTzE4HGI

Ich habe nun um meinen bestehenden Code die for-Schleife gelegt. Nach wie vor erscheint auf der Testseite ein "Verbleibende Zeit: ", aber keine Zeitangabe.
Wo liegt der Fehler, und warum muss ich am html code <h1>Verbleibende Zeit: <span id="remain"></span></h1> nichts ändern? Und welchen Teil des Codes müsste ich überhaupt erneut einfügen, um eine Zeitanzeige weiter unten auf der Seite zu erhalten?

aktueller Html Code:
<script type="text/javascript">
<!--
// Funktion zur Weiterleitung
function weiter() {
  // Eine Meldung anzeigen (optional)
  alert("Die Zeit ist vorbei.");
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}
// Countdown anzeigen
var date0 = new Date();
var timeout = date0.getTime() + %remain% * 1000;
function updateCountdown() {
  // Zeit berechnen
  var date = new Date();
  var time = Math.ceil((timeout - date.getTime() - 50) / 1000);  // Verbleibende Zeit in Sekunden
  // Zeit anzeigen
var displayIDs = ["timeDisplay1", "timeDisplay2", "timeDisplay3", "timeDisplay4", "timeDisplay5"];
  for (var d=0; d<displayIDs.length; d++) {
 var out = document.getElementById("remain");
  if (!out) {
    return;
  }
  while (out.lastChild) {
    out.removeChild(out.lastChild);
  }
  var minutes = Math.floor(time / 60);
  var seconds = String(time - 60 * minutes);
  if (seconds.length < 2) seconds = "0" + seconds;
  var display = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(display);
  out.appendChild(displayNode);
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Zusätzlicher Timer für die Aktualisierung des Countdowns
  window.setInterval(updateCountdown, 1000);
  updateCountdown();
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});
// -->
</script>

---

Die JavaScript-Konsole im Browser beschwert sich wie folgt:

> Uncaught SyntaxError: missing } in compound statement

Und zwar weil am Ende des FOR-Teils eine solche Klammer fehlt. zwischen diesen beiden Zeilen:

  out.appendChild(displayNode);
// Initialisierung der Weiterleitung

---

ok, Klammer habe ich jetzt ergänzt. Die Zeit wird aber immer noch nicht angezeigt, wo sind weitere Fehler?

---

Offenbar fehlen noch mehr Klammern ;)

> Uncaught SyntaxError: missing } after function body

Im Moment ist die richtige Position schwer zu finden. Lassen Sie den Code hier doch mal schön formatieren und einrücken, dann sollte klarer werden, wo die Klammer fehlt: https://beautifier.io/

Ich denke, es ist dieselbe Stelle wie vorhin - und zwar fehlt dort wohl noch eine schließende Klammer.

---

Puh, also das Klammerproblem ist endgültig gelöst, mittlerweile wird die Zeit oben wieder angezeigt :-)

Bleibt noch die Frage, welchen Code ich nun an weiteren Stellen auf derselben Seite einfügen muss, um die Zeitanzeige von "timedisplay 2" und Co zu sehen.
Weder die Kopie des Gesamtcodes noch die Kopie von <h1>Verbleibende Zeit: <span id="remain"></span></h1> haben funktioniert

---

ich warte noch auf Hilfe für den letzten Schritt meiner Timeranzeige. Die for-Schleife ist vollständig mit timeDisplay 1 bis 5. Was muss ich nun noch eingeben, um den Timer mehrfach auf einer Seite anzeigen zu lassen?