Historique
La première version de Qcm-Quiz était en Visual Basic 3 et date de 1996. L'objectif était l'exerciseur, c'est à dire un logiciel qui permet à l'étudiant de répéter les exercices de bases. L'idée est donc de pouvoir enchaîner des questions de tous types et de proposer, à la fin, une note globale qui est le reflet du niveau atteint. Cette note a comme objectif l'auto-évaluation de l'apprenant, il ne s'agit pas du tout de "correction automatique de devoirs surveillés". L'idée est plutôt d'encourager l'apprenant à recommencer si le résultat n'est pas correct.
A ce jour, côté Qcm-Quiz compatible Internet il y a bien sûr le célèbre Hot Potatoes mais il est difficile de faire un assemblage des différentes possibilités autour d'un même exercice ( En revanche la génération du Qcm est entièrement automatisée :o). Les autres Qcm proposés sur le Net sont de simples questions avec 3 à 5 cases à cocher pour la réponse. Impossible d'élaboré un Quiz dont le but est l'auto-formation avec une panoplie si pauvre.
Les autres approches possibles pour obtenir des "Qcm" d'auto-formation sont l'utilisation de Flash de Macromédia ou de Médiator. Ce sont d'ailleurs d'excellentes alternatives à l'applicatif que je vous propose ici. Chacun y va de sa sensibilité, et choisit en fonction de son expérience.
Enfin, il est bien sûr possible de faire de bons Qcm-Quiz en les développant en Visual Basic Appplication directement dans PowerPoint, Word ou Excel.
En conclusion, le choix "Html et JavaScript" pour cet applicatif n'est ni mieux ni moins bon qu'un autre choix mais permet bien de laisser le pédagogue s'exprimer avec le maximum de liberté. L'objectif est donc atteint.

Avertissement
Vous l'aurez compris dans l'historique, a priori, seules les personnes ayant déjà créées au moins quelques petites pages web peuvent développer des Qcm-Quiz avec cet applicatif (Le logiciel de développement de page Html de base livré avec le navigateur Internet suffit largement).

Principe de génération d'un Qcm
Le principe général est de prendre les fichiers (appelés diapos) de la démonstration et de les adapter à vos questions.
Le principe de base est donc le COPIER-COLLER ;o)
Ainsi, les codes spécifiques seront toujours en place et vous n'aurez qu'à retravailler la page avec un éditeur de page Web.
Pour vous aider dans cette démarche de construction par duplication, vous trouverez des "templates", c'est-à-dire des fichiers types. Il s'agit simplement de ceux de la démonstration mais leur nom est explicite de leur contenu:
- qcmquiz_boutons.htm,
- qcmquiz_options_radio.htm,
- qcmquiz_cases_a_cocher.htm,
- qcmquiz_reponse.htm,
- ...
Donc, en théorie, vous n'aurez jamais besoins des informations techniques ci-dessous. En théorie seulement ...

Organisation générale des Qcm
Chaque Qcm est stocké dans un répertoire indépendant, ainsi, il n'est nul besoin de renommé les fichiers.
Un fichier menu viendra, en hyper-lien, lancer le bon Qcm-Quiz.

Le fichier qcm_quiz_param.txt

Ce fichier est le seul que l'on doit absolument mettre à jour à chaque nouveau Qcm. Comme c'est un fichier au format texte (et en extension en .txt) même le bloc-notes "NotePad" fait l'affaire pour cette mise à jour. Au minimum, il s'agit de donner le nombre de diapos du Qcm qui est donc égale au nombre de questions multipliées par deux (variable NbDiapo).

Ensuite il est possible de donner un titre au Qcm (var NomDuQuiz = ) et de choisir comment les réponses fausses seront comptabilisées. En effet, statistiquement, sur un QCM de type Oui/Non (ou Vrai/Faux) la moyenne sera de 10/20 si l'apprenant répond au hasard! En donnant la valeur 1 à DurDur, les réponses fausses retirent des points. Ainsi, sur le même exemple: Qcm 100% Vrai/Faux, statistiquement la moyenne sera de 0/20 si l'apprenant répond au hasard.

Vous pouvez ensuite particulariser les textes de feed-back. Pour cela une connaissance minimal des balises Html est souhaitable.
Tous les compléments d'informations nécessaires sont directement dans le fichier qcm_quiz_param.txt qu'il est important de lire attentivement avant d'aller plus loin dans cette page (qcm_quiz_param.txt).

Nous allons aborder ici les particularités Htlm ou Javascript que doit comporter nécessairement une page de question ou une page de réponse pour que le déroulement du Qcm se passe comme prévu. Comme spécifié plus haut, si l'on confectionne son Qcm à partir du Qcm de démonstration, aucun des réglages présentés ci-après ne sera nécessaire.

a- Le formulaire: Chaque page est une page Html qui contient un formulaire. Dans ce formulaire, il peut y avoir des cases à options, de cases à cocher, des listes, une zone de texte, des boutons et bien sûr des hyper-liens.
Quel que soit son nom et l'action associé, c'est toujours le premier formulaire de la page qui est analysé pour les réponses. Tout ce qui est en dehors du premier formulaire est donc ignoré.
On peut donc faire simple pour la déclaration du formulaire: pas de nom, pas d'action, pas de méthode. En revanche, comme une validation (action sur la touche "Entrée") est interprétée par le navigateur comme l'ordre d'interpréter, de soumettre le formulaire, il faut ajouter une clause onsubmit à la balise <form>:
<form name="" onsubmit="return false">

b- Le onClick: C'est un click qui sera utilisé pour lancer le programme d'analyse des réponses. Là encore peut importe le nom de l'objet réactif ou l'action associée, en revanche il faut ajouter une clause onClick. La clause standard est: onClick="parent.reponse(1,'pomme','poire',location)". Au click, le sous-programme "reponse" caché dans la "frame parent" est appelé avec 4 valeurs:
- La première, numérique, est le nombre de points accordé à la question (1 point ici).
- La seconde valeur est la réponse de l'utilisateur (ici pomme), comme c'est une chaîne de caractères, il ne faut pas oublier les simples guillemets.
- La troisième valeur est la bonne réponse (ici la chaîne de caractères: 'poire').
- Enfin, "location" est un mot Javascript réservé qui donne l'adresse de la page.
Voici ce que cela donne sur un bouton réponse:
<input type="button" value=" Pomme " onClick="parent.reponse(1,'pomme','poire',location)">
A la fin de chaque diapo "corrigé type", on veut simplement passer à la diapo suivante, pour cela il suffit d'appeler le sous-programme "AvanceDe" avec comme paramètre 1:
<input type="button" value="Question suivante..." onClick="parent.AvanceDe(1)">

c- History: Dernier principe, le non retrour en arrière. Si l'on veut empêcher l'apprenant de revenir en arrière via le navigateur, afin de ne pas pouvoir relire les réponses précédentes par exemple, il faut en haut de chaque diapo inclure l'ordre Javascript: window.history.forward(); soit:
<script language="JavaScript">
window.history.forward();
</script>
Dans la démonstration, cette fonction est mise en place sur chaque diapo-réponse.

La première ligne est un JavaScript qui efface l'adresse de la page dans la mémoire du navigateur:
<script language="JavaScript">window.history.forward();</script>
Puis on trouve le début du formulaire:
<form name="" onsubmit="return false">
et, en fin de formulaire, on retrouve bien sûr:
<input type="button" value="Question suivante..." onClick="parent.AvanceDe(1)">

Entraînez vous, avec votre logiciel, à voir le script, le complément de la balise <form> et le complément de la balise <input>.
C'est indispensable pour pouvoir vérifier vos Qcm.

Il existe une autre possibilité, toujours à travers la fonction onClick d'un bouton, de lancer le Qcm. Il s'agit d'associer parent.Severite(1) ou parent.Severite(0). Le nombre 0 ou 1 permet de forcer la valeur de la variable DurDur quelque soit ce que l'on a demandé dans qcm_quiz_param.txt :
<input type="button" value="Expert..." onClick="parent.Severite(1)">

C'est une application directe des principes évoqués ci-dessus. Pour chaque bouton on ajoute un appel via le onClick:
<input type="button" value=" OUI " onClick="parent.reponse(1,'oui','non',location)">
<input type="button" value=" NON " onClick="parent.reponse(1,'non','non',location)">

Par application des principes, on commence par un script: window.history.forward(); et on fini par un bouton qui appelle parent.AvanceDe(1)
La particlularité d'une diapo-réponse est l'ajout, en début de page d'un commentaire fonction de la qualité de la réponse. Ce commentaire est affichable en invoquant la fonction: parent.fin_question (); On peut bien sûr cumuler cette fonction avec celle de suppression de l'historique, soit:
<script language="JavaScript">
window.history.forward();
parent.fin_question ();
</script>

Bien sûr les cases d'option doivent avoir le même nom. C'est ce qui permet au navigateur de ne laisser actif que la dernière option cliquée. Sinon, la bonne réponse est tout simplement indiquée en lui donnant comme valeur :
<input type="radio" name="radiobutton" value="1">
Ensuite, il faut lancer le bon sous-programme d'interprétation des réponses. Pour cela l'astuce consiste à donner comme paramètre 'radio' et 'button':
<input type="button" value="VALIDER" onClick="parent.reponse(1,'radio','button',location)">
Le sous programme scannera alors tous les boutons radio du formulaire. Si la "value" est 1 est qu'il est "checked" alors la réponse est bonne.

Contrairement au précédent, plusieurs cases peuvent être cochée. Il faut donc indiquer pour chaque coche si elle doit être absolument cochée (value=1) ou absolument décochée (value=0).
<input type="checkbox" value="1">
Il faut aussi appeler le bon sous-programme d'interprétation des réponses. Là encore l'astuce est dans le passage de paramètres: 'multi" et 'coches'.
<input type="button" value="VALIDER" onClick="parent.reponse(3,'multi','coches',location)">

Dans une liste, on peut aussi affecter une valeur à chaque item. Comme précédemment la valeur "1" permettra d'identifier la bonne réponse dans la liste (et ce quel que soit son nom et son type):
<select>
<option selected>?????</option>
<option>ohms</option>
<option value="1">minutes</option>
<option>décibels</option>
<option>degrés</option>
<option>volts</option>
</select>
Toujours dans la même logique un passage des paramètres 'select' et 'one' permettra au sous-programme "réponse" de la "frame parent" d'effectuer le bon traitement des réponses (scanne complet de toutes les listes du premier formulaire):
<input type="button" value="VALIDER" onClick="parent.reponse(5,'select','one',location)">
Attention toutefois, seule les listes à choix unique sont pris en compte (Menu ou liste). En revanche, vous avez le droit de mettre plusieurs bonne réponse dans la liste.

Pour l'image réactive, nous associerons au lien de chaque zone un onClick. Le passage d'argument est troublant mais élémentaire. La première chaîne de caractère est la réponse de l'utilisateur et la deuxième la bonne réponse. Donc si ces deux chaînes sont identiques, le sous-programme en déduira que c'est la bonne réponse qui a été cliquée:
<img src="rainbow.jpg" width="400" height="300" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="256,5,347,245" href="#" onClick="parent.reponse(1,'bon','bon',location);return false;" >
<area shape="rect" coords="3,3,393,294" href="#" onClick="parent.reponse(1,'faux','bon',location);return false;" >
</map>
Notez l'astuce qui consiste à définir la dernière zone comme un grand rectangle qui couvre l'image, ainsi il n'y aura pas d'indication due au curseur lors du survol de l'image (Bien sûr le mappage de l'image peut être fait au préalable avec un utilitaire externe).
Voyons maintenant les particularités que soulèvent cette option "non-formulaire" où l'on utilise le href="#" :
- Les navigateurs: iE4, iE5.0, Mozilla, NS obligent dans ce cas l'ajout de ";return false;" en fin du onClick.
- Pour un puriste, il ne faut pas mettre href="#" qui fait remonter en haut de page mais href="javascript:void(0)".
- Certains logiciels, comme FrontPage Express, n'acceptent pas, d'une part un lien neutre de type "#", et, d'autre part, l'ajout du onClick sur un "aera shape". On outrepassera le problème en insérant tout le code ci-dessus comme une balise Html non gérée par le logiciel. L'inconvénient, c'est que l'image ne sera pas visible en mode développement.

Si l'on veut utiliser le contenu d'une zone de texte comme réponse, il faut connaître le nom de cette zone de texte. Ici par exemple la zone est nommée "saisie", ainsi, lors du passage de paramètre, on retrouve saisie.value en lieu et place de la réponse de l'utilisateur.
<input type="text" name="saisie" size="10" maxlength="5"> ...
... <input type="button" value="VALIDER" onClick="parent.reponse(1,saisie.value,'Zn',location)">
Afin de minimiser les problèmes de saisie, les textes sont mis en minuscules non accentuées et débarrassés des espaces de début et de fin. Ainsi, dans notre cas, 'ZN' ou ' zn ' sont comptabilisés comme bonne réponse.

Toutjours en utilisant une zone de texte comme zone de réponse, il est possible de tenir compte que la saisie sera un nombre. L'avantage est, d'une part, d'accepter le point décimal et la virgule, et, d'autre part, de pouvoir tenir compte des approximations de calculs. Voyons notre exemple:
<input type="text" name="saisie" size="10" maxlength="5"> ...
... <input type="button" value="VALIDER" onClick="parent.reponseN(1,saisie.value,'11',location,'+2')">
Comme précédemment la zone de saisie se nomme "saisie" et son contenue est passé en paramètre par saisie.value. La bonne réponse est '11' mais, en fin de parenthèse, on remarque un nouveau paramètre '+2'. Cela signifie que l'on accepte 9,10,11,12 ou 13 buffles comme réponse bonne. '+2' veut dire que l'erreur admise est de plus ou moins 2 unités. Si l'on n'accorde aucune tolérance, on mettrra '+0'.
Si au lieu de mettre '+2' on met juste '2' alors le sous-programme acceptera 2% d'erreur sur la réponse. Si vous oubliez ce dernier paramètre, le pourcentage d'erreur admis par défaut sera de 1%.
Enfin, pour que l'interprétation se fasse correctement, il ne faut plus appeler le sous-programme parent.reponse mais parent.reponseN , notez bien le N final.

L'utilisation d'hyper liens, que ce soit sur une image ou sur un texte, se fait simplement en ajoutant un onClick dans la balise Html. Voici par exemple ce que cela donne pour une image:
<a href="#" onClick="parent.reponse(1,'oui','oui',location);return false;"><img src="buffalo.jpg"></a>
ou pour un texte:
<a href="#" onClick="parent.reponse(1,'oui','oui',location);return false;">Il n'y a pas de réponse!</a>
N'oubliez pas que si la chaîne de caractères "réponse de l'utilisateur" est identique à la chaîne "réponse attendue", la réponse sera considérée comme bonne.
Comme déjà vu pour l'image réactive, le ";return false;" est obligatoire pour une compatibilité avec les navigateurs "non iE6". Notons aussi, qu'il est possible de mettre le onClick dans la balise <img src= .... >, mais, dans ce cas on perd la compatibilité avec les ancêtres NS4.7 et iE4.0 . Cela donnerai:
<a href="#"><img src="buffalo.jpg" onClick="parent.reponse(1,'oui','oui',location);return false;"></a>

L'insertion du script parent.fin_qcm () permet d'afficher la note sur vingt et son commentaire. Ce script peut être mis où l'on veut, par exemple:
<center><h2><font color="#004080">
Note:
<SCRIPT LANGUAGE="JavaScript">
parent.fin_qcm ()
</SCRIPT>
</font></h2></center>
Ici, la note et le commentaire s'afficheront juste après Note: et bénéficieront des attributs de Note: couleur, taille et position. Enfin, un lien classique de bas de page renverra au menu des Qcm.

Nota: pour ceux qui sont sur iE6, ce serait "FrontPage Express" le logiciel gratuit. Il est installé avec Internet Exploreur 4 et 5 si l'on demande l'installation complète. Mais on peut aussi le télécharger à part sans problème sur le Net (sur http://faqfp.free.fr/ par exemple). Pour les autres navigateurs: Netscape, Opéra, etc un éditeur Html gratuit est aussi livré en standard. Pour les logiciels libres surfer framasoft.net et, côté logiciel payant, Dreamweaver est certainement le meilleur investissement.

Pour ceux qui veulent aller plus loin, je vous conseille la lecture ou l'étude du code source en javascript: qcm_quiz_js.htm