Welcome, Guest
Username: Password:

TOPIC: Bold current question or add a check mark when answered

Bold current question or add a check mark when answered 3 years 1 month ago #94159

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hello,

I have a survey that has multiple questions with conditions per page. Is there a way that I could add something to the template so that the next question that needs to be answered is in bold or a different color. Or is there a way to add a check next to the question that was just answered? For example I am asking the following:

Have you ever been diagnosed with cancer?
(if yes then the following question appears)
Have you ever been diagnosed with breast cancer?
(if yes the following question appears)
Were you younger than 50 when you were diagnosed?

There are several questions per page which tends to make participants lose their place on the sheet once the conditional questions appear.

Thank you for your help in advance! :)

Kat
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 1 month ago #94194

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5759
  • Thank you received: 1250
  • Karma: 512
Well, determining "the next question that needs to be answered" would be a little tricky but you could use JavaScript to apply "unanswered" and "answered" classes to questions.

Add this to the end of template.js. This will put listeners on the questions and toggle a class as they are answered. (the criteria for defining "answered" is in the code comments) I just did this quickly for the following question types but others could be added easily.
list-radio
- yes-no
- gender
- choice-5-pt-radio
- list-with-comment
- list-dropdown
- text-short
- text-long
- text-huge
- multiple-short-text
- multiple-option
- array
- array-numbers
	$(document).ready(function() { 
 
		// Initial "answered" states
		$('div[id^="question"]').addClass('unanswered');
		$('div[id^="question"] tr[id^="javatbd"]').addClass('unanswered');
		$('input.radio:checked, input.checkbox:checked, select[id^="answer"][value!=""], input.text[value!=""], textarea.textarea[value!=""]').each(function(i) {
			handleAnswers(this);
		});		
 
		// Listeners on the answers
		$('input.radio, input.checkbox').click(function(){
			 handleAnswers(this);
		});
		$('select[id^="answer"], input.text, textarea.textarea').change(function(){
			 handleAnswers(this);
		});	
		$('input.text, textarea.textarea').keyup(function(){
			 handleAnswers(this);
		});
		$('.array-flexible-row tr[id^="javatbd"] td').click(function(){
			 handleAnswers($('input.radio', this));
		});
	});
 
	// A function to test for answered questions
	function handleAnswers(input) {
		var parentQuestion = $(input).closest('div[id^="question"]');
		var parentRow = $(input).closest('tr[id^="javatbd"]');
 
		// Radio lists (anything checked)
		if($(parentQuestion).hasClass('list-radio') || $(parentQuestion).hasClass('yes-no') || $(parentQuestion).hasClass('gender') || $(parentQuestion).hasClass('choice-5-pt-radio') || $(parentQuestion).hasClass('list-with-comment')) {
			markAnswered(parentQuestion);
		}
		// Dropdown lists (anything selected)
		else if($(parentQuestion).hasClass('list-dropdown')) {
			if($(input).val() != '') {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
		// Short-text, long-text, huge-text and numeric (any value in the input)
		else if($(parentQuestion).hasClass('text-short') || $(parentQuestion).hasClass('text-long') || $(parentQuestion).hasClass('text-huge') || $(parentQuestion).hasClass('numeric')) {
			if($(input).val() != '') {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
		// Multi-short-text (all inputs must have a value)
		else if($(parentQuestion).hasClass('multiple-short-txt')) {
			if($('input.text[value!=""]', parentQuestion).length == $('input.text', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
		// Array (all rows must have a checked radio)
		else if($(parentQuestion).hasClass('array-flexible-row')) {
			if($('input.radio:checked', parentQuestion).length == $('tr[id^="javatbd"]', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			markAnswered(parentRow);
		}
		// Array-numbers (all dropdowns must have a value)
		else if($('.multiflexiselect', parentQuestion).length != 0) {
			if($('.multiflexiselect[value!=""]', parentQuestion).length == $('.multiflexiselect', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			if($('.multiflexiselect[value!=""]', parentRow).length == $('.multiflexiselect', parentRow).length) {
				markAnswered(parentRow);
			}
			else {
				markUnanswered(parentRow);
			}
		}
		// Multiple options (at least one option checked)
		else if($(parentQuestion).hasClass('multiple-opt')) {
			if($('input.checkbox:checked', parentQuestion).length != 0) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
	}
 
	// Assign classes to "answered" questions
	function markAnswered(el) {
		$(el).removeClass('unanswered').addClass('answered');
	}
	function markUnanswered(el) {
		$(el).removeClass('answered').addClass('unanswered');
	}

Then, you can add something like this to the end of template.css to change the text colour of answered questions (or maybe insert your "check mark").
.unanswered {
	color: #CC3300;
}
 
.answered {
	color: #006600;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: kateibe

Bold current question or add a check mark when answered 3 years 1 month ago #94196

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hi Tony,

Thank you so much for your solution! It worked perfectly!

Kat
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 1 month ago #94256

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hello again,

One more question. I am now using the Numerical input slider scale as one of the question types and I cannot figure out how to update the template.js file so that these questions also change colors when answered.

I am using the slider question: docs.limesurvey.org/tiki-download_wiki_a...?attId=71&download=y

Thank you so much for your help!

Kat :)
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 1 month ago #94272

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5759
  • Thank you received: 1250
  • Karma: 512
Hi Kat,

Here is the JavaScript modified to handle multi-numerics with and without sliders. It also now toggles the "answered" class on the individual multi-short-text and multi-numeric sub-questions so you can display them as in the image below.
	$(document).ready(function() { 
 
		// Initial "answered" states
		$('div[id^="question"]').addClass('unanswered');
		$('div[id^="question"] tr[id^="javatbd"]').addClass('unanswered');
		$('div[id^="question"] li[id^="javatbd"]').addClass('unanswered');
		$('input.radio:checked, input.checkbox:checked, select[id^="answer"][value!=""], input.text[value!=""], textarea.textarea[value!=""]').each(function(i) {
			handleAnswers(this);
		});		
 
		// Listeners on the answers
		$('input.radio, input.checkbox').click(function(){
			 handleAnswers(this);
		});
		$('select[id^="answer"], input.text, textarea.textarea').change(function(){
			 handleAnswers(this);
		});	
		$('input.text, textarea.textarea').keyup(function(){
			 handleAnswers(this);
		});
		$('.array-flexible-row tr[id^="javatbd"] td').click(function(){
			 handleAnswers($('input.radio', this));
		});
		$('.ui-slider').slider( 'option', 'stop', function( event, ui ) {
			var basename = $(this).closest('div.multinum-slider').attr('id').substr(10);
			var slider_divisor = $('#slider-param-divisor-' + basename).attr('value');
			var slider_stepping = $('#slider-param-stepping-' + basename).attr('value');
			var slider_prefix = $('#slider-prefix-' + basename).attr('value');
			var slider_suffix = $('#slider-suffix-' + basename).attr('value');
			var thevalue = slider_stepping * Math.round(ui.value / slider_stepping) / slider_divisor;
			$('#slider-callout-'+basename).css('left', $(ui.handle).css('left')).text(slider_prefix + thevalue + slider_suffix);
			handleAnswers(this);
		});
	});
 
	// A function to test for answered questions
	function handleAnswers(input) {
		var parentQuestion = $(input).closest('div[id^="question"]');
		var parentRow = $(input).closest('tr[id^="javatbd"]');
		var parentListItem = $(input).closest('li[id^="javatbd"]');
 
		// Radio lists (anything checked)
		if($(parentQuestion).hasClass('list-radio') || $(parentQuestion).hasClass('yes-no') || $(parentQuestion).hasClass('gender') || $(parentQuestion).hasClass('choice-5-pt-radio') || $(parentQuestion).hasClass('list-with-comment')) {
			markAnswered(parentQuestion);
		}
		// Dropdown lists (anything selected)
		else if($(parentQuestion).hasClass('list-dropdown')) {
			if($(input).val() != '') {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
		// Short-text, long-text, huge-text and numeric (any value in the input)
		else if($(parentQuestion).hasClass('text-short') || $(parentQuestion).hasClass('text-long') || $(parentQuestion).hasClass('text-huge') || $(parentQuestion).hasClass('numeric')) {
			if($(input).val() != '') {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
		// Multi-numeric with sliders (sliders must be moved)
		else if($(parentQuestion).hasClass('numeric-multi') && $('.ui-slider', parentQuestion).length > 0) {
			markAnswered(parentListItem);
			if($('li[id^="javatbd"].unanswered', parentQuestion).length == 0) {
				markAnswered(parentQuestion);
			}
		}
		// Multi-short-text & multi-numeric (all inputs must have a value)
		else if($(parentQuestion).hasClass('multiple-short-txt') || $(parentQuestion).hasClass('numeric-multi')) {
			if($('input.text[value!=""]', parentQuestion).length == $('input.text', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			if($(input).val() != '') {
				markAnswered(parentListItem);
			}
			else {
				markUnanswered(parentListItem);
			}
		}
		// Array (all rows must have a checked radio)
		else if($(parentQuestion).hasClass('array-flexible-row')) {
			if($('input.radio:checked', parentQuestion).length == $('tr[id^="javatbd"]', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			markAnswered(parentRow);
		}
		// Array-numbers (all dropdowns must have a value)
		else if($('.multiflexiselect', parentQuestion).length != 0) {
			if($('.multiflexiselect[value!=""]', parentQuestion).length == $('.multiflexiselect', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			if($('.multiflexiselect[value!=""]', parentRow).length == $('.multiflexiselect', parentRow).length) {
				markAnswered(parentRow);
			}
			else {
				markUnanswered(parentRow);
			}
		}
		// Multiple options (at least one option checked)
		else if($(parentQuestion).hasClass('multiple-opt')) {
			if($('input.checkbox:checked', parentQuestion).length != 0) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
	}
 
	// Assign classes to "answered" questions
	function markAnswered(el) {
		$(el).removeClass('unanswered').addClass('answered');
	}
	function markUnanswered(el) {
		$(el).removeClass('answered').addClass('unanswered');
	}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: kateibe

Bold current question or add a check mark when answered 3 years 1 month ago #94283

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hi Tony,

Thank you so much for your prompt response! It is almost perfect with the exception that now the "radio list" answers do not change colors when answered (see image below) Please advise. Thank you so much for all your help!

Kat
Attachments:
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 1 month ago #94303

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5759
  • Thank you received: 1250
  • Karma: 512
Oops, bug! :)

Use this:

	$(document).ready(function() { 
 
		// Initial "answered" states
		$('div[id^="question"]').addClass('unanswered');
		$('div[id^="question"] tr[id^="javatbd"]').addClass('unanswered');
		$('div[id^="question"].multiple-short-txt li[id^="javatbd"], div[id^="question"].numeric-multi li[id^="javatbd"]').addClass('unanswered');
		$('input.radio:checked, input.checkbox:checked, select[id^="answer"][value!=""], input.text[value!=""], textarea.textarea[value!=""]').each(function(i) {
			handleAnswers(this);
		});		
 
		// Listeners on the answers
		$('input.radio, input.checkbox').click(function(){
			 handleAnswers(this);
		});
		$('select[id^="answer"], input.text, textarea.textarea').change(function(){
			 handleAnswers(this);
		});	
		$('input.text, textarea.textarea').keyup(function(){
			 handleAnswers(this);
		});
		$('.array-flexible-row tr[id^="javatbd"] td').click(function(){
			 handleAnswers($('input.radio', this));
		});
		$('.ui-slider').slider( 'option', 'stop', function( event, ui ) {
			var basename = $(this).closest('div.multinum-slider').attr('id').substr(10);
			var slider_divisor = $('#slider-param-divisor-' + basename).attr('value');
			var slider_stepping = $('#slider-param-stepping-' + basename).attr('value');
			var slider_prefix = $('#slider-prefix-' + basename).attr('value');
			var slider_suffix = $('#slider-suffix-' + basename).attr('value');
			var thevalue = slider_stepping * Math.round(ui.value / slider_stepping) / slider_divisor;
			$('#slider-callout-'+basename).css('left', $(ui.handle).css('left')).text(slider_prefix + thevalue + slider_suffix);
			handleAnswers(this);
		});
	});
 
	// A function to test for answered questions
	function handleAnswers(input) {
		var parentQuestion = $(input).closest('div[id^="question"]');
		var parentRow = $(input).closest('tr[id^="javatbd"]');
		var parentListItem = $(input).closest('li[id^="javatbd"]');
 
		// Radio lists (anything checked)
		if($(parentQuestion).hasClass('list-radio') || $(parentQuestion).hasClass('yes-no') || $(parentQuestion).hasClass('gender') || $(parentQuestion).hasClass('choice-5-pt-radio') || $(parentQuestion).hasClass('list-with-comment')) {
			markAnswered(parentQuestion);
		}
		// Dropdown lists (anything selected)
		else if($(parentQuestion).hasClass('list-dropdown')) {
			if($(input).val() != '') {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
		// Short-text, long-text, huge-text and numeric (any value in the input)
		else if($(parentQuestion).hasClass('text-short') || $(parentQuestion).hasClass('text-long') || $(parentQuestion).hasClass('text-huge') || $(parentQuestion).hasClass('numeric')) {
			if($(input).val() != '') {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
		// Multi-numeric with sliders (sliders must be moved)
		else if($(parentQuestion).hasClass('numeric-multi') && $('.ui-slider', parentQuestion).length > 0) {
			markAnswered(parentListItem);
			if($('li[id^="javatbd"].unanswered', parentQuestion).length == 0) {
				markAnswered(parentQuestion);
			}
		}
		// Multi-short-text & multi-numeric (all inputs must have a value)
		else if($(parentQuestion).hasClass('multiple-short-txt') || $(parentQuestion).hasClass('numeric-multi')) {
			if($('input.text[value!=""]', parentQuestion).length == $('input.text', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			if($(input).val() != '') {
				markAnswered(parentListItem);
			}
			else {
				markUnanswered(parentListItem);
			}
		}
		// Array (all rows must have a checked radio)
		else if($(parentQuestion).hasClass('array-flexible-row')) {
			if($('input.radio:checked', parentQuestion).length == $('tr[id^="javatbd"]', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			markAnswered(parentRow);
		}
		// Array-numbers (all dropdowns must have a value)
		else if($('.multiflexiselect', parentQuestion).length != 0) {
			if($('.multiflexiselect[value!=""]', parentQuestion).length == $('.multiflexiselect', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			if($('.multiflexiselect[value!=""]', parentRow).length == $('.multiflexiselect', parentRow).length) {
				markAnswered(parentRow);
			}
			else {
				markUnanswered(parentRow);
			}
		}
		// Multiple options (at least one option checked)
		else if($(parentQuestion).hasClass('multiple-opt')) {
			if($('input.checkbox:checked', parentQuestion).length != 0) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
		}
	}
 
	// Assign classes to "answered" questions
	function markAnswered(el) {
		$(el).removeClass('unanswered').addClass('answered');
	}
	function markUnanswered(el) {
		$(el).removeClass('answered').addClass('unanswered');
	}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: kateibe

Bold current question or add a check mark when answered 3 years 1 month ago #94308

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Thank you so much!! It is perfect! :cheer:
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 3 weeks ago #94539

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hi again,

Thank you again for all your previous help! It seems that there is a bug with the "array-flexible-row" questions, and I cannot figure it out. Do you have any suggestions for changes to the code below to make it work? thank you so much!

Kat
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 3 weeks ago #94573

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5759
  • Thank you received: 1250
  • Karma: 512
Seems to work fine for me. Can describe the "bug" a little more?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: kateibe

Bold current question or add a check mark when answered 3 years 3 weeks ago #94621

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hi,

For the "Array" type questions the color doesn't seem to change when a question is answered (any radio button is selected for a row). Please see the picture below. Ideally the question will change color once any row of the array question has an answer, but right now even if all rows have an answer the color doesn't change. Thank you so much for your help!

Kat :)
Attachments:
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 3 weeks ago #94652

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5759
  • Thank you received: 1250
  • Karma: 512
For the "Array" type questions the color doesn't seem to change when a question is answered (any radio button is selected for a row).
No, as the comments in the code indicate, the array will be considered "answered" if all rows have a checked radio.

If you want the array to be considered "answered" if any radio is checked, replace this code block:
		// Array (all rows must have a checked radio)
		else if($(parentQuestion).hasClass('array-flexible-row')) {
			if($('input.radio:checked', parentQuestion).length == $('tr[id^="javatbd"]', parentQuestion).length) {
				markAnswered(parentQuestion);
			}
			else {
				markUnanswered(parentQuestion);
			}
			markAnswered(parentRow);
		}

With this:
		// Array (one radio must be checked)
		else if($(parentQuestion).hasClass('array-flexible-row')) {
			markAnswered(parentQuestion);
			markAnswered('tr[id^="javatbd"]', parentRow);
		}

...but right now even if all rows have an answer the color doesn't change.
I can't reproduce that problem. Can you activate a demo survey?
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 3 years 3 weeks ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: kateibe

Bold current question or add a check mark when answered 3 years 1 week ago #94936

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hi Tony,

Thank you so much for your prompt response. Please see the link below for a test survey. It still doesn't seem to be working. Thank you so much for all your help!

Kat
limesurvey.Partners.org/limesurvey/index.php?sid=12271&lang=en
The administrator has disabled public write access.

Bold current question or add a check mark when answered 3 years 1 week ago #94939

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5759
  • Thank you received: 1250
  • Karma: 512
Ah, this workaround was developed for LS 2.0 but it looks like you're using LS 1.92.

Replace this block:
		$('.array-flexible-row tr[id^="javatbd"] td').click(function(){
			 handleAnswers($('input.radio', this));
		});

With this block:
		$('.array-flexible-row tbody[id^="javatbd"] td').click(function(){
			 handleAnswers($('input.radio', this));
		});
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.
The following user(s) said Thank You: kateibe

Bold current question or add a check mark when answered 3 years 1 week ago #95062

  • kateibe
  • kateibe's Avatar
  • Offline
  • Junior Lime
  • Posts: 23
  • Karma: 0
Hi Tony,

Thank you again for your prompt response! After some more testing it worked like a charm! Thank you for all your help!! I'm so happy and excited with the finished product! :laugh:

with gratitude,

Kat
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.249 seconds