Decipher Custom Script (JS/jQuery)

Custom Script Level-1

1) Script for "Adding numbers in currency format, accept only numbers" "no copy paste allowed

<number
  label="q1Num"
  optional="0"
  size="13">
  <title>Adding numbers in currency format, Accept only numbers</title>
  <style name="question.after"><![CDATA[
<script>
	
	function isNumberKey(evt)
  	{
  	 	var charCode = (evt.which) ? evt.which : event.keyCode
  	 	if (charCode > 31 && (charCode < 48 || charCode > 57))
  	 	return false;
  	 	
  	 	return true;
  	}
	
	
	function addCommas(nStr)
	{
	
		nStr += '';
		x = nStr
		
		var rgx = /(\d+)(\d{3})/;
		while (rgx.test(x)) {
		x = x.replace(rgx, '$1' + ',' + '$2');
		}
		return x;
	}
	
	
	$ (document).ready(function()
	{
	
		//Prevent copy paste
		$ ('.text-input').bind("cut copy paste",function(e)
		{
			e.preventDefault();
		});
		
		
		var str
	
		$ (".text-input").keypress(function()
		{
			return isNumberKey(event);
		});
		
		
		$ (".text-input").keyup(function()
		{
		
			str = $ (this).val().replace(/,/g,"") //using regular expression with "g" modifier to replace all instances
			$ (this).val(addCommas(str));
		});
	});
	
</script>
]]></style>
  <row label="r1"/>
</number>

<suspend/>

2) Script for "no copy paste allowed"

<text
  label="Q_A"
  optional="0">
  <title>No copy paste allowed.</title>
  <style name="question.after"><![CDATA[
<script>

	$ (document).ready(function()
	{
		//Prevent copy paste
		$ ('.text').bind("cut copy paste",function(e)
		{
			e.preventDefault();
		});
	});

</script>
]]></style>
  <row label="r1">Enter Your Value:</row>
</text>

<suspend/>

<textarea
  label="Q_B"
  optional="0">
  <title>No copy paste allowed.</title>
  <style name="question.after"><![CDATA[
<script>

	$ (document).ready(function()
	{
		//Prevent copy paste
		$ ('.textarea').bind("cut copy paste",function(e)
		{
			e.preventDefault();
		});
	});

</script>
]]></style>
  <row label="r1"/>
</textarea>

<suspend/>

<checkbox
  label="Q_C"
  atleast="1">
  <title>No copy paste allowed.</title>
  <validate>
OE_Check()
  </validate>

  <style name="question.after"><![CDATA[
<script>

	$ (document).ready(function()
	{
		//Prevent copy paste
		$ ('.checkbox').bind("cut copy paste",function(e)
		{
			e.preventDefault();
		});
	});

</script>
]]></style>
  <row label="r1">Brand 1</row>
  <row label="r2">Brand 2</row>
  <row label="r3">Brand 3</row>
  <row label="r4">Brand 4</row>
  <row label="r5">Brand 5</row>
  <row label="r6">Brand 6</row>
  <row label="r7" open="1" openSize="30">Other Specify:</row>
</checkbox>

<suspend/>

3) Script for Adding numbers in 10 digit phone number format, accept only numbers and 'no copy paste allowed'

<text
  label="q1NumPhone"
  optional="0"
  size="15">
  <title>Adding numbers in 10 digit phone number format, Accept only numbers and no copy paste allowed.</title>
  <style name="question.after"><![CDATA[
<script>
	function isNumberKey(evt)
	{
		var charCode = (evt.which) ? evt.which : event.keyCode
		if (charCode > 31 && (charCode < 48 || charCode > 57))
		return false;

		var cVal = evt.target.value
		//limit inputs up to 10 digits
		if (cVal.length >=10){
		return false;
	}

	return true;
	}


	function addCommas(nStr)
	{

		nStr += '';
		x = nStr

		var rgx = /(\d{3})(\d{3})(\d{4})/;
		if (rgx.test(x))
		{
			x = x.replace(rgx, '$1-$2-$3');
			$ ("#btn_continue").show()
		}
		else
		{
			$ ("#btn_continue").hide()
		}

		return x;
	}


	$ (document).ready(function()
	{

		//Prevent copy paste
		$ ('.text').bind("cut copy paste",function(e)
		{
			e.preventDefault();
		});

		$ ("#btn_continue").hide()

		var str

		$ (".text-input").keypress(function()
		{
			return isNumberKey(event);
		});


		$ (".text-input").keyup(function()
		{

			str = $ (this).val().replace(/-/g,"") //using regular expression with "g" modifier to replace all instances
			$ (this).val(addCommas(str));
		});
	});


</script>
]]></style>
  <row label="r1"/>
</text>

<suspend/>

Custom Script Level-2

1) Script for "TEXTAREA" for highliting color for the inputed text below OE box."

<textarea
  label="Q1OE"
  optional="0">
  <title>What do you think this bundle of money management features would be able to support you the best?</title>
  <comment>Please be as specific as possible</comment>
  <style name="question.after"><![CDATA[
<script>
	var JQ = jQuery;
	var minValue = 0; // Updated minvalue as per requirement
	var maxValue = 75; // Updated maxvalue as per requirement
	percentageStep = (1 / (maxValue - minValue)) * 2;
	midPoint = minValue + ((maxValue - minValue) / 2);

	jQuery("textarea").each(function ()
	{
            jQuery("<div class='counter progress'><div class='spacer determinate'></div></div>").insertAfter(jQuery(this));
            jQuery(this).on('input paste change keyup keydown', function ()
            {
                  var redColor = 0;
                  var greenColor = 0;
                  var blueColor = 0;
                  var divWidth = 0;
                  var currentLength = jQuery(this).val().trim().length;
                  var currentWidth = Math.round(currentLength / (maxValue - minValue) * 100);

                  // Update limit and color as per requirement.

                  if (currentLength < 25 && currentLength >= 1)
                  {
                      redColor = 255;
                      greenColor = 0;
                  }
                  else if (currentLength >=25 && currentLength <= 50)
                  {
                      redColor = 255;
                      greenColor = 191;
                  }
                  else
                  {
                      redColor = 0;
                      greenColor = 255;
                  }

                  if (currentWidth <= 100)
                  {
                      divWidth = currentWidth + "%";
                  }
                  else
                  {
                      divWidth = "100%";
                  }
                  borderColor = "rgb(" + redColor + "," + greenColor + "," + blueColor + ")";
                  jQuery(this).parents(".answers.answers-list").find(".spacer").css(
                  {
                      "background-color": borderColor,
                      "width": divWidth
                  });
            })
	});
	</script>
	<style>
	
	.counter {
              width: 100%;
              max-width:400px;
              height: 0.5em;
              background-color: lightgray;
              border-radius: 5px;
              margin-top: 5px;
            }
	
	.spacer {
              background-color: lightgray;
              width: 0%;
              height: 0.5em;
              border-radius: 5px;
            }
	.element.even.groupingRows.OneColumnEl{
			    max-width:fit-content;
			}

</style>
]]></style>
</textarea>

<suspend/>

2) Script for "Checkbox setup" for checking which option is select first, second, third and so on."

<checkbox
  label="Q1Checkbox"
  atleast="1">
  <title>Please select Fashion brand names you like?</title>
  <comment>Please select all tha apply.</comment>
  <style name="question.after" wrap="ready"><![CDATA[
var mainQuesionId= "Q1Checkbox" //Pass main question Id and no need to change anything else in code.
   		var OrderQuesionId= "Q1OECheckboxorder" //Pass Order question Id and no need to change anything else in code.
   		
   		var MainNode = $ ("#question_"+mainQuesionId).find(".input.checkbox")
   		var OrderNode = $ ("#question_"+OrderQuesionId+" .text-input")
   		
   		var isTest = "${gv.isUser() and not gv.debug.respview}" === "True";
   		
   		if (!isTest)
   		{
   			$ ("#question_"+OrderQuesionId+"").hide()
   		}
   		
   		MainNode.change(function()
   		{
   		
   			var Itemindex = MainNode.index($ (this));
   		
   			console.log(Itemindex)
   		
   			if ($ (this).attr('checked')=='checked')
   			{
   				OrderNode.eq(Itemindex).val(getCounter()); //Get the running counter from function defined as per current number of responses.
   			}
   		
   			else
   			{
   				OrderNode.eq(Itemindex).val("");
   				resetOrder(); //Reset Order question in case if we clear already enetered response in a OE box.
   			}
   		
   		});
   		
   		
   		function getCounter()
   		{
   			var counter = 0
   			MainNode.each(function()
   			{
   				if ($ (this).attr('checked')=='checked' )
   				{
   					counter = counter+1;
   				}
   			});
   			return counter
   		}
   		
   		function resetOrder()
   		{
   			var arrVal = [];
   			OrderNode.each(function()
   			{
   				if ($ (this).val() > 0) { arrVal.push($ (this).val()); }
   			});
   		
   			arrVal.sort(function(a, b){return a - b});
   			var Currentval = 0;
   			OrderNode.each(function()
   			{
   				if ($ (this).val() > 0)
   				{
   					Currentval = arrVal.indexOf($ (this).val());
   					$ (this).val(Currentval+1);
   				}
   			});
   		}
]]></style>
  <row label="r1">Nike</row>
  <row label="r2">Puma</row>
  <row label="r3">Reebok</row>
  <row label="r4">Adidas</row>
  <row label="r5">Skechers</row>
  <row label="r6">Asics</row>
  <row label="r7">Woodland</row>
  <row label="r8">Red Chief</row>
  <row label="r9">One8</row>
  <row label="r10">Mochi</row>
  <row label="r11" exclusive="1" randomize="0">Any/All</row>
  <row label="r12" open="1" openSize="25" randomize="0">Other, please specify</row>
  <row label="r13" exclusive="1" randomize="0">None of the above</row>
</checkbox>

<text
  label="Q1OECheckboxorder"
  size="40"
  where="execute,survey,report">
  <title>Dummy to capture the order</title>
  <comment>Please be as specific as possible</comment>
  <row label="r1">Nike</row>
  <row label="r2">Puma</row>
  <row label="r3">Reebok</row>
  <row label="r4">Adidas</row>
  <row label="r5">Skechers</row>
  <row label="r6">Asics</row>
  <row label="r7">Woodland</row>
  <row label="r8">Red Chief</row>
  <row label="r9">One8</row>
  <row label="r10">Mochi</row>
  <row label="r11" randomize="0">Any/All</row>
  <row label="r12" randomize="0">Other, please specify</row>
  <row label="r13" randomize="0">None of the above</row>
</text>

<suspend/>

3) Script for "text setup" for checking which option is filled first, second, third and so on."

<text
  label="Q1OEText"
  optional="0"
  size="40">
  <title>Please type Fashion brand names you like?</title>
  <comment>Please be as specific as possible</comment>
  <style name="question.after" wrap="ready"><![CDATA[
var mainQuesionId= "Q1OEText" //Pass main question Id and no need to change anything else in code.
	var OrderQuesionId= "Q1OExOrder" //Pass Order question Id and no need to change anything else in code.
	
	var MainNode = $ ("#question_"+mainQuesionId+" .text-input")
	var OrderNode = $ ("#question_"+OrderQuesionId+" .text-input")
	
	var isTest = "${gv.isUser() and not gv.debug.respview}" === "True";
	
	if (!isTest)
	{
		$ ("#question_"+OrderQuesionId+"").hide() //Hide the order question for live respondent
	}
	
	MainNode.keyup(function()
	{
		var Itemindex = MainNode.index($ (this));
	
		if ($ (this).val().trim().length >0)
		{
			OrderNode.eq(Itemindex).val(getCounter()); //Get the running counter from function defined as per current number of responses.
		}
	
		else
		{
			OrderNode.eq(Itemindex).val("");
			resetOrder(); //Reset Order question in case if we clear already enetered response in a OE box.
		}
	
	});
	
	
	function getCounter()
	{
		var counter = 0
		MainNode.each(function()
		{
			if ($ (this).val() !="" )
			{
				counter = counter+1;
			}
		});
		return counter
	}
	
	function resetOrder()
	{
		var arrVal = [];
		OrderNode.each(function()
		{
			if ($ (this).val() > 0) { arrVal.push($ (this).val()); }
		});
	
		arrVal.sort(function(a, b)
		{
			return a - b
		});
		
		var Currentval = 0;
		OrderNode.each(function()
		{
			if ($ (this).val() > 0)
			{
				Currentval = arrVal.indexOf($ (this).val());
				$ (this).val(Currentval+1);
			}
		});
	}
]]></style>
  <row label="r1">1</row>
  <row label="r2">2</row>
  <row label="r3">3</row>
  <row label="r4">4</row>
  <row label="r5">5</row>
  <row label="r6">6</row>
  <row label="r7">7</row>
  <row label="r8">8</row>
  <row label="r9">9</row>
  <row label="r10">10</row>
</text>

<text
  label="Q1OExOrder"
  optional="0"
  size="40">
  <title>Dummy to capture the order</title>
  <comment>Please be as specific as possible</comment>
  <row label="r1">1</row>
  <row label="r2">2</row>
  <row label="r3">3</row>
  <row label="r4">4</row>
  <row label="r5">5</row>
  <row label="r6">6</row>
  <row label="r7">7</row>
  <row label="r8">8</row>
  <row label="r9">9</row>
  <row label="r10">10</row>
</text>

<suspend/>

4) Trigger Script for "show or hide" row 4 option - if (r3 , c1 option) selected in radio grid question

<radio
  label="Q1">
  <title>Were there any adverse events or complications that occurred within the follow up period?</title>
  <validate>
if Q1.r3.c1 and not(Q1.r4.any):
	error("Please select an answer",row=Q1.r4)
  </validate>

  <style name="question.after"><![CDATA[
<script>
		function hideShow()
		{
		if( $ ( ".c1trigger.r3trigger.clickableCell").find("input[type=radio]").is(":checked"))
			{
			$ (".r4trigger").show()
			}
		else
			{
             $ (".r4trigger").hide()
             $ (".r4trigger").find("input[type=radio]").prop('checked', false)
             $ (".r4trigger").find(".fir-icon.selected").removeClass("selected")
        	}
        }
		$ (document).ready(function()
		{
			$ (".r4trigger").hide()
			setInterval(function(){ hideShow(); }, 100);
			$ (".openEnd.clickableCell").click(function()
			{
			setTimeout(function(){ hideShow(); }, 1000);
			});
		});
	</script>
]]></style>
  <col label="c1" ss:colClassNames="c1trigger" value="1">Yes</col>
  <col label="c2" value="2">No</col>
  <row label="r1">Any adverse events or complications related to the procedure?</row>
  <row label="r2">Any adverse events or complications related to the Turbowhisker blade?</row>
  <row label="r3" ss:rowClassNames="r3trigger">Any revision to the procedure?</row>
  <row label="r4" optional="1" ss:rowClassNames="r4trigger">Was the revision related to the Turbowhisker blade?</row>
</radio>

<suspend/>

5) Script for "show or hide" OE box inside each column - if (Other - please specify) selected in radio grid question

<radio
  label="D5xhr"
  grouping="cols"
  shuffle="rows,cols">
  <title>What brand(s) of <u>electric hair removal devices</u> do you currently use at home?</title>
  <comment>If you currently use more than one, please answer about the product you use <u>most frequently</u>.</comment>
  <validate>
for i in D5xhr.cols:
	if D5xhr.r98.attr(i.label).any and D5xhrOE.attr(i.label).val == '':
		error(hlang.get("extraInfo"), row=D5xhr.r98)
  </validate>

  <style name="question.after"><![CDATA[
<script type="text/javascript">
		function hideShowTxtBx()
		{
			$ ( ".openEnd.clickableCell" ).each(function( i )
			{
				if($ (this).find("input[type=radio]").is(":checked") || $ (this).find("input[type=checkbox]").is(":checked"))
				{
					$ (".input.text-input").eq(i).css('display','block')
				}
				else
				{
					$ (".input.text-input").eq(i).val("")
					$ (".input.text-input").eq(i).css('display','none')
				}
			});
		}
		
		$ (document).ready(function()
		{
			$ ( ".openEnd.clickableCell" ).each(function( i )
			{
				$ ( this ).append($ (".input.text-input").eq(i).css('display','none'))
			});
	
			setInterval(function(){ hideShowTxtBx(); }, 100);
		
			$ (".survey-section").click(function()
			{
				setTimeout(function(){ hideShowTxtBx(); }, 1000);
			});
		
			$ (".openEnd.clickableCell").click(function()
			{
				setTimeout(function(){ hideShowTxtBx(); }, 1000);
			});
		});
	</script>
]]></style>
  <col label="c1">Electrical epilator</col>
  <col label="c2">Intense Pulse Light (IPL) device</col>
  <col label="c3">Electrical shaver / lady shaver</col>
  <col label="c4">Electric trimmers</col>
  <row label="r1" value="1">Philips</row>
  <row label="r2" value="2">Amiro</row>
  <row label="r3" value="3">Babyliss</row>
  <row label="r4" value="4">Beurer</row>
  <row label="r5" value="5">Braun</row>
  <row label="r6" value="6">Homedics</row>
  <row label="r7" value="7">IMETEC</row>
  <row label="r8" value="8">Medisana</row>
  <row label="r9" value="9">Panasonic</row>
  <row label="r10" value="10">Proficare</row>
  <row label="r98" randomize="0" ss:rowClassNames="openEnd" value="98">Other - please specify</row>
  <row label="r99" exclusive="1" randomize="0" value="99">I don’t recall the brand name</row>
</radio>

<text
  label="D5xhrOE"
  shuffle="cols">
  <title>Please enter the response for Other - please specify</title>
  <exec>
D5xhrOE.cols.order = D5xhr.cols.order
  </exec>

  <style name="question.after"><![CDATA[
<style>
	#question_D5xhrOE
	{
		display:none;
  	}
	</style>
]]></style>
  <col label="c1">Electrical epilator</col>
  <col label="c2">Intense Pulse Light (IPL) device</col>
  <col label="c3">Electrical shaver / lady shaver</col>
  <col label="c4">Electric trimmers</col>
</text>

<suspend/>

<define label="BRANDS_core">
  <row label="CBr1" value="101">Wingstop</row>
  <row label="CBr2" value="102">Chick-Fil-A</row>
  <row label="CBr3" value="103">Popeye's</row>
  <row label="CBr4" value="104">Buffalo Wild Wings</row>
  <row label="CBr5" value="105">Raising Cane's</row>
  <row label="CBr6" value="106">Domino's</row>
  <row label="CBr7" value="107">Pizza Hut</row>
  <row label="CBr8" value="108">Papa John's</row>
  <row label="CBr9" value="109">Five Guys</row>
  <row label="CBr10" value="110">Taco Bell</row>
  <row label="CBr11" value="111">Chipotle</row>
  <row label="CBr12" value="112">Dave's Hot Chicken</row></define>

    <checkbox
    label="B2"
    cond="B1.c4.any or B1.c5.any"
    atleast="1"
    atmost="3"
    colCond="B1.rows[col.index].c4 or B1.rows[col.index].c5"
    colLegendRows="10"
    grouping="cols"
    shuffle="rows,cols"
    ss:listDisplay="0">
      <title>Why did you recommend the following restaurants?</title>
      <comment>Select up to 3 reasons per brand.</comment>
      <validate>
for eCol in B2.cols:
  if eCol.r98 and (B2OE[eCol].val==''):
    error(hlang.get("extraInfo"), col=eCol)
      </validate>
      <style name="question.after"><![CDATA[
<script type="text/javascript">
    function hideShowTxtBx()
    {
      $ ( ".openEnd.clickableCell" ).each(function( i )
      {
        if($ (this).find("input[type=radio]").is(":checked") || $ (this).find("input[type=checkbox]").is(":checked"))
        {
          $ (".input.text-input").eq(i).css('display','block')
        }
        else
        {
          $ (".input.text-input").eq(i).val("")
          $ (".input.text-input").eq(i).css('display','none')
        }
      });
    }

    $ (document).ready(function()
    {
      $ ( ".openEnd.clickableCell" ).each(function( i )
      {
        $ ( this ).append($ (".input.text-input").eq(i).css('display','none'))
      });

      setInterval(function(){ hideShowTxtBx(); }, 100);

      $ (".survey-section").click(function()
      {
        setTimeout(function(){ hideShowTxtBx(); }, 1000);
      });

      $ (".openEnd.clickableCell").click(function()
      {
        setTimeout(function(){ hideShowTxtBx(); }, 1000);
      });
    });
  </script>
]]></style>
      <insert as="cols" source="BRANDS_core" strip="value"/>
      <insert source="LIST_BAI_REASONS" strip="value"/>
      <row label="r98" randomize="0" ss:rowClassNames="openEnd">Other (please specify)</row>
    </checkbox>

    <text
    label="B2OE"
    cond="B1.c4.any or B1.c5.any"
    keepWith="B2"
    shuffle="cols"
    colCond="B1.rows[col.index].c4 or B1.rows[col.index].c5">
      <title>Please enter the response for Other - please specify</title>
      <exec>
B2OE.cols.order = B2.cols.order
      </exec>

      <style name="question.after"><![CDATA[
<style>
  #question_B2OE
  {
    display:none;
    }
  </style>
]]></style>
      <insert as="cols" source="BRANDS_core" strip="value"/>
    </text>

    <suspend/>

Custom Script Level-3

1) Script for "Cardsort setup"

<radio
  label="Q16"
  cardsort:bucketCSS="width:15%; height:70px; text-align:center !important; overflow:hidden; padding:0 !important;"
  cardsort:cardMaxWidth="500px"
  cardsort:completionHTML=""
  cardsort:displayCounter="0"
  cardsort:displayNavigation="0"
  cardsort:displayProgress="1"
  colShuffle="rotate"
  rowShuffle="rotate"
  shuffle="rows,cols"
  uses="cardsort.6">
  <title>Please select the most preferred mode of payment used by you for each of the following scenarios:</title>
  <comment>Please select one answer per row.</comment>
  <style cond="device.mobileDevice" name="page.head"><![CDATA[
<script>
jQuery(document).ready(function()
{
	jQuery('.sq-cardsort-bucket').click(function()
	{
		setTimeout(function() { jQuery(window).scrollTop(0); },500)
	});
});
</script>
]]></style>
  <style name="page.head"><![CDATA[
<script>
jQuery(document).ready(function()
{
	jQuery('#img_continue, #btn_continue').css('display','none');
	jQuery('.sq-cardsort-progress').css('display','none');
	
	jQuery('.sq-cardsort-buckets li.sq-cardsort-bucket').click(function()
	{
		setTimeout(function()
		{
			if (jQuery('.sq-cardsort-cards li').hasClass('sq-cardsort-state-selected'))
			{
				checkSelection()
			}
		},300);
	});
});

function checkSelection()
{
	var rowCounter = jQuery('.sq-cardsort-card').length;
	
	if (jQuery('.sq-cardsort-progress').text() == '-/-')
	{
		jQuery('#img_continue, #btn_continue').fadeIn(500);
		
		jQuery('#img_continue, #btn_continue').click();
	}
}
</script>
]]></style>
  <style cols="c5" name="el.radio" rows="r7,r9,r10"/>
  <style cols="c2,c3" name="el.radio" rows="r5,r7"/>
  <row label="r1">Offline shopping (grocery stores, vegetable sellers, etc.)</row>
  <row label="r2">Payment at Restaurant/cafe</row>
  <row label="r3">Online hotel/flight tickets bookings</row>
  <row label="r4">Online Shopping (Flipkart, Amazon, Myntra, etc.)</row>
  <row label="r5">Money transfer to friends/family/ colleagues</row>
  <row label="r6">Cab/auto payments (Ola/Uber)</row>
  <row label="r7">Cab/auto payments (Offline)</row>
  <row label="r8">Bill payments (electricity bill, mobile/DTH recharge, etc.)</row>
  <row label="r9">Offline shopping (clothes, utensils, etc.)</row>
  <row label="r10">Offline shopping (electronics, furniture)</row>
  <col label="c1" value="1">UPI</col>
  <col label="c2" value="2">Credit Card</col>
  <col label="c3" value="3">Debit Card</col>
  <col label="c4" value="4">Cash</col>
  <col label="c5" randomize="0" value="5">Others</col>
  <col label="c6" randomize="0" value="6">Not used</col>
</radio>

<suspend/>