Exercice html, php, mysql, javascript

Exercice html, php, mysql, javascript - Divers - Programmation

Marsh Posté le 28-11-2021 à 01:12:37    

Salut tout le forum  :hello: ,
 
J’ai besoin de votre aide.
 
Je voudrais créer un exercice en html, php, javascript et avec msql.
 
L’exercice consiste à remplir des zones de texte.
 
Je souhaite créer un bouton pour corriger et évaluer.
 
Au clic sur le bouton, les bonnes réponses sont comptées, les bonnes réponses passent en vert et les mauvaises en rouges.
 
Les solutions sont dans une base de données mysql.
 
Je sais :
Lire les solutions dans mysql
Comparer la réponse de l’utilisateur à la solution
 
Je ne sais pas
Modifier la couleur de la zone de texte suivant le résultat de la comparaison
 
Faut-il que je passe un script javascript ou modifier le css et la class ?
 
Merci pour votre aide.

Reply

Marsh Posté le 28-11-2021 à 01:12:37   

Reply

Marsh Posté le 29-11-2021 à 10:06:38    

Ou en est tu de ton code ?
Est ce que ton formulaires et en post, tu fait toutes tes vérifications en php/mysql et tu génères le html d'affichage de réponse ?
 
Si oui il te suffit d'ajouter des classes du genre true et false et d'avoir du css pour leur donner un style.
 
Exemple rapide :

Code :
  1. <html>
  2. <head>
  3. <style>
  4. .true {color:green;}
  5. .false {color:red;}
  6. </style>
  7. <body>
  8. <label class="true">Réponse correct : <input class="true" type="text" value="vrai" /></label><br>
  9. <label class="false">Réponse fausse: <input class="false" type="text" value="faux" /></label><br>
  10. </body>
  11. </html>


---------------
D3
Reply

Marsh Posté le 30-11-2021 à 22:08:52    

Bonjour,
 
j'ai suivi ces 3 vidéos.
 
Extraire les données sans recharger la page PHP
Tutoriel PHP/jQuery : Poster un formulaire en Ajax
Apprendre à utiliser ajax
 
Voilà où j'en suis,
à la soumission du formulaire, avec javascript et ajax je compare les bonnes réponses stockées dans mysq avec les réponses envoyées par le candidat.
 
Le HTML

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.  <meta charset="utf-8"/>
  5.  <title>Exercice</title>
  6.         <style>
  7.             .mauvaiseReponse{background-color: rgba(255, 0, 0, 0.5);}
  8.             .bonneReponse{background-color: rgba(0, 128, 0, 0.5);}
  9.         </style>
  10. </head>
  11. <body>
  12.  <form id="formulaire" method="POST">
  13.             Réponse 1 : <input type="text" name="1" id="1" value=""/><br>
  14.             Réponse 2 : <input type="text" name="2" id="2" value=""/><br>
  15.             Réponse 3 : <input type="text" name="3" id="3" value=""/><br>
  16.             <input type="submit" value="Corriger"/><br>
  17.             Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="0" size="5" readonly="readonly"/><br>
  18.             Nombre de points : <input type="text" name="evaluation" id="evaluation" value="3" size="5" readonly="readonly"/><br>
  19.             Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Non" size="5" readonly="readonly"/>
  20.         </form>
  21.  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  22.  <script type="text/javascript" src="../js/script.js"></script>
  23. </body>
  24. </html>


 
Le javascript

Code :
  1. $(document).ready(function () {
  2. $("#formulaire" ).submit(function () {
  4.  if (document.getElementById("exerciceTermine" ).value == "Non" ) {
  5.             document.getElementById("nbreTentative" ).value++;
  7.             let nbreErreur = 0;
  9.             for (let i = 1; i <= 3; i++) {
  11.                 var reponse = $('#' + i + '').val();
  13.                 $.post('../page/comparer.php', { reponse: reponse, i:i }, function (donnees) {
  14.                     if (donnees == 0) {
  15.                         nbreErreur = 1;
  16.                         document.getElementById(i).className = "mauvaiseReponse";
  17.                         document.getElementById("evaluation" ).value = Number(document.getElementById("evaluation" ).value) - 0.5;
  18.                     } else if (donnees == 1) {
  19.                         document.getElementById(i).className = "bonneReponse";
  20.                     }
  21.                 })
  22.             }
  24.             if (nbreErreur == 0) {
  25.                 document.getElementById("exerciceTermine" ).value = "Oui";
  26.                 enregistrerEvaluation();
  27.             }
  28.         }
  29.  return false;
  30.     })
  31. });
  33. function enregistrerEvaluation() {
  34. var nbreTentative = $("#nbreTentative" ).val();
  35. var evaluation = $("#evaluation" ).val();
  37. $.post('../page/envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
  38. }


Le fichier comparer.php

Code :
  1. <?php
  2.     if(isset($_POST['reponse']) && !empty($_POST['reponse'])) {
  4.         try{
  5.             $bddIntervention = new PDO('mysql:host=localhost;dbname=maBaseDeDonnees;charset=utf8','monIdentifiant','monMotDePasse',
  6.             array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
  7.         }
  8.         catch (Exception $e){
  9.             die('Erreur : ' . $e->getMessage());
  10.         }
  12.         $chReponse = $bddIntervention->prepare('SELECT reponse FROM reponses');
  13.         $chReponse->execute();
  14.         $reponse = $chReponse->fetch();
  15.         $reponses = unserialize($reponse['reponse']);
  16.         $chReponse->closeCursor();
  18.         $emplacement = $_POST['i'] - 1;
  20.         if($_POST['reponse'] != $reponses[$emplacement]){
  21.             echo 0;
  22.         }else{
  23.             echo 1;
  24.         }
  25.     }
  26. ?>


le fichier envoyer.php

Code :
  1. <?php
  2.     if(isset($_POST['nbreTentative'],$_POST['evaluation']) && !empty($_POST['nbreTentative']) && !empty($_POST['evaluation'])){
  4.         try{
  5.             $bddIntervention = new PDO('mysql:host=localhost;dbname=maBaseDeDonnees;charset=utf8','monIdentifiant','monMotDePasse',
  6.             array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
  7.         }
  8.         catch (Exception $e){
  9.             die('Erreur : ' . $e->getMessage());
  10.         }
  12.  $in = $bddIntervention->prepare("INSERT INTO candidatReponses (nbrTentatives, nbrPoints) VALUES(:nbrTentatives, :nbrPoints)" );
  13.  $in->bindValue('nbrTentatives', $_POST['nbreTentative'], PDO::PARAM_INT);
  14.  $in->bindValue('nbrPoints',  $_POST['evaluation'],  PDO::PARAM_INT);
  15.  $in->execute();
  16.  $in->closeCursor();
  17. }
  18. ?>


J'obtiens bien le changement de couleur en fonction du résultat de la comparaison des réponses soumises et des réponses stockées dans MySQL.
 
Ce qui ne fonctionne pas dans le javascript c'est l'enregistrement de l'évaluation. Il se fait directement.

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


le if est franchi dés la soumission du formulaire. Pourtant en cas de mauvaise réponse la variable nbreErreur est mise à 1 dans la boucle for qui précéde ce if.


Message édité par kewan le 30-11-2021 à 22:14:27
Reply

Marsh Posté le 01-12-2021 à 10:04:47    

Ok, donc tu le fait en AJAX, c'est probablement mieux même si c'est un peu plus compliqué... ^^
Il faut que tu comprennes que quand tu envoie une requête AJAX au serveur, sa réponse n'est pas instantané, par contre vu que ton appel est dans une fonction anonyme, le script JS de ta page continue son exécution...
Donc quand tu fais une boucle sur l'envoi de tout tes posts, la réponse a ces posts se fait plus tard, par contre l’exécution de ta boucle continue et tu atteint le if sans que les réponses ai été reçu (sans compter que y'a ptet un problème de portée de ta variable aussi du coups).
 
Bref, soit tu récupères toutes tes solutions en un appel et tu testes toutes tes réponses "en une fois" (ça me semble mieux car ça limite le nombre de requêtes au serveur), soit tu met tes réponses dans un tableau et tu testes a chaque fois que tu as une réponse si toutes sont bien arrivées (en vérifiant la longueur de ton tableau par exemple).

Message cité 1 fois

---------------
D3
Reply

Marsh Posté le 01-12-2021 à 18:45:31    

Bonjour, merci pour les infos.  :jap:

mechkurt a écrit :

tu récupères toutes tes solutions en un appel et tu testes toutes tes réponses "en une fois"


Si je teste tout en une fois est-ce qu'il est possible en suite de passer en vert les bonnes réponses et de passer en rouge les mauvaises ?


Message édité par kewan le 01-12-2021 à 18:46:34
Reply

Marsh Posté le 02-12-2021 à 09:44:05    

Oui bien sur, tu peux faire ce que tu veux ! ^^
 
Peut être qu'il serait plus simple pour toi dans un premier temps de soumettre ton form en ajax, de vérifier chaque valeur, de renvoyer le code html avec les bonnes classes et de le ré-afficher avec un code de ce genre :
$('form#formulaire').html(retour_serveur);
 
https://api.jquery.com/jquery.post/


---------------
D3
Reply

Marsh Posté le 04-12-2021 à 07:50:50    

Bonjour,
 
Voilà où j'en suis :
 
Le formulaire :

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>Exercice</title>
  6.         <style>
  7.             .mauvaiseReponse{background-color: rgba(255, 0, 0, 0.5);}
  8.             .bonneReponse{background-color: rgba(0, 128, 0, 0.5);}
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <form id="formulaire" method="POST">
  13.             Réponse 1 : <input type="text" name="1" id="1" value="1"/><br>
  14.             Réponse 2 : <input type="text" name="2" id="2" value="1"/><br>
  15.             Réponse 3 : <input type="text" name="3" id="3" value="1"/><br>
  16.             <input type="submit" value="Corriger"/><br>
  17.             Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="0" size="5" readonly="readonly"/><br>
  18.             Nombre de points : <input type="text" name="evaluation" id="evaluation" value="3" size="5" readonly="readonly"/><br>
  19.             Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Non" size="5" readonly="readonly"/>
  20.         </form>
  21.         <div id="afficher"></div>
  22.         <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  23.         <script type="text/javascript" src="../js/script2.js"></script>
  24.     </body>
  25. </html>


 
Le script :

Code :
  1. $(document).ready(function () {
  2. $("#formulaire" ).submit(function () {
  4.         if (document.getElementById("exerciceTermine" ).value == "Non" && verifierSiComplet() != 0) {
  6.             var reponse1 = $('#1').val();
  7.             var reponse2 = $('#2').val();
  8.             var reponse3 = $('#3').val();
  9.             var nbreTentative = $('#nbreTentative').val();
  10.             var evaluation = $('#evaluation').val();
  11.             var exerciceTermine = $('#exerciceTermine').val();
  13.             $.post('../page/comparer2.php', {
  14.                 reponse1: reponse1,
  15.                 reponse2: reponse2,
  16.                 reponse3: reponse3,
  17.                 nbreTentative: nbreTentative,
  18.                 evaluation: evaluation,
  19.                 exerciceTermine: exerciceTermine
  20.             }, function (donnees) {
  21.                 $('#formulaire').html();
  22.                 $('#formulaire').html(donnees);
  23.             })
  24.         }
  25.  return false;
  26.     })
  27. });
  29. function verifierSiComplet() {
  31. for (var i = 1; i <= 3; i++){
  32.  if (document.getElementById(i).value == "" ) {
  33.             alert("Impossible de corriger, il manque au moins une réponse." );
  34.             return 0;
  35.  }
  36.     }
  37. }
  39. function enregistrerEvaluation() {
  40. var nbreTentative = $("#nbreTentative" ).val();
  41. var evaluation = $("#evaluation" ).val();
  43. $.post('../page/envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
  44. }


 
Le fichier comparer :

Code :
  1. <?php
  2.  include("/var/www/tp/_connexionBddIntervention.php" );
  4.  $chReponse = $bddIntervention->prepare('SELECT reponse FROM reponses');
  5.  $chReponse->execute();
  6.  $reponse = $chReponse->fetch();
  7.  $reponses = unserialize($reponse['reponse']);
  8.  $chReponse->closeCursor();
  10.  $erreur = 0;
  12.  $nbreTentative = $_POST['nbreTentative'] + 1;
  14.  for ($i = 1; $i <= 3 ; $i++) {
  15.   if($_POST['reponse'.$i] != $reponses[$i - 1]){
  17.    $erreur = 1;
  18.    ?>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
  20.   }else{
  22.    ?>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
  24.   }
  25.  }
  27.  ?><input type="submit" value="Corriger"/><br><?php
  29.  if($erreur == 1){
  30.     ?>
  31.    Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="<?php echo $nbreTentative;?>" size="5" readonly="readonly"/><br>
  32.    Nombre de points : <input type="text" name="evaluation" id="evaluation" value="<?php echo $_POST['evaluation'] - 0.5;?>" size="5" readonly="readonly"/><br>
  33.    Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Non" size="5" readonly="readonly"/>
  34.   <?php
  36.  }else{
  37.   ?>
  38.    Nombre de tentatives : <input type="text" name="nbreTentative" id="nbreTentative" value="<?php echo $nbreTentative;?>" size="5" readonly="readonly"/><br>
  39.    Nombre de points : <input type="text" name="evaluation" id="evaluation" value="<?php echo $_POST['evaluation'];?>" size="5" readonly="readonly"/><br>
  40.    Exercice terminé : <input type="text" name="exerciceTermine" id="exerciceTermine" value="Oui" size="5" readonly="readonly"/>
  41.   <?php
  42.  }
  43. ?>


 
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().


Message édité par kewan le 04-12-2021 à 07:53:37
Reply

Marsh Posté le 06-12-2021 à 11:00:55    

C'est très verbeux, pourquoi dupliquer ton code html dans chaque partie du else alors que seule une infime partie diffère ?
Par exemple :

Code :
  1. for ($i = 1; $i <= 3 ; $i++) {
  2.   $classe = 'bonneReponse';
  3.   if($_POST['reponse'.$i] != $reponses[$i - 1]){
  4.    $erreur = 1;
  5.    $classe = 'bonneReponse';
  6.   }
  7.    ?>Réponse <?php echo $i;?> : <input type="text" name="<?php echo $i;?>" id="<?php echo $i;?>" class="<?php classe $i;?>" value="<?php echo $_POST['reponse'.$i];?>"><br><?php


De la même manière au lieu d'envoyer toutes tes variables après les avoir récupéré, soumet carrément ton formulaire en ajax.
https://api.jquery.com/serialize/
 
Enfin si tu veux étudier une nouvelle piste moins lourde que de renvoyer tout l'html, tu peux renvoyer un tableau en json et faire l'application des classes et du résultat en javascript coté client...


---------------
D3
Reply

Marsh Posté le 08-12-2021 à 08:02:08    

Attention, le coup d'envoyer du json au navigateur pour mettre à jour une partie de la mage web, c'est en général pas exploitable par les personnes ayant un handicap visuel, leur lecteur d'écran ne détectant pas les changements et ne sachant pas à quel endroit les changements ont été fait. :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 08-12-2021 à 14:47:25    

Oui c'est vrai que y'a aussi le soucis de l’accessibilité dans ce cas (mais il envoie déjà de l'html en ajax :- /).


---------------
D3
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed