Bienvenue, Invité
Nom d'utilisateur : Mot de passe : Se souvenir de moi

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

Bold current question or add a check mark when answered il y a 1 an 5 mois #94159

  • kateibe
  • Portrait de kateibe
  • Hors ligne
  • Junior Lime
  • Messages : 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
L'administrateur a désactivé l'accès en écriture pour le public.

Bold current question or add a check mark when answered il y a 1 an 5 mois #94194

  • tpartner
  • Portrait de tpartner
  • En ligne
  • LimeSurvey Team
  • Messages : 4188
  • Remerciements reçus 786
  • Karma: 359
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.
L'administrateur a désactivé l'accès en écriture pour le public.
Cet utilisateur a été remercié pour son message par: kateibe

Bold current question or add a check mark when answered il y a 1 an 5 mois #94196

  • kateibe
  • Portrait de kateibe
  • Hors ligne
  • Junior Lime
  • Messages : 23
  • Karma: 0
Hi Tony,

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

Kat
L'administrateur a désactivé l'accès en écriture pour le public.

Bold current question or add a check mark when answered il y a 1 an 5 mois #94256

  • kateibe
  • Portrait de kateibe
  • Hors ligne
  • Junior Lime
  • Messages : 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 :)
L'administrateur a désactivé l'accès en écriture pour le public.

Bold current question or add a check mark when answered il y a 1 an 5 mois #94272

  • tpartner
  • Portrait de tpartner
  • En ligne
  • LimeSurvey Team
  • Messages : 4188
  • Remerciements reçus 786
  • Karma: 359
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.
L'administrateur a désactivé l'accès en écriture pour le public.
Cet utilisateur a été remercié pour son message par: kateibe

Bold current question or add a check mark when answered il y a 1 an 5 mois #94283

  • kateibe
  • Portrait de kateibe
  • Hors ligne
  • Junior Lime
  • Messages : 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
Pièces jointes :
L'administrateur a désactivé l'accès en écriture pour le public.

Bold current question or add a check mark when answered il y a 1 an 5 mois #94303

  • tpartner
  • Portrait de tpartner
  • En ligne
  • LimeSurvey Team
  • Messages : 4188
  • Remerciements reçus 786
  • Karma: 359
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.
L'administrateur a désactivé l'accès en écriture pour le public.
Cet utilisateur a été remercié pour son message par: kateibe

Bold current question or add a check mark when answered il y a 1 an 5 mois #94308

  • kateibe
  • Portrait de kateibe
  • Hors ligne
  • Junior Lime
  • Messages : 23
  • Karma: 0
Thank you so much!! It is perfect! :cheer:
L'administrateur a désactivé l'accès en écriture pour le public.

Bold current question or add a check mark when answered il y a 1 an 5 mois #94539

  • kateibe
  • Portrait de kateibe
  • Hors ligne
  • Junior Lime
  • Messages : 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
L'administrateur a désactivé l'accès en écriture pour le public.

Bold current question or add a check mark when answered il y a 1 an 5 mois #94573

  • tpartner
  • Portrait de tpartner
  • En ligne
  • LimeSurvey Team
  • Messages : 4188
  • Remerciements reçus 786
  • Karma: 359
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.
L'administrateur a désactivé l'accès en écriture pour le public.
Cet utilisateur a été remercié pour son message par: kateibe
Modérateurs: ITEd
Temps de génération de la page : 0.213 secondes
Donation Image