Zur Navigation

Countdown

1 Don

Hallo an alle,

ich bin dabei ein kleines Quiz mit Fangfragen für meine Homepage zu schreiben. Dafür verwende ich einfach ein Formular und ein PHP-Script, welches die Eingaben beim Klick auf Submit prüft...

Jetzt meine Frage: Ist es möglich einen Countdown anzuziegen (z.B. 5min), der dann auch automatisch nach Ablauf der Zeit den Submit ausführt?
Brauche dies um ein wenig Zeitdruck in das Quiz zu bringen...
Ich hoffe es kann mir jemand helfen, kenne mich mit JavaScript einfach nicht aus.

Schon mal vielen Dank im Vorraus

08.01.2007 23:22

2 Jörg Kruse

Hallo Don,

ich würde es in etwa so probieren.

1. dieses Script im Head einbinden:

<script type="text/javascript">
remainingseconds = 300;
function countdown()
{
    if (remainingseconds == 0) {
        document.Quiz.Button.click();
    } else {
        remainingseconds = remainingseconds - 1;
        document.getElementById('countdown').innerHTML = remainingseconds;
    }
}
window.setInterval('countdown()',1000);
</script>

Das setInterval() ruft die Funktion countdown() jede Sekunde auf. Diese wiederum zählt beginnend bei 300 jedesmal einen Zähler ab - bis es die 0 erreicht und stattdessen auf den Button klickt.

2. Die Namen im Formular müssen entsprechend den Objekt-Namen, die in der Funktion verwendet werden, angepasst werden:

<form method="post" action="auswertung.php" name="Quiz">

<p>Verbleibende Sekunden: <span id="countdown">30</span></p>
<p><button type="submit" name="Button">fertig</button></p>
</form>

09.01.2007 00:36

3 Don

Der Countdown an sich funktioniert ganz gut...
Nur wenn man die Seite aktualisiert bleiben die Texte in den Feldern des Formulars bestehen und der Countdown wird zurückgesetzt. Somit ist es also möglich, die Zeit beliebig zu verlängern.

Gibt es eine Möglichkeit die Felder beim Laden bzw. Neuladen der Seite zu leeren?

09.01.2007 18:55

4 Rudy

Gibt es eine Möglichkeit die Felder beim Laden bzw. Neuladen der Seite zu leeren?
Wenn es nur ein Formular auf der aktuellen Seite gibt:

<body onload="document.forms[0].reset()">
Schöner wäre:

<body onload="document.getElementById('quizformular').reset()">
...
<form id="quizformular" method="post">
...
</form>
Ist aber alles Javascript... sowohl Counter als auch Leeren des Formulars lassen sich ausschalten. Zuverlässig geht der Countdown nur auf Serverseite - oder aber Du gibst das gesamte Quiz auch mit JS aus, damit Benutzer ohne Javascript gar nicht erst zu den Fragen kommen.

09.01.2007 19:07 | geändert: 09.01.2007 19:08

5 Don

Danke schonmal...
Ist mir auch schon in den Sinn gekommen, dass JavaScript ganz einfach abschaltbar ist. Nur kann man serverseitig ja wohl nicht den Submit des Formulars auslösen.
Schön wäre es, wenn beim Laden der Seite bei ausgeschaltetem Javascript eine Meldung wie "Es ist Javascript für das Quiz nötig" ausgegeben werden würde, anstatt das Quiz selber...

09.01.2007 19:15

6 Rudy

Schön wäre es, wenn beim Laden der Seite bei ausgeschaltetem Javascript eine Meldung wie "Es ist Javascript für das Quiz nötig" ausgegeben werden würde, anstatt das Quiz selber...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
</head>
<body onload="document.getElementById('quizformular').reset();">
<div id="all" style="width:800px">
<form id="quizformular" action="" method="post">
  <fieldset>
    <input type="text" />
  </fieldset>
</form>
</div>
<noscript>
  <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:white; z-index:1">
     <p style="color:red; text-align:center;"><strong>Bitte aktivieren Sie Javascript.</strong></p>
  </div>
</noscript>
</body>
</html>

09.01.2007 19:43

7 Don

Bei näherer Betrachtung ist mir aufgefallen, dass diese Lösung nur bei Firefox einwandfrei funktioniert. Dies mag an dem Aufbau meiner Seite liegen, da ich dort schon div's verwendet habe.
Im Internet Explorer 7 und Opera 9 funktioniert das ganze nur eingeschränkt.

Hab die ganze Sache mal hochgeladen:
Link

09.01.2007 19:55 | geändert: 09.01.2007 20:13

8 Jörg Kruse

Bau das noscript div mal direkt hinter dem body Tag ein, dann funktioniert's auch im IE und in Opera

<body onload="document.forms[0].reset()">
<noscript>
 <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:white; z-index:1 noscroll">
    <p style="color:red; text-align:center;"><strong>Bitte aktivieren Sie Javascript.</strong></p>
 </div>
</noscript>

09.01.2007 21:22

9 Rudy

dann funktioniert's auch im IE und in Opera
Oh, getestet hatte ich das auf die Schnelle nur im Fx - sorry ;)

09.01.2007 21:33

10 Don

Jetzt funktionierts, wie erhofft.

Vielen Dank

09.01.2007 22:30