Dyris

Dyris est un outil pour créer des QCM (questionnaire à choix multiples) en ligne.

Site officiel : http://dyris.free.fr/ version disponible au 19/02/2018 : dyris 20.4

Cet outil utilise JavaScript pour rendre le QCM dynamique.

Amélioration souhaitée

• 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

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 />';
      }