Glitch manually programming a drill down | XM Community
Skip to main content
Michael_Cooksey
Administrator
19 days ago
Solved

Glitch manually programming a drill down

  • February 21, 2024
  • 3 replies
  • 122 views
bstrahin
Level 6 ●●●●●●
Forum|alt.badge.img+38
  • bstrahin
  • Level 6 ●●●●●●
  • 638 replies

I started a survey last year not realizing that when you reload a drilldown question with an edited list, it will RECODE all of your values. I have about 60 program specific reports that I am basing off of the value of these codes. Since I plan to use this program monthly for a few years I accepted just updating the filters but unexpectedly I have more changes to the drilldown. To avoid hours of redoing saved filter I am trying to hard code the drill down. I am having decent success but when I click the next button my program name and program number get wiped out of the input. If you can provide any help with how to prevent that from happening I’d appreciate it.

 

Otherwise I have a work around where I save the program number in the Embedded data and base my filters on Embedded data instead of Question data. That is okay but it takes some working and fingers crossing to get this set up BEFORE having data that chose a particular program number - a requirement as I am showing people their cumulative responses live through an advanced report.

 

I am not the strongest programmer and this is definitely brute force programmed. Some providers have multiple programs but each program will only have one program number.

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function() {
	/*Place your JavaScript here to run when the page is fully displayed*/
	var that = this.questionId;

	//Add options that should be in the drop down list s1 = first in the list, s2 = second in the list, sn = nth in the list...
	var element = (
		"<select id='s1'><option ></option><option value='1'>Anesis Center for Marriage and Family Therapy LLC</option><option value='2'>Bayview Foundation Inc</option>" + 
		"<option value='3'>Big Brothers and Big Sisters of Dane County Inc</option><option value = '4'>Cambridge Community Activities Program</option>" +
		"<option value='5'>Catholic Multicultural Center</option><option value='6'>Centro Hispano</option>" +
		"<option value='7'>CEOs of Tomorrow Inc</option><option value='8'>Chlildren's Service Society of WI</option>" +
		"<option value='9'>City of Fitchburg</option><option value='10'>City of Middleton</option>" +
		"<option value='11'>City of Stoughton</option><option value='12'>City of Sun Prairie</option>" +
		"<option value='13'>DCDHS - Adult Protective Services</option><option value='14'>Deerfield Community Center</option>" +
		"<option value='15'>Domestic Abuse Intervention Services</option><option value='16'>Families Back To The Table Inc</option>" +
		"<option value='17'>Family Service Madison</option><option value='18'>Goodman Community Center, Inc.</option>" +
		"<option value='19'>Jewish Social Services of Madison Inc</option><option value='20'>Lussier Community Education Center</option>" +
		"<option value='21'>Lutheran Social Services</option><option value='22'>Madison Metropolitan School District</option>" +
		"<option value='37'>Madison Reading Project</option><option value='23'>McFarland Youth Center, Inc.</option><option value='24'>Mount Zion Batist Church</option>" +
		"<option value='25'>Oregon Youth Center Inc</option><option value='26'>Outreach</option>" + 
		"<option value='27'>Planned Parenthood of WI</option><option value='28'>Porchligth Inc</option>" + 
		"<option value='29'>Rape Crisis Center</option><option value='30'>Today Not Tomorrow</option>" + 
		"<option value='31'>United Way of Dane County</option><option value='32'>Urban League of Greater Madison</option>" +
		"<option value='33'>Vivent Health, Inc. fka Aids Resource Center of WI</option><option value='34'>Wisconsin Youth Company, Inc.</option>" +
		"<option value='35'>YWCA Madison Inc</option><option value='36'>Test Provider</option></select>"
		);
	var element2 = "<select id='s2'><option ></option></select>";
	var element3 = "<select id='s3'><option ></option></select>";
	//show select list after row number _ label
	jQuery(element).insertAfter("#" + that + " .InputText:eq(0)");
	jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");
	jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");

	//hide input fields
	jQuery("#" + that + " .InputText:eq(0)").hide();
	jQuery("#" + that + " .InputText:eq(1)").hide();
	jQuery("#" + that + " .InputText:eq(2)").hide();

	//upon first selection, display the text value and not the code
	jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
	jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
	jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

	jQuery("#s1").on('change', function() {
		jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
		var provider = jQuery("#" + that + " .InputText:eq(0)").val();
		console.log("provider "+provider);
		//If provider is Anesis
		if(provider == 'Anesis Center for Marriage and Family Therapy LLC') {
				var element2 = "<select id='s2'><option</option><option value='1'>Outreach</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13366'>13366</option></select>";
		}

		//If provider is Bayview
		if(provider == 'Bayview Foundation Inc') {
				var element2 = "<select id='s2'><option</option><option value='2'>Behavioral Health Support & Referral</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13339'>13339</option></select>";
		}

		//If provider is Big Brother Big Sister
		if(provider == 'Big Brothers and Big Sisters of Dane County Inc') {
				var element2 = "<select id='s2'><option</option><option value='3'>Youth Mentoring Services</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13380'>13380</option></select>";
		}

		//If provider is Cambridge Community
		if(provider == 'Cambridge Community Activities Program') {
				var element2 = "<select id='s2'><option</option><option value='4'>Cambridge Youth Resource Center</option></select>";
				var element3 = "<select id='s3'><option</option><option value='4609'>4609</option></select>";
		}

		//If provider is Catholic Multicultural
		if(provider == 'Catholic Multicultural Center') {
				var element2 = "<select id='s2'><option </option><option value='5'>Afhan Refugee Assistance</option><option value='6'>Immigration Services</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is Centro
		if(provider == 'Centro Hispano') {
				var element2 = "<select id='s2'><option </option><option value='7'>Accredited Representative</option><option value='8'>Community Engagement</option>" +
					"<option value='9'>Immigration Assistance</option><option value='10'>Juventud/Escalera</option><option value='11'>Pro Se Clinics</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is CEOs of Tomorrow
		if(provider == 'CEOs of Tomorrow Inc') {
				var element2 = "<select id='s2'><option</option><option value='12'>YJIG - Social Entreprenuership</option></select>";
				var element3 = "<select id='s3'><option</option><option value='12654'>12654</option></select>";
		}

		//If provider is Children's Service
		if(provider == "Chlildren's Service Society of WI") {
				var element2 = "<select id='s2'><option </option><option value='13'>Empl & Education Specialist - Allied</option><option value='14'>Empl & Education Specialist - Leopold</option>" +
					"<option value='15'>Empl & Education Specialist - Northside</option><option value='16'>Empl & Education Specialist - Russett</option><option value='17'>Empl & Education Specialist - Sun Prairie</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is Fitchburg
		if(provider == 'City of Fitchburg') {
				var element2 = "<select id='s2'><option</option><option value='18'>Neighborhood Navigators</option></select>";
				var element3 = "<select id='s3'><option</option><option value='12599'>12599</option></select>";
		}

		//If provider is Middleton
		if(provider == 'City of Middleton') {
				var element2 = "<select id='s2'><option</option><option value='19'>Middleton Youth Center</option></select>";
				var element3 = "<select id='s3'><option</option><option value='10553'>10553</option></select>";
		}

		//If provider is Stoughton
		if(provider == 'City of Stoughton') {
				var element2 = "<select id='s2'><option</option><option value='19'>Stoughton YRC</option></select>";
				var element3 = "<select id='s3'><option</option><option value='4458'>4458</option></select>";
		}

		//If provider is Sun Prairie
		if(provider == 'City of Sun Prairie') {
				var element2 = "<select id='s2'><option </option><option value='21'>Neighborhood Navigators</option><option value='22'>Youth Mentorship Program</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is DCDHS - APS
		if(provider == 'DCDHS - Adult Protective Services') {
				var element2 = "<select id='s2'><option </option><option value='23'>Elders at Risk (18-59)</option><option value='24'>Elders at Risk (60+)</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is Deerfield
		if(provider == 'Deerfield Community Center') {
				var element2 = "<select id='s2'><option </option><option value='25'>Behavioral Health Support & Referral</option><option value='26'>Deerfield Youth Center</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is DIAS
		if(provider == 'Domestic Abuse Intervention Services') {
				var element2 = "<select id='s2'><option </option><option value='27'>Crisis Case Management</option>" +
										 "<option value='28'>Crisis Intervention</option><option value='29'>Legal Services</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}
		//If provider is Families Back
		if(provider == 'Families Back To The Table Inc') {
				var element2 = "<select id='s2'><option</option><option value='30'>Family Engagement</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13712'>13712</option></select>";
		}
		//If provider is Family Service Madison
		if(provider == 'Family Service Madison') {
				var element2 = "<select id='s2'><option </option><option value='31'>AODA Prevention</option>" +
										 "<option value='32'>Community Mobilization</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is Goodman
		if(provider == 'Goodman Community Center, Inc.') {
				var element2 = "<select id='s2'><option </option><option value='33'>Basketball & Recreation Services</option>" +
										 "<option value='32'>Goodman Youth Resource Center</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is JSS
		if(provider == 'Jewish Social Services of Madison Inc') {
				var element2 = "<select id='s2'><option </option><option value='35'>Afghan Refugee Assistance</option>" +
										 "<option value='36'>Immigration Services</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is Lussier
		if(provider == 'Lussier Community Education Center') {
				var element2 = "<select id='s2'><option</option><option value='37'>Youth Resource Center</option></select>";
				var element3 = "<select id='s3'><option</option><option value='1953'>1953</option></select>";
		}

		//If provider is LSS
		if(provider == 'Lutheran Social Services') {
				var element2 = "<select id='s2'><option</option><option value='38'>Off The Square Club</option></select>";
				var element3 = "<select id='s3'><option</option><option value='1320'>1320</option></select>";
		}

		//If provider is MMSD
		if(provider == 'Madison Metropolitan School District') {
				var element2 = "<select id='s2'><option</option><option value='39'>Youth Resource Centers</option></select>";
				var element3 = "<select id='s3'><option</option><option value='1896'>1896</option></select>";
		}

		//If provider is Madison Reading Project
		if(provider == 'Madison Reading Project') {
				var element2 = "<select id='s2'><option</option><option value='59'>My First Pages</option></select>";
				var element3 = "<select id='s3'><option</option><option value='14474'>14474</option></select>";
		}

		//If provider is McFarland YC
		if(provider == 'McFarland Youth Center, Inc.') {
				var element2 = "<select id='s2'><option</option><option value='40'>Youth Resource Center</option></select>";
				var element3 = "<select id='s3'><option</option><option value='14474'>14474</option></select>";
		}

		//If provider is Mt Zion Baptist
		if(provider == 'Mount Zion Batist Church') {
				var element2 = "<select id='s2'><option</option><option value='41'>Mentoring & Prevention Pilot Program</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13414'>13414</option></select>";
		}

		//If provider is Oregon YC
		if(provider == 'Oregon Youth Center Inc') {
				var element2 = "<select id='s2'><option</option><option value='42'>Oregon Youth Center</option></select>";
				var element3 = "<select id='s3'><option</option><option value='11169'>11169</option></select>";
		}

		//If provider is Outreach
		if(provider == 'Outreach') {
				var element2 = "<select id='s2'><option </option><option value='43'>Information/Referral</option>" +
										 "<option value='44'>Outreach</option><option value='45'>Senior LGBT Outreach</option>" + 
										 "<option value='46'>Transgender Health Advocate</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}

		//If provider is Planned Parenthood
		if(provider == 'Planned Parenthood of WI') {
				var element2 = "<select id='s2'><option</option><option value='47'>Family Planning</option></select>";
				var element3 = "<select id='s3'><option</option><option value='4415'>4415</option></select>";
		}

		//If provider is Porchlight
		if(provider == 'Porchligth Inc') {
				var element2 = "<select id='s2'><option</option><option value='48'>Safehaven - Outreach</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13358'>13358</option></select>";
		}

		//If provider is RCC
		if(provider == 'Rape Crisis Center') {
				var element2 = "<select id='s2'><option </option><option value='49'>Crisis Intervention</option>" +
										 "<option value='50'>Sexual Assault Prevention Services</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}


		//If provider is Today Not Tomorrow
		if(provider == 'Today Not Tomorrow') {
				var element2 = "<select id='s2'><option</option><option value='51'>Family Resource Center</option></select>";
				var element3 = "<select id='s3'><option</option><option value='12519'>12519</option></select>";
		}


		//If provider is Unitedway
		if(provider == 'United Way of Dane County') {
				var element2 = "<select id='s2'><option</option><option value='52'>Sun Prairie ECZ Housing Assistance</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13569'>13569</option></select>";
		}

		//If provider is Urban League
		if(provider == 'Urban League of Greater Madison') {
				var element2 = "<select id='s2'><option</option><option value='53'>21st Century Careers</option></select>";
				var element3 = "<select id='s3'><option</option><option value='4590'>4590</option></select>";
		}

		//If provider is Vivent
		if(provider == 'Vivent Health, Inc. fka Aids Resource Center of WI') {
				var element2 = "<select id='s2'><option</option><option value='54'>Intake and Needle Exchange</option></select>";
				var element3 = "<select id='s3'><option</option><option value='13358'>13358</option></select>";
		}

		//If provider is WI Youth Co
		if(provider == 'Wisconsin Youth Company, Inc.') {
				var element2 = "<select id='s2'><option</option><option value='55'>Wisconsin Youth & Family Center</option></select>";
				var element3 = "<select id='s3'><option</option><option value='4507'>4507</option></select>";
		}

		//If provider is YWCA
		if(provider == 'YWCA Madison Inc') {
				var element2 = "<select id='s2'><option</option><option value='56'>M. School Restorative Justice</option></select>";
				var element3 = "<select id='s3'><option</option><option value='10935'>10935</option></select>";
		}

		//If provider is Test Provider
		if(provider == 'Test Provider') {
				var element2 = "<select id='s2'><option </option><option value='57'>Betsy</option>" +
										 "<option value='58'>Michele</option></select>";
				var element3 = "<select id='s3'><option </option></select>";
		}


		jQuery("#s2").hide();
		jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");
		jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());

		jQuery("#s3").hide();
		jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
		jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

		jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
		var program = jQuery("#" + that + " .InputText:eq(1)").val();

		jQuery("#s2").on('change', function() {
			jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
			var program = jQuery("#" + that + " .InputText:eq(1)").val();
			jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

			/////////////	Catholic Multicultural Center	////////////////// 
			//If program is Afhan Refugee
			if(provider=='Catholic Multicultural Center' && program == 'Afhan Refugee Assistance') {
					var element3 = "<select id='s3'><option</option><option value='13557'>13557</option></select>";
			}
			//If program is Immigration
			if(provider=='Catholic Multicultural Center' && program == 'Immigration Services') {
					var element3 = "<select id='s3'><option</option><option value='13151'>13151</option></select>";
			}

			/////////////	CENTRO HISPANO //////////////////////
			//If program is Accred Rep
			if(provider=='Centro Hispano' && program == 'Accredited Representative') {
					var element3 = "<select id='s3'><option</option><option value='12712'>12712</option></select>";
			}
			//If program is Comm Engage
			if(provider=='Centro Hispano' && program == 'Community Engagement') {
					var element3 = "<select id='s3'><option</option><option value='11969'>11969</option></select>";
			}
			//If program is Immigration Assistance
			if(provider=='Centro Hispano' && program == 'Immigration Assistance') {
					var element3 = "<select id='s3'><option</option><option value='13120'>13120</option></select>";
			}
			//If program is Juventud/Escalera
			if(provider=='Centro Hispano' && program == 'Juventud/Escalera') {
					var element3 = "<select id='s3'><option</option><option value='1490'>1490</option></select>";
			}
			//If program is Pro Se Clinic
			if(provider=='Centro Hispano' && program == 'Pro Se Clinics') {
					var element3 = "<select id='s3'><option</option><option value='13602'>13602</option></select>";
			}

			/////////////	Chlildren's Sevice	 //////////////////////
			//If program is Allied
			if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Allied') {
					var element3 = "<select id='s3'><option</option><option value='4559'>4559</option></select>";
			}
			//If program is Leopold
			if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Leopold') {
					var element3 = "<select id='s3'><option</option><option value='12639'>12639</option></select>";
			}
			//If program is Northside
			if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Northside') {
					var element3 = "<select id='s3'><option</option><option value='12640'>12640</option></select>";
			}
			//If program is Russett
			if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Russett') {
					var element3 = "<select id='s3'><option</option><option value='12642'>12642</option></select>";
			}
			//If program is Sun Prairie
			if(provider=="Chlildren's Service Society of WI" && program == 'Empl & Education Specialist - Sun Prairie') {
					var element3 = "<select id='s3'><option</option><option value='12641'>12641</option></select>";
			}

			/////////////	CITY OF SUN PRAIRIE	////////////////// 
			//If program is Navigators
			if(provider=='City of Sun Prairie' && program == 'Neighborhood Navigators') {
					var element3 = "<select id='s3'><option</option><option value='12600'>12600</option></select>";
			}
			//If program is Youth Mentorship
			if(provider=='City of Sun Prairie' && program == 'Youth Mentorship Program') {
					var element3 = "<select id='s3'><option</option><option value='13310'>13310</option></select>";
			}

			/////////////	DCDHS - APS		////////////////// 
			//If program is 18-59
			if(provider=='DCDHS - Adult Protective Services' && program == 'Elders at Risk (18-59)') {
					var element3 = "<select id='s3'><option</option><option value='12919'>12919</option></select>";
			}
			//If program is 60+
			if(provider=='DCDHS - Adult Protective Services' && program == 'Elders at Risk (60+)') {
					var element3 = "<select id='s3'><option</option><option value='12918'>12918</option></select>";
			}

			/////////////	DEERFIELD		////////////////// 
			//If program is Behavioral Health
			if(provider=='Deerfield Community Center' && program == 'Behavioral Health Support & Referral') {
					var element3 = "<select id='s3'><option</option><option value='13338'>13338</option></select>";
			}
			//If program is Youth Center
			if(provider=='Deerfield Community Center' && program == 'Deerfield Youth Center') {
					var element3 = "<select id='s3'><option</option><option value='12880'>12880</option></select>";
			}

			/////////////	DIAS		////////////////// 
			//If program is Crisis Case Management
			if(provider=='Domestic Abuse Intervention Services' && program == 'Crisis Case Management') {
					var element3 = "<select id='s3'><option</option><option value='13726'>13726</option></select>";
			}
			//If program is Crisis Intervention
			if(provider=='Domestic Abuse Intervention Services' && program == 'Crisis Intervention') {
					var element3 = "<select id='s3'><option</option><option value='13724'>13724</option></select>";
			}
			//If program is Legal Services
			if(provider=='Domestic Abuse Intervention Services' && program == 'Legal Services') {
					var element3 = "<select id='s3'><option</option><option value='13725'>13725</option></select>";
			}

			/////////////	FAMILY SERVICE MADISON		////////////////// 
			//If program is AODA
			if(provider=='Family Service Madison' && program == 'AODA Prevention') {
					var element3 = "<select id='s3'><option</option><option value='13737'>13737</option></select>";
			}
			//If program is Community Mobilization
			if(provider=='Family Service Madison' && program == 'Community Mobilization') {
					var element3 = "<select id='s3'><option</option><option value='13738'>13738</option></select>";
			}

			////////////	GOODMAN		////////////////// 
			//If program is Basketball
			if(provider=='Goodman Community Center, Inc.' && program == 'Basketball & Recreation Services') {
					var element3 = "<select id='s3'><option</option><option value='13112'>13112</option></select>";
			}
			//If program is Youth Center
			if(provider=='Goodman Community Center, Inc.' && program == 'Goodman Youth Resource Center') {
					var element3 = "<select id='s3'><option</option><option value='4397'>4397</option></select>";
			}

			////////////	JSS		////////////////// 
			//If program is Afghan Refugees
			if(provider=='Jewish Social Services of Madison Inc' && program == 'Afghan Refugee Assistance') {
					var element3 = "<select id='s3'><option</option><option value='13112'>13112</option></select>";
			}
			//If program is Immigration
			if(provider=='Jewish Social Services of Madison Inc' && program == 'Immigration Services') {
					var element3 = "<select id='s3'><option</option><option value='4397'>4397</option></select>";
			}	

			////////////	OUTREACH		////////////////// 
			//If program is Info/Referral
			if(provider=='Outreach' && program == 'Information/Referral') {
					var element3 = "<select id='s3'><option</option><option value='13720'>13720</option></select>";
			}
			//If program is Outreach
			if(provider=='Outreach' && program == 'Outreach') {
					var element3 = "<select id='s3'><option</option><option value='13719'>13719</option></select>";
			}
			//If program is Senior LGBT
			if(provider=='Outreach' && program == 'Senior LGBT Outreach') {
					var element3 = "<select id='s3'><option</option><option value='11036'>11036</option></select>";
			}
			//If program is Transgender
			if(provider=='Outreach' && program == 'Transgender Health Advocate') {
					var element3 = "<select id='s3'><option</option><option value='12738'>12738</option></select>";
			}

			/////////////		RCC		////////////////// 
			//If program is Crisis Intervention
			if(provider=='Rape Crisis Center' && program == 'Crisis Intervention') {
					var element3 = "<select id='s3'><option</option><option value='1283'>1283</option></select>";
			}
			//If program is Sexual Assault
			if(provider=='Rape Crisis Center' && program == 'Sexual Assault Prevention Services') {
					var element3 = "<select id='s3'><option</option><option value='12548'>12548</option></select>";
			}

			/////////////		TEST PROVIDER		////////////////// 
			//If program is Betsy
			if(provider=='Test Provider' && program == 'Betsy') {
					var element3 = "<select id='s3'><option</option><option value='99999'>99999</option></select>";
			}
			//If program is Michele
			if(provider=='Test Provider' && program == 'Michele') {
					var element3 = "<select id='s3'><option</option><option value='99998'>99998</option></select>";
			}

			jQuery("#s3").hide();
			jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
			jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());


		});

		var prgmnum = jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());		
		Qualtrics.SurveyEngine.setEmbeddedData("ProgramNo", prgmnum);
		Qualtrics.SurveyEngine.setEmbeddedData("Program",program);
		Qualtrics.SurveyEngine.setEmbeddedData("Provider",provider);
		console.log("outter: program ", program, " provider ", provider, " program number ",prgmnum);
	});






});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

 

Best answer by bstrahin

Thank you @TomG and @ahmedA. Your guidance sent me digging and I found a few tweaks to make my code work. Some playing around and changing the functions from on(‘change’,function() to on(‘click’,function() made a big difference. I am posting a shorter example for anyone who needs to replicate.

 

Qualtrics.SurveyEngine.addOnReady(function(){
   /*Place your JavaScript here to run when the page is fully displayed */
   var that = this.questionId;

   //Add options that should be in the dropdown list
   //s1 = first field in the drill down (Internet Provider)
   //s2 = second list in the drill down (Plan)
   //s3 = third list in the drill down  (Price -- totally made up)

   //Full list we are working from
   //Spectrum   Plan A   25
   //Spectrum   Plan B   40
   //Charter    Plan A   80
   //AT&T       Plan A   35
   //AT&T       Plan B   45
   //AT&T       Plan C   70
   //TDS        Plan A   90

   //Create S1 list: Spectrum, Charter, AT&T, TDS
   var element = (
       //blank first option
       "<select id='s1'><option></option><option value='1'>Spectrum</option>" +
       "<option value='2'>Charter</option><option value='3'>AT&T</option>" +
       "<option value='4'>TDS</option></select>"
   );

   //Assign blank drop downs for rows 2 and 3
   var element2 = "<select id='s2'><option></option></select>";
   var element3 = "<select id='s3'><option></option></select>";

   jQuery(element).insertAfter("#" + that + " .InputText:eq(0)");
   jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");
   jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");

   //hide regular text input fields
   jQuery("#" + that + " .InputText:eq(0)").hide();
   jQuery("#" + that + " .InputText:eq(1)").hide();
   jQuery("#" + that + " .InputText:eq(2)").hide();

   //upon selection, display the text value
   jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
   jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
   jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s3 option:selected").text());

   //when a change is made to s1 (first row of entry)
   jQuery("#s1").on('click',function(){
      //look up value in that box, store it variable provider, and display in the console
      jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
      var provider = jQuery("#" + that + " .InputText:eq(0)").val(); 

      //for providers with just 1 plan and price combo...
	  //do NOT program a blank option at the start of the lists
      //If provider is Charter
      if(provider == 'Charter'){
         var element2 = "<select id='s2'><option value='3'>Plan A</option></select>";
         var element3 = "<select id='s3'><option value='3'>80</option></select>";
      }
      //If provider is TDS
      if(provider=='TDS'){
         var element2 = "<select id='s2'><option value='7'>Plan A</option></select>";
         var element3 = "<select id='s3'><option value='7'>90</option></select>";
      }

      //for providers with multiple plans
      //Spectrum
      if(provider=='Spectrum'){
          var element2 = "<select id='s2'><option></option><option value='1'>Plan A</option><option value='2'>Plan B</option></select>";
          var element3 = "<select id='s3'><option></option></select>";
      }
      //AT&T 
      if(provider=='AT&T'){
          var element2 = "<select id='s2'><option></option><option value='4'>Plan A</option><option value='5'>Plan B</option><option value='6'>Plan C</option></select>";
          var element3 = "<select id='s3'><option></option></select>";
      }

      //autoselect these values and click on them to have them save
	  jQuery("#s2").hide();  //hides original blank list you inserted
      jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");  //inserts list defined above and simulates a click
      jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());  //displays text that goes with the value

      jQuery("#s3").hide();
      jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
      jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

	   //for providers with multiple plans
	  jQuery("#s2").on('click', function(){
		  jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
		  var plan=jQuery("#" + that + " .InputText:eq(1)").val();

		  jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
		  var price=jQuery("#" + that + " .InputText:eq(2)").val();

          //If provider is Spectrum
          //Plan A 
          if(provider == 'Spectrum' && plan == 'Plan A'){
              var element3 = "<select id='s3'><option value='1'>25</option></select>";
          }
          //Plan B 
          if(provider == 'Spectrum' && plan == 'Plan B'){
              var element3 = "<select id='s3'><option value='2'>40</option></select>";
          }

          //If provider is AT&T
          //Plan A 
          if(provider == 'AT&T' && plan == 'Plan A'){
              var element3 = "<select id='s3'><option value='4'>35</option></select>";
          }
          //Plan B 
          if(provider == 'AT&T' && plan == 'Plan B'){
              var element3 = "<select id='s3'><option value='5'>45</option></select>";
          }
           //Plan C 
          if(provider == 'AT&T' && plan == 'Plan C'){
              var element3 = "<select id='s3'><option value='6'>70</option></select>";
          }

		  jQuery("#s3").hide();
		  jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
          jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

	  });

   });

});

 

View original

3 replies

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • 2028 replies
  • February 21, 2024

I’m sorry, I wasn’t able to go through your code as it was too long and without a reference of what I was working it, would take too much time to parse.

However, if your only issue is recode values, why don’t you add them as an additional column and then use JS to autoselect that option.

You’ll then have access to this column in your answers similar to the recode value.

For example:

I added a 4th column (let’s call it recode) to the Qualtrics drill down sample:

 

 

And use the following JS to autoselect the 4th row:

 

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.questionContainer;
	const allSelects = qc.querySelectorAll("select");
	const numSelects = allSelects.length;

	const lastSelect = allSelects[numSelects - 1];
	const secondLastSelect = allSelects[numSelects - 2];

	secondLastSelect.onchange = function () {
		setTimeout(() => {
			lastSelect.options[1].selected = true;
		}, 50);
	};

	// Disabling User Interaction with the select box
	lastSelect.disabled = true;
	lastSelect.style.pointerEvents = "none";
	lastSelect.style.cursor = "not-allowed";

	// Removing the Drop down arrow
	lastSelect.style.appearance = "none";
	lastSelect.style.border = "none";

	// Hiding the recode row
	// const parents = lastSelect.ancestors();
	// for (let i = 0; i < parents.length; i++) {
	// 	const el = parents[i];
	// 	console.log(i, el);
	// 	if (el.tagName == "TR") {
	// 		el.style.opacity = 0;
	// 		break;
	// 	}
	// }
});

 

Here’s the demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/00a1841e-33a5-49ae-a9c5-6934da853af4/SV_8HBDY4VRJnFn40J/BL_8ANz75Ksul37md0?Q_SurveyVersionID=current

 

bstrahin
1 person likes this
  • bstrahin
    bstrahin
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • February 22, 2024

@bstrahin,

I’ve used select2 with a form question to create custom drill-downs a number of times, and I would recommend this approach if you need the flexibility of a custom drill-down.  The advantages are:

  1. The data (i.e., select options) can come from an array of objects or ajax.  If your case, arrays of objects would work and would be much easier to maintain than unwieldy html strings.
  2. The selects can be attached directly to text input fields in your form.
  3. The selects are searchable
  4. The data can contain additional fields that can be saved into additional form fields (typically hidden)
bstrahin
1 person likes this
  • bstrahin
    bstrahin
bstrahin
Level 6 ●●●●●●
Forum|alt.badge.img+38
  • bstrahin
  • Author
  • Level 6 ●●●●●●
  • 638 replies
  • Answer
  • February 22, 2024

Thank you @TomG and @ahmedA. Your guidance sent me digging and I found a few tweaks to make my code work. Some playing around and changing the functions from on(‘change’,function() to on(‘click’,function() made a big difference. I am posting a shorter example for anyone who needs to replicate.

 

Qualtrics.SurveyEngine.addOnReady(function(){
   /*Place your JavaScript here to run when the page is fully displayed */
   var that = this.questionId;

   //Add options that should be in the dropdown list
   //s1 = first field in the drill down (Internet Provider)
   //s2 = second list in the drill down (Plan)
   //s3 = third list in the drill down  (Price -- totally made up)

   //Full list we are working from
   //Spectrum   Plan A   25
   //Spectrum   Plan B   40
   //Charter    Plan A   80
   //AT&T       Plan A   35
   //AT&T       Plan B   45
   //AT&T       Plan C   70
   //TDS        Plan A   90

   //Create S1 list: Spectrum, Charter, AT&T, TDS
   var element = (
       //blank first option
       "<select id='s1'><option></option><option value='1'>Spectrum</option>" +
       "<option value='2'>Charter</option><option value='3'>AT&T</option>" +
       "<option value='4'>TDS</option></select>"
   );

   //Assign blank drop downs for rows 2 and 3
   var element2 = "<select id='s2'><option></option></select>";
   var element3 = "<select id='s3'><option></option></select>";

   jQuery(element).insertAfter("#" + that + " .InputText:eq(0)");
   jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");
   jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");

   //hide regular text input fields
   jQuery("#" + that + " .InputText:eq(0)").hide();
   jQuery("#" + that + " .InputText:eq(1)").hide();
   jQuery("#" + that + " .InputText:eq(2)").hide();

   //upon selection, display the text value
   jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
   jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
   jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s3 option:selected").text());

   //when a change is made to s1 (first row of entry)
   jQuery("#s1").on('click',function(){
      //look up value in that box, store it variable provider, and display in the console
      jQuery("#" + that + " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
      var provider = jQuery("#" + that + " .InputText:eq(0)").val(); 

      //for providers with just 1 plan and price combo...
	  //do NOT program a blank option at the start of the lists
      //If provider is Charter
      if(provider == 'Charter'){
         var element2 = "<select id='s2'><option value='3'>Plan A</option></select>";
         var element3 = "<select id='s3'><option value='3'>80</option></select>";
      }
      //If provider is TDS
      if(provider=='TDS'){
         var element2 = "<select id='s2'><option value='7'>Plan A</option></select>";
         var element3 = "<select id='s3'><option value='7'>90</option></select>";
      }

      //for providers with multiple plans
      //Spectrum
      if(provider=='Spectrum'){
          var element2 = "<select id='s2'><option></option><option value='1'>Plan A</option><option value='2'>Plan B</option></select>";
          var element3 = "<select id='s3'><option></option></select>";
      }
      //AT&T 
      if(provider=='AT&T'){
          var element2 = "<select id='s2'><option></option><option value='4'>Plan A</option><option value='5'>Plan B</option><option value='6'>Plan C</option></select>";
          var element3 = "<select id='s3'><option></option></select>";
      }

      //autoselect these values and click on them to have them save
	  jQuery("#s2").hide();  //hides original blank list you inserted
      jQuery(element2).insertAfter("#" + that + " .InputText:eq(1)");  //inserts list defined above and simulates a click
      jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());  //displays text that goes with the value

      jQuery("#s3").hide();
      jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
      jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

	   //for providers with multiple plans
	  jQuery("#s2").on('click', function(){
		  jQuery("#" + that + " .InputText:eq(1)").val(jQuery("#s2 option:selected").text());
		  var plan=jQuery("#" + that + " .InputText:eq(1)").val();

		  jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
		  var price=jQuery("#" + that + " .InputText:eq(2)").val();

          //If provider is Spectrum
          //Plan A 
          if(provider == 'Spectrum' && plan == 'Plan A'){
              var element3 = "<select id='s3'><option value='1'>25</option></select>";
          }
          //Plan B 
          if(provider == 'Spectrum' && plan == 'Plan B'){
              var element3 = "<select id='s3'><option value='2'>40</option></select>";
          }

          //If provider is AT&T
          //Plan A 
          if(provider == 'AT&T' && plan == 'Plan A'){
              var element3 = "<select id='s3'><option value='4'>35</option></select>";
          }
          //Plan B 
          if(provider == 'AT&T' && plan == 'Plan B'){
              var element3 = "<select id='s3'><option value='5'>45</option></select>";
          }
           //Plan C 
          if(provider == 'AT&T' && plan == 'Plan C'){
              var element3 = "<select id='s3'><option value='6'>70</option></select>";
          }

		  jQuery("#s3").hide();
		  jQuery(element3).insertAfter("#" + that + " .InputText:eq(2)");
          jQuery("#" + that + " .InputText:eq(2)").val(jQuery("#s3 option:selected").text());

	  });

   });

});

 

Leave a Reply


Terms & Conditions