Please enable JavaScript to access this page. Examens de fin de module : les applications hypermédias (HTML, CSS, JavaScript) - Techniques de Développement Informatique

Examens de fin de module : les applications hypermédias (HTML, CSS, JavaScript)



Application hypermédias

Examen Fin Module 1 :


Exercice 1 :
Créez un tableau de 600 pixels de large contenant cinq lignes et trois colonnes avec des bordures de 4 pixels, un espacement entre cellules de 10 pixels.

Exercice 2 :
Nous allons réaliser un mini-site. Réalisez une page index.html sur le modèle donné ci-dessous.
t-d-info-efm-Application-hypermédias-3


Exercice 3 : Nombre Mystérieux
• Il s'agit de faire trouver un nombre entier nbInconnu à l'utilisateur. Ce nombre sera obtenu au hasard, entre 0 et 100, par exemple.
• On n'accorde qu'un nombre d'essais limités maxEssai, fixé en constante au début du programme.
• A chacun des essais dans le composant Proposition, le joueur donne un nombre NbEssai et par appel d'une fonction provoquée par l'événement onChange, il obtiendra dans le composant Message, « c'est plus » ou « c'est moins ».
• Deux conditions peuvent donc arrêter la répétition des essais :
           1. Le joueur a découvert nbInconnu
           2. OU il a épuisé le nombre total d'essais permis maxEssai
• Si le nombre inconnu a été trouvé avant le nombre maximum d'essais, le programme affichera le message dans le composant Réponse "Vous avez trouvé en ... essais", sinon il affichera "Le nombre à touver était : ......".
• Prévoir la possibilité pour le joueur de recommencer une partie (bouton Nouveau jeu).
• A tout moment, le joueur peut demander la réponse (bouton Réponse).
Voici l'interface souhaitée :
t-d-info-efm-Application-hypermédias-8

Application hypermédias

Examen Fin Module 2 :


Exercice 1 :
1- Créez le tableau suivant en fusionnant les colonnes.
t-d-info-efm-Application-hypermédias-1

2- Créez le tableau suivant en fusionnant les lignes.
t-d-info-efm-Application-hypermédias-2


Exercice 2 :
Pour s'inscrire dans un forum, un utilisateur doit remplir le formulaire suivant :
t-d-info-efm-Application-hypermédias-4

1- Ecrire le code HTM de la page web du formulaire.
2- Ecrire le permettant de respecter les règles :
           a- Tous les champs sont obligatoires.
           b- La date de naissance doit être vaide : 1<= jour <=31, 1<= mois <=12, année>=1910,
           c- Le champ (Mot de passe) et e champ (Confirmer le mot de passe) doivent être égaux.
3- Ajouter le code JavaScript qui permet de fermer automatiquement la fenêtre du navigateur au bout de 20 secondes.

Exercice 3 :
• On entre une expression arithmétique dans une ligne de texte nommée calcul. (On pourra par la suite en fournir au hasard)
• L'enfant doit proposer une réponse dans le champ nommé reponse
• Prévoir un 3ème champ, nommé message, pour accueillir un message.
• Si la saisie dans reponse est vide, alors afficher dans message "Propose une réponse", sinon comparer la réponse à la valeur (avec la fonction eval () qui évalue une chaîne de caractère).
• Le message sera suivant le cas "réponse fausse .. corrige" ou bien "bonne réponse" .
• Un bouton marqué résultat devrait permettre à tout moment d'obtenir la réponse exacte dans le champ message.
• La partie d'analyse de la réponse sera programmée dans une fonction verif() Voici l'interface souhaitée :
t-d-info-efm-Application-hypermédias-9

Application hypermédias

Examen Fin Module 3 :


Exercice 1 :
Créer un menu horizontal en HTML et CSS.

Exercice 2 : Créez un formulaire divisé en trois groupes.
Le premier groupe permet d’obtenir les coordonnées du visiteur. Il contient trois zones de texte pour la saisie du nom, du prénom et de l’e-mail et une zone de mot de passe.
Ces champs sont suivis d’un groupe de boutons radio pour indiquer le sexe de la personne.
Enfin, ce groupe se termine par une liste de sélection qui contient trois groupes d’options pour le choix du pays.
Le deuxième groupe permet de saisir des informations sur les goûts du visiteur. Il comprend trois cases à cocher et une zone de texte multilignes de 50 caractères de large et de 5 lignes de haut.
Le troisième groupe contient un composant d’envoi de fichier et un champ caché indiquant la taille maximale des fichiers fixée à 10 Ko. Le formulaire se termine bien évidemment par l’insertion des boutons d’envoi et de réinitialisation.
t-d-info-efm-Application-hypermédias-10


Exercice 3 :
On se propose d'écrire une page HTML et des fonctions Javascript permettant de jouer le Sudoku. (sans en expliquer les règles ici) Pour cela :
1- Ecrire les lignes HTML permettant d'obtenir le tableau suivant : les cellules sont des zones de texte d'un formulaire. Bien sûr, les cellules qui contiennent des chiffres au départ sont non modifiables par l'utilisateur. Aucun style ne devra apparaître dans les balises mais dans une feuille de style.
- Alors répondre à cette question revient à créer deux fichiers ; html et un autre css.
Remarque : pour mettre de la bordure pour le tableau ou des cases du tableau; utilisez les propriétés :
border-bottom: pour la bordure en bas du tableau ou de la case.
border-left: pour la bordure à gauche du tableau ou de la case.
border-right: pour la bordure à droite du tableau ou de la case.
border-top: pour la bordure en haut du tableau ou de la case.
t-d-info-efm-Application-hypermédias-5

2 – L'utilisateur doit entrer un chiffre dans chaque case vide. Lorsqu'il a fini, il a deux possibilités offertes par deux boutons :
Vérifier que la grille est correctement remplie ou charger la solution sur une autre page html.l.
Ecrire les lignes html permettant d'ajouter ces deux boutons au formulaire précédent sans écrire les fonctions.
t-d-info-efm-Application-hypermédias-6

Remarque : le texte des boutons est écrit en police Times new roman, de taille 10 points. La couleur du texte est rouge pour le premier et bleue pour le second ; l'aspect des boutons est en relief, l'épaisseur de leurs bordures est de 4 pixels et la couleur de fond jaune. La largeur des boutons est de 200 pixels pour le premier et 100 pixels pour le second Aucun style ne devra apparaître dans les balises mais dans la feuille de style. N’oublier pas de mettre tout le contenu de cette page dans un formulaire !!


3– Mise en place des fonctions liées aux deux boutons :
           a –Le bouton "vérifier ma grille" permet de vérifier que la grille est complètement remplie (plus aucune cellule vide et chaque cellule est remplie par le chiffre correcte). Dans le cas favorable il faut afficher un message « vous avez réussi » sinon « c’est incorrecte réessayez encore :!!! »
           b- le premier bouton permet d'ouvrir une page HTML "grille2.html" qui contient la solution. Ecrire les lignes HTML et javascript permettant d’ afficher la page html grille2. html lors du clic sur le bouton "solution dans nouvelle page". on ne demande pas d’écrire le code de la page html grille2.html.
Proposition : vous nommez chaque cellule par C11, C12, C13…. ; avec C13 est la case de la première ligne et la troisième colonne, C34 est la case de la troisième ligne et la quatrième colonne, La figure suivante montre la réponse de cette grille, alors lors de la vérification il faut vérifier si chaque case contienne me chiffre convenable alors si C11 contient par exemple le chiffre 3 alors dans ce cas on affiche message( c’est incorrecte réessayez ) ; on ne demande pas de spécifier dans les messages alert quelle est la cellule qui contient un chiffre incorrecte le message précédent suffit. .
t-d-info-efm-Application-hypermédias-7


Autres EFM (s) sur le lien suivant :

Retrouvez-nous sur Facebook
×Facebook Mouad Ouisse