L es QCMs font partie de la panoplie classique de contrôle des connaissances. Nous distinguerons deux types de questions :
 - celles qui n'admettent qu'une seule bonne réponse, on utilisera un formulaire contenant des boutons radio;
 - celles qui peuvent admettre plusieurs bonnes réponses, on utilisera alors un formulaire contenant des cases à cocher.
Le traitement des réponses par JavaScript ne sera pas le même dans les deux cas.
Vous pouvez commencer par observer deux exemples :
 - QCM avec boutons radio
 - QCM avec cases à cocher

1 - Commençons par créer le formulaire. On obtient les boutons radio avec la balise INPUT en indiquant le type RADIO et les cases à cocher avec la même balise INPUT en indiquant le type CHECKBOX.

2 - Il est essentiel de donner le même nom à un groupe de boutons radio ou de cases à cocher associé à une même question. Cela facilitera l'écriture du code JavaScript, car les boutons ou les cases seront considérées comme faisant partie d'un même tableau.

3 - Pour les cases à cocher on introduira la propriété VALUE qu'on fixera égale à 1 pour les bonnes réponses et égale à 0 pour les autres. Cette propriété sera utilisée par JavaScript pour effectuer la vérification.

4 - Un bouton "Vérifier" permettra d'effectuer la vérification en utilisant sa propriété ONCLICK.

1 - Pour les boutons radio le processus de vérification est très simple. Puisqu'il n'y a qu'une seule bonne réponse possible, il suffit de vérifier qu'elle a été cochée en utilisant sa propriété CHECKED. Si la bonne réponse est la 3ème de la liste proposée, on utilisera le code suivant :

if (document.qcm1.choix[2].checked)
alert('Bonne réponse.')
else alert('Réponse fausse.');

Attention, comme la numérotation des éléments d'un tableau commence à 0, la 3ème réponse a le numéro 2.

2 - Ce code pourra être facilement associé à la propriété ONCLICK du bouton de vérification.

1 - Pour les cases à cocher le processus de vérification est un peu plus compliqué. Il faut en effet vérifier que d'une part les bonnes réponses sont cochées et que d'autre part les mauvaises réponses ne le sont pas. On utilisera encore la propriété CHECKED, mais il faudra cette fois parcourir tout le tableau des cases dans une boucle FOR. Nous mettrons cette opération dans une fonction test(nom,n) déclarée dans l'entête du fichier HTML. Le paramètre "nom" est le nom du groupe de cases à cocher à tester, le paramètre "n" est le nombre de cases contenues dans ce groupe.

2 - On obtient le code suivant :

function test(nom,n) {
var rep=true;
for (i=0; i<n; i++) {
if (nom[i].value==1 && nom[i].checked==false) rep=false;
if (nom[i].value==0 && nom[i].checked==true) rep=false;
}
return rep;
}

3 - Ce code sera appelé par la méthode ONCLICK du bouton de vérification. On pourra le faire de la façon suivante :

if (test(choix,4))
alert('Bonne réponse.')
else {alert('Réponse fausse.');


V otre mission, si vous l'acceptez, consiste à réaliser une page HTML avec un QCM contenant 10 questions proposant chacunes au moins trois réponses. Les réponses fournies par l'utilisateur devront bien entendu être évaluées.