"Habillage" des boutons radio et/ou type de quetion personnalisé

More
4 years 7 months ago #95490 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Bonjour, et merci @DenisChenu,

DenisChenu wrote: Salut,
Tes boutons sont les labels: donc cliquer sur les boutons modifie les input.

Oui, mais pour l'instant, il y a les boutons et à côté mes "images". Comment rendre "bouton" une des images ?

... Sinon, pas de plugin LimeSurvey : du jquery serait suffisant. Voir surtout la doc de jquery plus que celle de LimeSurvey.

jquery pour récupérer le clic donc si je comprends bien ?
Et le lien entre le "boutonImage" et la base de données va se faire automatiquement ?

Merci de confirmer ou infirmer !

Please Log in to join the conversation.

More
4 years 7 months ago #95534 by DenisChenu
DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Salut,

Pour les boutons en images: en fait pas ce réel besoin: si tu masque les boutons, cela devrait suffire:
ligne jquery:
$("#question"+QID+" input.checkbox").hide();

Par contre ; le problème est que l'utilisateur ne sauras pas si le bouton est coché ou non.
La possibilité:
Ajouter 2 images avec des classes différentes pour les labels:
<img class="checked" src="acupuncture-checked.png" /><img class="unchecked" src="acupuncture-unchecked.png" /><span class="hide">Acupuncture</span>

Dans le code css:
label img.checked{display:none}
label.check img.checked{display:inline}
label.check img.unckecked{display:none}

Et en javascript/jquery:
$("#question"+QID+" label").click(function(){
var thisinput=$(this).attr('for');
if($("#"+thisinput).is(':checked')){
$(this).addClass("check");
}else{
$(this).remooveClass("check");
}
});
Cela reste sans doute à améliorer mais la base est là.

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 7 months ago #95542 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
@DenisChenu, un grand merci de ces indications : tu me donnes les pistes justes pour savoir où et comment intervenir dans le code pour approcher le résultat que je souhaite = rendre le questionnaire plus attractif à remplir.
Je reviendrais poster un lien vers le résultat dès que ce sera prêt.

Please Log in to join the conversation.

More
4 years 7 months ago #95543 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
@DenisChenu, je reviens à propos de la façon d'intégrer les différents éléments de code :

Pour les "boutonsImages", je penses qu'il faut modifier les labels !

Mais où inclure les morceaux de code ?
- dans le template.css et les ?.js de mon modèle ?
- dans un fichier propre à chaque question ?

merci de tes réponses.

Please Log in to join the conversation.

More
4 years 7 months ago #95551 by DenisChenu
DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
En fait, ça dépend ;).

Pour les labels : directement par question.

$("#question"+QID+" input.checkbox").hide(); je dirais bien par question, puisque peut être spécifique à une question (si tu n'as pas d'image .... boum)

$("#question"+QID+" label").click(function(){
//Blah blah
});
Peut être remplacé "#question"+QID+" par la classe de la question multiple. SI la classe n'est pas utilisée, ca ne mange pas de pain. Donc dans template.js en remplaçant "#question"+QID+"

Le CSS obligatoirement dans template.css

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 7 months ago #95556 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Merci.
Je vais créer un modèle pour cette enquête, et y intégrer les divers éléments.
Et merci de la précision sur la classe de la question : j'ai en effet lu un certain nombre de choses à ce propos dans les docs et un tuto sur un site universitaire (faut que je retrouve!).
Allez hop : au taf !

Please Log in to join the conversation.

More
4 years 6 months ago #96389 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
J'ai pu disposer du temps nécessaire, et :
  1. Créé des boutonsImage, en deux versions coché ou non, intégrés au label de la question QID=592
<img class="unchecked" src="/limesurvey/upload/surveys/656273/images/acupuncture.png" style="width: 230px; height: 43px;" /><img class="checked" src="/limesurvey/upload/surveys/656273/images/acupunctureOui.png" style="width: 230px; height: 43px;" />
  • Ajouté les éléments de style au template.css de mon modèle
  • label img.checked{display:none}
    label.check img.checked{display:inline}
    label.check img.unckecked{display:none}
  • Ajouté les éléments suivants au template.js
  • $(document).ready(function(){
    	focusFirst();
    $("#question"+592+" input.checkbox").hide();
    });
     
     
    $(document).ready(function(){
     
    });
     
    $("#question"+592+" label").click(function(){
    var thisinput=$(this).attr('for');
    if($("#"+thisinput).is(':checked')){
    $(this).addClass("check");
    }else{
    $(this).remooveClass("check");
    }
    });
    [/ol]
    L'enquête est visible ici
    Les boutons s'affichent correctement, les "boutons radio" sont bien cachés sur la question exemple N°2.
    Mais mes boutons image ne sont pas cliquables !

    Une idée de l'erreur ?
    Merci.

    Please Log in to join the conversation.

    More
    4 years 6 months ago #96391 by Nickko
    Nickko replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
    En regardant dans Dragon Fly, je ne vois aucun événement déclenché par le clique sur une image...

    Nickko
    Head of ergonomics, UX & UI.

    Please Log in to join the conversation.

    More
    4 years 6 months ago #96398 by Philipppe
    Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé

    Nickko wrote: En regardant dans Dragon Fly, je ne vois aucun événement déclenché par le clique sur une image...

    En effet !
    Donc, persévérer à regarder dans les docs, mais pas toujours simple en anglais !
    Merci.

    Please Log in to join the conversation.

    More
    4 years 6 months ago - 4 years 6 months ago #96403 by DenisChenu
    DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
    Si les images sont dans le label : nul besoin d'un élément click ou je me trompe ?
    (tu peux me remettre le lien ?)


    M'a gouré ....

    Il faut modifier l'image ...

    corrigé plus loin

    Denis

    Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
    I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
    An error happen ? Before make a new topic : remind the Debug mode .
    Last Edit: 4 years 6 months ago by DenisChenu.

    Please Log in to join the conversation.

    More
    4 years 6 months ago #96404 by Nickko
    Nickko replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
    Ben justement, dans le label, sachant que le label peut être distinct du bouton en lui même j'ai un gros gros doute. (ça reste un doute).

    Nickko
    Head of ergonomics, UX & UI.

    Please Log in to join the conversation.

    More
    4 years 6 months ago #96406 by DenisChenu
    DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé

    Nickko wrote: Ben justement, dans le label, sachant que le label peut être distinct du bouton en lui même j'ai un gros gros doute. (ça reste un doute).

    Nan, m'a gourré ...
    En fait pas besoin du click pour cocher/décocher mais besoin du click pour tester l'état : script corrigé.

    Sinon, une remarque: tu utilise du texte dans tes images: je pense sincérement qu'il aurait était préférable de garder le texte et de le manipuler via css:

    Par exemple:
    #question592 label{
    font-size:20px;
    line-height:25px
    color:#fff;
    backgroud:#900;
    border:3px solid #400;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding:5px;
    }
    #question592 input.checkbox{
    position:absolute;
    left:-99999em;
    }
    Pourquoi : parceque le CSS est fait pour cela. Parceque tu reste accessible aux robots, aux navigateurs texte et surtout au déficients visuels.

    Denis

    Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
    I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
    An error happen ? Before make a new topic : remind the Debug mode .

    Please Log in to join the conversation.

    More
    4 years 6 months ago #96425 by Philipppe
    Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
    Excusez-moi : je n'étais pas en ligne !
    Merci : je vais tester. je reviens

    Please Log in to join the conversation.

    More
    4 years 6 months ago #96427 by Philipppe
    Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé

    DenisChenu wrote: Il faut modifier l'image ...

    $(document).ready(function(){
      $("#question"+592+" input.checkbox").hide();
      $("#question"+592+" label").click(function(){
        var thisinput=$(this).attr('for');
          if($("#"+thisinput).is(':checked')){
            $(this).addClass("check").removeClass("unchecked");
          }else{
            $(this).removeClass("check").addClass("unchecked");
         }
    });
    Denis

    Quand je teste ce code, les chekbox ne sont plus cachées , alors qu'ils l'étaient avec la première version !

    @Denis, ta solution css : cumulée avec le js ou seule ?

    Please Log in to join the conversation.

    More
    4 years 6 months ago #96428 by DenisChenu
    DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
    Salut,

    Un oubli de }); de ma part ...
    $(document).ready(function(){
      $("#question"+592+" input.checkbox").hide();
      $("#question"+592+" label").click(function(){
        var thisinput=$(this).attr('for');
          if($("#"+thisinput).is(':checked')){
            $(this).addClass("check").removeClass("unchecked");
          }else{
            $(this).removeClass("check").addClass("unchecked");
         }
      });
    });

    Philippe : il faut vraiment que tu te mette à Firebug : getfirebug.com/logging tu aurais trouvé de toi même.

    Sinon: la CSS se suffit à elle même et n'à pas besoin du javascript. La différence, c'est que :
    1: c'est accessible
    2: cela est directement visible dans la page
    3: est moins lourd pour le client (charge mémoire CSS< charge mémoire JS)
    4: ne rend pas exactement les mêmes résultat qu'avec une image
    5: ne rend pas les mêmes résultats selon le navigateur (notamment IE6/7/8)

    Denis

    Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
    I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
    An error happen ? Before make a new topic : remind the Debug mode .

    Please Log in to join the conversation.

    Moderators: Nickko

    Start now!

    Just create your account and start using Limesurvey today.

    Register now
    Join our Newsletter!