Welcome, Guest
Username: Password: Remember me

TOPIC: Ajouter info bulle dans questions pour guider utilisateur

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

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 8234
  • Thank you received: 1123
  • Karma: 334
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 4 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 4 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 4 months ago #65893

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2654
  • Thank you received: 343
  • 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 4 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.

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

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2654
  • Thank you received: 343
  • Karma: 77
Mais tu veux faire quoi exactement, tu ne veux quand même pas éditer la source de la page en passant par l'éditeur de question ?
Nickko
Ergonome / Usability expert
The administrator has disabled public write access.

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

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
Je ne sais pas par où passer, mais il me semble qu'il faut que j'arrive à éditer la page pour ajouter mon bout de javascript ou mon infobulle.
Je pensais me servir de Lime survey pour la structure générale de la base et du questionnaire et rajouter quelques petits "détails" pour faciliter l'utilisation de mon questionnaire.
A la base j'avais fait mon site a la mano, mais c'était assez pénible de gérer les sessions car mon quesionnaire tenait sur plusieurs pages. Du coup j'ai trouvé que Limesurvey avait l'air bien. Et comme les personnes du forum m'ont répondu ici que je pouvais ajouter des infobulles en modifiant la source, alors j'en avais compris que c'était possible.
Ce n'est pas le cas?
The administrator has disabled public write access.

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

  • Nickko
  • Nickko's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 2654
  • Thank you received: 343
  • Karma: 77
Dans l'éditeur de question tu ne peux modifier que les questions. Pour cela, tu as 2 modes, WYSIWYG, ou "source".

Si tu veux modifier la source du reste, il faut alors créer un thème à toi. Pour cela, il faut passer par l'éditeur de thème, dernière bouton de la 1° barre d'outil (symbolisant un écran et un pinceau).
Nickko
Ergonome / Usability expert
The administrator has disabled public write access.

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

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
Je suis désolée d'insister, mais il y a quelque chose que j'ai du sauter. :blink:

J'ai trouvé pour modifier le modèle. Mais pour moi, cela me permet de modifier le CSS, les javascript et la structure des pages, pas le contenu.
A quel endroit est ce que je peux rentrer le texte de mes infobulles?

Si je rajoute une zone dans mon modèle, à quel endroit est ce que je peux en renseigner le contenu?

Je suis un peu paumée là :(
Last Edit: 4 years 4 months ago by firaponte.
The administrator has disabled public write access.

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

  • Ysthad
  • Ysthad's Avatar
  • Offline
  • Senior Lime
  • Posts: 44
  • Thank you received: 1
  • Karma: 2
En fait c'est simple :

- dans le CSS : insérer soit le code indiqué plus haut, soit le code indiqué par benitov qui est excellent !

- dans le champ réservé à la question :

1. rédiger la question
2. cliquer sur source (Cf. post de Nickko)
3. insérer (par exemple sous la question) le code indiqué plus haut. Attention à ne pas oublier les balises <script> et </script>

- dans l'item : insérer le code indiqué plus haut

- concernant le contenu : travaille par analogie (texte à expliquer et explication du texte).
Last Edit: 4 years 4 months ago by Ysthad.
The administrator has disabled public write access.

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

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
MERCIIIIII Beaucoup!! J'ai compris :) :)

L'ensemble de vos réponses m'a permis de mieux comprendre, et de faire le parallèle avec ce que j'avais quand je codais à la main avec mon éditeur de texte.

Par contre, il me reste un détail à régler, qui se trouve dans la partie qu'on met sous la question, entre les balises <script>

Il y a quelque chose que j'ai du rater car, je copie colle le texte que Ysthad tu as mis plus haut. Ca colle bien. Puis je clique sur "source" pour revenir en mode affichage normal. A ce moment là, et quand je fais visualisation de ma question, il y a un problème.
Il ne prend pas mon bout de code comme du code. mon bout de script apparait dans le questionnaire.
J'ai bien mis les balises <script> pourtant et j'ai vérifié, mes incollades sont toutes fermées.
Je retourne vérifier dans la description de la question, et là,
il n'y a pas le début du script

Il affiche:


[Texte de ma question ]
ript :="" charset=""utf-8">" cursor_padding_x="10" cursor_padding_y="10" e.pagex="" e.pagey="=" function="" obj="document.getElementById("infobullerelative");" obj.style.left="x" obj.style.top="y" type=""text/javascript"" x="(navigator.appName.substring(0,3)" y="(navigator.appName.substring(0,3)"> mousemove = position; function see_bulle(img_){ Obj .....


Il a mangé le début de la balise <script>

Puis, si je vais dans le code source,
il m'a rajouté un <x> au milieu de la balise script, c'est à dire qu'il y a <sc<x>ript.
Je ne sais pas si c'est lié, mais du coup je pense qu'il n'interprète pas mon petit morceau de code.

Avez vous une idée?

Mercii
The administrator has disabled public write access.

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

  • Ysthad
  • Ysthad's Avatar
  • Offline
  • Senior Lime
  • Posts: 44
  • Thank you received: 1
  • Karma: 2
Je crois que c'est un problème de copier-coller.

Ca me l'a fait également au début jusqu'à ce que :

1. j'essaye avec plusieurs options de la balise script.
Par exemple :
<script type="text/javascript" charset="utf-8">
<script type="text/javascript">
La dernière a été pour moi la bonne
2. je prenne soins de coller le code dans le champ APRES avoir cliquer sur "Source".

Bon courage.
The administrator has disabled public write access.

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

  • Ben_V
  • Ben_V's Avatar
  • Offline
  • Platinum Lime
  • Posts: 1595
  • Thank you received: 391
  • Karma: 103
Dans les parametres généraux de la plateforme > Sécurité >

activer 'Filtrer le HTML....'

Benoît
Last Edit: 4 years 4 months ago by Ben_V.
The administrator has disabled public write access.

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

  • Ysthad
  • Ysthad's Avatar
  • Offline
  • Senior Lime
  • Posts: 44
  • Thank you received: 1
  • Karma: 2
J'avais oublié ce "p'tit" détail :blush: :blush:
Merci Benitov !
The administrator has disabled public write access.

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

  • firaponte
  • firaponte's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 1
Merci!!

J'ai fait un pas de plus. Ma zone d'info bulle s'affiche bien , au bon endroit, sans masquer la réponse.

Il me reste un point à démystifier: j'ai une croix rouge à la place de mon texte d'explication.

Je continue donc de chercher :)
The administrator has disabled public write access.
Moderators: Nickko
Time to create page: 0.186 seconds