Comment puis-je faire pour que ma page ne se recharge pas sur l'entête mais sur le jeu contenu situé dans ma div "contenu" ?
En effet, quand je clique sur une bonne ou une mauvaise réponse, j'aimerais qu'après avoir cliqué sur "ok" dans la popup de "bonne" ou "mauvaise réponse", la page se recharge ou non mais sur le jeu, et non sur l'entête.
voila mon code:
Code : Tout sélectionner
<!DOCTYPE html>
<html lang=FR dir=LTR>
<head>
<meta charset="utf-8"/>
<title>l'aventure de Lulu</title> <!-- titre à changer -->
<!-- lier ici le HTML au CSS -->
<link rel="stylesheet" href="css/feuille_style.css"/>
</head>
<body>
<!-- Instructon qui permet d'inclure le code d'un autre fchier .php (HTML+PHP) à l'endroit où on la place. -->
<?php include("Entete.php");?>
<!-- fin du bloc d'en-tête -->
<div class="fen_princip"> <!-- bloc de fenêtre principale --> <!--RELIER CETTE DIVISION AU STYLE CORRESPONDANT DANS LA FEUILLE DE STYLE -->
<div class="contenu"> <!-- bloc de contenu dans la fenêtre principale -->
Coucou petit débutant,<br />
Sais-tu ce que signifie ce signe?<br /><br />Clique sur la lettre qui te semble traduire cette image.<br /><br />
<!-- Le code suivant sert à définir les 26 images des lettres de l'alphabet LSF possibles
pour l'affichage et aussi à choisir l'une d'elle parmi elles aléatoirement.-->
<?php
$nbimages=26;
$nomimages[1]="A.PNG";
$nomimages[2]="B.PNG";
$nomimages[3]="C.PNG";
$nomimages[4]="D.PNG";
$nomimages[5]="E.PNG";
$nomimages[6]="F.PNG";
$nomimages[7]="G.PNG";
$nomimages[8]="H.PNG";
$nomimages[9]="I.PNG";
$nomimages[10]="J.PNG";
$nomimages[11]="K.PNG";
$nomimages[12]="L.PNG";
$nomimages[13]="M.PNG";
$nomimages[14]="N.PNG";
$nomimages[15]="O.PNG";
$nomimages[16]="P.PNG";
$nomimages[17]="Q.PNG";
$nomimages[18]="R.PNG";
$nomimages[19]="S.PNG";
$nomimages[20]="T.PNG";
$nomimages[21]="U.PNG";
$nomimages[22]="V.PNG";
$nomimages[23]="W.PNG";
$nomimages[24]="X.PNG";
$nomimages[25]="Y.PNG";
$nomimages[26]="Z.PNG";
/*rand génère une valeur aléatoire.
Initialisation du random (les microsecondes sont une valeur donnée au millionnième
-> Multiplier par 1 million pour avoir un entier*/
srand((double)microtime()*1000000);
/*rand génère une valeur aléatoire. Le nom de l'image qui va etre affichée est stocké dans la variable affimage.*/
$affimage=rand(1,$nbimages);
/*Ici on met le code qui permet d'afficher 3 lettres de l'alphabet Français aléatoirement
mais l'une d'elle est la traduction de l'image affichée plus haut dans le visuel*/
$alphabet="abcdefghijklmnopqrstuvwxyz";
/*str_shuffle mélange les caractères d'une chaîne de caractères*/
$melange = str_shuffle($alphabet);
/*substr retourne un segment de chaîne*/
$lettres = str_shuffle(substr($melange, 0, 3));
?>
<div><!-- On affiche l'image d'une lettre LSF -->
<img id="imageLSF" src="images/Alphabet/<?php echo $melange[0]; ?>.png">
</div>
<?php
/*strlen calcule la taille d'une chaîne*/
for ($i=0; $i<strlen($lettres); $i++){
echo '<a href="#" class="lettre">'.$lettres[$i].'</a>';
}
/* ici on mémorise en JAVASCRIPT la lettre sur laquelle on clique.
- document.querySelector retourne le premier élément dans le document(en partant du premier niveau du html et ordonné comme les éléments
du document) qui correspond au groupe de sélecteurs passés en paramètre.
Le mieux c'est d'utiliser querySelectorAll qui va retourner un tableau,
on va devoir faire une boucle for dessus et ajouter l’événement pour chaque élément.
- addEventListener permet l'assignation de gestionnaires d'évènements sur un élément cible.
- innertText : récupère le contenu entre deux balises sans interprétation des balises contenu dans le texte
(supprime toutes la balises contenues dans le texte récupéré).
- location.reload() permet le rechargement d'une nouvelle partie après le clic sur "OK" dans la popup de "bonne réponse"*/
echo '<script type="text/javascript">lettreChoisie="'.$melange[0].'";
var lettre = document.querySelectorAll("a.lettre");
for ($i=0; $i<3; $i++){
lettre[$i].addEventListener("click", testerLettre);
}
function testerLettre(event) {
if (event.target.innerText===lettreChoisie) {
var B="Bravo! tu as trouvé la bonne lettre.";
alert(B);
location.reload();
} else {
var m="Mauvaise réponse! Essaye encore.";
alert(m);
}
}
</script>';
?>
</div>
<aside> <!-- bloc de contenu latéral -->
<img id="logoRennes2" src="images/illustrations/logorennes2-blancpng24.png" alt="logo Rennes 2"/>
</aside>
</div>
<div id="back_to_top"> <!-- bloc pour l'image de la flêche de retour vers le haut de page -->
<a href="#top">
<!-- LIEN CLIQUABLE SUR L'IMAGE PERMETTANT DE RETOURNER EN HAUT DE LA PAGE -->
<img id="fleche" src="images/boutons/FlecheHaut.gif" alt="Flèche vers le haut"/>
</a>
</div>
<!-- début du bloc de pied de page, Instructon qui permet d'inclure le code d'un autre fichier .php (HTML+PHP) à l'endroit où on la place. -->
<?php include("Pied_de_page.php");?>
</body>
</html>