- Posts: 89
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Color Coded Radio Button in Single Choice Question
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
3 years 11 months ago #196779
by KhemrajC
Color Coded Radio Button in Single Choice Question was created by KhemrajC
Hi,
I have a single choice question with four options which represents a certain condition (severe, high, mild, low).
I wish to associate a specific color coding to the radio buttons. Just a colored circle would not be that impactful unless it is thick or have a backdrop.
The idea of coloring the texts is not appealing.
Please bear in mind, I do not have access to Admin Settings.
Thank you for much anticipated suggestions and solutions.
Best regards
I have a single choice question with four options which represents a certain condition (severe, high, mild, low).
I wish to associate a specific color coding to the radio buttons. Just a colored circle would not be that impactful unless it is thick or have a backdrop.
The idea of coloring the texts is not appealing.
Please bear in mind, I do not have access to Admin Settings.
Thank you for much anticipated suggestions and solutions.
Best regards
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10633
- Thank you received: 3697
3 years 11 months ago #196780
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Color Coded Radio Button in Single Choice Question
LimeSurvey version?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #196781
by KhemrajC
Replied by KhemrajC on topic Color Coded Radio Button in Single Choice Question
Hi,
v3.22
Also, the options are displayed vertically, as usual.
Thanks
Best regards
v3.22
Also, the options are displayed vertically, as usual.
Thanks
Best regards
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10633
- Thank you received: 3697
3 years 11 months ago - 3 years 11 months ago #196784
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Color Coded Radio Button in Single Choice Question
You can increase the radio button size and add colours by adding something like this to the question source:
Sample survey attached:
Code:
<style type="text/css"> #question{QID} .radio-item label { padding-left: 8px; } #question{QID} .radio-item label::before { width: 20px; height: 20px; left: 0; top: 0; border: 3px solid #ccc; } #question{QID} .radio-item label::after { width: 12px; height: 12px; left: 4px; top: 4px; } #question{QID} .radio-item:nth-child(1) label::before { border-color: red; } #question{QID} .radio-item:nth-child(2) label::before { border-color: orange; } #question{QID} .radio-item:nth-child(3) label::before { border-color: yellow; } #question{QID} .radio-item:nth-child(4) label::before { border-color: green; } #question{QID} .radio-item:nth-child(1) input[type="radio"]:checked + label::after { background: red; } #question{QID} .radio-item:nth-child(2) input[type="radio"]:checked + label::after { background: orange; } #question{QID} .radio-item:nth-child(3) input[type="radio"]:checked + label::after { background: yellow; } #question{QID} .radio-item:nth-child(4) input[type="radio"]:checked + label::after { background: green; } </style>
Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 3 years 11 months ago by tpartner.
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #196785
by KhemrajC
Replied by KhemrajC on topic Color Coded Radio Button in Single Choice Question
Hi,
That's was really super quick!
Can it be modified as such if one radio is selected, all of the other are deselected and focus is immediately onto the next question?
Thank you very much.
Best regards
That's was really super quick!
Can it be modified as such if one radio is selected, all of the other are deselected and focus is immediately onto the next question?
Thank you very much.
Best regards
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10633
- Thank you received: 3697
3 years 11 months ago #196793
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Color Coded Radio Button in Single Choice Question
Err...it's a single choice question so by definition all others are deselected when clicking an item
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #196794
by KhemrajC
Replied by KhemrajC on topic Color Coded Radio Button in Single Choice Question
Hi,
The idea is that is to immediately move to or scroll down to the next question.
If the Red Radio is checked, this is an emergency, I want to immediately display the emergency details which is in the next question as a text display.
Thanks and regards
The idea is that is to immediately move to or scroll down to the next question.
If the Red Radio is checked, this is an emergency, I want to immediately display the emergency details which is in the next question as a text display.
Thanks and regards
The topic has been locked.
- Joffm
- Away
- LimeSurvey Community Team
Less
More
- Posts: 12788
- Thank you received: 3940
3 years 11 months ago #196796
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Color Coded Radio Button in Single Choice Question
Well, many things are already discussed in the forum, like this one:
www.limesurvey.org/forum/can-i-do-this-w...swer?start=30#171523
A long thred, but read it.
Joffm
www.limesurvey.org/forum/can-i-do-this-w...swer?start=30#171523
A long thred, but read it.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10633
- Thank you received: 3697
3 years 11 months ago #196804
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Color Coded Radio Button in Single Choice Question
Despite my contribution to that thread, I am against submitting the page as soon as a radio is clicked. It gives no opportunity to fix a mistaken click.
Also, you cannot scroll to an element if there is already enough room on the screen to display all elements.
An alternative may be to place the text-displays in pop-up modals.
Also, you cannot scroll to an element if there is already enough room on the screen to display all elements.
An alternative may be to place the text-displays in pop-up modals.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #196811
by KhemrajC
Replied by KhemrajC on topic Color Coded Radio Button in Single Choice Question
Hi,
Thank you for your guidance.
I managed it by using ScrollTop javascript function to scroll down to a particular DIV ID which I put at the end of the question in focus because the following question is a hidden one and is displayed depending upon the choice of radio checked.
Best regards
Thank you for your guidance.
I managed it by using ScrollTop javascript function to scroll down to a particular DIV ID which I put at the end of the question in focus because the following question is a hidden one and is displayed depending upon the choice of radio checked.
Best regards
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
3 years 11 months ago #196812
by KhemrajC
Replied by KhemrajC on topic Color Coded Radio Button in Single Choice Question
Hi,
I am also against the logic of submitting.
In this context, I wish to immediately alert on emergency details to be contacted.
I supposed that the emergency details would no longer be in a question type of text display and this could be avoided.
All details would be in the popup.
It would be nice to have an example of a popup modal.
Thanks and regards
I am also against the logic of submitting.
In this context, I wish to immediately alert on emergency details to be contacted.
I supposed that the emergency details would no longer be in a question type of text display and this could be avoided.
All details would be in the popup.
It would be nice to have an example of a popup modal.
Thanks and regards
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10633
- Thank you received: 3697
3 years 11 months ago - 3 years 11 months ago #196881
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Color Coded Radio Button in Single Choice Question
You could still leave the emergency details in text-display questions (for ease of editing) and insert those questions into modals.
Place your text-display questions directly after the list-radio and place this script in the source of the list-radio:
Having said that, you could also place the emergency details directly in the list-radio question and hide/show them depending on which radio is clicked. (I would do that via JavaScript to avoid problems with the editor destroying HTML tags in Expression Manager strings)
Here is a sample survey showing both of those methods:
Place your text-display questions directly after the list-radio and place this script in the source of the list-radio:
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Insert the modals $('input:radio', thisQuestion).each(function(i) { $('body').append('<div class="modal inserted-modal fade" id="inserted-modal-'+i+1+'" aria-hidden="true" data-backdrop="static" data-keyboard="false">\ <div class="modal-dialog" role="document">\ <div class="modal-content">\ <div class="modal-body"></div>\ <div class="modal-footer">\ <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\ </div>\ </div>\ </div>\ </div>'); $('#inserted-modal-'+i+1+' .modal-body').append($(thisQuestion).nextAll('.boilerplate:eq('+i+')').find('.question-text')); }); // Remove the text-display questions $(thisQuestion).nextAll('.boilerplate:lt('+$('input:radio', thisQuestion).length+')').remove(); // Listeners on the radios $('input:radio', thisQuestion).on('click', function(e) { var thisIndex = $(this).closest('.answer-item').index(); $('#inserted-modal-'+thisIndex+1+'').modal('show'); }); }); </script>
Having said that, you could also place the emergency details directly in the list-radio question and hide/show them depending on which radio is clicked. (I would do that via JavaScript to avoid problems with the editor destroying HTML tags in Expression Manager strings)
Code:
<p>Some question text...</p> <p class="conditional-text" style="display:none; color:red;">Conditional text for option 1...</p> <p class="conditional-text" style="display:none; color:orange;">Conditional text for option 2...</p> <p class="conditional-text" style="display:none; color:#CDCD00;">Conditional text for option 3...</p> <p class="conditional-text" style="display:none; color:green;">Conditional text for option 4...</p> <script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Listeners on the radios $('input:radio', thisQuestion).on('click', function(e) { $('.question-text .conditional-text', thisQuestion).hide(); var thisIndex = $(this).closest('.answer-item').index(); $('.question-text .conditional-text:eq('+thisIndex+')', thisQuestion).fadeIn(300); }); }); </script>
Here is a sample survey showing both of those methods:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 3 years 11 months ago by tpartner.
The topic has been locked.