Sujet Précédent Sujet Suivant

Code HTML?

Résolu/Fermé
Aude - Modifié le 16 févr. 2020 à 10:32
 Aude - 23 févr. 2020 à 10:06
Bonjour,

Je cherche, dans le cadre de mon travail, à créer un escape game "maison".

J'aurais souhaité créer un site très simple en codage html où les joueurs doivent rentrer dans le bon ordre 6 mots codes pour résoudre l’énigme. (Je suis totalement novice en codage).

Voici mon codage de base : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Le Retourneur de Temps</title>
  </head>
  <body>
       <br/>
       <br/>
   <center> <img src="https://zupimages.net/up/20/07/2130.png" alt="Image du retourneur de temps"> 
       <br/>
       <br/>
<p>Rentrer les mots codes dans le bon ordre.</p>
<label for="name">Code n°1:</label>
 <input type="text" name="Réponse" maxlength="10"/><br/>
<form>
  <div>
    <input type="submit" value="Envoyer !"/><a href="code2.html"></a>
  </div>
</form>
</center>

  </body>

</html>


Est-ce qu'il existe un code ou une astuce pour codifier une seule bonne réponse possible dans le champ de texte ? L'idée étant que si le mot code est bon, il mènerait à une seconde page où il faudra rentrer le code 2 et ainsi de suite jusqu'à la fin des mots codes?

Voici un exemple car je ne suis pas sure d'être claire : 

Page 1 : Mot code 1 : JARDIN  > Mène à page 2 
Page 2 : Mot code 2 : MAISON > Mène à page 3
Page 3 : Mot code 3 : SCOOTER > Bravo, vous avez résolu l’énigme !


Merci d'avance pour le temps que vous prendrez,
Aude.
A voir également:

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié le 23 févr. 2020 à 10:28
Bonjour,

Le html sert uniquement à indiquer aux navigateurs internet quels sont les éléments à afficher ( la structure de ta page).
Pour que ta page soit "interactive" tu n'as pas d'autre choix que d'y adjoindre à minima, du code Javascript, ou utiliser un langage serveur tel que le PHP.

En Javascipt 
<!DOCTYPE html>
<html>
<head>
  <title>Je suis le cerbère de la porte..</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div>  
    <input type="text" id="reponse" maxlength="10"/><br/>
  </div> 
  <div>
    <button onclick="verif()">Envoyer !"</button>
  </div>

  <script type="text/javascript">
   function verif(){
      var rep = document.getElementById('reponse').value;
      if(rep =="JARDIN"){
        document.location.href = "code2.html";
      }else if(rep =="MAISON"){
        document.location.href = "code3.html";
      }else if(rep =="SCOOTER"){
        alert("Bravo !");
      }else{
        alert("ERREUR .....");
      }
   }
  </script>
</body>
</html>


NB: Ne pas utiliser de caractères accentués dans le nom des variable ou les id/name des éléments html !


0
Réponse 2 / 5
Aude
17 févr. 2020 à 19:19
Merci pour cette réponse rapide et claire !
Je vais tester tout ça et reviendrai en cas de soucis !
0
Réponse 3 / 5
Aude
22 févr. 2020 à 15:48
Bonjour,

Concernant le code javascript j'aurais encore une question.
Actuellement, avec le code donné, si je rentre un mot, même s'il n'est pas dans l'ordre, on accède directement à la bonne page.

Exemple :

Code 1 : JARDIN
Code 2 : SCOOTER
Code 3 : PELLE
Code 4 : LOUP

Si dans la page code 1, je rentre le mot PELLE, j'accède directement à la page du code 4.
Le but est que les gens ne puissent pas rentrer un autre ordre que celui voulu.

Est-ce possible d'avoir un code qui empêche cela?
Merci d'avance !
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié le 23 févr. 2020 à 10:28
Je n'avais pas bien compris ta question au départ.
Tu ne veux pas UN code qui envoie sur chacune des pages possibles...
Tu veux UN code différent pour CHAQUE page.
Dans ce cas : 
<!DOCTYPE html>
<html>
<head>
  <title>Je suis le cerbère de la porte..</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <div>  
    <input type="text" id="reponse" maxlength="10"  onkeyup="this.value=this.value.toUpperCase()"/><br/>
  </div> 
  <div>
    <button onclick="verif()">Envoyer !"</button>
  </div>

  <script type="text/javascript">
   
   
   function verif(){
   //--------------------------------------------------------------------//
   // Variables à adapter
   // en fonction de la page dans laquelle tu places ton code
   //--------------------------------------------------------------------//
   var CODEATROUVER = "JARDIN";
      var URLSIOK = "code2.html";
      //--------------------------------------------------------------------//
      var rep = document.getElementById('reponse').value;
      if(rep == CODEATROUVER){
        document.location.href = URLSIOK;
      }else{
        alert("ERREUR .....");
      }
   }
  </script>
</body>
</html>


et pour la page 4, au lieu de faire une redirection, tu fais ton 
 alert("Bravo !");
0
Réponse 4 / 5
Aude
22 févr. 2020 à 16:49
Ah ok je comprend mieux, je vais tester ça !
Merci beaucoup en tout cas pour ta réactivité !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Aude
Modifié le 23 févr. 2020 à 10:07
Super, ça marche parfaitement !
Merci beaucoup pour ton aide, mon problème est résolu !
0

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Acces à snapchat temporairement désactivé
Anto_1234 -
M2 -

87 réponses