Gymnase

Apparence

Formulaires, paramètres et bonus ​

Les formulaires ​

Renommez le fichier index.html en introduction.html et créez un nouveau fichier index.html avec le contenu suivant :

html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projet Web</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Projet Web</h1>
    <h2>Le rangement</h2>
    <form action="introduction.html" method="GET">
      <label for="nom">Votre nom :</label>
      <input name="nom" id="nom" required />
      <button>Commencer</button>
    </form>
  </body>
</html>

Observez le résultat : nous y avons ajouté un formulaire avec un champ de saisie pour le nom de l'utilisateur et un bouton pour valider le formulaire :

  • La balise <form> englobe le formulaire et définit l'action à effectuer lors de la validation (ici, ouvrir la page introduction.html avec la méthode GET).
  • La balise <label> permet de décrire le champ de saisie associé. L'attribut for doit correspondre à l'attribut id du champ de saisie associé.
  • La balise <input> est un champ de saisie pour le nom de l'utilisateur. L'attribut required indique que le champ est obligatoire et l'attribut name est le nom du paramètre qui sera envoyé lors de la validation du formulaire.
  • La balise <button> est un bouton pour valider le formulaire.

Entrez un nom dans le champ de saisie et validez le formulaire (cliquez sur le bouton ou appuyez sur la touche Entrée). Observer bien l'url de la page introduction.html : il contient le nom que vous avez saisi sous la forme ?nom=....

Les paramètres ​

On va maintenant récupérer le paramètre nom dans la page introduction.html. Modifiez le contenu de introduction.html comme suit :

html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projet Web</title>
    <link rel="stylesheet" href="styles.css" />
    <script>
      const urlParams = new URLSearchParams(window.location.search);
      const nom = urlParams.get("nom");
    </script>
  </head>
  <body>
    <h1>Projet Web</h1>
    <h2>Le rangement</h2>
    <p>
      Bonjour
      <script>
        document.write(nom);
      </script>
      ! En rangeant votre grenier, vous tombez sur une vieille carte des
      environs.
    </p>
    <ul>
      <li>
        <a href="observer.html">Observer la carte</a>
      </li>
      <li>
        <a href="occupations.html">Ranger la carte</a>
      </li>
    </ul>
  </body>
</html>

Le nom précédemment saisi dans le formulaire est maintenant affiché dans la page introduction.html. Pour cela, on utilise un script JavaScript qui récupère le paramètre nom dans l'url de la page et l'affiche dans le paragraphe :

  • ligne 8-11 : on déclare un bloc JavaScript avec la balise <script>.
    • ligne 9 : permet de récupérer les paramètres de l'url de la page courante.
    • ligne 10 : permet de récupérer la valeur du paramètre nom dans l'url de la page courante et de la stocker dans la variable nom.
  • ligne 17-20 : on ajoute du code JavaScript pour afficher le nom dans le paragraphe.
    • ligne 19 : permet d'écrire le contenu de la variable nom dans le paragraphe.

Exercice

Demandez à l'utilisateur de saisir un lieu dans le formulaire de la page index.html et affichez-le dans la page introduction.html ("Bonjour, [nom] ! En rangeant votre grenier, vous tombez sur une vieille carte de [lieu].") :

  • Ajoutez un champ de saisie pour le lieu dans le formulaire de la page index.html.
  • Vérifiez que le paramètre lieu est bien envoyé dans l'url de la page introduction.html.
  • Récupérez le paramètre lieu dans la page introduction.html et affichez-le dans le paragraphe.

Votre jeu ​

Suivez les étapes suivantes pour créer votre jeu d'aventure :

  1. Commencez par dessiner l'organigramme pour avoir une idée claire des différentes étapes et des liens entre elles.
    • Une petite histoire dans un premier temps (environ 7 étapes).
    • Chaque étape a plusieurs choix possibles et des conséquences différentes.
    • Les conséquences peuvent être réutilisées pour plusieurs choix.
    • Passer des informations d'une étape à l'autre (ex. le nom du joueur).
  2. Créez une page HTML pour chaque étape de l'organigramme.
    • Chaque page doit contenir un paragraphe de texte et des liens vers d'autres pages.
    • Le texte doit dépendre des choix de l'utilisateur.
  3. Utilisez des paramètres dans l'url pour personnaliser le contenu des pages.
    • Utilisez un formulaire pour demander des informations (nom, âge, nombre préféré, couleur, ...).
    • Affichez les informations dans le texte des pages.
  4. Finalisez le jeu

Inspiration

Pour retrouver vos jeux de l'année dernière : https://blueur.github.io/gymnase-tp/1m/tp-42.html

Les bonus ​

Voici quelques idées pour améliorer votre projet :

Les images vectorielles ​

Vous pouvez dessiner vos propres images vectorielles sur les pages HTML avec la balise <svg> : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

Le favicon ​

Vous pouvez ajouter un favicon à votre site web en ajoutant un fichier favicon.ico à la racine de votre projet. Le favicon est l'icône qui s'affiche dans l'onglet du navigateur : https://www.w3schools.com/html/html_favicon.asp

Références ​