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");

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+='>&nbsp;&nbsp;'+mod.th[i].titre+'<br>';
      }
      ch+='<input type="checkbox" name="tous" onclick="p1_choisir_themes();">&nbsp;&nbsp;'+txt.mot[0];
   }
   else {
      ch+='<input type="radio" name="ch_th" checked>&nbsp;&nbsp;'+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+='>&nbsp;&nbsp;'+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+='>&nbsp;'+mod.th[i].titre+'</label><br />';
      }
      ch+='<label><input type="checkbox" name="tous" onclick="p1_choisir_themes();">&nbsp;'+txt.mot[0]+'</label>';
   }
   else {
      ch+='<label><input type="radio" name="ch_th" checked>&nbsp;&nbsp;'+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+='>&nbsp;'+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>&nbsp;&nbsp;'+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+='>&nbsp;&nbsp;'+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>&nbsp;&nbsp;'+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+='>&nbsp;&nbsp;'+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+'">&nbsp;&nbsp;';
         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+'">&nbsp;&nbsp;';
         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">&nbsp;&nbsp;';
         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">&nbsp;&nbsp;';
         ch+=mod.th[a].quest[b].rep[i].enonce+'</label><br />';
      }

Voir aussi

• QCM