IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Exercice html, php, mysql, javascript


Sujet :

AJAX

  1. #1
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Janvier 2018
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Janvier 2018
    Messages : 85
    Points : 40
    Points
    40
    Par défaut 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.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 213
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 213
    Points : 15 499
    Points
    15 499
    Par défaut
    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é.

  3. #3
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Juin 2021
    Messages : 645
    Points : 1 280
    Points
    1 280
    Par défaut
    Bonjour,

    Citation Envoyé par mathieu Voir le message
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    .reponseOK { color:green; }
    .reponseKO { color:red; }

    N.B. J'avais réalisé un quizz tantôt (2015 !) :

    Sans Ajax : traitement "classique", mais comme il comporte plusieurs pages, réponses et questions sont stockées dans des variables de SESSION.

  4. #4
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Janvier 2018
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Janvier 2018
    Messages : 85
    Points : 40
    Points
    40
    Par défaut
    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 SQL : Sélectionner tout - Visualiser dans une fenêtre à part
    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 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
    <?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 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
    <!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

    j'essaie de comprendre cette vidéo, c'est pas gagné

  5. #5
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    Janvier 2018
    Messages
    85
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Janvier 2018
    Messages : 85
    Points : 40
    Points
    40
    Par défaut
    Bonjour tout le monde

    j'ai suivi ces 3 vidéos.







    Voilà où j'en suis :

    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
    <!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 JavaScript : 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
    $(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 : 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
    <?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 : 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
    <?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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Mission/Télétravail] [TOULOUSE] Création de Sites Vitrines, Développeur HTML/CSS, PHP/MySQL, JavaScript, Flex
    Par arnaud.tlse dans le forum Demandes
    Réponses: 0
    Dernier message: 05/08/2009, 14h39
  2. [HTML/PHP/AJAX/JAVASCRIPT/XML/TMX/MYSQL/JAVA] Mémoire de traduction
    Par titoff85 dans le forum Langages de programmation
    Réponses: 0
    Dernier message: 04/08/2007, 09h20
  3. Réponses: 10
    Dernier message: 22/03/2007, 09h36
  4. [MySQL] [PHP, MySQL, Javascript] Problème Variables
    Par marie4449 dans le forum PHP & Base de données
    Réponses: 6
    Dernier message: 29/05/2006, 12h57
  5. [SGBD] Probleme menu css /php / mysql / javascript
    Par vincedjs dans le forum Administration
    Réponses: 14
    Dernier message: 21/02/2006, 18h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo