EST MEKNES 2ème Année GL

Web Avancé
Application QCM en ligne
Le but de cet exercice est de réaliser un questionnaire de type QCM en HTML et JavaScript (le QCM
est joint à cet énoncé).

Etape 1 : Ecrire le programme HTML du formulaire « QCM » sous forme de questions et

propositions de réponses sous forme de boutons radio.
☛ Appliquer les règles CSS nécessaires pour styler votre page.
Etape 2: Ajouter un script pour gérer le QCM. Une interactivité doit être proposée à l’utilisateur, elle
se matérialise par deux boutons disposés au bas du formulaire à cet effet et consiste à :
1. Le bouton « Correction » : apporter une correction dynamique du formulaire en lançant la fonction
correspondante
☛les réponses correctes sont marquées en vert et les réponses erronées sont marquées en rouge.
☛Avant d’afficher le résultat votre programme doit vérifier si l’utilisateur a répondu à toutes les
questions, en cas échéant il lui indique les questions sans réponse.
☛Enfin, il faut afficher le score de l’utilisateur sur 10.
2. Le bouton « Effacer »effacer l’ensemble des sélections.

☛ Indications :
1. Stockez les bonnes réponses dans un tableau var reponse = new Array();
2. Utiliser l’évènement « onclik » sur les inputs radio pour récupérer l’objet représentant l’option
choisie par l’utilisateur.
3. Ou bien vérifier l’attribut « checked » est ce qu’il à « true » pour l’ensemble des inputs, pour
identifier l’objet représentant l’option choisie par l’utilisateur.

1
Web avancé