Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

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

Bold current question or add a check mark when answered 1 Jahr 4 Monate her #94159

  • kateibe
  • kateibes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 21
  • 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94194

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4049
  • Dank erhalten: 739
  • Karma: 341
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: kateibe

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94196

  • kateibe
  • kateibes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 21
  • Karma: 0
Hi Tony,

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

Kat
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94256

  • kateibe
  • kateibes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 21
  • 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 :)
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94272

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4049
  • Dank erhalten: 739
  • Karma: 341
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');
	}


Capture2_2013-03-27.JPG
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: kateibe

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94283

  • kateibe
  • kateibes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 21
  • 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
Anhang:
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94303

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4049
  • Dank erhalten: 739
  • Karma: 341
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: kateibe

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94308

  • kateibe
  • kateibes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 21
  • Karma: 0
Thank you so much!! It is perfect! :cheer:
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94539

  • kateibe
  • kateibes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 21
  • 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
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Bold current question or add a check mark when answered 1 Jahr 3 Monate her #94573

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4049
  • Dank erhalten: 739
  • Karma: 341
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: kateibe
Moderatoren: ITEd
Ladezeit der Seite: 0.224 Sekunden
Donation Image