Slider: 100% Allocation

This article will help you program a 100% Allocation Slider


100% Allocation Sliders

This code will allow you to convert a 'Slider' question type into a "100% Allocation" exercise. 

Click here to see an example


Instructions - 100% Allocation Slider

  1. Add a Slider question type to your survey with all of the appropriate responses
    1. See article: Add a Question: Slider
  2. Add the code below to your 'ADD JAVASCRIPT'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      cmSurvey.disableNextButton(true);
      		var setTotalCount = 100;
      
      		function totalCalculate(currentSlider)
      		{
      			var totalPoints = 0;
      			jQuery(".cm-slider").not(currentSlider).each(function(index)
      			{
      				totalPoints += parseInt(jQuery(this).slider("value"));
      			});
      			return totalPoints;
      		};
      		jQuery(".cm-slider").each(function(index)
      		{
      			jQuery(this).on("slide", function(event, ui)
      			{
      				totalResult = totalCalculate(jQuery(this));
      				if (totalResult + ui.value >= setTotalCount)
      				{
      					ui.value = setTotalCount - totalResult;
      				}
      				jQuery("#sliderTotal").html(totalResult + ui.value);
      				if (totalResult + ui.value !== setTotalCount)
      				{
      					cmSurvey.disableNextButton(true);
      				}
      				else
      				{
      					cmSurvey.disableNextButton(false);
      				}
      			});
      		});
      		
  3. Add the code below to 'Source Code Editor' of the 'Footnote' field. 
    1. See article: Source Code Editor
      <div style="text-align: right;">Total: <span id="sliderTotal">0</span> %</div>
      		
  4. Make sure to test
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us