Timer Javascript / PHP non réinitialisé sur reload

Bonjour,

Je cherche à réaliser un petit timer :

- Lorsque l'utilisateur arrive sur la page et qu'il entre une mauvaise réponse, le timer se déclenche, afin de l'empêcher de rentrer une autre réponse dans le laps de temps ;
- Le timer n'est pas réinitialisé sur reload de la page ou fermeture de la page.

J'imagine qu'il faut aller voir du côté d'une session PHP + javascript ?

Merci par avance pour votre aide !

Citation:

Envoyé par cyberlp

- Le timer n'est pas réinitialisé sur reload de la page ou fermeture de la page.

Dans ce cas mieux vaut éviter un reLoad et en passer par un envoi en Ajax.

Pour la fermeture de la page, les variables de session sont aussi perdues, mieux vaut envisager un cookie

Ok. Alors l'idée donc c'est qu'il y a un formulaire avec un champ, dans lequel l'utilisateur entre sa réponse.
Si elle est correcte, tant mieux, il a gagné.
Si elle est incorrecte, un message d'erreur s'affiche. S'il rentre à nouveau une réponse incorrecte trop rapidement (ici en moins de 30 secondes), le formulaire ne s'affiche pas, avec à la place un compte à rebours lui disant : "Vous ne pourrez pas saisir de nouvelle réponse avant X secondes".

Tout cela fonctionne. Si jamais l'utilisateur rafraîchit en faisant F5, ça fonctionne toujours, mais s'il se contente de retaper l'URL, tout est réinitialisé en effet. Du coup comment utiliser un cookie dans le code ci-après ?

Merci par avance !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<?php
    if (!isset($time)) {
    session_start();
    $_SESSION['question_start'] = time();
    $time=$_SESSION['question_start'];
    }
?>
 
<?php if ($_POST['uname']=="bidule") { 
?><div class="time message"><?php echo $bravo; $reussite=1; ?></div>
<?php } 
if (isset($_POST['uname'])) { 
?><div class="time message">
    <?php
    echo $erreur; 
    $timediff = time() - $_POST['timer'];
  ?>
    </div>
<?php      } ?>
 
<?php if ($reussite != 1) { ?>
<div class="time">Entrer la réponse :</div>
 
<?php 
if ((isset($timediff)) && ($timediff < 30)) {
?>
<script>
var sTime = new Date().getTime();
var countDown = 120;
 
function UpdateTime() {
    $("#form").hide();
    var cTime = new Date().getTime();
    var diff = cTime - sTime;
    var seconds = countDown - Math.floor(diff / 1000);
    if (seconds >= 0) {
        var minutes = Math.floor(seconds / 60);
        seconds -= minutes * 60;
        $("#delai").html("<div style='padding:10px;'>Vous pourrez saisir une nouvelle réponse dans :<br/></div>");
        $("#minutes").html(minutes < 10 ? "0" + minutes : minutes);
        $("#seconds").html(seconds < 10 ? "0" + seconds : seconds);
     } else {
        $("#countdown").hide();
        $("#form").show();
        var compteur = 1;
        clearInterval(counter);
    }
}
UpdateTime();
var counter = setInterval(UpdateTime, 500);
</script>
 
<div id="countdown">
    <div id="delai" style="float:left"></div>
    <div id="minutes" style="float:left;">00</div>
    <div style="float:left; font-size:2em; line-height: 100%;">:</div>
    <div id="seconds" style="float:left;">00</div>
</div>
 
<?php } ?>
 
<div id="form">
<form id="form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  <div id="input" class="container">
    <label><b></b></label>
    <input type="text" placeholder="" name="uname" maxlength="11">
    <input type="hidden" name="timer" value="<?=$time;?>">
    <button type="submit">OK</button>
  </div>
</form>
<br/>
 </div>
 
<?php  } ?>

ma réponse précédente parle requête Ajax et de Cookies; tout ça ce gère en uniquement JavaScript.
Le PHP n'intervient qu'en réponse à la requête Ajax.
Il n'y nul besoin de variables de session, et la page pourrait être en HTML pur, sans la moindre trace de PHP dedans...