Synchroniser javascript, ajax, requête sql php

**kewan** · 01/12/2021, 20h27

Salut tout le forum,

J’ai besoin de votre aide.
dans un de mes projets j'ai un problème de synchronisation avec une boucle for et le lancement d'une fonction suivant le résultat de la boucle for

Le code javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function () {
    $("#formulaire").submit(function () {
 
        if (document.getElementById("exerciceTermine").value == "Non" && verifierSiComplet() != 1) {
            document.getElementById("nbreTentative").value++;
 
            var nbreErreur = 0;
 
            for (let i = 1; i <= 3; i++) {
 
                var reponse = $('#' + i + '').val();
 
                $.post('../page/comparer.php', { reponse: reponse, i:i }, function (donnees) {
                    if (donnees == 0) {
                        nbreErreur = 1;
                        document.getElementById(i).className = "mauvaiseReponse";
                        document.getElementById("evaluation").value = Number(document.getElementById("evaluation").value) - 0.5;
                    } else if (donnees == 1) {
                        document.getElementById(i).className = "bonneReponse";
                    }
                })
 
            }
 
            if (nbreErreur == 0) {
                document.getElementById("exerciceTermine").value = "Oui";
                enregistrerEvaluation();
            }
        }
        return false;
    })
});
 
function verifierSiComplet() {
 
    for (var i = 1; i <= 3; i++){
        if (document.getElementById(i).value == "") {
            alert("Impossible de corriger, il manque au moins une réponse.");
            return 1;
        }
    }
}
 
function enregistrerEvaluation() {
    var nbreTentative = $("#nbreTentative").val();
    var evaluation = $("#evaluation").val();
 
    $.post('../page/envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
}

La page comparer.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
    if(isset($_POST['reponse']) && !empty($_POST['reponse'])) {
 
        include("/var/www/connexionBddIntervention.php");
 
        $chReponse = $bddIntervention->prepare('SELECT reponse FROM reponses');
        $chReponse->execute();
        $reponse = $chReponse->fetch();
        $reponses = unserialize($reponse['reponse']);
        $chReponse->closeCursor();
 
        $emplacement = $_POST['i'] - 1;
 
        if($_POST['reponse'] != $reponses[$emplacement]){
            echo 0;
        }else{
            echo 1;
        }
    }
?>

La page envoyer.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php
    if(isset($_POST['nbreTentative'],$_POST['evaluation']) && !empty($_POST['nbreTentative']) && !empty($_POST['evaluation'])){
        include("/var/www/connexionBddIntervention.php");
 
        $in = $bddIntervention->prepare("INSERT INTO candidatReponses (nbrTentatives, nbrPoints) VALUES(:nbrTentatives, :nbrPoints)");
        $in->bindValue('nbrTentatives',  $_POST['nbreTentative'],    PDO::PARAM_INT);
        $in->bindValue('nbrPoints',      $_POST['evaluation'],       PDO::PARAM_INT);
        $in->execute();
        $in->closeCursor();
    }
?>

A la soumission du formulaire le if (nbreErreur == 0) {} est franchi immédiatement avant la fin de la boucle for

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if (nbreErreur == 0) {
    document.getElementById("exerciceTermine").value = "Oui";
    enregistrerEvaluation();
}

Comment faire pour que cette condition ne soit franchie qu'une fois la boucle for terminée.

Merci pour votre aide.

**mathieu** · 02/12/2021, 02h20

au lieu de faire 1 appel ajax par question, je pense qu'il vaut mieux faire une seule requête avec toutes les questions et ainsi c'est php qui indique le résultat détaillé pour l'exercice en cours.

**kewan** · 04/12/2021, 07h56

Bonjour,

Voilà où j'en suis :

Le formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Exercice</title>
        <style>
            .mauvaiseReponse{background-color: rgba(255, 0, 0, 0.5);}
            .bonneReponse{background-color: rgba(0, 128, 0, 0.5);}
        </style>
    </head>
    <body>
        <form id="formulaire" method="POST">
            Réponse 1 : <input type="text" name="1" id="1" value="1"/><br>
            Réponse 2 : <input type="text" name="2" id="2" value="1"/><br>
            Réponse 3 : <input type="text" name="3" id="3" value="1"/><br>
            <input type="submit" value="Corriger"/><br>
            Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="0" size="5" readonly="readonly"/><br>
            Nombre de points : <input type="text" name="evaluation" id="evaluation" value="3" size="5" readonly="readonly"/><br>
            Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Non" size="5" readonly="readonly"/>
        </form>
        <div id="afficher"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="../js/script2.js"></script>
    </body>
</html>

Le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function () {
	$("#formulaire").submit(function () {
 
        if (document.getElementById("exerciceTermine").value == "Non" && verifierSiComplet() != 0) {
 
            var reponse1 = $('#1').val();
            var reponse2 = $('#2').val();
            var reponse3 = $('#3').val();
            var nbreTentative = $('#nbreTentative').val();
            var evaluation = $('#evaluation').val();
            var exerciceTermine = $('#exerciceTermine').val();
 
            $.post('../page/comparer2.php', {
                reponse1: reponse1,
                reponse2: reponse2,
                reponse3: reponse3,
                nbreTentative: nbreTentative,
                evaluation: evaluation,
                exerciceTermine: exerciceTermine
            }, function (donnees) {
                $('#formulaire').html();
                $('#formulaire').html(donnees);
            })
        }
		return false;
    })
});
 
function verifierSiComplet() {
 
	for (var i = 1; i <= 3; i++){
		if (document.getElementById(i).value == "") {
            alert("Impossible de corriger, il manque au moins une réponse.");
            return 0;
		}
    }
}
 
function enregistrerEvaluation() {
	var nbreTentative = $("#nbreTentative").val();
	var evaluation = $("#evaluation").val();
 
	$.post('../page/envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
}

Le fichier comparer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
                include("/var/www/tp/_connexionBddIntervention.php");
 
                $chReponse = $bddIntervention->prepare('SELECT reponse FROM reponses');
                $chReponse->execute();
                $reponse = $chReponse->fetch();
                $reponses = unserialize($reponse['reponse']);
                $chReponse->closeCursor();
 
                $erreur = 0;
 
                $nbreTentative = $_POST['nbreTentative'] + 1;
 
                for ($i = 1; $i <= 3 ; $i++) {
                        if($_POST['reponse'.$i] != $reponses[$i - 1]){
 
                                $erreur = 1;
                                ?>Réponse <?php echo $i;?> : <input type="text" name="<?php echo $i;?>" id="<?php echo $i;?>" class="mauvaiseReponse" value="<?php echo $_POST['reponse'.$i];?>"><br><?php
 
                        }else{
 
                                ?>Réponse <?php echo $i;?> : <input type="text" name="<?php echo $i;?>" id="<?php echo $i;?>" class="bonneReponse" value="<?php echo $_POST['reponse'.$i];?>"><br><?php
 
                        }
                }
 
                ?><input type="submit" value="Corriger"/><br><?php
 
                if($erreur == 1){
                   ?>
				Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="<?php echo $nbreTentative;?>" size="5" readonly="readonly"/><br>
				Nombre de points : <input type="text" name="evaluation" id="evaluation" value="<?php echo $_POST['evaluation'] - 0.5;?>" size="5" readonly="readonly"/><br>
				Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Non" size="5" readonly="readonly"/>
			<?php
 
                }else{
                        ?>
				Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="<?php echo $nbreTentative;?>" size="5" readonly="readonly"/><br>
				Nombre de points : <input type="text" name="evaluation" id="evaluation" value="<?php echo $_POST['evaluation'];?>" size="5" readonly="readonly"/><br>
				Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Oui" size="5" readonly="readonly"/>
			<?php
                }
?>

Je suis pas très fan de ce code, renvoyer le code html n'est pas très flexible.

Je ne sais pas comment récupérer l'information que l'exercice est terminé pour pouvoir faire appel à la fonction enregistrerEvaluation().

**jreaux62** · 04/12/2021, 11h54

bonjour,

1- on va simplifier/nettoyer le <form> :

pour les id et name, éviter de mettre juste "1", "2",... : pour rester cohérent "reponse1", "reponse2",...
A priori, on n'a pas besoin d'<input> pour "Nombre de tentatives", "Nombre de points" et "Exercice terminé". Des <span> suffisent

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form id="formulaire" method="post" action="">
  <p><label>Réponse 1 : <input type="text" name="reponse1" id="reponse1" value="" /></label></p>
  <p><label>Réponse 2 : <input type="text" name="reponse2" id="reponse2" value="" /></label></p>
  <p><label>Réponse 3 : <input type="text" name="reponse3" id="reponse3" value="" /></label></p>
  <p><input type="submit" value="Corriger"/></p>
</form>
<p>
  Nombre de tentatives : <span id="nbreTentative">0</span><br/>
  Nombre de points : <span id="evaluation">3</span><br/>
  Exercice terminé : <span id="exerciceTermine">Non</span>
</p>
<div id="afficher"></div>

2- JS/jQuery : pour les <span>, on récupère les valeurs avec .text() :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
            var reponse1 = $('#reponse1').val(); // input -> val()
            var reponse2 = $('#reponse2').val();
            var reponse3 = $('#reponse3').val();
 
            var nbreTentative = $('#nbreTentative').text(); // span -> text()
            var evaluation = $('#evaluation').text();
            var exerciceTermine = $('#exerciceTermine').text();

3- Ajax : on va récupérer les données venant de PHP au format json, pour les traiter en JS

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
            $.post('../page/comparer2.php', {
...
            }, function (retour) {
               if( retour.erreur == 0 )
               {
               // ... 
               } else {
               // ... 
               }
               $('#nbreTentative').text( retour.nbreTentative );
               $('#evaluation').text( retour.evaluation );
               $('#exerciceTermine').text( retour.exerciceTermine );
 
               $('#afficher').html( retour.afficher); // affichage HTML
 
               // ... changement des class des input des réponses
            }, 'json');

Pour les classes CSS, voir :

4- comparer2.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$retour = []; // array
$retour['erreur'] = '';
$retour['afficher'] = '';
// ... (autres infos utiles ?)
 
$retour['nbreTentative'] = $_POST['nbreTentative'];
$retour['evaluation'] = $_POST['evaluation'];
$retour['exerciceTermine'] = $_POST['exerciceTermine'];
...
// traitement
$retour['nbreTentative']++; // on incrémente
...
// retour json
echo json_encode( $retour );

**kewan** · 04/12/2021, 16h48

Bonjour jreaux62, Merci, 👍

Je suis en train d'essayer le code.

Pour l'instant je n'arrive pas à gérer $retour['afficher']

Voilà où j'en suis :

Formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html><html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Exercice</title>
        <style>
            .mauvaiseReponse{background-color: rgba(255, 0, 0, 0.5);}
            .bonneReponse{background-color: rgba(0, 128, 0, 0.5);}
        </style>
    </head>
    <body>
        <form id="formulaire" method="POST">
            Réponse 1 : <input type="text" name="reponse1" id="reponse1" value="1"/><br>
            Réponse 2 : <input type="text" name="reponse2" id="reponse2" value="2"/><br>
            Réponse 3 : <input type="text" name="reponse3" id="reponse3" value="3"/><br>
            <input type="submit" value="Corriger"/><br>
        </form>
        <p>
        Nombre de tentatives : <span id="nbreTentative">0</span><br/>
        Nombre de points : <span id="evaluation">3</span><br/>
        Exercice terminé : <span id="exerciceTermine">Non</span>
        </p>
        <div id="afficher"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function () {    $("#formulaire").submit(function () {
 
 
        if (document.getElementById("exerciceTermine").innerHTML == "Non" && verifierSiComplet() != 1) {
 
 
            document.getElementById("nbreTentative").innerHTML++;
 
                var reponse1 = $('#reponse1').val();
                var reponse2 = $('#reponse2').val();
                var reponse3 = $('#reponse3').val();
                var evaluation = $('#evaluation').text();
 
                $.post('comparer2.php', {
                    reponse1: reponse1,
                    reponse2: reponse2,
                    reponse3: reponse3,
                    evaluation: evaluation
                }, function (retour) {
                    if( retour.erreur == 0 ){
                        $('#exerciceTermine').text("Oui");
                        enregistrerEvaluation();
                    }
                    $('#evaluation').text(retour.evaluation );
                    $('#afficher').html(retour.afficher);
                }, 'json');
        }
        return false;
    })
});
 
 
function verifierSiComplet() {
 
 
    for (var i = 1; i <= 3; i++){
        if (document.getElementById("reponse" + i).value == "") {
            alert("Impossible de corriger, il manque au moins une réponse.");
            return 1;
        }
    }
}
 
 
function enregistrerEvaluation() {
    var nbreTentative = $('#nbreTentative').text();
    var evaluation = $('#evaluation').text();
 
 
    $.post('envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
}

fichier comparer2.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php    include("/var/www/tp/_connexionBddIntervention.php");
 
 
    $chReponse = $bddIntervention->prepare('SELECT reponse FROM reponses');
    $chReponse->execute();
    $reponse = $chReponse->fetch();
    $reponses = unserialize($reponse['reponse']);
    $chReponse->closeCursor();
 
 
    $retour = [];
    $retour['erreur'] = '';
    $retour['afficher'] = '';
    $retour['evaluation'] = '';
 
 
    // S'il y a une erreur
    if($_POST['reponse1'] != $reponses[0] OR $_POST['reponse2'] != $reponses[1] OR $_POST['reponse3'] != $reponses[2]){
        $retour['erreur'] = '1';
 
 
    }// Si tout est juste
    else if($_POST['reponse1'] != $reponses[0] && $_POST['reponse2'] != $reponses[1] && $_POST['reponse3'] != $reponses[2]){
        $retour['erreur'] = '0';
    }
 
 
    if($retour['erreur'] == '1'){
        $retour['evaluation'] = $_POST['evaluation'] - 0.5;
    }else{
        $retour['evaluation'] = $_POST['evaluation'];
    }
    echo json_encode( $retour );
?>

Est ce que je dois faire une boucle pour tester toutes les réponses ?

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php    $retour['afficher'] = '';
    for ($i = 1; $i <= 3 ; $i++) {
        if($_POST['reponse'.$i] != $reponses[$i - 1]){
            $retour['afficher'] = ???;
        }else{
            $retour['afficher'] = ???;
        }
    }
?>

Merci pour ton aide.

**jreaux62** · 04/12/2021, 17h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    $reponse = $chReponse->fetch();

Là, tu ne récupères qu'UNE SEULE ligne.

Pour les récupérer toutes, il faut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    $reponse_all = $chReponse->fetchAll();

et boucler avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

foreach( $reponse_all as $reponse) {

N.B. ce serait bien de nous donner (un extrait) de la TABLE SQL "reponses"...
Et je suis curieux de savoir si tu as une TABLE "questions" ?

Sinon, les questions et réponses pourraient/devraient se trouver dans une seule TABLE (ça simplifierai la maintenance, et l'ajout/suppression de questions/réponses).
Et l'identifiant de ligne (id auto-incrémenté) serait, forcément, le même pour la question ET pour la réponse.

**kewan** · 04/12/2021, 21h27

J'obtiens le résultat que je souhaite mais je pense que ma gestion de $retour['afficher'] et du changement du css n'est pas bien réalisée.

Formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Exercice</title>
        <style>
            .mauvaiseReponse{background-color: rgba(255, 0, 0, 0.5);}
            .bonneReponse{background-color: rgba(0, 128, 0, 0.5);}
        </style>
    </head>
    <body>
        <form id="formulaire" method="POST">
            <div id="reponseCandidat">
                Réponse 1 : <input type="text" name="reponse1" id="reponse1" value="a"/><br>
                Réponse 2 : <input type="text" name="reponse2" id="reponse2" value="2"/><br>
                Réponse 3 : <input type="text" name="reponse3" id="reponse3" value="3"/><br>
            </div>
            <input type="submit" value="Corriger"/><br>
        </form>
        <p>
        Nombre de tentatives : <span id="nbreTentative">0</span><br/>
        Nombre de points : <span id="evaluation">3</span><br/>
        Exercice terminé : <span id="exerciceTermine">Non</span>
        </p>
         <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function () {
	$("#formulaire").submit(function () {
 
		if (document.getElementById("exerciceTermine").innerHTML == "Non" && verifierSiComplet() != 1) {
 
			document.getElementById("nbreTentative").innerHTML++;
 
				var reponse1 = $('#reponse1').val();
				var reponse2 = $('#reponse2').val();
				var reponse3 = $('#reponse3').val();
				var evaluation = $('#evaluation').text();
 
				$.post('comparer2.php', {
					reponse1: reponse1,
					reponse2: reponse2,
					reponse3: reponse3,
					evaluation: evaluation
				}, function (retour) {
					if( retour.erreur == false ){
						$('#exerciceTermine').text("Oui");
						enregistrerEvaluation();
					}
					$('#evaluation').text(retour.evaluation );
					$('#reponseCandidat').html(retour.afficher);
            	}, 'json');
		}
		return false;
	})
});
 
function verifierSiComplet() {
 
	for (var i = 1; i <= 3; i++){
		if (document.getElementById("reponse" + i).value == "") {
			alert("Impossible de corriger, il manque au moins une réponse.");
			return 1;
		}
	}
}
 
function enregistrerEvaluation() {
	var nbreTentative = $('#nbreTentative').text();
	var evaluation = $('#evaluation').text();
 
	$.post('envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
}

comparer2.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
    $retour['erreur'] = false;
 
    include("/var/www/tp/_connexionBddIntervention.php");
 
    $chReponse = $bddIntervention->prepare('SELECT reponse FROM reponses');
    $chReponse->execute();
    $reponse = $chReponse->fetch();
    $reponses = unserialize($reponse['reponse']);
    $chReponse->closeCursor();
 
    $i = 1;
    foreach ($reponses as $rep) {
        // Si la réponse est fausse
        if($_POST['reponse'.$i] != $rep){
            $retour['afficher'][] = 'Réponse '.$i.' : <input type="text" name="reponse"'.$i.' id="reponse'.$i.'" value="'.$_POST['reponse'.$i].'" class="mauvaiseReponse"/><br>';
            $retour['erreur'] = true;
        }// Si la réponse est juste
        else{
            $retour['afficher'][] = 'Réponse '.$i.' : <input type="text" name="reponse"'.$i.' id="reponse'.$i.'" value="'.$_POST['reponse'.$i].'" class="bonneReponse"/><br>';
        }
        $i++;
    }
 
    // Si une erreur est trouvée => retirer 0.5 point
    if($retour['erreur'] == true){
        $retour['evaluation'] = $_POST['evaluation'] - 0.5;
    }// Garder l'évaluation
    else{
        $retour['evaluation'] = $_POST['evaluation'];
    }
    echo json_encode( $retour );
?>

Pour la table "reponses", elle n'est pas encore élaborée :

La table "questions" n'existe pas pour l'instant

Je ferai certainement 1 table question et une table reponse avec une jointure entre les deux
Il faut que je fasse également une table pour enregistrer les réponses des utilisateurs.

**jreaux62** · 04/12/2021, 22h13

A priori, tu as compris le principe.

A toi de l'affiner

**kewan** · 05/12/2021, 18h09

Petit affinement avec addClass

Encore merci pour ton aide jreaux62.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
    include("/var/www/tp/fnIntervention.php");
 
    $retour['erreur'] = false;
    $retour['nbreErreur'] = 0;
 
    $reponses = fnVoirReponsesQuestionInter($_POST['idInter'], $_POST['numQuestion']);
 
    $i = 1;
    foreach ($reponses as $rep) {
        // Si la réponse est fausse
        if($_POST['reponse'.$i] != $rep){
            $retour['afficher'][$i] = 0;
            $retour['nbreErreur'] += 1;
            $retour['erreur'] = true;
        }// Si la réponse est juste
        else{
            $retour['afficher'][$i] = 1;
        }
        $i++;
    }
 
    // Si une erreur est trouvée => retirer 0.5 point
    if($retour['erreur'] == true){
        $retour['evaluation'] = $_POST['evaluation'] - 0.5;
    }// Si aucune erreur garder l'évaluation
    else{
        $retour['evaluation'] = $_POST['evaluation'];
    }
    echo json_encode( $retour );
?>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function () {
	$("#formulaire").submit(function (e) {
		e.preventDefault();
 
		if (document.getElementById("exerciceTermine").innerHTML == "Non" && verifierSiComplet() != 1) {
			var val = confirm("Attention vous allez être évalué.\n\nRisque de perte de points.\n\nVérifiez vos 10 réponses.\n\nVoulez-vous être évalué ?", 1, 2);
			if (val == true) {
				document.getElementById("nbreTentative").innerHTML++;
				var idInter = $('#idInter').val();
				var numQuestion = $('#numQuestion').val();
				var reponse1 = $('#reponse1').val();
				var reponse2 = $('#reponse2').val();
				var reponse3 = $('#reponse3').val();
				var evaluation = $('#evaluation').text();
				$.post('evaluer.php', {
					idInter: idInter,
					numQuestion: numQuestion,
					reponse1: reponse1,
					reponse2: reponse2,
					reponse3: reponse3,
					evaluation: evaluation
				}, function (retour) {
					// S'il n'y a pas d'erreur
					if (retour.erreur == false) {
						alert("Excellent toutes les réponses sont justes ! 😀👍")
						$('#exerciceTermine').text("Oui");
						enregistrerEvaluation();
					} else {
						for (var i = 1; i <= 11; i++){
							if (retour.afficher[i] == 1) {
								$('#reponse' + i).addClass("bonneReponse");
							} else {
								$('#reponse' + i).addClass("mauvaiseReponse");
							}
						}
						alert("Aie " + retour.nbreErreur + " erreur(s), vous avez perdu 0.5 points 😟")
						$('#evaluation').text(retour.evaluation);
					}
 
				}, 'json');
			}
		}
	})
});

Synchroniser javascript, ajax, requête sql php

AJAX

Discussions similaires

Partager

Partager