DYRIS - VERSION 23

Sommaire

1. Introduction

Dyris est un générateur d'exercices avec correction et évaluation automatiques. Basé sur le langage JavaScript, il s'installe, par exemple, sur une clé USB. Il peut évidemment et avantageusement être placé sur un serveur.

Il contient de nombreuses options et se paramètre facilement. Chacun peut y apporter son design personnel. Les questions sont posées les unes après les autres, soit dans l'ordre choisi par le professeur, soit au hasard parmi les questions disponibles. Les exercices se définissent dans le fichier donnees.js, divisé en deux parties : Les options et le questionnaire.

La sauvegarde des scores sur le serveur est une option, créée pour que les étudiants d'une même classe puissent comparer leurs résultats. Pour une évaluation, il est conseillé de rendre le fichier donnees.js illisible, on dit communément offusquer le code. De nombreuses applications web permettent de le faire. Les informations sensibles deviennent alors inaccessibles à l'étudiant qui consulterait le code.

2. Nouveautés par rapport à la version précédente

3. Créer un nouvel exercice

Le plus simple est de modifier le fichier donnees.js avec un éditeur de texte. La structure de ce fichier ne nécessite pas de connaissance particulière en programmation. Le fichier donnees.js comporte deux parties :

Attention :

A la moindre erreur dans le fichier donnee.js, votre exercice ne fonctionnera pas. En lançant l'exercice, la barre de défilement apparaîtra mais rien ne se chargera! Donc testez votre exercice, au fur et à mesure que vous le complétez. Et si l'exercice ne se charge pas, il est possible qu'une question ne respecte pas la syntaxe correcte. Vérifiez les parenthèses, les guillemets, les points virgules...

A chaque modification du fichier donnees.js, vous devez l'enregistrer AU FORMAT TEXTE SEULEMENT avec l'encodage UTF-8 ou Unicode. Les autres formats engendreront des erreurs empêchant votre exercice de fonctionner correctement.

3.1. Conseils

3.2. Pour les utilisateurs de Windows

Vous devriez adopter les logiciels libres, passer au système GNU/Linux, plus fiable et pratique. Mais bon. Si vous êtes tout de même sous Windows, vous disposez :

Si vous utilisez Wordpad :

Certaines versions d'Internet Explorer bloque les programmes en JavaScript placés sur disque dur ou sur CD. Ce problème ne se pose pas pour un programme placé sur un serveur.

Solutions :

4. Les options

Les options se définissent dans le fichier donnees.js par un ensemble de fonctions. Elles sont facultatives si vous vous contentez des options par défaut.

4.1. Options générales

mode_presentation("1");

Deux présentations sont possibles :

Le mode 1 est l'option par défaut.

mode_evaluation("1");

Deux évaluations sont possibles :

Le mode 1 est l'option par défaut.

mode_sauvegarde("1");

Deux sauvegardes sont possibles.

Avec le mode 1, les enregistrements se font en local dans un cookie, sauf si le navigateur est configuré pour refuser les cookies.

Avec le mode 2, les enregistrements se font dans le fichier scores.csv placé sur le serveur. Attention à ce que ce fichier ait les droits d'accès en lecture et écriture. Chaque ligne de ce fichier correspond à un enregistrement. Au fil des sauvegardes, le fichier devient de plus en plus volumineux. Il convient donc, de temps à autre, de le raccourcir avec un éditeur de texte.

Le mode 1 est l'option par défaut.

mel("adresse@serveur.fr");

Pour une évaluation sommative avec sauvegarde sur serveur, si une adresse mél est définie, alors un message d'avertissement sera envoyé à cette adresse pour chaque nouveau bilan enregistré.

titre_introduction("votre titre");

Indiquez, entre les guillemets, le titre qui s'affiche dans la page d'accueil. Supprimez cette ligne si vous ne voulez pas de titre. N'utilisez pas de guillemets dans votre titre car Dyris l'interprétera comme la fin de votre titre.

introduction("commentaire");

Indiquez, entre les guillemets, le commentaire qui s'affiche sous le titre. Supprimez cette ligne si vous ne voulez pas de commentaire.

nombre_questions("5","10","15");

Indiquez, entre les guillemets, les nombres de questions qui seront proposés dans la page d'accueil.

url_quitter("http://dyris.free.fr/");

Définissez ici l'adresse de la page vers laquelle vous souhaitez être redirigé lorsque vous cliquez sur le bouton QUITTER. Si cette adresse n'est pas définie, le bouton QUITTER n'apparaît pas.

4.2. Boutons affichant des pages d'information

bouton_sup("MODE D'EMPLOI","pages/mode_emploi.html");
bouton_sup("MODE D'EMPLOI","pages/mode_emploi.html","500","300");

Afin de donner des informations complémentaires, vous pouvez ajouter des boutons dans la page d'accueil. Ces boutons ouvrent des fenêtres contenant des pages au format HTML.

La fonction "bouton_sup()" prend un à quatre paramètres :

4.3. Options pour l'accès

code("Pascal","W4AbQX");
code("Alice","ApG1Mh");

La fonction code(), facultative, permet de définir un identifiant associé à un mot de passe. Elle est appelée pour chaque utilisateur à définir. L'accès à l'évaluation sera ainsi limité aux seuls utilisateurs autorisés.

4.4. Options pour la notation

coef_rep_juste("3");

Indiquez, entre les guillemets, le coefficient correspondant à une réponse juste. Vous devez écrire une valeur positive! Si vous supprimez cette ligne, le coefficient par défaut est 1.

coef_rep_fausse("-1");

Indiquez, entre les guillemets, le coefficient correspondant à une réponse fausse. Vous devez écrire une valeur négative ou nulle! Si vous supprimez cette ligne, le coefficient par défaut est -0.5.

coef_rep_nulle("-0.5");

Indiquez, entre les guillemets, le coefficient correspondant à une réponse non fournie, c'est à dire lorsque l'étudiant clique sur le bouton JE NE SAIS PAS. Vous pouvez écrire une valeur négative ou positive! Si vous supprimez cette ligne, le coefficient par défaut est 0.

note_sur("30");

La note sera ramené sur la valeur indiquée entre les guillemets. On lui attribue souvent la valeur 20. Si vous supprimez cette ligne, la note est ramenée sur le nombre de questions que l'utilisateur a sélectionné.

4.3. Options pour les appréciations

Vous pouvez choisir l'appréciation à mettre selon la note obtenue par l'étudiant, la note étant ici exprimée sur 20. Par exemple, si vous voulez l'appréciation Résultat moyen pour une note comprise entre 10 et 12, vous devez écrire, dans le fichier donnees.js:

appreciation("10","12","Résultat moyen");

Remarque: Si l'étudiant obtient une note correspondant à plusieurs appréciations, la dernière appréciation est prioritaire. Par exemple, si l'étudiant a obtenu 12 et que le fichier donnees.js comporte:

appreciation("10","12","Résultat moyen");
appreciation("12","14","Bon travail");

Alors l'étudiant obtiendra comme appréciation: Bon travail.

Vous pouvez également mettre une appréciation lorsque l'étudiant quitte l'exercice avant d'avoir terminé:

non_termine("Vous avez quitté l'exercice sans avoir répondu à toutes les questions !");

5. Le questionnaire

Après avoir choisi vos options dans le fichier donnees.js, il vous faut définir le questionnaire. Il est généralement constitué d'un ensemble de questions regroupées par thèmes.

5.1. Ajouter un thème

theme("nouveau thème");

Pour chaque thème dont vous indiquez le titre ici, vous allez écrire des blocs de question / réponses. Naturellement, si l'ensemble de votre questionnaire ne comporte qu'un seul thème, cette ligne est facultative.

5.2. Ajouter une question

question("Où vit le personnage principal de l'histoire?");

Pour changer l'énoncé de la question, modifiez le texte entre guillemets.

question("Où vit le personnage principal de l'histoire?//2");

Par défaut, le barème pour une question est de 1 point. Un barème différent de 1 point se définit à la fin de l'énoncé. Par exemple, pour une question notée sur 2 points, rajoutez //2 à la fin de l'énoncé.

question("Où vit le personnage principal de l'histoire?//a");

Suite à une question, plusieurs réponses seront proposées. Ces réponses apparaîtront dans l'ordre où vous les écrivez, sauf si vous rajoutez //a (a comme aléatoire) à la fin de l'énoncé. Dans ce cas, les réponses seront affichées dans un ordre aléatoire.

question("Où vit le personnage principal de l'histoire?//2a");

Bien sûr, une question peut être notée sur 2 points et comporter des réponses dans un ordre aléatoire. Attention toutefois : Le mode aléatoire ne fonctionne pas pour les réponses de type "cases à remplir".

5.3. Réponses de type "cases à cocher"

question("Où vit le personnage principal de l'histoire?");
reponse("[x] dans une petite maison, près de la forêt");
reponse("[ ] dans une petite maison, au bord de la rivière");
reponse("[ ] dans un magnifique château");

Les cases à cocher sont symbolisées par les caractères:

Il est indispensable de proposer au moins deux réponses par question. Une réponse au moins doit être juste.

5.4. Réponses de type "boutons radio"

question("Où vit le personnage principal de l'histoire?");
reponse("(o) dans une petite maison, près de la forêt");
reponse("( ) dans une petite maison, au bord de la rivière");
reponse("( ) dans un magnifique château");

Les boutons radio sont symbolisés par les caractères:

Il est indispensable de proposer au moins deux réponses par question. Une seule réponse doit être juste.

5.5. Réponses de type "zones de texte à remplir"

question("Où vit le personnage principal de l'histoire?");
reponse("dans une petite [maison||demeure], près de la [forêt]");

Le texte à compléter se met entre les caractères [ et ]. Dans le cas où plusieurs réponses justes sont possibles, elles sont séparées par les caractères ||.

5.6. Réponses de type "listes de sélection"

question("Une figure géométrique est représentée ci-contre.");
reponse("Cette figure est un [cercle||*triangle*||carré||losange[v]");

Les caractères [v] symbolisent la petite flèche sur laquelle cliquer pour dérouler la liste.

5.7. Du texte entre les réponses

Du texte peut être inséré entre plusieurs réponses. Dans l'exemple suivant, la deuxième réponse comporte simplement du texte :

rep("La figure A est un [cercle||*triangle*||carré||losange[v]");
rep("Pour la deuxième figure, plusieurs réponses sont possibles...");
rep("La figure B est un [cercle||rond||disque]");

6. Les outils de communication

Ces outils, facultatifs quoique bien pratiques, peuvent être :

Un outil de communication peut être associé :

L'outil est défini par une fonction, laquelle peut être située à divers endroits du fichier donnee.js.

Il existe un ordre de priorité : Un outil défini pour une question est prioritaire sur celui défini pour le thème, lui-même prioritaire sur celui défini pour l'ensemble des thèmes. Par exemple, si une image est associé à un thème et une autre image associée à une question de ce thème, alors seule cette dernière image sera effectivement affichée, lorsque la question est posée.

6.1. Image associée à une question

question("Où vit le personnage principal de l'histoire?");
reponse("[x] dans une petite maison, près de la forêt");
reponse("[ ] dans une petite maison, au bord de la rivière");
reponse("[ ] dans un magnifique château");
image("schemas/image1.gif");

Pour changer l'image, modifiez le texte entre guillemets (dernière ligne). L'image :

Dans cet exemple, le dossier se nomme /schemas. Vous pouvez définir divers dossiers pour vos images.

6.2. Fichier audio associé à une question

quest("A l'aide du lecteur audio ci-dessous, écoutez et comptez les lettres du mot épelé");
rep("Nombre de lettres : [4]");
audio("sons/jupe.ogg","sons/jupe.mp3");

Pour changer le ou les fichiers audio, modifiez le texte entre guillemets (dernière ligne). On conseille de proposer systématiquement les deux formats OGG et PM3.

6.3. Commentaires associés à une question

Vous pouvez définir toutes sortes de commentaires selon les réponses apportées par l'étudiant :

question("Combien y a-t-il de poissons?");
reponse("[ ] 4 poissons");
reponse("[ ] 5 poissons");
reponse("[x] 6 poissons");
reponse("[ ] 7 poissons");
schema("schemas/poissons.gif");
debut("Pour répondre à cette question, il te suffit juste de savoir compter.");
juste("C'est exact, tu as bien compté!");
faux("Attention quand tu comptes: Il faut être plus attentif!");
abandon("Dommage, cette question était facile...");

debut(" ... "); : Remplacez les trois points de suspension par le commentaire à afficher au moment où la question est posée.

juste(" ... "); : Remplacez les trois points de suspension par le commentaire à afficher si l'étudiant apporte une bonne réponse.

faux(" ... "); : Remplacez les trois points de suspension par le commentaire à afficher si l'étudiant donne une mauvaise réponse.

abandon(" ... "); : Remplacez les trois points de suspension par le commentaire à afficher si l'étudiant élude la question en cliquant sur le bouton JE NE SAIS PAS.

6.4. Chronomètre associé à une question

chronometre("20","Le temps imparti est écoulé!");

Pour afficher un chronomètre limitant le temps de réponse à une question, indiquez :

La fonction chronometre(), utilisée sans paramètre, limite le temps de réponse à la valeur par défaut.

6.5. Boutons affichant des pages d'aide

question("Quel mois précède le mois de juillet?");
reponse("Le mois de [juin]");
aide("RAPPEL","pages/aide2.html","400","300");

Afin d'apporter un indice, un complément d'information ou un renseignement, vous pouvez ajouter au menu des boutons supplémentaires. Ces boutons :

La fonction "aide()", comme la fonction "bouton_sup()" pour la page d'accueil, prend un à quatre paramètres :

6.6. Barre de caractères spéciaux

caracteres_speciaux("œ","€","Ø");

Indiquez la liste des caractères particuliers, difficiles à obtenir au clavier, utiles pour l'exercice. L'étudiant pourra insérer ces caractères dans les zones de texte à remplir, simplement en cliquant sur le bouton correspondant.

7. Complément

7.1. Proposer plusieurs énoncés

D'une manière générale, vous pouvez définir plusieurs énoncés séparés par les caractères ||. L'énoncé effectivement affiché sera pris au hasard parmi les énoncés disponibles. Ceci est valable pour les commentaires, les messages dans les boîtes de dialogue, les appréciations...

Exemple :

question("Quelle est la base du verbe abuser?||Saurais-tu m'écrire la base du verbe abuser?||Connais-tu la base du verbe abuser?");

Autre exemple :

juste("Excellent !||Bravo !||Bonne réponse !||C'est très bien!");
faux("Non...||Faux...||Erreur...||Inexact...||Dommage...");

7.2. Raccourcis

Afin de rendre le fichier donnees.js plus court (donc plus rapide à charger ou à écrire), des raccourcis ont été créés.

Ainsi, vous pouvez écrire :

7.3. Caractères propres à Dyris

Les réponses comportent des caractères propres à Dyris. En conséquence, les caractères ci-dessous, que vous voudriez éventuellement obtenir, ne peuvent être écrits directement. Vous devez utiliser la désignation chiffrée correspondante. Les caractères fréquemment utilisés ont aussi une abréviation, plus facile à retenir, pouvant remplacer le code chiffré.

CaractèreCode chiffréAbréviation
"""
<&#60;&lt;
>&#62;&gt;
[&#91;Pas d'abréviation
]&#93;Pas d'abréviation

Ceci est très important. En effet, vous ne pouvez pas utiliser directement le signe < dans vos questions ou réponses car Dyris le comprendra comme le début d'une balise HTML. Vous devez donc utiliser l'abréviation &lt;

7.4. Pour les mathématiciens

Pour écrire les formules mathématiques, vous disposez de trois outils :

Les caractères Unicodes.

Dans le dossier outils se trouve le fichier Unicode.html. En ouvrant ce fichier avec un navigateur, vous obtenez une liste de caractères Unicodes. Parmi ces caractères, il y a des caractères grecs, des symboles mathématiques... Vous pouvez insérer les caractères de votre choix dans votre questionnaire, par un simple copier-coller.

Les balises HTML.

Vous pouvez inclure, dans les questions et les réponses, des balises HTML. Par exemple, du texte que vous voudriez placé en exposant se met entre les balises <sup> et </sup>. Si vous écrivez:

Vous obtiendrez l'affichage:

De la même manière, utilisez les balises <sub> et </sub> pour du texte en indice.

Les balises propres à Dyris.

Les balises HTML sont peu nombreuses pour écrire des formules mathématiques. Pour pallier ce manque, il a été créé :

Ces balises s'utilisent de la même manière que les balises HTML.

Pour écrire une fraction, constituée d'un numérateur et d'un dénominateur :

Exemple :

7.5. L'apostrophe

Attention, vous pouvez avoir un problème à cause des apostrophes. En effet, plusieurs caractères permettent d'écrire l'apostrophe, lequel peut être incurvé ou droit.

En conséquence, si vous proposez la réponse :

rep("[C’est] à l'infirmerie qu'il faudra le soigner.");

Il se peut que l'étudiant réponde correctement mais que la réponse soit comptée fausse. La solution consiste à définir plusieurs apostrophes.

rep("[C'est||C’est] à l'infirmerie qu'il faudra le soigner.");

Ici, deux caractères différents sont utilisés pour écrire l'apostrophe. La réponse sera comptée juste si l'étudiant répond C'est ou C’est.

8. La présentation

8.1. Le fichier index.html

Ce fichier affiche un petit texte et une image pendant que l'exercice se charge. Vous pouvez le modifier pour lui donner le contenu que vous souhaitez.

8.2. Le fichier style.css

En modifiant le fichier style.css, vous obtiendrez la présentation de votre choix. A condition de connaître la programmation des feuilles de style...

Si ce n'est pas le cas, vous pouvez tout de même modifier facilement les couleurs. Elle sont définies par le caractère # suivi de six chiffres, correspondant au code hexadécimal de la couleur. Vous pouvez retrouver le code hexadécimal d'une couleur avec un logiciel de dessin comme The Gimp, par exemple.

Pour vous aider, d'autres feuilles de style sont proposées dans le dossier outils. Pour utiliser le fichier style_2.css, par exemple, il suffit de renommer le fichier style.css (ou de l'effacer si vous n'en voulez plus) en style_3.css, puis de renommer style_2.css en style.css.

8.3. Le fichier textes.js

Il définit les textes utilisés par Dyris. Les titres des pages, les boutons, les messages qui s'affichent dans les fenêtres... Vous pouvez remplacer ces textes par ceux de votre choix.

Dyris peut donc être programmé dans n'importe quelle langue. Une traduction en anglais du fichier textes.js est proposée dans le dossier outils.

9. La notation

L'objet de ce paragraphe n'est pas de déterminer s'il est bon ou pas d'attribuer une note à un exercice. Nous vous indiquons simplement comment Dyris calcule la note attribuée à l'étudiant. Cependant, nous sommes parfaitement conscients que ce mode de calcul peut être amélioré (affichage du pourcentage de bonnes réponses, etc.) et nous sommes à l'écoute de vos suggestions et remarques.

Tout d'abord, comme cela a déjà été expliqué, celui qui crée un exercice peut attribuer le barème de son choix, à n'importe quelle question. Par défaut, le barème pour une question est de 1 point. Un barème différent de 1 point se définit à la fin de l'énoncé. Par exemple, pour une question notée sur 2 points, il faut rajouter //2 à la fin de l'énoncé:

question("Où vit le personnage principal de l'histoire?//2");

Ensuite, le calcul de la note s'effectue en fonction des coefficients définis dans le fichier donnees.js. Normalement, le coefficient pour une réponse juste est 1. Si ce n'est pas le cas, les coefficients sont adaptés en respectant les proportions, de sorte que la note maximale que peut obtenir l'étudiant soit égale au barème.

La note est donc égale au coefficient (éventuellement modifié) multiplié par le barème.

Pour les questions ouvertes, le barème est réparti sur les cases à remplir. Par exemple, dans le cas d'une question avec 4 cases à remplir, le barème pour chaque case est égal à barème/4.

La note finale (lorsque l'étudiant a répondu à toutes les questions) est ramené sur la valeur indiquée dans le fichier donnees.js. Et si l'étudiant abandonne l'exercice en cours de route, aucune note n'est donnée.

10. Structure du logiciel

Dyris est écrit presque intégralement en HTML, CSS et JavaScript. Ces langages sont interprétés par votre navigateur (FireFox, Internet Explorer...). Pour l'option de sauvegarde sur serveur, une partie du code est également écrite en PHP.

Le logiciel comporte plusieurs fichiers :

Le questionnaire, défini dans le fichier donnees.js, est préchargé à l'avance. Les images associées aux questions ne sont chargées qu'au moment où les questions sont posées.