Interaction Homme Machine sur le Web

Eisbar

Questions

  1. Le but du TP est de créer une page interactive concernant un jeu pour enfants appelé Eisbar,dont voici les règles du Jeu :

    On lance trois dés.

    Le point central d'un dé est considéré comme un trou dans la glace.

    Les autres points sont vus comme des ours autour du trou.

    Enfin les points à l'opposé sont vus comme des poissons de l'autre côté de la glace.

    Par exemple pour le dé suivant :

    de

    Il y a 1 trou, 2 ours et 4 poissons.

    L'enfant doit pour les trois dés affichés dans la page donner le nombre total de trous, d'ours et de poissons.

  2. Copier coller le fichier scratch.html et renommer le eisbar.html

  3. Dans la partie head du fichier pour l'instant dans les balises link et script mettre un dièse # pour désactiver le css et l'ancien script Javascript
  4. Dans ce fichier le titre h1 dans le header est Eisbar
  5. Dans le header à la gauche du titre h1 doit se trouver l'image de l'ours utilisé en classe pour le codage de scratch.html

  6. Il n'y a qu'un article dans cette page et il doit contenir le code suivant, qui sera expliqué plus bas:
    7. 	
	<article>
	<h2>Règles du jeu</h2>
	<!-- Ecrire ci-dessous les règles du jeu -->

	<h3>A vous de jouer!</h3>
	<!-- Insérer ci-dessous les balises pour les images de dé -->

	<p><label>Entrez le nombre de trous</label>
	<input type="text" class="nb_trous"/></p>

	<p><label>Entrez le nombre d'ours</label>
	<input type="text" class="nb_ours"/></p>

	<p><label>Entrez le nombre de poissons</label>
	<input type="text" class="nb_poissons"/></p>

	<input type="submit" class="bouton" value="vérifier"/>
	<p  class="resultat"></p>
	</article>

    Pour l'instant le rendu graphique de la page (l'article) sans css doit ressembler à cela

    On voit entouré de bleu la zone de saisie de texte qui permet d'entrer un nombre de trous

    Le rôle de la balise input est de permettre de faire des entrées dans la page, ces entrées seront ensuite traitées par le programme JavaScript

    La dernière balise input de type "submit" comme un bouton sera associée à une fonction qui vérifiera l'exactitude des nombres entrés lorsqu'on cliquera sur le bouton

  7. Maintenant créez un fichier .js nommé eisbar.js

  8. En s'inspirant de ce qui a été fait avec les jeux de dés (scratch.html et scratch.js) définir des variables JavaScript nb_trous, nb_ours, nb_poissons, bouton et resultat associées aux sélecteurs .nb_trous, .nb_trous, .nb_ours, .nb_poissons .bouton et .resultat
  9. De même définir des variables JavaScript associées aux sélecteurs liés aux images

  10. Ecrire les fonctions JavaScript ci-dessous

    	
function de(){
//renvoie un nombre entier aléatoire entre 1 et 6
}

function somme(x,y,z){
// renvoie la somme de x et de y et de z
}

function affiche_images(){
//lance 3 dés et affiche dans la page eisbar.html les images des 3 dés 
}

function verifie_solution(){
//vérifie si nb_trous, nb_ours et nb_poissons forment une solution exacte
//si c'est le cas est affiché Gagné!!! grâce à la variable resultat
//sinon est affiché Perdu !!!
}

    La dernière fonction doit être exécutée lorsqu'on clique sur le bouton vérifier de la page html

    Pour mémoriser les solutions exactes penser à utiliser trois tableaux sol_trous, sol_ours et sol_poissons à rempilr une fois pour toute dans le main et de telle sorte que par exemple sol_trous[3] = 1, sol_ours[3] = 2 et sol_poissons[3] = 4, ce qui correspond au dé :

    de
  11. Créer un fichier eisbar.css et mettre la page en forme suivant vos goûts

Formulaire méthode GET

Questions

  1. Remplir le formulaire suivant et cliquez sur OK

    Qu'observez vous au niveau de l'U.R.L ?

    Quels inconvénients voyez vous à la méthode GET ?

  2. Que s'est il passé quand vous avez cliqué sur OK ?

    Quel est le nom et le type du fichier visible dans la barre U.R.L ?

    Où est exécuté ce fichier chez le client ou le serveur ?

  3. Chaque entrée du formulaire a un nom significatif pour faciliter le traitement des données entrées
  4. En observant le code source de la page quelle balise html a été utilisée pour afficher les éléments du formulaire en colonne ?
  5. Quel code css utiliser pour décaler OK vers le centre de la page ?
Cliquez ici pour voir le formulaire

Formulaire méthode POST

Questions

  1. Remplir le formulaire suivant et cliquez sur OK

    Observe-t-on le même phénomène que le précédent formulaire ?

  2. Que s'est il passé quand vous avez cliqué sur OK ?

    Quel est le nom et le type du fichier visible dans la barre U.R.L ?

    Où est exécuté ce fichier chez le client ou le serveur ?

  3. Chaque entrée du formulaire a un nom significatif pour faciliter le traitement des données entrées
  4. En observant le code source de la page quelle balise html a été utilisée pour afficher les éléments du formulaire en colonne ?
  5. Quel code css utiliser pour décaler OK vers le centre de la page ?
Cliquez ici pour voir le formulaire