Exercice html, php, mysql, javascript

Version imprimable

28/11/2021, 01h11
kewan

Exercice html, php, mysql, javascript

Salut tout le forum,

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 par un script javascript, modifier le css et la class ou autre?

Merci pour votre aide.
28/11/2021, 07h43
mathieu

si vous faites les tests en javascript, ça veut dire que les réponses sont dans le code source de la page et tout le monde peut les lire.
donc je pense qu'il vaut mieux les tester en php et ensuite vous ajoutez une classe css dans le code html généré.
28/11/2021, 13h25
jreaux62
Bonjour,

Citation:

Envoyé par mathieu

si vous faites les tests en javascript, ça veut dire que les réponses sont dans le code source de la page et tout le monde peut les lire.

Pas forcément : il suffit de passer par AJAX.
Ajax permet, via un script JS, de faire un traitement PHP/SQL, et d'afficher les résultats, sans changer de page.

Cela dit, on peut faire un traitement "classique" (avec changement / rechargement de la page), en soumettant le formulaire, en faisant un traitement PHP/SQL "classique", et en affichant les résultats dans une nouvelle page.

Pour changer de couleur, on passera par des classes CSS ("reponseOK", "reponseKO" par ex.) ajoutée dynamiquement via la réponse Ajax.
Avec le CSS (minimal) :
Code:

1 2 .reponseOK { color:green; } .reponseKO { color:red; }
N.B. J'avais réalisé un quizz tantôt (2015 !) :
- https://www.developpez.net/forums/d1...e/#post8382651
- (démo)
Sans Ajax : traitement "classique", mais comme il comporte plusieurs pages, réponses et questions sont stockées dans des variables de SESSION.

Merci pour vos réponses, l'ajax m'est totalement inconnu, je vais savoir besoin d'un coup de main.

Voilà mon premier code avec du javascript :
code avec javascript
mais comme le dit mathieu, on peut retrouver toutes les réponses.

Maintenant toutes les réponses sont dans mysql, dans la table :

Code:

1
2
3
4
5
6
CREATE TABLE reponses (
    id int,
    numQuestion int,
    reponsesQuestion varchar(255),
    PRIMARY KEY (id)
);

la fonction pour voir les réponses d'une question :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    function fnVoirReponseQuestion($numQuestion){// Voir les réponses d'une question
 
        try{
            $bdd = 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 = $bdd->prepare('SELECT reponsesQuestion FROM reponses WHERE numQuestion = :numQuestion');
	$chReponse->bindValue('numQuestion',    $numQuestion,   PDO::PARAM_INT);
	$chReponse->execute();
	$reponse = $chReponse->fetch();
	return unserialize($reponse['reponsesQuestion']);
	$chReponse->closeCursor();
    }
?>

La page avec l'exercice (code simplifié) :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Exercice</title>
    </head>
    <body>
        if(!empty($_POST['subCorriger'])){
                $reponse = fnVoirReponseQuestion(1);
                $nbreBonneReponse = 0;
                for($i = 1; $i <= 10; $i++){
                        if($_POST[$i] == $reponse[$i - 1]){
                                $nbreBonneReponse++;
                        }
                }
                echo "Nombre de bonnes réponses : ".$nbreBonneReponse;
        }
        <form method="post">
            <table>
                <tr><td><input type="text" name="1" id="1" value=""></td></tr>
                <tr><td><input type="text" name="2" id="2" value=""></td></tr>
                <tr><td><input type="text" name="3" id="3" value=""></td></tr>
            </table>
            <input type="submit" name="subCorriger" id="subCorriger" value="Evaluer"/>
        </form>
    </body>
</html>

Maintenant l'ajax et javascript :question:

j'essaie de comprendre cette vidéo, c'est pas gagné
https://youtu.be/bVaciIuk8_g

Bonjour tout le monde

j'ai suivi ces 3 vidéos.

https://youtu.be/bVaciIuk8_g

https://youtu.be/EqzLugEJGJs

https://youtu.be/bTLB-FA_duE

Voilà où j'en suis :

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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();
	}
?>

La suite : Synchroniser javascript, ajax, requête sql php