Dyris
Dyris est un outil pour créer des QCM (questionnaire à choix multiples) en ligne.
Site officiel : http://dyris.free.fr/
- version disponible au 24/02/2021 : dyris 23
Cet outil utilise JavaScript pour rendre le QCM dynamique.
Migration d'un QCM de la version 16 vers la version 23
Fichier de données (donnees.js)
| Version 16 | Version 23 | Observation |
|---|---|---|
mode_theme("1"); |
mode_presentation("1"); |
|
mode_question("1"); |
mode_evaluation("1"); |
Personnalisation
Dans la page du mode d'emploi, j'ai intégré un formulaire de contact.
Fichier du mode d'emploi à personnaliser :
- ...\qcm\secinfo\pages\mode_emploi.php
Modification 1
Cette modification concerne le libellé du message généré à la suite de la validation du formulaire de contact ; il est personnalisé en fonction du QCM concerné :
$sujet = 'QCM, réseau informatique : message';$message = "Ce message concerne le formulaire de contact du QCM réseau informatique...
Modification 2
La modification a pour but de mettre en évidence le message indiquant que le commentaire du formulaire de contact a bien été envoyé. Cela se fait en mettant le message sur fond vert avec une écriture en blanc.
Avant modification :
echo "Votre commentaire a bien été envoyé";
Après modification :
echo "<span style='background: darkgreen; color: white'> Votre commentaire a bien été envoyé </span>";
Amélioration
Amélioration souhaitée
Utilisant la version dyris 20.4, voici des améliorations suggérées :
- faire en sorte que la zone d'illustration soit de taille fixe ;
- faire en sorte que les boutons soient toujours à la même place :
- Le bouton validé à un emplacement fixe,
- les boutons "Je ne sais pas" et "Suivant" à la même place,
- le bouton "Arrêter" à un emplacement fixe,
- lorsque la solution est affichée, afficher, s'il y en a une, l'image correspondant à la solution ;
- proposer une mise en forme adaptative (écran large, écran étroit, écran de smartphone...).
Amélioration effectuée sur la version 16
Astuce pour que les sélections sur les cases à cocher et sur les boutons radios soit plus pratique ; un clic sur le libellé agit sur l'élément :
- ajout de la balise
<label>pour encadrer le code de la balise<input>
Code avant modification, fichier vue.js, ligne 50, page d'affichage des thèmes :
function afficher_themes() {
...
for (i=0;i<mod.th.length;i++) {
ch+='<input type="checkbox" name="case'+i+'" onclick="p1_choisir_themes();"';
if (mod.th[i].choisi=="oui") ch+=' checked';
ch+='> '+mod.th[i].titre+'<br>';
}
ch+='<input type="checkbox" name="tous" onclick="p1_choisir_themes();"> '+txt.mot[0];
}
else {
ch+='<input type="radio" name="ch_th" checked> '+mod.th[0].titre+'<br>';
for (i=1;i<mod.th.length;i++) {
ch+='<input type="radio" name="ch_th"';
if (mod.th[i].choisi=="oui") ch+=' checked';
ch+='> '+mod.th[i].titre+'<br>';
}
}
Code après modification, fichier vue.js, ligne 50, page d'affichage des thèmes :
function afficher_themes() {
...
for (i=0;i<mod.th.length;i++) {
ch+='<label><input type="checkbox" name="case'+i+'" onclick="p1_choisir_themes();"';
if (mod.th[i].choisi=="oui") ch+=' checked';
ch+='> '+mod.th[i].titre+'</label><br />';
}
ch+='<label><input type="checkbox" name="tous" onclick="p1_choisir_themes();"> '+txt.mot[0]+'</label>';
}
else {
ch+='<label><input type="radio" name="ch_th" checked> '+mod.th[0].titre+'<br />';
for (i=1;i<mod.th.length;i++) {
ch+='<input type="radio" name="ch_th"';
if (mod.th[i].choisi=="oui") ch+=' checked';
ch+='> '+mod.th[i].titre+'</label><br />';
...
Code avant modification, fichier vue.js, ligne 68, fonction d'affichage du nombre de questions :
function afficher_nb_questions() {
var ch='<div class="cadre"><h2>'+txt.titre[1]+'</h2>';
ch+='<input type="radio" name="ch_nb" checked> '+opt.nb_questions[0]+' '+txt.mot[1]+'<br />';
for (var i=1;i<opt.nb_questions.length;i++) {
ch+='<input type="radio" name="ch_nb"';
if (cont.nb_quest_choisi==opt.nb_questions[i]) ch+=' checked';
ch+='> '+opt.nb_questions[i]+' '+txt.mot[1]+'<br />';
}
ch+='</div>';
return ch;
}
Code après modification, fichier vue.js, ligne 68, fonction d'affichage du nombre de questions :
function afficher_nb_questions() {
var ch='<div class="cadre"><h2>'+txt.titre[1]+'</h2>';
ch+='<label><input type="radio" name="ch_nb" checked> '+opt.nb_questions[0]+' '+txt.mot[1]+'</label><br />';
for (var i=1;i<opt.nb_questions.length;i++) {
ch+='<label><input type="radio" name="ch_nb"';
if (cont.nb_quest_choisi==opt.nb_questions[i]) ch+=' checked';
ch+='> '+opt.nb_questions[i]+' '+txt.mot[1]+'</label><br />';
}
ch+='</div>';
return ch;
}
Code avant modification, fichier vue.js, ligne 122, fonction d'affichage des questions :
if (mod.th[a].quest[b].type=="cases a cocher") {
var k=0;
for (i=0;i<c;i++) {
k=num[i];
ch+='<input type="checkbox" name="case'+k+'"> ';
ch+=mod.th[a].quest[b].rep[k].enonce+'<br />';
}
}
Code après modification, fichier vue.js, ligne 122, fonction d'affichage des questions et cases à cocher :
if (mod.th[a].quest[b].type=="cases a cocher") {
var k=0;
for (i=0;i<c;i++) {
k=num[i];
ch+='<label><input type="checkbox" name="case'+k+'"> ';
ch+=mod.th[a].quest[b].rep[k].enonce+'</label><br />';
}
}
Code avant modification, fichier vue.js, ligne 143, fonction d'affichage des questions et boutons radios :
for (i=0;i<c;i++) {
ch+='<input type="radio" name="ch_rep"> ';
ch+=mod.th[a].quest[b].rep[i].enonce+'<br />';
}
Code après modification, fichier vue.js, ligne 143, fonction d'affichage des questions et boutons radios :
for (i=0;i<c;i++) {
ch+='<label><input type="radio" name="ch_rep"> ';
ch+=mod.th[a].quest[b].rep[i].enonce+'</label><br />';
}