Styling radio elements as checkboxes and vice versa

Plus d'informations
il y a 2 mois 3 semaines #182242 par krosser
Hi guys,

I would like to style radio elements in a list (radio) question to look like checkboxes and the other way round - checkboxes in a multiple-choice question as radio elements. I need that for style consistency of questions in different modules/groups. I guess it should be possible with JS, right? Searching for similar threads didn't give anything. Would appreciate any advice. Thanks!

Fichier attaché :

Nom du fichier : limesurvey...9154.lss
Taille du ficher :18 ko

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 2 mois 3 semaines #182248 par DenisChenu
???? Tell me a real good reason to do this …

Else start by something like this at end of your template.css
.radio-item label::before {
  border-radius: 3px;
}
.radio-item input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";
}
.checkbox-item label::before {
  border-radius: 50%;
}
.checkbox-item input[type="checkbox"]:checked label::after {
  background:#000;
  border-radius: 50%;
  content: "";
}

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .
Les utilisateur(s) suivant ont remercié: krosser

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 3 semaines #182267 par holch
Radio buttons and check boxes are not a layout or design choice, but people have actually learned that those things have different behaviours. users generally know that you can only choose one option out of several radio buttons and that you can mark more than one check box in a set of check boxes.

Design should not change this learned behaviour, it would be a usability disaster.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Les utilisateur(s) suivant ont remercié: DenisChenu

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182383 par jelo

holch écrit: Design should not change this learned behaviour, it would be a usability disaster.

Let's wait for the reason. Perhaps to have subquestion relevance on single choice question?

I have learned, that e.g. radio button click cannot be taken back. You had to place a reset button in that form.
But most forms and survey-tools now allow to remove a radio button click and make the question unanswered. Not the default behavior, but an improvement. LimeSurvey follows the old way (once radio button is clicked, you cannot make the question unanswered).

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Les utilisateur(s) suivant ont remercié: krosser

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines - il y a 2 mois 2 semaines #182387 par DenisChenu

jelo écrit: But most forms and survey-tools now allow to remove a radio button click and make the question unanswered. Not the default behavior, but an improvement. …

Totally unaccessible and not a11y or RGAA compatible …

IOf not because other tool don't care about accessibility we must don't care too …

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .
Dernière édition: il y a 2 mois 2 semaines par DenisChenu.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines - il y a 2 mois 2 semaines #182426 par jelo

DenisChenu écrit: Of not because other tool don't care about accessibility we must don't care too …

I don't force anyone to care. I personally don't care about radio button deselction. I just described surveytools out of the LimeSurvey bubble ;-) People will come, check and then leave or stick. Voting with the feet is the strongest signal. E.g. www.limesurvey.org/forum/can-i-do-this-w...ecking-radio-buttons

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Dernière édition: il y a 2 mois 2 semaines par jelo.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182468 par krosser

DenisChenu écrit: ???? Tell me a real good reason to do this …

Else start by something like this at end of your template.css

.radio-item label::before {
  border-radius: 3px;
}
.radio-item input[type="radio"]:checked + label::after {
  font-family: "FontAwesome";
  content: "\f00c";
}
.checkbox-item label::before {
  border-radius: 50%;
}
.checkbox-item input[type="checkbox"]:checked label::after {
  background:#000;
  border-radius: 50%;
  content: "";
}



Thanks for the hint. It doesn't look nice in the latest LS version but gives something to play around.
The reason for changing them is that it was requested by a colleague. There are 2 question groups and in one there are multiple choice questions but set as radio lists, using exclusive choices on some or all answer choices. I had to use the multiple-choice type because it is the only one that has comments setting to each answer. When using the radio list, you don't have such an option. I just had to hide some comment boxes in certain questions. There is only one question that has no comment boxes and that is why a simple radio list could be used. The request was to make it look like the rest of the questions in the group, that is all.

I hope that clarifies a bit.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines - il y a 2 mois 2 semaines #182469 par krosser

holch écrit: Radio buttons and check boxes are not a layout or design choice, but people have actually learned that those things have different behaviours. users generally know that you can only choose one option out of several radio buttons and that you can mark more than one check box in a set of check boxes.

Design should not change this learned behaviour, it would be a usability disaster.


Well, unfortunately, it is not always the case and people who rarely fill out surveys don't know or care about the common usage of icons, symbols, etc. And some people prefer consistency in styling in one single survey regardless of other surveys.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Dernière édition: il y a 2 mois 2 semaines par krosser.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines - il y a 2 mois 2 semaines #182470 par holch

people who rarely fill out surveys don't know or care about the common usage of icons, symbols, etc.


I agree with your point that they don't care.

However, generally user research shows that they want it to work as they are used to. It generally is long learned behaviour and they get confused when things don't work how they are used to. It is nothing they think about, it is deeply ingrained.

However, from your description I see that it seems to be one of the cases that Jelo is mentioning.

You are are basically using a multipe answer question as if it were a single answer question, because of the limits and question design. So if they can only choose one answer, than the radio box layout is actually the one they would be used to.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Dernière édition: il y a 2 mois 2 semaines par holch.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182473 par DenisChenu

krosser écrit: I just had to hide some comment boxes in certain questions. There is only one question that has no comment boxes and that is why a simple radio list could be used.

You need a radio button + a comment checkbox.

Then why not use a manual.limesurvey.org/Question_type_-_List_with_comment question type ( see sample )
You can use Expression Manager to disable comments on some option (and add some javascript for dynamic set disable on the textearea).
Or more easy : a single choice radio + a long text with relevance condition (and then it's exactly the same desing than other radio list question).

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .
Les utilisateur(s) suivant ont remercié: tpartner

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182532 par krosser
I need an individual comment box next to several answer choices and one single comment box for all wouldn't work for that.
A single choice radio + text field can be joined with CSS but it would be too many separate questions in a group inside the LS editor, too problematic for coding.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182541 par tpartner

I need an individual comment box next to several answer choices and one single comment box for all wouldn't work for that.

Why not? They can only select one answer so why the need for multiple text inputs? I think Denis' second suggestion is perfect - a list radio followed by a text question displayed conditionally on the radios answer.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Les utilisateur(s) suivant ont remercié: DenisChenu

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182557 par krosser
Well, I see your point and it makes sense in case of a radio list question to have only one comment box. The thing is that only a few answer choices need comments/specification and I guess I would need to add 'specify' at the end of those answer choices and leave one box. But I went for a multiple choice with individual boxes next to those answer choices, making them exclusive of each other.

The design issue came up when there are almost all multiple-choice questions (with and without comments) in another group with only one simple radio list question, which stood out of the crowd in checkboxes design. So, I was asked to change radio buttons to checkboxes buttons for design consistency. But it doesn't look nice with CSS.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182601 par DenisChenu

krosser écrit: The thing is that only a few answer choices need comments/specification and I guess I would need to add 'specify' at the end of those answer choices and leave one box.

Use relevance equation (or condition GUI editor) to show the comment box only for checked choice.

Why do complex when it can be simple …

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand .
An error happen ? Before make a new topic : remind the Debug mode .
Les utilisateur(s) suivant ont remercié: tpartner

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 2 mois 2 semaines #182608 par krosser

DenisChenu écrit: Use relevance equation (or condition GUI editor) to show the comment box only for checked choice.

Why do complex when it can be simple …


Did you mean the "question validation equation"? But I didn't know that the comment box can be conditioned to be either shown or not using equations. Do you have an example?

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!