Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Styling radio elements as checkboxes and vice versa

  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 3 days ago #182242 by 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!

File Attachment:

File Name: limesurvey...9154.lss
File Size:18 KB

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 3 days ago #182248 by DenisChenu
???? Tell me a real good reason to do this …

Else start by something like this at end of your template.css
Code:
.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 , plugin development .
I don't answer to private message.
The following user(s) said Thank You: krosser
The topic has been locked.
  • holch
  • holch's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 2 days ago #182267 by 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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The following user(s) said Thank You: DenisChenu
The topic has been locked.
More
5 years 1 day ago #182383 by jelo

holch wrote: 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
The following user(s) said Thank You: krosser
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 23 hours ago - 5 years 23 hours ago #182387 by DenisChenu

jelo wrote: 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 , plugin development .
I don't answer to private message.
Last edit: 5 years 23 hours ago by DenisChenu.
The topic has been locked.
More
5 years 1 hour ago - 5 years 1 hour ago #182426 by jelo

DenisChenu wrote: 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
Last edit: 5 years 1 hour ago by jelo.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 11 months ago #182468 by krosser

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

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

Code:
.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.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 11 months ago - 4 years 11 months ago #182469 by krosser

holch wrote: 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.22 hosted on LS servers, not installed locally.
Last edit: 4 years 11 months ago by krosser.
The topic has been locked.
  • holch
  • holch's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago - 4 years 11 months ago #182470 by 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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Last edit: 4 years 11 months ago by holch.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #182473 by DenisChenu

krosser wrote: 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 , plugin development .
I don't answer to private message.
The following user(s) said Thank You: tpartner
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 11 months ago #182532 by 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.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #182541 by 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.
The following user(s) said Thank You: DenisChenu
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose