Partiel, durée 2 heures, documents autorisés

Université de Provence
L3 Info
Année 2009-2010
OUTILS WEB
Partiel, durée 2 heures, documents autorisés
Remarques :
• les documents (livres, notes de cours, ...) sont autorisés,
• le barème est donné à titre approximatif et pourra être modifié,
• vous pouvez me poser des questions en cas de soucis
Exercice 1 : ( 16 points) Sudoku
Le but de cet exercice est d’écrire une page HTML et du code JavaScript permettant de jouer au Sudoku,
vous n’êtes pas obligé de connaı̂tre les règles du jeu pour pouvoir répondre aux questions.
Question1: (1 point)
Écrire les lignes HTML permettant d’obtenir un tableau 4×4 dont les cellules sont des zone de texte d’un
formulaire.
NB. Vous pouvez ecrire seulement le code de la première ligne du tableau car les trois autres sont identique.
Question2: (1 point)
L’utilisateur doit entrer un chiffre dans chaque case vide. Lorsqu’il a fini, il a deux possibilités offertes par
deux boutons : 1. Vérifier pour vérifier que la grille est correctement remplie et 2. Charger pour charger
la solution sur une autre page HTML.
Ecrire les lignes HTML permettant d’ajouter ces deux boutons au formulaire précédent faisant appel des
deux fonctions verifier() et charger() correspondantes, on ne vous demande pas d’écrire le corps de ces
fonctions.
Question3: (6 points) : Mise en place des fonctions liées aux boutons
1. Écrire la fonction verifier() (cette fonction est liée au bouton Vérifier de la Question 2) qui vérifie
si la grille est complètement remplie, c’est à dire qu’il n’y a aucune cellule vide . Si ce n’est pas le cas,
le ”focus” est donné à la première zone vide trouvée. (3 points)
2. Le deuxième bouton permet d’ouvrir une page HTML Solution.html (qui contient la solution) dans
une nouvelle fenêtre.
• Ecrire la fonction Charger() permettant d’ouvrir la nouvelle fenêtre – lors du clic sur le bouton
”Charger” – avec la page Solution.html. La nouvelle fenêtre n’aura pas de barre d’outils ni
menu, et occupera la totalité de l’écran. (Attention on ne vous demande pas d’écrire la page
Solution.html !!). (2 points)
• La page Solution.html contient un bouton permettant de fermer cette nouvelle fenêtre lors d’un
clic.
Ecrire les lignes HTML permettant de décrire ce bouton ainsi que la fonction Javascript permettant
de fermer la fenêtre (Attention on ne vous demande pas la page Solution.html complète mais
seulement le bouton !!). (1 points)
Question 4 : (4 points) Zones cliquables, table de couleur et fond d’écran
Maintenant, le but est donner à l’utilisateur la possibilité de choisir la couleur du texte ainsi que la couleur
du fond d’écran. Pour cela, nous fournissons une image couleur.gif qui sera affichée sur la page en deux
exemplaires; chacune contenant 9 couleurs différentes.
Chaque image sera considérée comme une image ”cliquable” formée de 3 × 3 carrés identiques. L’utilisateur
clique sur un carré de la première occurrence de l’image, le texte est affiché avec cette couleur et au clic sur
un carré de la deuxième occurrence de l’image c’est la couleur de fond qui est sélectionnée. Pour information,
chaque carré a comme dimensions 20 par 20 pixels. Les codes hexadécimaux des neuf couleurs de l’image
sont stocké dans des variables COLOR1, COLOR2, ..., COLOR9 préalablement définies.
Ajouter les lignes HTML et les éventuelles instructions Javascript permettant de créer, d’afficher les deux
images cliquables, et de changer les couleurs de texte et de fond (N’écrivez que quelques lignes, par exemple
celles permettant de décrire les deux premières cases en haut à gauche et les deux dernières en bas à droite
de chacune des deux images).
Question 4 : (4 points) Chronomètre
On désire cette fois connaı̂tre le temps mis par le joueur pour valider sa grille. En plus, on doit permettre à
l’utilisateur de prendre une pause en cliquant sur le bouton Pause, dans ce cas là, le Chronomètre sera arrêté
temporairement. L’utilisateur doit cliquer sur le bouton Reprendre pour re-déclencher le Chronomètre. Le
temps de réflexion global ne doit pas dépasser 5 minutes (on ne prend pas en compte le temps des pauses).
Pour cela on met en place un chronomètre qui se déclenche au chargement de la page et qui affiche les
secondes dans une zone de texte en bas le la page. Ce chronomètre doit s’arrêter lors du clic sur le bouton
de validation de la grille.
Ecrire les lignes HTML et Javascript permettant de mettre en place ce chronomètre, ainsi que les boutons
Valider, Pause et Reprendre et les fonctions JavaScript associées. Si le temps de réflexion dépasse 5
minutes (on ne prend pas en compte le temps des pauses) alors un message d’alarme "Vous avez perdu au
temps" s’affichera, et le chronomètre sera arrêté.
Si vous modifiez vos lignes précédentes n’écrivez, ici, que les modifications apportées.
Remarque:
Pour simplifier la tache, on suppose que l’utilisateur est honnête, c’est à dire : quand il clique sur le bouton
Pause il ne regarde plus la grille du jeu et donc on est pas obligé d’effacer la grille et de la recharger plutard.
Exercice 2 ( 4 points) Les cadres : effet Zenon
L’effet Zenon :
Etape 1 : au départ on dispose d’une page HTML qui contient seulement un lien hypertexte : BAS, si on
clique sur ce lien, la page actuelle se divise en deux cadres horizontaux de taille identique, le cadre du haut
(appelé cadre1 ) devrai contenir 2 liens hypertexte: HAUT, SOMMET; le cadre du bas (appelé cadre2 ) devrai
contenir un lien BAS, et on passe à l’étape 2 :
Etape 2 : Rappelons qu’on dispose de 2 cadres.
• Si on clique sur le lien HAUT du cadre1 alors le cadre2 doit être supprimé, et le cadre1 contiendra un
seul lien BAS
• Si on clique sur le lien SOMMET du cadre1 alors on supprime tous les cadres et on revient sur la page de
départ.
• Si on clique sur le lien BAS du cadre2 alors ce dernier sera encore divisé en deux sous-cadres horizontaux
de taille identique, le sous-cadre du haut (appelé cadre2 ) contiendra les deux liens HAUT, SOMMET, et
le sous-cadre du bas (appelé cadre3 ) contiendra un lien BAS.
Et on passe à l’étape 3.
..
.
Etape n : Rappelons qu’on dispose de n cadres: cadre1 , cadre2 , ..., cadren
• Si on clique sur le lien HAUT du cadren−1 alors le cadren doit être supprimé, et le cadren−1 contiendra
un seul lien BAS
• Si on clique sur le lien SOMMET du cadren−1 alors on supprime tous les cadres et on revient sur la page
de départ.
• Si on clique sur le lien BAS du cadren alors ce dernier sera encore divisé en deux sous-cadres horizontaux
de taille identique, le sous-cadre du haut (appelé cadren ) contiendra les deux liens HAUT, SOMMET, et
le sous-cadre du bas (appelé cadren+1 ) contiendra un lien BAS.
Et on continue ainsi.
Ecrire le code HTML permettant la réalisation de ces fonctionnalités.
Remarque : On pourra se servir de l’attribut target de la balise <A>, cet attribut peut avoir comme
valeur parent, top.