Welcome, Guest
Username: Password:

TOPIC: Ajouter info bulle dans questions pour guider utilisateur

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65782

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
Bonjour,

je souhaite réaliser un questionnaire qui contient du vocabulaire un peu complexe. Pour aider les utilisateurs et être sûre que tous entendent le même sens des termes, je souhaiterai mettre des info bulles dans les titres des questions.
Cela est-il possible?
Sinon est-il possible d'avoir un champ sur le coté sur lequel s'afficherait ces infobulles?

Par avance merci pour votre réponse.

Cordialement
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65784

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2740
  • Thank you received: 356
  • Karma: 77
Ce n'est pas possible, sans bricoler qqch en Javascript.
Le mieux serait peut-être d'employer un langage que tout le monde comprend. (c'est le meilleur workarround ergonomique que je puisse te proposer)
Nickko
Ergonome / Usability expert
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65787

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
Merci pour cette réponse rapide. Ca signifie que je peux générer le code de mon formulaire avec limesurvey, et ensuite manuellement ajouter mes infobulles avec Javascript Et je pourrai toujours profiter de la base de données de lime survey ou il faudra que j'envoie vers ma bdd?

En fait c'est un questionnaire pour valider les termes en eux mêmes, donc je ne peux pas les remplacer, mais si je mets leur définition dans la question, ça fait lourd je trouve

Par contre je peux peut etre ajouter un bouton option à côté de ma question du type: voulez vous la définition? et si la personne met le bouton sur on, un champ texte apparait avec la dite définition?
Comme un commentaire si une personne ne remplit pas un champ?

Merci :)
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65789

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8734
  • Thank you received: 1216
  • Karma: 360
Salut,

attribut title => explication
infobulle => tooltip
Limesurvey intéger jquery

Donc:
jquery tooltip à ajouter au template. tu l'active sur les éléments de class tooltip, dans le code html de ta question, tu indique directement:
Voici le mot <span class="tooltip" title="Explication du mot">super-compliqué</span>

Tu peux ajouter un underline sur les span de type tooltip.

jquery.bassistance.de/tooltip/demo/
docs.limesurvey.org/Workarounds%3A+Manip...ime+using+Javascript
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65800

  • Ben_V
  • Ben_V's Avatar
  • Offline
  • Platinum Lime
  • Posts: 1673
  • Thank you received: 413
  • Karma: 106
A titre d'info et pour les gros abuseurs de CSS (comme moi :blush: )
downloads.sixrevisions.com/css-tooltips/index.html
Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
All LS releases => bit.ly/1VMuTDu | 2.06lts => bit.ly/1Qv44A1
Demo surveys => bit.ly/20NW9V8 (already included in /docs/demosurveys)
The administrator has disabled public write access.
The following user(s) said Thank You: Ysthad

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65801

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2740
  • Thank you received: 356
  • Karma: 77
Excellent !
Nickko
Ergonome / Usability expert
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65804

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8734
  • Thank you received: 1216
  • Karma: 360
benitov wrote:
A titre d'info et pour les gros abuseurs de CSS (comme moi :blush: )
downloads.sixrevisions.com/css-tooltips/index.html
Bien meilleure solution pour cette situation !

Plus facile à mettre en place au coup par coup !

Merci !

PS: juste à revoir l'accessibilité pitete ;)
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65805

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2740
  • Thank you received: 356
  • Karma: 77
Enfin, je ne sais pas si dans LS ces infobulle sont le plus gros pb d'accessibilité.

La dernière fois que j'ai regardé, les templates de base étaient tous basé sur de la mise en page par tableau, en terme d'accessibilité, c'est souvent un mauvais départ.
Nickko
Ergonome / Usability expert
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65808

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8734
  • Thank you received: 1216
  • Karma: 360
Nickko wrote:
La dernière fois que j'ai regardé, les templates de base étaient tous basé sur de la mise en page par tableau, en terme d'accessibilité, c'est souvent un mauvais départ.
test citronade, en cours de retravail pour la version 1.91.

Mais c'est vrai qu'il y a pas mal de problèmes avec l'accessibilité dans les questions.

:)

PS: je veux bien un coup de main sur l'accessibilité de citronade.
Last Edit: 4 years 7 months ago by DenisChenu.
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65813

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2740
  • Thank you received: 356
  • Karma: 77
Là mon emploi du temps est un peu full, exam samedi, un événement à préparer pour mercredi et un site à mettre en ligne pour la semaine prochaine.

À partir de mardi, ça devrait aller. Je propose que soit on ouvre un topic dédié pour que tout le monde puisse apporter sa pierre à l'édifice, soit on continu en privé, par e-mail par exemple.

Est-ce qu'il y a des points particuliers que tu souhaiterais que j'explore ?
Nickko
Ergonome / Usability expert
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65816

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8734
  • Thank you received: 1216
  • Karma: 360
Test sur différent navigateur, et fait des rapports de bug :).

Comme c'est dans la version officielle, c'est sur le Bugtracker :).
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65822

  • Ysthad
  • Ysthad's Avatar
  • Offline
  • Senior Lime
  • Posts: 44
  • Thank you received: 1
  • Karma: 2
Voila ce que j'utilise dans ce genre de situation et qui fonctionne pas mal :

DANS template.css :

#infobullerelative {
position : absolute;
display : none;
border : 1px solid blue;
}

DANS le corps de la question (sous la question par exemple) :

<script type="text/javascript" charset="utf-8">

cursor_padding_x = 10 ;
cursor_padding_y = 10 ;

function position(e){

x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;

Obj = document.getElementById("infobullerelative");
Obj.style.left = x + cursor_padding_x ;
Obj.style.top = y + cursor_padding_y ;

}

if(navigator.appName.substring(0,3) == "Net") {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = position;

function see_bulle(img_){
Obj = document.getElementById('infobullerelative');
Obj.innerHTML = "<img src='" +img_ +"'>";
Obj.style.display = "block";
}

function kill_bulle(){
Obj = document.getElementById('infobullerelative');
Obj.innerHTML = "";
Obj.style.display = "none";
}
</script>

DANS L'item :

<div id="infobullerelative"></div><a href="#" onmouseover="see_bulle('explication-du-texte');" onmouseout="kill_bulle();">texte-a-expliquer</a>.

Bonne programmation :-)
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65892

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
Merci pour ces réponses. J'ai avancé un peu dans la connaissance de l'outil. Par contre, je ne dois pas chercher de la bonne manière, mais je n'arrive pas à trouver comment modifier le code du questionnaire. J'ai vu qu'on pouvait modifier le contenu de la partie supérieure aux questions, qui introduit le questionnaire, mais je n'arrive pas à voir où je peux afficher le code html des questions? Est ce que ça génère un fichier php ou html que je peux modifier? Je suis un peu perdue et du coup bloquée.

Merci pour votre aide.
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65893

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2740
  • Thank you received: 356
  • Karma: 77
La troisième icône dans l'éditeur, "Source".
Nickko
Ergonome / Usability expert
The administrator has disabled public write access.

Ajouter info bulle dans questions pour guider utilisateur 4 years 7 months ago #65894

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
Merci :)
Mais je dois pas faire comme il faut. Quand je clique sur l'icône source, ca ne m'affiche la source que de la description, pas de toute la page.
Si je me mets dans la rubrique sous questions et que je clique sur le stylo à droite, il m'affiche le texte de ma sous question.
Mais je ne vois pas où avoir la totalité.
The administrator has disabled public write access.
Moderators: Nickko
Time to create page: 0.307 seconds