« Dyris » : différence entre les versions
(Page créée avec « '''Dyris''' est un outil pour créer des QCM en ligne. Cet outil utiliser JavaScript pour rendre le QCM dynamique. Astuce pour que les sélections sur les cases à coche... ») |
|||
(11 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
'''Dyris''' est un outil pour créer des QCM en ligne. | '''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 | |||
Astuce pour que les sélections sur les cases à cocher et sur les boutons radios soit plus pratique ; un clic sur le libellé | 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) === | |||
{| class="wikitable" | |||
|- | |||
! Version 16 !! Version 23 !! Observation | |||
|- | |||
| <code>mode_theme("1");</code> || <code>mode_presentation("1");</code> || | |||
|- | |||
| <code>mode_question("1");</code> || <code>mode_evaluation("1");</code> || | |||
|} | |||
== 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 <code><label></code> pour encadrer le code de la balise <code><input></code> | * ajout de la balise <code><label></code> pour encadrer le code de la balise <code><input></code> | ||
---- | |||
Code avant modification, fichier <code>vue.js</code>, ligne 50, page d'affichage des thèmes : | |||
<source lang="javascript"> | |||
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>'; | |||
} | |||
} | |||
</source> | |||
Code après modification, fichier <code>vue.js</code>, ligne 50, page d'affichage des thèmes : | |||
<source lang="javascript"> | |||
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 />'; | |||
... | |||
</source> | |||
---- | |||
Code avant modification, fichier <code>vue.js</code>, ligne 68, fonction d'affichage du nombre de questions : | |||
<source lang="javascript"> | |||
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; | |||
} | |||
</source> | |||
Code après modification, fichier <code>vue.js</code>, ligne 68, fonction d'affichage du nombre de questions : | |||
<source lang="javascript"> | |||
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; | |||
} | |||
</source> | |||
---- | |||
Code avant modification, fichier <code>vue.js</code>, ligne 122, fonction d'affichage des questions : | |||
<source lang="javascript"> | |||
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 />'; | |||
} | |||
} | |||
</source> | |||
Code après modification, fichier <code>vue.js</code>, ligne 122, fonction d'affichage des questions et cases à cocher : | |||
<source lang="javascript"> | |||
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 />'; | |||
} | |||
} | |||
</source> | |||
---- | |||
'''Code avant modification''', fichier <code>vue.js</code>, ligne 143, fonction d'affichage des questions et boutons radios : | |||
<source lang="javascript"> | |||
for (i=0;i<c;i++) { | |||
ch+='<input type="radio" name="ch_rep"> '; | |||
ch+=mod.th[a].quest[b].rep[i].enonce+'<br />'; | |||
} | |||
</source> | |||
'''Code après modification''', fichier <code>vue.js</code>, ligne 143, fonction d'affichage des questions et boutons radios : | |||
<source lang="javascript"> | |||
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 />'; | |||
} | |||
</source> | |||
== Voir aussi == | |||
* [[QCM]] | |||
[[Catégorie:Logiciel]] | |||
[[Catégorie:HTML]] | [[Catégorie:HTML]] | ||
[[Catégorie:QCM]] | |||
[[Catégorie:Dyris]] |
Dernière version du 12 février 2023 à 18:59
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+='> '+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 />'; }