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

More
4 years 3 months ago #96429 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Ouiiiii ! merci, @Denis !
Voilà, les chekbox disparaissent, et quand je clic sur le premier bouton, l'image du "boutonCoché" s'ajoute !
Donc je revois le code et je reviens !
Ok pour firebug : je l'ai, mais bêtement pas l'habitude de m'en servir !
Suis ok avec préférence d'une solution css : ce sera pour un deuxième temps ! (j'ai un délai àrespecter maintenant).

Please Log in to join the conversation.

More
4 years 3 months ago #96430 by DenisChenu
DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Il te manque les parties CSS:

label img.checked{display:none}
label.check img.checked{display:inline}
label.check img.unckecked{display:none}

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 3 months ago #96431 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé

DenisChenu wrote: Il te manque les parties CSS:

label img.checked{display:none}
label.check img.checked{display:inline}
label.check img.unckecked{display:none}

Ben si, elles sont dans le template.css du modèle, tout à la fin !

Please Log in to join the conversation.

More
4 years 3 months ago #96441 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
@Denis bonjour,

Je ne comprends pas bien ce que fait ta proposition en css !
Mais quand je vois ceci dans le template.css:
button.ui-state-default,
input.ui-state-default {
	color: #333333;
	border: 1px solid #A0A0A0;
	background: #FAFAFA none;
}
 
button.ui-state-hover,
input.ui-state-hover {
	color: #212121;
	border: 1px solid #999999;
	background: #EBEBEB none;
}
 
button.ui-state-active,
input.ui-state-active {
	color: #212121;
	border: 1px solid #AAAAAA;
	background: #DCDCDC none;
}
Je me dis que c'est exactement ce dont j'ai besoin :
  • un bouton état défaut
  • un bouton état hover
  • un bouton état active
et autant d'occurrence de cette triplette que de boutons sur ma question !
Est-ce juste ?
Et si oui, où dois-je ajouter mon code ?
Y a-t-il un emplacement spécifique pour les questions à choix multiples ?
Merci.

Please Log in to join the conversation.

More
4 years 3 months ago #96454 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
@Denis,
En utilisant la solution avec js,
$(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");
     }
  });
});
je constate un comportement dont je ne trouve pas la cause :
Il est nécessaire de cliquer deux fois sur un bouton pour qu'il soit sélectionné et considéré comme coché.
Une idée ?
Le questionnaire est ici .

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #96458 by DenisChenu
DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Oui,

C'est du au fonction javascript déjà associée ... zut.
En fait : test si la case est coc

Il me semble que il n'ya pas de onchange event sur l'état du bouton. Peut être le "$().on("input.checbox","change") ferait l'affaire.

Par contre : à tester et valider.

A voir aussi:
- ejohn.org/blog/how-javascript-timers-work/
- github.com/nickyleach/jQuery.bindLast

Ou peut être: retire l'événement par défaut du label, puis : l'éxécuter (click sur le checbox) et tester.

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 3 months ago by DenisChenu.

Please Log in to join the conversation.

More
4 years 3 months ago - 4 years 3 months ago #96500 by DenisChenu
DenisChenu replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Grâce à Philippe, j'ai pu travailler sur cet habillage.


Le choix :
- Dans les réponses/qous-question : <span id="titre">Le titre comme on veut</span>
- Les images dans le répertoire du questionnaire, sous répertoire images
3 fichiers à modifier:
startpage.pstpl: ajouter:
<script><!--
    templateurl="{TEMPLATEURL}";
    surveyid="{SID}";
    --></script>

Fichier template.js: ajout d'une fonction (celle ci se lance dans le document.ready)
function updateImgLabel(){
    $(".subquestions-list label span,.answers-list label span").each(function(){
        var thispan=$(this);
        var thispicture=$(this).attr("id");
        var thislabel=$(this).closest("label");
        var ncimg = document.createElement("img");
        ncimg.src = templateurl+"../../surveys/"+surveyid+"/images/"+thispicture+".png?" + new Date().getTime();
        ncimg.className="unchecked";
        var cimg = document.createElement("img");
        cimg.src = templateurl+"../../surveys/"+surveyid+"/images/"+thispicture+"Oui.png?" + new Date().getTime();
        cimg.className="checked";
        $(ncimg).load(function(){
            var w = ncimg.width;
            var h = ncimg.height;
            thislabel.closest("li").find("input.checkbox").hide();
            thislabel.closest("li").find("input.radio").hide();
            thispan.addClass("hide");
            thislabel.addClass("withimage").width(w).height(h);
            thislabel.append(ncimg).append(cimg);
        });
    });
    $(".subquestions-list").delegate("label","click",function(event){
        $(this).toggleClass("checked").toggleClass("unchecked");
    });
    $(".answers-list").delegate("label","click",function(event){
        $(this).closest(".answers").find("label").removeClass("checked").addClass("unchecked");
        $(this).addClass("checked").removeClass("unchecked");
    });
    $(".subquestions-list input[type=checkbox],.answers-list input[type=radio]").each(function(){
        if($(this).is(':checked')){
            $(this).closest(".answer-item").find("label").addClass("checked");
        }else{
            $(this).closest(".answer-item").find("label").addClass("unchecked");
        }
    });
}
/* Bouton personnalisé */
label.withimage{padding:5px 5px 5px 5px}
label.withimage:hover,label.withimage.hover{padding:4px 6px 6px 4px}
label.unchecked img.checked{display:none;}
label.checked img.unchecked{display:none;}

Merci Philippe :)

Denis
PS: mon flattr flattr.com/profile/shnoulle

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 3 months ago by DenisChenu. Reason: Correction du code js
The following user(s) said Thank You: Philipppe

Please Log in to join the conversation.

More
4 years 3 months ago #96512 by Philipppe
Philipppe replied the topic: "Habillage" des boutons radio et/ou type de quetion personnalisé
Super merci @Denis :
Très efficace, et très simple à mettre en oeuvre pour moi maintenant !
J'ai plus qu'à me "rattraper" sur les traductions ....
Je mettrai un lien vers le résultat complet en fin de semaine ..., pour donner des envies de zolis questionnaires ergonomiques .....

Please Log in to join the conversation.

Moderators: Nickko

Start now!

Just create your account and start using Limesurvey today.

Register now