Le plus simple est, probablement, de modifier le fichier donnees.js avec un éditeur de texte. La structure de ce fichier est très simple et ne nécessite pas de connaissance en programmation. Sous Windows, vous pouvez utiliser WordPad, par exemple (Le bloc notes est à éviter à cause des retours à la ligne). Le fichier donnees.js comporte deux parties: Les options, nombreuses mais facultatives, et le questionnaire.
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)! Il est donc préférable de tester 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. Précautions à prendre:
schema("Chene_liege.jpg");
au lieu de: schema("Chene_liege.JPG");
Les versions récentes d'Internet Explorer bloquent les programmes en JavaScript, s'ils sont placés sur disque dur ou sur CD. Dans ce cas:
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.
mode_accueil("1");
Le choix des thèmes dans la page d'accueil peut se faire:
1
.2
. mode_questions("1");
L'exercice fonctionne selon deux modes 1
et 2
, le mode 1
étant le mode par défaut :
1
: Les questions sont choisies au hasard parmi celles disponibles.2
: Toutes les questions du fichier donnees.js sont posées, dans l'ordre où elles sont écrites.
Dans ce mode, les choix des thèmes et du nombre de questions ne sont pas affichés.mode_evaluation("1");
La page d'évaluation peut comporter une zone de texte pour entrer les nom et prénom, un bouton IMPRIMER ou un bouton ENREGISTRER LE SCORE.
1
: Pour ne pas avoir cette fonctionnalité.2
: Pour pouvoir imprimer.3
: Pour pouvoir enregistrer.Les enregistrements se font en local dans un cookie. Le fichier scores.html permet de récupérer les données. Si le navigateur est configuré pour ne pas accepter les cookies, la zone de texte et le bouton ENREGISTRER LE SCORE ne s'affichent pas.
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.
Si vous supprimez cette ligne, 10
, 20
et 30
seront les nombres de questions qui seront proposés.
bouton_sup("MODE D'EMPLOI","mode_emploi.html");
Vous pouvez ajouter des boutons dans la page d'accueil. Il vous faut indiquer le texte qui sera affiché sur le bouton et l'adresse de la page, laquelle doit être placée dans le dossier "/pages".
message_debut("Attention: Une question peut comporter plusieurs réponses justes!");
C'est le message qui s'affichera avant de commencer l'exercice. Pour le modifier, changez le texte entre les guillemets. Supprimez cette ligne si vous voulez qu'aucun avertissement ne s'affiche.
message_fin("Au plaisir de vous retrouver une prochaine fois!");
C'est le message qui s'affichera en cliquant sur le bouton QUITTER. Pour le modifier, changez le texte entre les guillemets. De même, supprimez cette ligne si vous voulez qu'aucun message ne s'affiche.
url_quitter("http://dyris.free.fr/");
Lorsque vous cliquez sur le bouton QUITTER, la fenêtre qui contient l'exercice se ferme (si elle est ouverte depuis une autre page). Sauf si vous définissez ici l'adresse de la page vers laquelle vous souhaitez être redirigé.
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'élève 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és.
Après avoir choisi vos options dans le fichier donnees.js, il vous faut définir le questionnaire. Il est constitué d'un ensemble de questions regroupées par thèmes.
theme("nouveau thème");
Pour chaque thème dont vous indiquez le titre ici, vous allez écrire des blocs de questions / réponses. Bien sûr, si l'ensemble de votre questionnaire ne comporte qu'un seul thème, cette ligne est facultative...
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");
schema("image1.gif");
aide("AIDE","aide1.html");
Pour changer l'énoncé de la question, modifiez le texte entre guillemets (première ligne). Les cases à cocher sont symbolisées par les caractères:
[x]
si la case doit être cochée (le x
est la lettre ixe et non le signe multiplier).[ ]
si la case ne doit pas l'être.Il est indispensable d'écrire au moins deux réponses par question. Au moins une des réponses proposées doit être juste.
Pour changer l'image, modifiez le texte entre guillemets (avant dernière ligne). L'image:
Pour améliorer la qualité de l'affichage, en particulier si votre exercice est placé sur un serveur Web dont l'accès est lent, il est possible d'indiquer les dimensions des images. Par exemple, si l'image image1.gif a une largeur de 155 pixels et une hauteur de 98 pixels:
schema("image1.gif","155","98");
Vous pouvez ajouter des boutons supplémentaires ouvrant des fenêtres contenant des pages au format HTML. Par exemple pour proposer de l'aide ou tout renseignement complémentaire. Les pages au format HTML doivent être placées dans le dossier /pages. Pour cela, indiquez le texte qui sera sur le bouton et le nom de la page (dernière ligne).
Afin de rendre le fichier donnees.js plus court (donc plus rapide à charger), des raccourcis ont été créés. Ainsi, vous pouvez écrire:
quest
à la place de question
rep
à la place de reponse
sch
à la place de schema
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");
schema("image1.gif");
Les boutons radio sont symbolisés par les caractères:
(o)
ou (x)
si le bouton doit être coché.( )
si le bouton ne doit pas l'être.Il ne peut y avoir qu'une seule réponse juste par question.
question("Où vit le personnage principal de l'histoire?");
reponse("dans une petite [maison||demeure], près de la [forêt]");
schema("image1.gif");
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 ||
.
Si vous connaissez le langage 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:
quest("La forme développée de l'expression (x+1)<sup>2</sup> est :
rep("(o) x<sup>2</sup> + 2 x + 1");
rep("( ) x<sup>2</sup> + 1");
Vous obtiendrez l'affichage:
Il existe de nombreuses balises HTML:
<i>
et </i>
pour du texte en italique,
<u>
et </u>
pour du texte souligné,
<b>
et </b>
pour du texte en gras,
<sub>
et </sub>
pour du texte en indice...
Par ailleurs, 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 le système Unicode, consistant à remplacer le caractère par son code chiffré. Les caractères fréquemment utilisés ont aussi une abréviation, plus facile à retenir, pouvant remplacer le code chiffré.
Caractère | Code chiffré | Abréviation |
" | " | " |
< | < | < |
> | > | > |
[ | [ | Pas d'abréviation |
] | ] | 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 <
On notera que le système Unicode peut être utilisés pour obtenir toutes sortes de caractères! Par exemple:
Caractère | Code chiffré | Abréviation |
€ | € | € |
Ø | Ø | Ø |
α | α | α |
β | β | β |
γ | γ | γ |
π | π | π |
∞ | ∞ | ∞ |
≈ | ≈ | ≈ |
≠ | ≠ | ≠ |
⊥ | ⊥ | ⊥ |
∧ | ⋀ | ∧ |
La première page qui s'affiche pendant que l'exercice se charge se nomme chargt.html. Vous pouvez modifier cette page pour lui donner le contenu que vous souhaitez.
En modifiant le fichier presentation.css, vous pouvez obtenir la présentation que vous voulez. Mais il vous faut avoir quelques connaissances dans 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, plusieurs feuilles de style sont proposées dans le dossier outils. Pour utiliser le fichier presentation_4.css, par exemple, il suffit de renommer le fichier presentation.css (ou de l'effacer si vous n'en voulez plus) en presentation_8.css, puis de renommer presentation_4.css en presentation.css. Relancez dyris et ça marche !
Il définit tous 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.
A la fin de ce fichier, le professeur choisit entre quelle note et quelle note mettre telle appréciation, les notes étant exprimées sur 20. Par exemple, s'il choisit de mettre Résultat moyen pour une note comprise entre 10 et 12, il devra écrire, dans le fichier donnees.js:
appreciation("10","12","Résultat moyen");
Remarque: Si l'élève obtient une note correspondant à plusieurs appréciations, la dernière appréciation est prioritaire. Par exemple, si l'élève a obtenu 12 et que le fichier donnees.js comporte:
appreciation("10","12","Résultat moyen");
appreciation("12","14","Bon travail");
Alors l'élève obtiendra comme appréciation: Bon travail.
Le professeur peut également mettre une appréciation lorsque l'élève quitte l'exercice avant d'avoir terminé:
non_termine("Vous avez quitté l'exercice sans avoir répondu à toutes les questions !");
Une traduction en anglais de ce fichier est proposée dans le dossier outils: textesgb.js
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'élève. 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, 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'élève 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 est ramené sur la valeur indiquée dans le fichier "donnees.js". Et si l'élève abandonne l'exercice en cours de route, aucune note n'est donnée.
Première version proposée sur internet.
Dyris est écrit intégralement en HTML et en JavaScript. Ces langages sont interprétés par votre navigateur (FireFox, Internet Explorer...).
Le programme comporte de nombreuses fonctions, traite des fichiers contenant des données, affiche plusieurs pages. Dans ce genre de programme, il faut éviter d'appeler une fonction qui n'est pas encore chargée. Une solution consiste à précharger l'ensemble du programme avant son utilisation.
La page plein_ecran.html ouvre la page index.html en plein écran. Son fonctionnement dépend des navigateurs et de leurs configurations. Elle est donc à éviter pour une utilisation sur internet.
La page index.html définit deux frames (cadres).
Au début, dans les deux frames sont chargées respectivement deux pages:
Une fois le fichier cache.html entièrement chargé, la page chargt.html est remplacée par la page page1.html. L'exercice peut alors commencer.
Certains navigateurs refusent de recharger une même page. Deux pages identiques ont donc étés créées : page1.html et page2.html. Si la page page1.html est affichée, alors la prochaine page à être affichée sera la page page2.html. Et inversement.
Les actions de l'utilisateur sur ces pages appellent des fonctions qui modifient l'affichage. Les pages et les fonctions associées aux pages sont définies dans le fichier fonctions.js.
Ces fonctions s'appuient sur une hiérarchie d'objets, créés à partir de classes d'objets. Ces objets sont complètement indépendants les uns des autres pour que l'application reste facile à modifier. Les objets sont définis dans le fichier objets.js.
Dyris peut être programmé dans n'importe quelle langue : Les textes sont écrits dans le fichier textes.js.
Le questionnaire, situé dans le fichier donnees.js, est préchargé à l'avance. Les images associées aux questions, placées dans le sous-dossier /schemas, sont chargées au moment où les questions sont posées. Cela limite les attentes dues aux chargements.
txt_page
: Le texte affiché dans une des pages page1.html ou page2.html.num_page
: Le numéro de la page qui contient txt_page, prend les valeurs 1 ou 2.fen_guide
: Variable qui contient la fenêtre Mode d'emploi.timer, flag
: Servent au clignotement des réponses justes lorsque l'utilisateur s'est trompé.af_themes
: Définit comment la liste des thèmes doit être affichée, prend les valeurs 0, 1 ou 2.af_questions
: Définit comment la liste des questions doit être affichée, prend les valeurs 0 ou 1.Cette classe comporte les propriétés :
note_min
: La note mini pour obtenir l'appréciation définit ci-après.note_max
: La note maxi pour obtenir l'appréciation définit ci-après.enonce
: L'énoncé de l'appréciation.Cette classe comporte les tableaux :
titre[]
: Les titres qui s'affichent dans les diverses pages.bouton[]
: Les textes sur les boutons.fenetre[]
: Les fenêtres d'avertissement.mot[]
: Les mots utilisés dans les pages d'accueil, de questions ou d'évaluation.score[]
: Les mots utilisés dans la page scores.html.juste[]
: Les mots pour signifier que l'élève a bien répondu à la question.faux[]
: Les mots pour signifier que l'élève a mal répondu à la question.appr[]
: Les appréciations qui seront affichées dans la page d'évaluation.Elle comporte une propriété :
non_fini
: L'appréciation affichée dans la page d'évaluation lorsque l'élève n'a pas terminé l'exercice.Elle comporte la méthode :
ajouter_appr()
: Ajoute au tableau appr[] un nouvel objet instance de la classe CL_appr.Cette classe comporte les propriétés :
nom
: Le texte qui s'affichera sur le bouton permettant d'accéder à la page.adresse
: L'adresse de la page.Cette classe comporte les propriétés :
mode_accueil
: Le mode de la page d'accueil, prend les valeurs 1 ou 2.mode_questions
: Le mode du déroulement des questions, prend les valeurs 1 ou 2.mode_evaluation
: Le mode de l'évaluation, prend les valeurs 1 ou 2.titre
: Le titre qui s'affiche dans la page d'accueil.commentaire
: Le commentaire sous le titre.conseil_debut
: Le message qui s'affiche juste avant que ne commence l'exercice.conseil_fin
: Le message qui s'affiche en quittant l'exercice.quitter
: L'url de la page qu'on veut afficher après avoir cliqué sur le bouton QUITTER.coef_rep_juste
: Le nombre de point(s) obtenu lorsque l'utilisateur répond juste.coef_rep_nulle
: Le nombre de points obtenus lorsque l'utilisateur ne sais pas répondre à la question.coef_rep_fausse
: Le nombre de point(s) perdu lorsque l'utilisateur répond juste (valeur négative).note_sur
: La note maximale que l'utilisateur peut obtenir.non_fini
: Contient l'appréciation lorsque l'utilisateur quitte les exercices avant d'avoir terminé.Elle comporte les tableaux :
nb_questions[]
: Contient les nombres de questions qu'il est possible de choisir.bouton[]
: Le bouton supplémentaire qui sera éventuellement affiché.Elle comporte la méthode :
ajouter_bouton_sup()
: Ajoute au tableau bouton[] un nouvel objet instance de la classe CL_page.Cette classe comporte les propriétés :
enonce
: L'énoncé de la réponse.resultat
: Le résultat à trouver pour les cases à cocher (ou bouton "radio"),
prend les valeurs vrai ou faux.repondu
: La réponse apportée par l'utilisateur, prend les valeurs vrai ou faux.Elle comporte le tableau :
resultat[]
: Contient les résultats possibles pour les zones de texte à remplir.Cette classe comporte les propriétés :
etat
: L'état de la question, prend les valeurs libre, affichee ou corrigee.enonce
: L'énoncé de la question.schema
: Le nom du schéma associé à la question.larg
: La largeur du schéma associé à la question.haut
: La hauteur du schéma associé à la question.Elle comporte les tableaux :
reponse[]
: Contient les réponses possibles associées à la question.aide[]
: Contient les aides possibles associées à la question.Elle comporte les méthodes :
ajouter_reponse(txt)
: Ajoute au tableau reponse[] un nouvel objet instance de la classe CL_reponse.ajouter_aide(txt)
: Ajoute au tableau aide[] un nouvel objet instance de la classe CL_page.ajouter_schema(txt)
: Affecte le nom, la largeur et la hauteur du schéma associé à la question.Cette classe comporte les propriétés:
etat
: Indique l'état du thème, prend les valeurs libre ou fini.titre
: Indique le titre du thème.choisi
: Indique si le thème est sélectionné, prend les valeurs oui ou non.Elle comporte le tableau :
question[]
: Contient les questions disponibles associées au thème.Elle comporte la méthode :
ajouter_question(txt)
: Ajoute au tableau question[] un nouvel objet instance de la classe CL_question.Cette classe comporte le tableau :
theme[]
: Contient les thèmes disponibles.Elle comporte la méthode :
ajouter_theme(txt)
: Ajoute au tableau theme[] un nouvel objet instance de la classe CL_theme.Cette classe comporte les propriétés :
debut
: Moment où l'utilisateur commence à répondre aux questions.fin
: Moment où l'utilisateur cesse de répondre aux questions.nb_quest_choisi
: Nombre de questions à poser, choisi à la page d'accueil.nb_quest_faites
: Nombre de questions qui ont déjà été posées.num_theme
: Numéro du thème en cours.num_question
: Numéro de la question en cours.note
: La note obtenu par l'utilisateur.note_maxi
: La somme des barèmes de chaque question à laquelle l'utilisateur a répondu.texte
: Instance de la classe CL_texte.option
: Instance de la classe CL_option.qcm
: Instance de la classe CL_qcm.activite
: Instance de la classe CL_activite.