autopopulate column 2 in a SBS when a selection is made in column 1 | XM Community
Skip to main content

Hi All,

i have a SBS question that is repeated a number of times thru a survey (Simple Layout). It is a Forced Response.

In a couple of specific questions i want one choice in Column 2 to be auto-selected when a particular choice “N/A” in Column 1 is selected.

The Column 1 choice is an end-of -survey response but the survey can’t be completed until a choice is made in Column 2 (this is “Confidence Level” so it makes sense that if N/A is chosen Confidence should be automatically populated as “High”


I tried many variations of this JavaScript:

Qualtrics.SurveyEngine.addOnload(function() {

  // Adjust QID number to suit each occurrence of this SBS question

  var sbsQuestionId = 'QID3';

 

  // Add an event listener to the "N/A" choice in column 1

  jQuery('#' + sbsQuestionId + ' .q1 input').change(function() {

    // Check if "N/A" is selected in column 1

    if (jQuery(this).val() === 'N/A') {

      // Set "High" as selected in column 2

      jQuery('#' + sbsQuestionId + ' .q2 input value="High"]').prop('checked', true);

    }

  });

});

 

My feeling is it is the “.q1” and .q2” parts that re messing it up but i just can’t find the correct JS to make this work.

DevTools shows this:

but i still didn’t get anywhere with it.

Any ideas?

So it appears working with SBS in the simple layout is quite complicated as the options are not longer arranged as tables.

Here’s a code that you could try.

Set the source and target as per your requirement.

 

Qualtrics.SurveyEngine.addOnReady(function () {
	const sourceCol = { question: 1, col: 1 };
	const targetCol = { question: 2, col: 3 };

	const quest = this;
	const qc = quest.getQuestionContainer();

	let rows = 0;
	const allInputs = Array.from(qc.querySelectorAll("input")).map((a) => {
		const obj = {};
		obj.question = parseInt(a.name.split("-")-1]);
		obj.row = parseInt(a.name.split("-")-2]);
		obj.input = a;

		if (rows < obj.row) {
			rows = obj.row;
		}

		return obj;
	});

	for (let i = 1; i <= rows; i++) {
		const rowInputs = allInputs.filter((item) => item.row == i);
		let currentCol = 1;
		let currentQuest = rowInputsu0].question;

		rowInputs.forEach((item) => {
			if (currentQuest != item.question) {
				currentCol = 1;
				currentQuest = item.question;
			}
			item.col = currentCol;
			currentCol++;
		});
	}

	const updateChoices = function () {
		setTimeout(() => {
			const sources = allInputs.filter((item) => item.col == sourceCol.col && item.question == sourceCol.question);
			const targets = allInputs.filter((item) => item.col == targetCol.col && item.question == targetCol.question);

			sources.forEach((src, index) => {
				if (src.input.checked) {
					targetseindex].input.click();
				}
			});
		}, 100);
	};

	quest.questionclick = updateChoices;
});

 

Ahmed,

that is simply extraordinary, thank you.

Worked straight up.

How do you see thru the problem and produce that? is it a case of understanding the logic behind it and knowing the language well enough to frame your code?

Amazing.

jeff

What it does do is not allow the user to change the confidence setting whilst N/A is selected.

That is not an issue for me because it is an End of Survey choice so their confidence has to be high to make this choice.

But for others out there who may want to tweak it so that it’s a default that can be changed - how would that work?

no pressure to respond, i’m sure you have plenty of other things to do.

Thanks again

Leave a Reply


Terms & Conditions