Module B212 : IHM et programmation événementielle Épreuve de ...

Module B212
Module B212 : IHM et programmation événementielle
Épreuve de juin 2011
Le barème des points est donné à titre indicatif.
Étape N°1 : l'interface (6 points)
On veut réaliser l'interface ci-contre
Le fond d'écran est vert clair (vous choisirez une
combinaison RVB qui s'en rapproche).
Par défaut les textes sont écrits en noir avec la
police ″ comic sans MS ″ avec une taille de 18px.
Documents autorisés
Durée : 2 heures
La zone titre (Calcul mental...) est écrite avec une
police de taille 28px sur un fond vert foncé (vous
choisirez une combinaison RVB qui s'en
rapproche).
Le texte y est distant des bords de la zone d'au
moins 25px, il y est centré et écrit en jaune. Cette zone vert foncée a une largeur de 600px. Les informations
contenues dans cette zone sont distantes d'au moins 25px des bords de la zone.
L'image qui s'y trouve est sauvegardée dans un sous-répertoire appelé "images" et le nom du fichier la
contenant est "interr.gif".
Les nombres sont écrits dans des champs de type texte avec une police de 20px. Toutes les zones
contenant ces champs textes ont une largeur de 200px et une hauteur de 50px. Elles ont un fond de couleur
bleue sauf celle du milieu qui a un fond jaune.
Elles sont toutes situées de façon absolue sur l'écran avec les coordonnées (left,top) suivantes :
- (150px, 150px), (550px, 150px), (150px, 350px) et (550px, 350px) pour les zones bleues,
- (350px, 250px) pour la zone jaune.
Cette page contient également une zone
cachée dont les coordonnées (left, top) sont :
(40px, 50px). Elle a une largeur de 500px, une
hauteur de 200px. Son fond est de couleur gris
clair (vous choisirez une combinaison RVB qui
s'en rapproche). Le texte est écrit avec la police
définie par défaut pour la page.
Elle ressemble à ceci
Travail à faire : Écrire le code HTML et les styles CSS nécessaires pour obtenir cette interface. Les
styles pourront être définis localement ou dans une feuille de styles externe (ou les deux) selon votre
choix.
Examen module B212 1 / 4

Étape N°2 : Interactivité 1 (4 points)
Module B212
On veut que lorsque l'utilisateur clique sur l'image du point d'interrogation la zone contenant l'explication
apparaisse sur l'écran comme cicontre
On veut également que si
l'utilisateur clique alors sur cette
zone d'explication, celle-ci
disparaisse de l'écran. On revient
donc à un écran semblable à celui
du départ.
Travail à faire : Compléter
l'étape N°1 pour obtenir cette
interactivité.
(Vous ne donnerez que le code à
ajouter en indiquant où le placer).
Étape N°3 : Interactivité 2 (4 points)
Lorsque l'utilisateur clique sur un des champs contenant un nombre dans une zone bleue, la valeur de ce
champ est retranchée de celle de la zone centrale (en jaune).
Ainsi, si l'utilisateur clique sur
le champ contenant la valeur 42,
l'écran devient :
Travail à faire : Modifier et compléter l'étape N°2 pour obtenir cette interactivité.
(Vous ne donnerez que le code à ajouter en indiquant où le placer).
Examen module B212 2 / 4

Étape N°4 : Interactivité 3 (3 points)
Module B212
On veut en plus que le chiffre contenu dans le champ cliqué disparaisse et que le champ cliqué ne soit plus
sensible aux clicks.
L'écran doit donc ressembler à celui-ci :
Travail à faire : Modifier et compléter l'étape N°3 pour obtenir cette interactivité.
(Vous ne donnerez que le code à ajouter en indiquant où le placer).
Étape N°5 : Interactivité 4 (3 points)
Lorsqu'on arrive à une valeur ≤ 0, le jeu doit se terminer. Tous les champs des zones bleues doivent
disparaître.
Selon que la valeur est = 0 ou < 0, la couleur de la zone centrale doit être rouge ou verte et le message inscrit
dans ce champ central doit être "BRAVO !" ou "PERDU !!" comme ci-dessous :
Examen module B212 3 / 4

Module B212
Travail à faire : Modifier et compléter l'étape N°2 pour obtenir cette interactivité.
(Vous ne donnerez que le code à ajouter en indiquant où le placer).
Quelques rappels :
Modification de propriétés CSS en JavaScript :
En JavaScript le nom des propriétés CSS d'un objet définies par un nom composé ne s'écrivent pas
de la même façon que les attributs CSS des feuilles de styles.
On les déduit en général de la façon suivante :
Attribut CSS : terme1-terme2 => propriété JavaScript : terme1Terme2
Exemple :
Pour modifier la couleur de fond d'une zone
on peut écrire
document.getElementById(″ Z1 ″).style.backgroundColor= ″red ″;
Structure de votre document
On vous recommande de structurer votre document comme ci-dessous :
// Actions de l'interactivité
// Associations (objet,événement)= ==> action
Examen module B212 4 / 4