Color Coded Radio Button in Single Choice Question

More
2 months 3 weeks 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

Please Log in to join the conversation.

LimeSurvey Partners
More
2 months 3 weeks 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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
2 months 3 weeks ago #196781 by KhemrajC
Hi,

v3.22

Also, the options are displayed vertically, as usual.

Thanks

Best regards

Please Log in to join the conversation.

More
2 months 3 weeks ago - 2 months 3 weeks ago #196784 by tpartner
You can increase the radio button size and add colours by adding something like this to the question source:

<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.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 2 months 3 weeks ago by tpartner.

Please Log in to join the conversation.

More
2 months 3 weeks 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

Please Log in to join the conversation.

More
2 months 3 weeks 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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
2 months 3 weeks 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

Please Log in to join the conversation.

More
2 months 3 weeks ago #196796 by Joffm
Well, many things are already discussed in the forum, like this one:
https://www.limesurvey.org/forum/can-i-do-this-with-limesurvey/108498-automatically-proceed-to-next-question-after-selecting-answer?start=30#171523

A long thred, but read it.

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
2 months 3 weeks 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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
2 months 3 weeks 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

Please Log in to join the conversation.

More
2 months 3 weeks 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

Please Log in to join the conversation.

More
2 months 3 weeks ago - 2 months 3 weeks 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:

<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-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)

<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.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 2 months 3 weeks ago by tpartner.

Please Log in to join the conversation.

More
2 months 3 weeks ago #196895 by KhemrajC
Hi,

Thanks a lot, indeed very helpful.

Best regards

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now