Examen 2 - Révision A

Consignes

• Vous avez droit à toutes vos notes et Internet.
• Aucune communication n'est permise (messagerie, courriel, etc.). Un élève pris en flagrant délit se verra attribuer la note de 0 pour plagiat.
• La durée de l'examen est de 1h50.
• Une fois l’examen terminé, vous devez faire un commit avec le message "Remise finale" et faire un push de votre dépôt pour le synchroniser avec GitHub.
• Il est de votre devoir de vous assurer que tous les fichiers sont inclus dans le commit. Je vais valider que le commit et la synchronisation avec Github a bien été faite mais pas le contenu de votre projet. Aucun fichier ne sera accepté une fois que vous aurez quitté le lieu de l'examen.

Directives Générales

Cliquez sur le lien Github classroom que je vais vous fournir et clonez le dépôt créé sur votre portable. Répondez de votre mieux aux points suivants et une fois terminé faites un commit et un push de votre dépôt cloné.

Toutes les validations doivent être faites en javascript. Il n'est pas nécessaire d'ajouter une validation dans les balises html de la page comme ajouter par exemple required à une balise dont on ne veut pas qu'elle soit "vide".

Dans le fichier validation.js il y a déjà des extraits de code, à vous de décider si vous les utilisez ou non.

Point 1 - Envoi du formulaire (10 points)

Configurez le formulaire pour qu'il envoie les données du formulaire de la façon suivante :

• Les données seront envoyées à l'adresse suivante :

https://mathieufrechette.ca/examen2.php

• La méthode d'envoie sera par requête POST

Point 2 - Validation du numéro de DA (30 points)

Faites les validations suivantes en Javascript sur la valeur saisie dans le input du numéro de DA.

1. Le numéro de DA doit être composé uniquement de chiffre (aucunes lettres ni caractères spéciaux).
2. Il doit être composé d'exactement 7 caractères.

3. Il doit débuté par les chiffres 1 ou 2

4. Valide : 1542477, 1887456, 2145733

5. Invalide : 3245125, 213549813131681, ab52412

La validation doit être faite dès que la valeur du input est modifiée :

• Ajoutez un addEventListener au input en javascript qui appellera la fonction de validation lors de l'événement 'input'.
• Tant que le numéro de DA n'est pas valide, affichez la balise div avec le id da_icone_erreur
• Si le numéro de DA est valide, affichez la balise div ayant le id da_icone_succes et masquez da_icone_erreur.

Invalide

Valide

Point 3 - Modification de l'icone selon la note estimée (10 points)

Dès que la valeur du input "note_estime" est modifié, vous devez depuis une fonction en javascript modifier les classes de l'icone ayant le id icone_note :

Note	classes à utiliser
Entre 0 et 19	"far fa-sad-cry"
Entre 20 et 39	"far fa-sad-tear"
Entre 40 et 59	"far fa-frown"
Entre 60 et 79	"far fa-smile"
Entre 80 et 100	"far fa-grin-squint-tears"

Indices : ajoutez un addEventListener sur le input avec l'événement "input" pour lancer la fonction ou bien utilisez oninput directement dans la balise html.

La valeur de la note en pourcentage doit aussi être affichée et modifiée dans le titre au-dessus du contrôle.

Résultat escompté

Point 4 - Validation du formulaire avant l'envoi (50 points)

Validation lors du clique sur le bouton Soumettre le formulaire

• Appelez une fonction Javascript depuis l'événement onsubmit de la balise form.
• Si le numéro de DA est invalide, affichez un message d'erreur dans la balise small situé sous le input du numéro de DA.
• Il faut aussi que la case "J'ai bien lu la déclaration ci-dessus" soit coché.
• Empêchez l'envoie du formulaire si le numéro de DA est invalide et/ou la case n'est pas coché.

Point 5 - Modification de l'image d'arrière-plan (Optionnel)

Créez une fonction Javascript qui modifiera de façon aléatoire l'image d'arrière-plan de la page.

• La fonction est déclenché lors d'un clique sur l'icône d'images superposées dans le coin inférieur gauche de la page.
• Les images à utiliser sont déjà présentent dans le répertoire images, background01.jpg à background05.jpg.
• Vous devez générer aléatoirement un nombre selon le nombre d'image et utiliser l'image correspondante.
• Il n'est pas nécessaire de gérer le cas où le même nombre serait généré deux fois de suite (l'image ne sera pas modifiée car ce sera la même).

Grille de correction

ÉlÉments	Critères	Points
Total		/100
Point 1 - Envoi du formulaire		/10
	Les données sont envoyées à la bonne adresse.	5
	Les données sont envoyées selon la bonne méthode.	5
Point 2 - Validation du numéro de DA		/30
	Le numéro de DA est composé uniquement de chiffres.	5
	Le numéro de DA comporte exactement 7 chiffres.	5
	Le numéro de DA commence par 1 ou 2.	5
	La fonction de validation est lancé par un addEventListener.	5
	L'icone d'erreur s'affiche tant que la valeur saisie n'est pas valide.	5
	L'icone succès s'affiche dès que la valeur est valide.	5
Point 3 - Modification de l'icone selon la note estimée		/10
	L'icone est modifié selon la valeur sélectionnée.	5
	La note en pourcentage est inscrite dans le "label" du input.	5
Point 4 - Validation du formulaire avant l'envoi		/50
	La fonction de validation est appelée depuis l'événement onsubmit de la balise form.	10
	Un message d'erreur est affiché dans la balise small si le numéro de DA est invalide.	10
	La case "J'ai bien lu la déclaration ci-dessus" doit être coché pour que le formulaire soit soumis.	10
	Le formulaire n'est pas envoyé si au moins une des validations échoues.	20