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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 11 months ago #196779 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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196780 by tpartner
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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 11 months ago #196781 by KhemrajC
Hi,

v3.22

Also, the options are displayed vertically, as usual.

Thanks

Best regards
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago - 3 years 11 months ago #196784 by tpartner
You can increase the radio button size and add colours by adding something like this to the question source:

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:

File Attachment:

File Name: limesurvey...4-11.lss
File Size:26 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 3 years 11 months ago by tpartner.
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 11 months ago #196785 by KhemrajC
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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196793 by tpartner
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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 11 months ago #196794 by KhemrajC
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 topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196796 by Joffm
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

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #196804 by tpartner
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.

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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 11 months ago #196811 by KhemrajC
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
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
3 years 11 months ago #196812 by KhemrajC
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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago - 3 years 11 months ago #196881 by tpartner
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:

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:

File Attachment:

File Name: limesurvey...3812.lss
File Size:27 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 3 years 11 months ago by tpartner.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose