• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Countdown nicht neu Laden und Seite sperren

K

kanzer

New member
Hallo zusammen. Ich (JavaScript-Anfänger) sitze hier vor einem ungelösten Problem und hoffe, ihr könnt mir helfen.

Mein Vorhaben:
Ich habe eine Seite, auf der sich ein Benutzer anmeldet und Fragen beantworten muss. Nach jeder beantworteten Frage geht es weiter zur nächsten Seite. Frage1.php -> Frage2.php usw.
Am Ende möchte ich dann alle Fragen auswerten. Das Ganze habe ich bisher mit HTML, PHP und SQL realisiert.
Jetzt möchte ich aber, dass ein Benutzer für eine bestimmte Frage nur eine begrenzte Zeit zur Verfügung hat.
Ich habe also versucht, einen Timer in Javascript zu schreiben.

Den Countdown habe ich mir jetzt zusammengebastelt - nicht ganz alleine muss ich wohl gestehen.

Mein Problem:
Der Countdown soll nicht neu starten, wenn die Seite aktualisiert oder die Frage erneut aufgerufen wird.
Und nach Ablauf möchte ich die Seite und somit ein Beantworten der Frage gerne sperren.
Mein Ansatz war, es mit Cookies zu versuchen, scheiterte aber bei dem Versuch.
Vielleicht gibt es bessere Möglichkeiten, dir mir noch nicht in den Sinn kamen?

Danke im Voraus.

Und hier der Code zum Countdown
Code: 
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var sekunden = Math.floor((t / 1000) % 60);
  var minuten = Math.floor((t / 1000 / 60) % 60);
  var stunden = Math.floor((t / (1000 * 60 * 60)) % 24);
  var tage = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'tage': tage,
    'stunden': stunden,
    'minuten': minuten,
    'sekunden': sekunden
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var tageSpan = clock.querySelector('.tage');
  var stundenSpan = clock.querySelector('.stunden');
  var minutenSpan = clock.querySelector('.minuten');
  var sekundenSpan = clock.querySelector('.sekunden');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    tageSpan.innerHTML = t.tage;
    stundenSpan.innerHTML = ('0' + t.stunden).slice(-2);
    minutenSpan.innerHTML = ('0' + t.minuten).slice(-2);
    sekundenSpan.innerHTML = ('0' + t.sekunden).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

Die Seite wird nur im lokalen Netzwerk ausgeführt.
 
Zuletzt bearbeitet:
kanzer schrieb:
Der Countdown soll nicht neu starten, wenn die Seite aktualisiert oder die Frage erneut aufgerufen wird.
Zum Vergrößern anklicken....
die frage ist wie fein du das realisieren willst. das einfachste wäre du merkst dir beim ausliefern der seite in den sessiondaten, dass sie ausgeliefert wurde. jeder weitere versuch die seite zu laden lässt du scheitern oder lieferst die nächste seite aus. dazu müsstest du das cachen verhindern oder die zeit in einem cookie speichern und diesen regelmäßig aktualisieren.
allerdings kann man auch cookies ändern als nutzer und diesen z.b. auf einen langen zeitraum setzen. oder den js-timer mit dem debugger anhalten. du solltest also zusätzlich eine plausibilitätsprüfung auf serverebene vorsehen.


kanzer schrieb:
Mein Ansatz war, es mit Cookies zu versuchen, scheiterte aber bei dem Versuch.
Zum Vergrößern anklicken....
woran?
 
Danke schon mal für die schnelle Antwort. Ich sehe, du hast auch schon Lösungen.
Ok, dass es möglich ist, den Timer als Client zu stoppen, hatte ich vermutet. Und die Prüfung auf Serverseite werde ich auf jeden Fall im Hinterkopf behalten - Danke dafür.
Cachen verhindern?? Muss ich wohl erst mal googlen

Mit den Cookies hatte ich keinen Fortschritt, aber ich poste es gerne mal, was ich so habe.
So sollte hier eigentlich die deadline in ein Cookie gespeichert werden.

Code: 
var myClock = document.cookie;

if(document.cookie && document.cookie.match('myClock')){
  // hier die deadline aus dem COokie ziehen
  var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
}
else{
  // sonst deadline auf 5 Minuten

  var zeitMinuten = 5;
  var zeit = Date.parse(new Date());
  var deadline = new Date(zeit+ zeitMinuten *60*1000);

  // deadline ins Cookie speichern
  document.cookie = 'myClock=' + deadline + ';
 
Ich glaube, ich habe einen kleinen Fortschritt gemacht. Zumindest läuft der Timer schon mal runter und wird auch im Cookie gespeichert.

Hier mal der Code:
Code: 
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

var myClock = getCookie("myClock");



function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var sekunden = Math.floor((t / 1000) % 60);
  var minuten = Math.floor((t / 1000 / 60) % 60);
  return {
    'total': t,
    'minuten': minuten,
    'sekunden': sekunden
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var minutenSpan = clock.querySelector('.minuten');
  var sekundenSpan = clock.querySelector('.sekunden');

  function updateClock() {
    var t = getTimeRemaining(endtime);
    minutenSpan.innerHTML = ('0' + t.minuten).slice(-2);
    sekundenSpan.innerHTML = ('0' + t.sekunden).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}


if(document.cookie && document.cookie.match('myClock')){
  // deadline aus cookie
  var deadline = myClock;
}
// sonst deadline x minutes ab jetzt und 
// speichern in Cookie
else{
  var timeInMinutes = 3; // Minuten
  var currentTime = Date.parse(new Date());
  var deadline = new Date(currentTime + timeInMinutes*60*1000);
  
  // speichert deadline in cookie 
  document.cookie = 'myClock=' + deadline ;
}
initializeClock('clockdiv', deadline);
HTML: 
<div id="clockdiv">
<span class="minuten"></span>:<span class="sekunden"></span>
</div>

Jetzt bin ich auf ein neues Problem gestoßen, das ich vorher nicht bedacht hatte.
Denn, wenn ich jetzt dasselbe Script in verschiedenen Seiten verwende, wird ja immer auch derselbe Cookie ausgelesen. Dabei würde ich gerne für jede Seite ein neues anlegen.
Meine einzige Lösung lautet bisher, zu jeder Seite ein separates Script zu schreiben - also frage1.php>timer1.js, frage2.php>timer2.js usw

Funktioniert das nicht vielleicht auch in einem Script?
 
Zuletzt bearbeitet:
Du kannst doch mit document.location den Namen der Seite auslesen und dann das irgendwie in den Cookienamen einbauen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben