Bonsoir, je me nomme Ebenezer. J'ai un petit projet de site web à rendre à mon prof, j'ai décidé de faire un jeu de culture générale. Le principal est de poser des questions une par une avec 4 propositions de réponse. L'utilisateur click sur une réponse et si cette réponse sélectionnée est correcte alors la réponse sélectionnée devient verte et on passe à la question suivante. Les différentes questions sont stockés dans un base de données que je manipule grâce à PHP. La vérification des réponses de l'utilisation se fait grâce à JavaScript. Dans ma fonction de vérification JavaScript comme je l'ai dit précédemment si la réponse est correcte elle devient verte et si elle est incorrecte, route
Mon problème est que la réponse étant correcte, je dois passer à la question suivante mais je ne sais pas quel programme ajouter pour qu'une nouvelle question soit tirée dans la base de données. J'ai pensé à appeler une fonction PHP dans JavaScript mais j'ignore comment faire. En plus j'ai créé une table qui stock l'id des questions déjà posées à l'utilisateur. Lorsqu'une question de la table des questions est sélectionnée, on compare son id à celles stockés dans la table des questions posées si l'id ne se trouve pas dans la table alors on l'affiche sinon on tire une nouvelle question pour faire la même chose. Pour la sélection de la question je dois donc écrire une requête SQL qui demande de sélectionner toutes les informations par rapport à une question prise au hasard dont l'id ne se trouve pas dans la table des questions posées.
Si je comprend bien la réponse doit être varifié puis charger une autre réponse en temps réel sans recharger la page c'est ça ?
Si c'est bien le cas pourquoi ne pas utiliser la technologie Ajax ? si la réponse est bien la bonne tu fais id++ par exemple :
questions = [Quest1, Quest2, Quest3];
l'id (clé du tableau) est numérote donc a chaque fois que l'utilisateur va répondre correctement, Ajax lancera une recherche au serveur pour piocher la réponse suivante donc 0+1 = 2èmè question , 1+1 = 3èmè question etc...
Si tu ne cherche pas de le faire en Ajax la procédure reste la même pour piocher la question suivante.
D'accord mais ma requête SQL est telle qu'une question est tirée au hasard dans ma base de données donc la première question pourrait avoir 3 comme idée puis la deuxième 5. Le choix des questions à afficher se faire de façon aléatoire.
Concernant le fait de recharger la page, le jeu peut-il quand même fonctionner comme je souhaite ? Vu que j'ai le meilleur score stocké dans la base de données mais j'ai aussi un score actuel qui est volatil. À un bonne réponse ils s'incrémente et lorsque le score est supérieur au meilleur score alors le meilleur score prend la valeur du score à chaque bonne réponse jusqu'à la fin du jeu. Je pourrais créer une variable score initialisée à 0 puis l'incrémenter à chaque bonne réponse mais est ce qu'à chaque fois que la page se recharge le score ne sera toujours pas à 0? Il y a tellement de choses que je souhaite faire mais je n'ai pas beaucoup d'idées pour les réaliser. Proposez vous svp des solutions ou si possible des moyens plus simple pour atteindre mon objectif. Je ne sais pas quand je dois rendre le travail mais ça ne risques pas de tarder, bien-sûr je fais des recherches mais souvent je n'obtiens pas gain de cause.
Merci beaucoup pour l'attention que vous portez à mes demandes.🙏🏽
Comme le dit lexunivers sans un petit code cela deviens un peut complique.
Dans un prémier temp je peut dire de stocker les id des questions déjà utilisée dans une $_SESSION. Ceci te permettra de vérifier les id dans une boucle pour piocher des questions qui ont l'id different a celui stocké dans ton array $_SESSION.
Pour l'Ajax oui tu peut modifier une partie du code sans recharcher la page et quand tu auras atteint le meilleur score tu pourras faire un update SQL toujours en utilisant l'ajax.
Exemple, la partie <div> d'une discussion tchat peut être actualiser sans recharger la page en entier. De cette façon l'utilisateur peut continuer à écrire sans être couper brusquement.
Bonjour, Merci de lire les règles du forum AVANT de créer un sujet.
Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention. Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé. Pour plus d'informations, nous vous invitons à lire les règles générales du forum
Merci de colorer votre code à l'aide du bouton Code </>
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.
Merci de modifier votre message d'origine en fonction.
Bonjour à vous. La requête AJAX doit se trouver au niveau du "setTimeout" pour charger une nouvelle question , à vrai dire, je n'ai aucune notion en AJAX qui pourrait m'aider à trouver le script adéquat.
function verifier(reponse_choisie, element) {
// Récupération de la bonne réponse
var bonne_reponse = document.getElementById("bonne_reponse").value;
// Comparaison des deux réponses
if (reponse_choisie == bonne_reponse) {
element.style.backgroundColor = "rgb(55, 224, 55)";
score++;
cor.innerText = score
setTimeout(function() {
//requête AJAX ici
}, 1000)
Je sais juste que ma requête doit pouvoir récupérer une nouvelle question envoyée par mon fichier php puis la charger sur la page d'affichage où se trouve HTML. Evidemment, j'ai fait des recherches mais je n'ai pas réussi à savoir comment structurer ma requête de sorte à ce que l'affichage suive cette logique:
en HTML, le formulaire avec la question et un identifiant.
Quand l'utilisateur choisit, le JS envoie l'id de la question et de la réponse choisie au PHP qui vérifie et qui retourne si c'est bon ou pas.
Suivant le traitement voulu, on peut juste afficher un msg "c'est bien" ou "c'est nul", attendre une autre réponse (du même formulaire) ou passer à une autre question.
Exactement. J'ai choisi de changer le background de la réponse clickée en vert si elle est correcte, en rouge sinon. Si la réponse est correcte, après le traitement de la réponse de l'utilisateur il faut passer à la question suivante, c'est là qu'AJAX doit intervenir afin de charger les données de cette question sans recharger toute la page.
C'est la plus ou moins la structure de ma base de questions. On a id qui est l'identifiant d'une question et qui sera dans la table des questions posées lorsqu'une question est sélectionnée, qX sont les différentes propositions de réponse et rok est là bonne réponse.
$q = $this->db->query("SELECT * FROM samplequizz WHERE id = '" . $id."'" )->fetch(PDO::FETCH_ASSOC);
mettons que le php envoie le formulaire sous cette forme :
$form = '
' . $q['q'] . '<br>
<form id="qform">
<input type="radio" value="' . array_search($q['r1'], $q) . '" name="' . $q['id'] . '">"' . $q['r1'] . '"<br>
<input type="radio" value="' . array_search($q['r2'], $q) . '" name="' . $q['id'] . '">"' . $q['r2'] . '"<br>
<input type="radio" value="' . array_search($q['r3'], $q) . '" name="' . $q['id'] . '">"' . $q['r3'] . '"<br>
<input type="radio" value="' . array_search($q['r4'], $q) . '" name="' . $q['id'] . '">"' . $q['r4'] . '"<br>
<input type="submit">
</form>
<script>
document.getElementById("qform").addEventListener("submit", (e) => { //on écoute un évènement
e.preventDefault(); //on bloque le comportement normal
let fd = new FormData(); // on créé un formdata qui va transporter les données
var q = document.querySelector(\'input[name="' . $q['id'] . '"]:checked\'); //on récupère le bouton coché(checked)
fd.append("q", "' . $q['id'] . '"); // on ajoute l'id de la question ("name") au formdata
fd.append("r", q.value); //on ajoute la valeur du bouton coché (la réponse) au fd
let xhr = new XMLHttpRequest(); // nouvel obj ajax
xhr.open("POST", "file.php", true); // méthode + url+ asynchrone
xhr.responseType = "json"; //type de réponse attendue
xhr.onerror = function() {
//si qqch crashe
};
xhr.onload = function() { // une fois envoyée
//faire qqch ici
};
xhr.send(fd);// on envoie le tout au fichier php qui va gérer la réponse
});
</script>
';
l'utilisateur cliquera sur le bouton après avoir choisi sa réponse et elle sera envoyée au php avec l'id de la question qui lui permettra de sélectionner la question et la bonne réponse
edit : J'ai supprimé ma réponse précédente qui était illisible :(( en espérant que celle-ci soit plus claire
edit2 :
array_search($q['r1'], $q)
c'est juste pour récupérer la clé de la valeur associée dans l'hypothèse où les questions arrivent de façon aléatoire, mais on peut se contenter de mettre "r1", "r2" etc à chaque fois si on garde le même ordre
gb-net.fr
gb-net.fr
gb-net.fr