Problème de $post aléatoire et base de donnée

jeanmaki
Javascript

Bonjour je souhaite réaliser une page de calcul mental en html/jscript/php/mysql et j'ai un petit soucis concernant ce que j'envoie à la base de donnée et ce qu'elle reçoit.
En effet si je donne un exemple :
1er calcul 2+2=? je tape 4
2eme calcul 3+3=?

lorsque j'ai taper 4 et donc valider la base de donnée enregistre le 4 mais sur le calcul d'apres soit 3+3=4

calcul.html

<html lang="en" >
<head>
    <title>Powerful Chat System - Lesson 7</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="css/calculcss.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<center>
<font face="Comic Sans MS" size="6" color="red">CALCUL MENTAL...</font>
<br>
<font face="Comic Sans MS" size="4" color="blue">Quel est le résultat de:</font>
<form class="mental_form" name="mental" action="calcul.php" style="font-family: Comic Sans MS; font-size: 14 pt">
<input type="text" maxlength="3" size="3" style="font-family: Comic Sans MS; font-size: 18 pt" id="chiffre1" name="c1">
<input type="text" maxlength="1" size="1" style="font-family: Comic Sans MS; font-size: 18 pt" id="signe1" name="s1">
<input type="text" maxlength="3" size="3" style="font-family: Comic Sans MS; font-size: 18 pt" id="chiffre2" name="c2">
<br>
<input type="text" maxlength="3" size="3" style="font-family: Comic Sans MS; font-size: 18 pt" id="chiffre3" name="c3">
<input type="text" maxlength="1" size="1" style="font-family: Comic Sans MS; font-size: 18 pt" id="signe2" name="s2">
<input type="text" maxlength="3" size="3" style="font-family: Comic Sans MS; font-size: 18 pt" id="chiffre4" name="c4">
<br>
<input type="text" maxlength="3" size="3" id="resultat" name="resultat" style="color: white; font-size: 24pt" readonly="readonly">
<input type="text" maxlength="3" size="3" id="resultat2" name="resultat2" style="color: white; font-size: 24pt" readonly="readonly">
<br>
<input type="text" name="T1" size="3" id="inter1">
<input type="text" name="T2" size="3" id="inter2">
<p>
<input type="text" id="calcul" name="calcul" maxlength="3" size="3" style="font-family: Comic Sans MS; font-size: 24pt" >
<font size="24pt"> = </font>
<input type="text" maxlength="3" size="3" id="votresultat" name="votresultat" style="font-family: Comic Sans MS; font-size: 24pt" onFocus="this.value=''" />
<input type="submit" name="submit" value="Valider votre réponse" onClick="Valider();" id="validation" />
<br>
<br>
<input type="text" maxlength="3" size="3" id="vraireponse" name="vraireponse" style="color: #FF0000; font-size: 24pt; font-family: Comic Sans MS; font-style: italic; font-weight: bold" readonly="readonly">
<input type="text" maxlength="3" size="3" id="vraireponse2" name="vraireponse2" style="color: #FF0000; font-size: 24pt; font-family: Comic Sans MS; font-style: italic; font-weight: bold" readonly="readonly">
<div>
    <h3 class="resultatS">Votre resultat envoyé</h3>
    <h3 class="resultatE">Votre resultat non envoyé</h3>
    <h3 class="resultat2S">Resultat 2 envoyé</h3>
    <h3 class="resultat2E">Resultat 2 non envoyé</h3>
    <h3 class="c2S">Chiffre2 envoyé</h3>
    <h3 class="c2E">Chiffre2 non envoyé</h3>
    <h3 class="signeS">Signe envoyé</h3>
    <h3 class="signeE">Signe non envoyé</h3>
</div>
<br>
<input type="button" value="Générer un calcul aléatoire" onClick="Blitz();" id="aleatoire">
<br>
<input type="button" value="Réponse" onClick="Soluce();" id="boutonreponse">
<br>
<input type="button" value="Nouveau compte" OnClick="javascript:location.reload()">
</p>
<br>
<input type="text" id="calc1" name="calc1">
<input type="text" id="calc2" name="calc2">
</form>
<span id="chronotime">0:00:00:00</span>
<font size="1" face="Comic Sans MS">
</center>
<script src="js/calcul.js"></script>
</body>
</html>

calcul.js 

function addEvent(obj, event, fct) {
    if (obj.attachEvent) //Est-ce IE ?
        obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
    else
        obj.addEventListener(event, fct, true);
}
addEvent(window , "load", chronoStart); //On les lance toutes les deux au chargement de la page
addEvent(window , "load", Blitz);
addEvent(document.getElementById('validation'), "click", Blitz); //Un clic sur "truc" déclenche la fonction al3()
function lancer(fct) {
    addEvent(window, "load", fct);
}
startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
    end = new Date()
    diff = end - start
    diff = new Date(diff)
    var msec = diff.getMilliseconds()
    var sec = diff.getSeconds()
    var min = diff.getMinutes()
    var hr = diff.getHours()-1
    if (min < 10){
        min = "0" + min
    }
    if (sec < 10){
        sec = "0" + sec
    }
    if(msec < 10){
        msec = "00" +msec
    }
    else if(msec < 100){
        msec = "0" +msec
    }
    document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
    timerID = setTimeout("chrono()", 10)
}
function chronoStop(){
    clearTimeout(timerID)
}
function chronoContinue(){
    start = new Date()-diff
    start = new Date(start)
    chrono()
}
function chronoStart(){
    start = new Date()
    chrono()
}

function Blitz(){
Calculun();
}
function Blitz2(){
Calcultrois();
}
function Calculun(){
chiffreun = Math.round(Math.random()*10);
window.document.getElementById('chiffre1').value = chiffreun;
window.document.getElementById('calcul').value +=chiffreun;
window.document.getElementById('calc1').value +=chiffreun;
Signeun();
}
function Calcultrois(){
chiffretrois = Math.round(Math.random()*10);
window.document.getElementById('chiffre3').value = chiffretrois;
window.document.getElementById('calcul').value +=chiffretrois;
window.document.getElementById('calc2').value +=chiffretrois;
Signedeux();
}
function Signeun(){
nbr = Math.round(Math.random()*0); //mettre 1 si deux signe different etc..
signeun = new Array(1) // mettre 2 si deux signe different
signeun[0] ='+' // mettre 1 si il y a un deuxieme signe
window.document.getElementById('signe1').value=signeun[nbr];
window.document.getElementById('calcul').value+=signeun[nbr];
window.document.getElementById('calc1').value +=signeun[nbr];
Calculdeux();
}
function Signedeux(){
nbr2 = Math.round(Math.random()*0); //mettre 1 si deux signe different etc..
signedeux = new Array(1) // mettre 2 si deux signe different
signedeux[0] ='+' // mettre 1 si il y a un deuxieme signe
window.document.getElementById('signe2').value=signedeux[nbr2];
window.document.getElementById('calcul').value+=signedeux[nbr2];
window.document.getElementById('calc2').value +=signedeux[nbr2];
Calculquatre();
}
function Calculdeux(){
chiffredeux = Math.round(Math.random()*10);
window.document.getElementById('chiffre2').value = chiffredeux;
window.document.getElementById('calcul').value +=chiffredeux;
window.document.getElementById('calc1').value +=chiffredeux;
somme1=eval(mental.calc1.value);
if(Math.round(somme1)!=somme1){alert('Calcul compliqué!!\nDivision trop longue...');
location.reload();}
else{
window.document.getElementById('inter1').value=somme1;
Reponse();
 }
}
function Calculquatre(){
chiffrequatre = Math.round(Math.random()*10);
window.document.getElementById('chiffre4').value = chiffrequatre;
window.document.getElementById('calcul').value +=chiffrequatre;
window.document.getElementById('calc2').value +=chiffrequatre;
somme2=eval(mental.calc2.value);
if(Math.round(somme2)!=somme2){alert('Calcul compliqué!!\nDivision trop longue...');
location.reload();}
else{
window.document.getElementById('inter2').value=somme2;
Reponse2();
 }
}
response = Math.round(result);
function Reponse(){
result = eval(mental.calcul.value);
if((result < 0)||(result>201)){alert('Calcul compliqué!!\nResultat négatif ou trop grand...');
location.reload();}
else{   
window.document.getElementById('resultat').value=result;}
}
response2 = Math.round(result2);
function Reponse2(){
result2 = eval(mental.calcul.value);
if((result2 < 0)||(result2>201)){alert('Calcul compliqué!!\nResultat négatif ou trop grand...');
location.reload();}
else{   
window.document.getElementById('resultat2').value=result2;}
}
function Valider(){
votreponse=mental.votresultat.value;
votreponse2=mental.votresultat.value;
    if(votreponse==result)
    {
            alert('GENIAL!!!\nVOUS ETES FORT!!!');
            $(function() {
            $('.mental_form').submit(function() { 
                $.post('calcul.php', { c1: $('.mental_form input[name=c1]').val(),
                                        s1: $('.mental_form input[name=s1]').val(),
                                        c2: $('.mental_form input[name=c2]').val(),
                                        votresultat: $('.mental_form input[name=votresultat]').val()
                                        },
                    function(data){
                        if (data.result == 1){
                            $('.mental_form .resultatS').fadeIn('slow', function () {
                                $(this).delay(1000).fadeOut('slow'); 
                            }); 
                        } else {
                            $('.mental_form .resultatE').fadeIn('slow', function () {
                                $(this).delay(1000).fadeOut('slow'); 
                            }); 
                        }
                    }
                );
                return false; 
            });
            });
        document.getElementById("calcul").value = "";
        chronoContinue();
    }
    else
    {
        alert('OUPS! Erreur de calcul!\nReéssayez...');
        chronoContinue();
    }
}

function Soluce(){
window.document.getElementById('vraireponse').value=result;
window.document.getElementById('validation').disabled=true;
}
function Soluce2(){
window.document.getElementById('vraireponse2').value=result2;
window.document.getElementById('validation').disabled=true;
}

Merci de m'éclairer

8 réponses

Pewel-OutOfNutella
Réponse acceptée

Salut !
J'ai testé ton appli, il semblerait que tu update la valeur des tes input avant de les récupérer pour les envoyer à la base.
Du coup tu envoies les input de l'addition B avec le résultat de l'addition A.

Il faut que tu récupère la valeur des input avant de les update.
Il faut appeller ta fonction Blitz() après avoir envoyé tes données, et non pas bindé ton évènement sur ton bouton. Actuellement, tu as deux événements sur ton bouton valider, et c'est pas très bon comme comportement.

Du coup, enlève cette ligne en haut de ton script js :

addEvent(document.getElementById('validation'), "click", Blitz);

Ensuite, fait appel à ta fonction Blitz() qui va te générer tes nouvelles valeurs après l'envoi de tes données, aprèes ton $.post dans la fonction valider(), comme ceci : 

function Valider(){
    votreponse=mental.votresultat.value;
    votreponse2=mental.votresultat.value;
    if(votreponse==result) {
            alert('GENIAL!!!\nVOUS ETES FORT!!!');
            $(function() {
                $('.mental_form').submit(function() { 
                    $.post('calcul.php', { c1: $('.mental_form input[name=c1]').val(),
                                            s1: $('.mental_form input[name=s1]').val(),
                                            c2: $('.mental_form input[name=c2]').val(),
                                            votresultat: $('.mental_form input[name=votresultat]').val()
                                            },
                        function(data){
                            if (data.result == 1){
                                $('.mental_form .resultatS').fadeIn('slow', function () {
                                    $(this).delay(1000).fadeOut('slow'); 
                                }); 
                            } else {
                                $('.mental_form .resultatE').fadeIn('slow', function () {
                                    $(this).delay(1000).fadeOut('slow'); 
                                }); 
                            }
                        }
                    );
                    Blitz();
                    return false; 
                });
            });
        document.getElementById("calcul").value = "";
        chronoContinue();
    }
    else
    {
        alert('OUPS! Erreur de calcul!\nReéssayez...');
        chronoContinue();
    }
}

Voilà, tu peux mettre des console.log pour t'aider et y voir plus clair dans ton code, c'est ce qui m'a permis de voir ce qui ne fonctionnait pas.

Ensuite, j'ai un bug au troisième calcul, l'input calcul ne se réinitialise pas, j'ai regardé vite fait mais il y'a trop de code.
Dis moi si ça fait pareil chez toi.

Ps : par la suite, essaye si tu en as le temps de faire du code plus clair, plus compréhensible et d'utiliser jQuery partout (pas de document.getElementById par exemple) :D

Maenhyr

Bonjour,

j'ai pas mal de questions qui me viennent à l'esprit en analysant ton code, j'aurais besoin que tu y répondes avant de pouvoir t'aiguiller.

    1. Pourquoi as tu besoin d'envoyer les résultats à ton serveur ?
    1. Que fais tu avec ta base de données ?
    1. Pourquoi afficher 2 calcul alors que tu n'en envoies visiblement qu'un à ton serveur ?
    1. Pourquoi utiliser jQuery seulement pour le $.post et pas pour tout ton code ?
    1. Est ce que tu fais le calcul côté serveur ?

En attendant je vais te donner plusieurs conseils pour progresser.

  1. Utiliser le principe DRY (Don't Repeat Yourself): on remarque que plusieurs fonctions sont similaires avec seulement quelques paramètres à modifier, il faut en profiter pour faire une seule fonction. Moins de code (donc moins d'erreur) et plus facile à modifier si tu as besoin de rajouter des fonctionnalités.
    Utiliser au minimum le css en inline. Tout le code basé dans l'attribut style peut partir dans ta feuille de style. Cela te permettra de ne taper moins de code.

  2. Bien indenter ton code : Il faut le faire partout !

  3. Eviter de mettre de faire les appels JS dans le html, ex:

PAS BON 

<input type="submit" name="submit" value="Valider votre réponse" onClick="Valider();" id="validation" />

BON 

//html
<input type="submit" name="submit" value="Valider votre réponse" id="validation" />
//jQuery 
jQuery(function($) {
    $('#validation').click(Valider);
});
  1. Eviter de commencer les fonctions par une majuscule, ce n'est pas une erreur, plus une bonne pratique. ex (maFonction, maSuperFonction, ...).

Profite de ces conseils pour optimiser ton code et lorsque tu auras répondu à mes questions, on pourra voir ce qui cloche.

jeanmaki
Auteur

Salut Pewel! et merci ca marche !
Oublie le troisième calcul c'était une solution purement expérimentale de ma part. je vais le supprimer. le code est bordélique je le sais ;-)
Car en plus de ça il y a un chronomètre et il y a mes commentaires perso.

Salut Prbaron!
j'ai besoin de mémoriser des calculs juste ou faux dans une base de donnée et je sais que ce n'est pas bien de mettre le css directement dans le html mais j'ai récupérer un script que j'adapte à ma manière. Ce qui explique le fait que ce soit un peu bordélique. merci pour tes conseils.

Lotfi Berrahal

j'ai fait un petit bout de script jquery sans commentaire si tu veux le récupérer ça peut peut être t'aider.
Si tu veux que je le documente n'hésite pas à demander.
le lien
il n'y a rien en php mais la page index.php tu peux y mettre du php dedans pour la gestion en bdd.
il y a juste une fonction init qui crée les opérations.
Une fonction check qui vérifie ton résultat et le résultat juste avec une condition qui si le résultat est bon alors message succes et sinon message erreur.
C'est pas le plus propre mais ça peut peut être t'aider ?

jeanmaki
Auteur

Parfait Lofti ;-) Merci

jeanmaki
Auteur

Salut Lofti, j'ai repris le script javascript que tu m'as passé par ce qu'il est beaucoup plus simple que celui que j'utilisai aupravant cependant j'ai maintenant un problème avec la base de donnée je n'arrive pas à y ajouter les résultats voici les scripts :

index2.php

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Calcul mental</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <div class="row">
        <h1>Calcul Mental</h1>
        <div class="columns large-12">
            <h2>Quel est le résultat de ? </h2>
            <div class="columns large-6">
                <form class="mental_form2" action="calcul.php">
                    <div class="columns large-4">
                        <input class="champ" type="text" name="n1" id="n1">
                    </div>
                    <div class="columns large-4">
                        <input class="champ" type="text" name="si1" id="si1">
                    </div>
                    <div class="columns large-4">
                        <input class="champ" type="text" name="n2" id="n2">
                    </div>
                    <div class="columns large-4">
                        <label for="reponse">Votre réponse</label>
                    </div>
                    <div class="columns large-4">
                        <input type="text" name="result" id="result">
                    </div>
                    <div class="columns large-4">
                        <input type="submit" name="submit" id="submit" value="Valider" class="button small right">
                    </div>
                </form>
            </div>
            <div class="columns large-6 res">

            </div>
        </div>
    </div>
    <span id="chronotime">0:00:00:00</span>
    <script src="js/api.js"></script>
</body>
</html>

api.js 

startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
    end = new Date()
    diff = end - start
    diff = new Date(diff)
    var msec = diff.getMilliseconds()
    var sec = diff.getSeconds()
    var min = diff.getMinutes()
    var hr = diff.getHours()-1
    if (min < 10){
        min = "0" + min
    }
    if (sec < 10){
        sec = "0" + sec
    }
    if(msec < 10){
        msec = "00" +msec
    }
    else if(msec < 100){
        msec = "0" +msec
    }
    document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
    timerID = setTimeout("chrono()", 10)
}
function chronoStop(){
    clearTimeout(timerID)
}
function chronoContinue(){
    start = new Date()-diff
    start = new Date(start)
    chrono()
}
function chronoStart(){
    start = new Date()
    chrono()
}
function init(){
    var n1 = 1 + Math.floor(Math.random() * 10);
    var si1 = '+';
    var n2 = 1 + Math.floor(Math.random() * 10);
    $('#n1').val(n1);
    $('#si1').val(si1);
    $('#n2').val(n2);
}
function success(){
    $('.res').html('<div data-alert class="success alert-box">Bien joué ! <a href="#" class="close">×</a></div>');
}
function error(){
    $('.res').html('<div data-alert class="alert alert-box">Dommage ! même joueur joue encore ! <a href="#" class="close">×</a></div>');    
}
function send(){ 

        $('.mental_form2').submit(function() {
        $.post('calcul.php', { n1: $('.mental_form2 input[name=n1]').val(),
                        si1: $('.mental_form2 input[name=si1]').val(),
                    n2: $('.mental_form2 input[name=n2]').val(),
                    result: $('.mental_form2 input[name=result]').val()
                    }
                );
                return false; 
            });
}
function check(){
    var n1 = $('#n1').val();
    var si1 = $('#si1').val();
    var n2 = $('#n2').val();
    var r1 = parseInt(n1) + parseInt(n2);
    var r2 = $('#result').val();
    if( r1 == r2){
        send();
        success();
    }else{
        error();
    }
    $('#result').val('');
}
$(document).ready(function(){
    init();
    chronoStart();
})
$('#submit').click(function(event){
    event.preventDefault();
    check();
    init();
})

calcul.php 

<?php
session_start();
// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

require_once('classes/CMySQL.php');
require_once('classes/Ccalcul.php');

if ($_SESSION'member_id'] && $_SESSION'member_status'] == 'active' && $_SESSION'member_role'])
{
    $sChiffre1 = $GLOBALS'MySQL']->escape($_POST'n1']);
    $sSigne1 = $GLOBALS'MySQL']->escape($_POST'si1']);
    $sChiffre2 = $GLOBALS'MySQL']->escape($_POST'n2']);
    $sVotresultat = $GLOBALS'MySQL']->escape($_POST'result']);

    if ($sChiffre1 && $sSigne1 && $sChiffre2 && $sVotresultat) 

            {
                $Accept2 = $GLOBALS'Ccalcul']->acceptcalcul();
            }
}
echo (file_get_contents('templates/index2.php'));
?>

Ccalcul.php 

<?php
class Ccalcul {
    function Ccalcul() {}

    // Accept votresultat

    function acceptcalcul() 
        {

            $sChiffre1 = $GLOBALS'MySQL']->escape($_POST'n1']);
            $sSigne1 = $GLOBALS'MySQL']->escape($_POST'si1']);
            $sChiffre2 = $GLOBALS'MySQL']->escape($_POST'n2']);
            $sVotresultat = $GLOBALS'MySQL']->escape($_POST'result']);
        if ($sChiffre1 && $sSigne1 && $sChiffre2 && $sVotresultat) 

            {
                $bRf = $GLOBALS'MySQL']->res("INSERT INTO `addition` SET 
                    `chiffre1` = '{$sChiffre1}',
                    `signe1` = '{$sSigne1}',
                    `chiffre2` = '{$sChiffre2}',
                    `votresultat` = '{$sVotresultat}'

                    ");

            }
        }

}
$GLOBALS'Ccalcul'] = new Ccalcul();

Merci de m'éclairer

Lotfi Berrahal

Bonjour,

tu devrais créer un nouveau sujet que tout le monde voit que ce n'est pas résolu et t'aide!:)

En attendant testes ça dans Ccalcul.php

<?php

class Ccalcul {

    function Ccalcul() {}

    // Accept votresultat

    function acceptcalcul() 
        {

            $sChiffre1 = $GLOBALS'MySQL']->escape($_POST'n1']);
            $sSigne1 = $GLOBALS'MySQL']->escape($_POST'si1']);
            $sChiffre2 = $GLOBALS'MySQL']->escape($_POST'n2']);
            $sVotresultat = $GLOBALS'MySQL']->escape($_POST'result']);

        if ($sChiffre1 && $sSigne1 && $sChiffre2 && $sVotresultat) 

            {
                $bRf = "INSERT INTO `addition` SET 
                    `chiffre1` = '{$sChiffre1}',
                    `signe1` = '{$sSigne1}',
                    `chiffre2` = '{$sChiffre2}',
                    `votresultat` = '{$sVotresultat}'";
                $GLOBALS'MySQL']->res($bRf);

            }
        }

}
$GLOBALS'Ccalcul'] = new Ccalcul();
jeanmaki
Auteur

J'ai essayé ce que tu m'as dis mais rien n'y fait je post un nouveau sujet
merci