Nous vous proposons un examen (Examen final en html5+css3+javascript) pour pouvoir tester vos compétences en développemnt web avec les langages html5 , css3 et javascript.
N’hésitez pas de laisser vos propositions dans la partie ‘commentaires’: c’est la meilleure manière pour voir les feedbacks sur vos compétences. Bonne chance!
Examen Final en html5 , css3 et javascipt (V1)
Partie Théorique : (7 pts)
Remplir le tableau suivant :
Partie Pratique (32 pts)
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 :
Question 1 :
( 14 points) 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 du haut 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 bas du tableau ou de la case
Question 2 – (6 points)
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.
Ecrire les lignes html permettant d’ajouter ces deux boutons au formulaire précédent sans écrire les fonctions.
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’épaisseur de leurs bordures est de 4 pixels et la couleur de fond jaune. La largeur des boutons est de 150 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 !!
Question 3 – (12 points)
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 « solution » 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 “. la page html grille2.html est rempli en utilisant document.write.
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 le 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.
