Exercice html, php, mysql, javascript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Exercice html, php, mysql, javascript

kewan

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.

Publicité

mechkurt

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 :

<html>
<head>
<style>
.true {color:green;}
.false {color:red;}
</style>
<body>
<label class="true">Réponse correct : <input class="true" type="text" value="vrai" /></label><br>
<label class="false">Réponse fausse: <input class="false" type="text" value="faux" /></label><br>
</body>
</html>

---------------
D3

kewan

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 :

<!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=""/><br>
Réponse 2 : <input type="text" name="2" id="2" value=""/><br>
Réponse 3 : <input type="text" name="3" id="3" value=""/><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>
<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/script.js"></script>
</body>
</html>

Le javascript

Code :

$(document).ready(function () {
$("#formulaire" ).submit(function () {
if (document.getElementById("exerciceTermine" ).value == "Non" ) {
document.getElementById("nbreTentative" ).value++;
let 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 enregistrerEvaluation() {
var nbreTentative = $("#nbreTentative" ).val();
var evaluation = $("#evaluation" ).val();
$.post('../page/envoyer.php', { nbreTentative: nbreTentative, evaluation: evaluation }, function () { })
}

Le fichier comparer.php

Code :

<?php
if(isset($_POST['reponse']) && !empty($_POST['reponse'])) {
try{
$bddIntervention = new PDO('mysql:host=localhost;dbname=maBaseDeDonnees;charset=utf8','monIdentifiant','monMotDePasse',
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch (Exception $e){
die('Erreur : ' . $e->getMessage());
}
$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;
}
}
?>

le fichier envoyer.php

Code :

<?php
if(isset($_POST['nbreTentative'],$_POST['evaluation']) && !empty($_POST['nbreTentative']) && !empty($_POST['evaluation'])){
try{
$bddIntervention = new PDO('mysql:host=localhost;dbname=maBaseDeDonnees;charset=utf8','monIdentifiant','monMotDePasse',
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch (Exception $e){
die('Erreur : ' . $e->getMessage());
}
$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();
}
?>

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 :

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

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

mechkurt

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

kewan

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

mechkurt

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

kewan

Bonjour,

Voilà où j'en suis :

Le formulaire :

Code :

<!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 :

$(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 :

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

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

mechkurt

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 :

for ($i = 1; $i <= 3 ; $i++) {
$classe = 'bonneReponse';
if($_POST['reponse'.$i] != $reponses[$i - 1]){
$erreur = 1;
$classe = 'bonneReponse';
}
?>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

rufo

Pas me confondre avec Lycos!

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

mechkurt

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

FORUM HardWare.fr

Programmation

Divers

Exercice html, php, mysql, javascript

Sujets relatifs
Excel+PHP/Mysql	hébergement de page html
Mediawiki : pb avec génération de javascript dans un article	Encodage RSA Javascript Vs Java
un problème de lien php dans le html	[Résolu] Pb de regexp avec Mysql
MySQL : forcer la position d'un résultat ?	Javascript suggestion dans textarea
HTML Select et OnClick() ne fonctionne pas sur Safari	Javascript API / Recuperer le resultat
Plus de sujets relatifs à : Exercice html, php, mysql, javascript

Page générée en 0.200 secondes