Examen 2 - Révision A

Installation

Téléchargez le projet de départ et répondez aux deux questions.

examen2_revision_a.zip

Question 1

Ouvrez le fichier HTML question1.html
Créez le formulaire présenté à la page suivante.

Ajoutez les attributs HTML sur les champs du formulaire pour répondre aux exigences suivantes:
Nom de l'élève :
- champ obligatoire
- doit être d'une longueur entre 3 et 30 caractères
Code du cours :
- champ obligatoire
- doit être testé avec l'expression régulière suivante : ^\d{3}-\d\w\d-\w{2}$
- Exemple de valeurs permises : 420-1E6-VI, 420-1D6-VI, 201-1A3-VI
Date du rendez-vous :
- champ obligatoire
- doit être une date entre le 11 novembre 2025 et le 25 décembre 2025
Durée du rendez-vous :
- champ obligatoire
- doit être un nombre entre 5 et 60
- la valeur par défaut est 15 et l'incrément se fait par tranches de 5.
Sujet :
- champ obligatoire
- doit être représenté sous forme de liste avec 3 options :
- Option 1: "Sélectionnez un sujet pour la rencontre", valeur vide
- Option 2: Sujet #1 de votre choix, valeur égale à 1
- Option 3: Sujet #2 de votre choix, valeur égale à 2
Commentaires:
- pas obligatoire
- zone de texte de 30 colonnes et 4 rangées.
Case à cocher "Je m'engage ..." :
- pas obligatoire,
  attention il est normal que le champ ne soit envoyé dans le formulaire que s'il est coché. Si vous ne donnez aucune valeur par défaut la valeur transmise sera "on"
Précisions :
Le formulaire doit envoyer les données par la méthode POST.
Les données sont envoyées à l'adresse suivante :
```
https://design-web.onrender.com/submit
```

Résultat attendu une fois le formulaire soumis :

Question 2

Ouvrez le fichier HTML "question2"
Liez le fichier HTML au fichier JavaScript examen.js et associez une fonction sur le clic du bouton Rechercher qui servira à rechercher le code saisi par l'utilisateur et lui retourner le nom du cours. Ce sont les 2 seuls modifications autorisées dans le code HTML.
Dans le fichier examen.js :
Prenez le temps de lire et comprendre le code qui vous est fourni.
Ajoutez un code de cours et un nom de votre choix au tableau des cours. Le code du cours doit être au format xxx-xAx-AA (x un nombre et A une lettre)
La balise portant le id message-erreur est invisible par défaut et ne devra être visible que si un message d'erreur doit s'afficher.
Les messages d'erreurs sont contenus dans la variable messagesErreur.

Lorsque l'utilisateur clique sur le bouton rechercher:

Vérifiez que le code saisi a exactement 10 caractères. S'il ne contient pas 10 caractères :

Affichez le texte "Erreur" avec la classe CSS "erreur" dans la balise qui porte le id nom_cours.
Affichez le message d'erreur correspondant dans la balise qui porte le id message-erreur.

Vérifiez que le code saisi correspond au format xxx-xAx-AA. S'il ne correspond pas :

Affichez le texte "Erreur" avec la classe CSS "erreur" dans la balise qui porte le id nom_cours.
Affichez le message d'erreur correspondant dans la balise qui porte le id message-erreur.

Si le code est conforme (10 caractères et est au bon format), recherchez le code dans le tableau des codes de cours (peu importe la casse, majuscules et minuscules).

Si le code est trouvé :
- Affichez le nom du cours correspondant dans la balise qui porte le id nom_cours. (Assurez-vous que la classe CSS "erreur" n'est pas appliquée).
Si le code n'est pas trouvé :
- Affichez le texte "Erreur" avec la classe CSS "erreur" dans la balise qui porte le id nom_cours.
- Affichez le message d'erreur correspondant dans la balise qui porte le id message-erreur.

Exemple de résultat attendu :

Grille de correction

Eléments	Pondération
1. Question 1 - Formulaire	/ 40
Le code HTML du formulaire est valide (W3C)	/ 5
Les étiquettes sont correctement associées à leurs champs respectifs	/ 5
Les champs de formulaires ont les attributs appropriés (nom, identifiants, types, etc.)	/ 10
Les validations HTML sont conformes aux exigences demandées (7 contrôles de formulaires, 11 attributs de validation)	/ 10
Les données sont envoyées à la bonne adresse lorsque le formulaire est valide	/ 5
Les données sont envoyées selon la bonne méthode	/ 5
2. Question 2 - JavaScript	/ 60
Une fonction est correctement associée à l'événement demandé (en HTML ou JavaScript)	/ 5
Les validations JavaScript sont conformes aux exigences demandées (2 validations)	/ 10
Le bon message d'erreur s'affiche dans la section demandée (3 messages possibles)	/ 15
Le résultat attendu lorsque l'information est valide et répond aux exigences demandées	/ 15
Le style (CSS) appliqué dynamiquement est conforme aux exigences demandées	/ 10
Les noms des fonctions et des variables sont significatifs et facilitent la compréhension du code produit par l'élève.	/ 5
Total	/ 100