Timer mit Countdown funktioniert nicht

Question

Hallo, ich habe eine Frage zum Countdown.

Ich habe eine Seite mit experimenteller Manipulation, d.h. dort befindet sich ein Zufallsgenerator, der einen dann zu einer von 2 Aufgaben zuteilt. Darunter ist ein Freitextfeld, wo man die Aufgabe ausführlich beantworten kann.

Ich möchte auf der Seite nun folgendes: Die Menschen sollen 45 sec draufbleiben, also erst nach 45 sec soll der Weiter-Button unten rechts erscheinen. Damit die Menschen wissen, dass es einen Countdown gibt, soll es auch einen sichtbaren Countdown auf der Seite geben.

Die Menschen sollen nach 45 sec jedoch NICHT automatisch auf die nächste Seite weitergeleitet werden, oder gezwungen werden mit dem Schreiben aufzuhören. Das Ziel ist lediglich, dass sie MINDESTENS 45 sec auf der Seite verbleiben.

Die Hilfe-Seiten haben mir nicht weitergeholfen. Ich habe derzeit schon mehrere Dinge versucht: PHP-Code zuerst (vor die Manipulation) und dann HTML-Code. Ich habe auch nur HTML-Code probiert und das sowohl als direkten HTML-Baustein als auch als Textbaustein mit "HTML"-Text.

Mein Code ist der folgende:

<script type="text/javascript">
<!--

var countdown = 45;
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();emphasized text
  // 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>

Muss ich diesen Code vor der Manipulation (Zufallsgenerator mit Textbausteinzuordnung, dann Freifeld) oder nach dieser einbauen?

Liebe Grüße

Answer 1

Muss ich diesen Code vor der Manipulation (Zufallsgenerator mit Textbausteinzuordnung, dann Freifeld) oder nach dieser einbauen?

Das ist unerheblich.

Wenn es nicht funktioniert, dann prüfen Sie bitte die Fehlerkonsole Ihres Browsers und/oder posten Sie einen Pretest-Link direkt zur betroffenen Seite.

Comments

Das mit der Fehlerkonsole hilft mir nicht so, ich kenne mich mit HTML-Codes nicht aus. Aber hier ist der Pretest ab Seite 5, auf der die Manipulation ist: https://www.soscisurvey.de/Bachelorarbeit-Vollmer-Leipzig/?act=8SBZipZTcSR6fhCTvNcc6jku

Answer 2

Die Menschen sollen nach 45 sec jedoch NICHT automatisch auf die nächste Seite weitergeleitet werden

Bitte entfernen Sie einfach diese Zeilen aus Ihrem Code.

// Timer für automatische Weiterleitung starten
window.setTimeout(weiter, 45 * 1000);

Damit die Menschen wissen, dass es einen Countdown gibt, soll es auch einen sichtbaren Countdown auf der Seite geben.

Laut Anleitung müssen Sie dafür ein Element mit der HTML-ID "timeDisplay" einfügen.

<!-- HTML-Element zur Anzeige der Zeit -->
<div id="timeDisplay" style="font-size: 200%; margin: 16px 0; text-align: center">&ndash;</div>

Allerdings sucht Ihr Code nach einem Element "remain", vgl.

  // Zeit anzeigen
  var out = document.getElementById("remain");
  if (!out) {
    return;
  }

Wenn Sie also ein Element mit der HTML-ID "remain" einfügen, dann sollte dort die Zeit angezeigt werden. Das Element fügen Sie dort ein, so der Timer erscheinen soll. Und darunter der JavaScript-Code.

Das mit der Fehlerkonsole hilft mir nicht so, ich kenne mich mit HTML-Codes nicht aus.

Wenn Sie damit arbeiten, schadet es nicht, sich die Grundlagen mal anzuschauen ;)