docExamen L1 -‐ Module Info12 2 heures Tous document autorisés
download 
Plainte Transcription
Examen L1 -‐ Module Info12 2 heures Tous document autorisés
Examen L1 -‐ Module Info12 2 heures Tous document autorisés Nous travaillons en html 5, csss 3 et javascript. Le but de ce sujet est la mise en place d'un mini sondage demandant l'avis des spectateurs sur les films de James Bond. Il y a deux parties : la première présente les films et les acteurs principaux, la seconde le sondage. Les deux parties sont indépendantes. Vous devez répondre aux deux parties. Première partie (10 points) : Ecrire la page html et la feuille css correspondant au texte suivant. (commencer après la balise <body>) L'image de la page html attendue est l'image 1 ci-‐dessous. Cette page est partagée en 4 zones ; l'ensemble est sur fond couleur gris clair et le texte couleur #006. -‐ -‐ -‐ -‐ Zone 1 : composée d'un titre "Je m'appelle…" de niveau h1 ; centré ; bordure inférieure rouge, trait continu, fin. Zone 2 : de hauteur 450 pixels, composée de 3 zones : une à droite contient la photo Craig.jpg, une à gauche contient la photo Sean.jpg et au milieu contient du texte sur James Bond. Les deux zones contenant des photos ont une largeur de 30% et une hauteur de 450 pixels ; le texte est justifié et écrit avec une taille de caractères de 18 points, la largeur de la zone de texte est de 30% également. Zone 3 : commence par un titre "Au cinéma" de niveau h1-‐ avec une bordure inférieure rouge et fine -‐ qui chevauche 2 colonnes séparées par un double trait vertical bleu d'épaisseur 5 pixels ; l'espacement entre les 2 colonnes est de 30 pixels. Dans chaque colonne apparaît un élément d'une liste ordonnée "James Bond 1…" et "James Bond 2…". Les puces de ces deux éléments sont issues d'un compteur. Sous chacun de ces deux éléments, apparaît une sous-‐liste de largeur 400 pixels, non ordonnée à puce (mais dont on a supprimé les puces) contenant pour la première la liste des acteurs et la seconde une liste de films. Le texte des éléments de ces sous-‐listes est centré et une marge inférieure de 4 pixels sépare chacun des éléments de la sous-‐liste. Au démarrage, les 2 sous-‐listes sont invisibles et elle apparaissent au passage de la souris sur le texte "James-‐Bond 1 : les acteurs " pour la première et "James-‐Bond 2 : les films " pour la seconde. Au passage de la souris sur chaque élément de ces deux-‐sous listes, les éléments apparaissent avec un fond jaune, et le texte en gras. Zone 4 (texte "Participer au sondage"): Identique à la partie 1. En plus, au passage de la sourie, le texte apparaît sur fond jaune. Ce texte est un lien qui permet d'ouvrir "page2.html". Seconde partie (10 points) : 1 – (5 points) Ecrire la page html et la feuille css correspondant au texte suivant. (commencer après la balise <body>) Voir la page2.html image 2 ci-‐dessous. Les caractéristiques de la page sont identiques à la page 1 (fond gris clair, …) L'ensemble de la page est un formulaire qui doit envoyer les réponses du sondage à un destinataire lors du clic sur le bouton "Envoyer". Le formulaire commence par le titre de type h1 ; puis un tableau, centré sur la largeur de la page, dont la ligne d'entête a une couleur de fond #808080 et une couleur de texte blanche. Toutes les cellules ont une bordure bleue, continue, de 1 pixel. La dernière colonne du tableau contient des jauges donnant les valeurs attribuées au film par le lecteur. Ces valeurs vont de 0 à 5 et sont initialisées à 2,5. Puis un autre titre de niveau h1 avec les mêmes caractéristiques que précédemment ; trois labels et zones de texte, correctement alignés (largeur des labels et des zones de texte de 300 pixels), permettent de fournir nom, prénom et emel ; enfin une zone permet de joindre un commentaire et deux boutons permettent d'effacer tous les choix et de l'envoyer. Le bouton "envoyer" est exactement aligné sous les zones de texte précédentes. Les deux boutons sont carrés de côté 100 pixels ; la zone de commentaires a 6 lignes et 30 caractères par ligne. 2 – (5 points) Ecrire le programme javascript et modifier la page html afin de répondre au problème ci-‐après. Les numéros dans la première colonne du tableau sont des zones de texte du formulaire de longueur maximale 1 caractère. Si l'utilisateur clique sur un des numéros, cela exécute une fonction javascript choix(x) où x est le numéro cliqué. Cette fonction ouvre une fenêtre de dialogue permettant à l'utilisateur de donner un chiffre de 0 à 5. La fonction vérifie que le caractère tapé est bien numérique et est compris entre 0 et 5 ; sinon un message d'erreur apparaît et l'utilisateur doit retaper. Ce chiffre sert alors de jauge pour modifier l'apparence de la jauge correspondante dans le tableau. La zone de texte contenant le chiffre devient non modifiable par l'utilisateur, le chiffre s'affiche en rouge. Pour permettre l'échange de valeur entre la fonction choix() et la jauge, il faut mettre cette valeur tapée par l'utilisateur dans une zone de formulaire cachée et utiliser cette valeur ensuite dans la jauge. Voir un exemple figure 3. Le formulaire est envoyé si les 3 champs (prénom, nom et adresse emel) sont bien remplis. Image 1 Image 2 Image 3 : on clique sur le 3 ; on tape un chiffre compris entre 0 et 5 ; la jauge est modifiée et le 3 devient non modifiable et rouge.
