Remove duplicate text entries to display only one in the side by side question

Hi @Anastasia_psy. Let me help you with some JavaScript. The idea is to have something like this shown below. I reduced it to 2 questions 2 options for each to keep it simple as demonstration. The “Hidden Question” will not be displayed if you follow the code I will explain. It is only used as “pseudo” question to store the unique values for all the actual questions. Based on your screenshot, I assumed you work with some form field.

The outcome in the side-by-side question will be like this: 

To achieve the behavior described above, please follow my steps. 

1) Create one block containing your initial questions and the hidden question at the end. The hidden question must have (at least) as many input fields as all the previous questions combined. In my case it does have 4 options because the 2 questions before each have 2 options.

2) Add this JavaScript code to the hidden question so that it will not show up in the survey but can still be manipulated in the background: 

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
    var q = document.getElementById(this.questionId);
	if (q) {
		q.style.display = 'none';
	}
});

3) Add some JavaScript to each of the questions before the hidden one: 

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
	var namesQ1 = document.querySelectorAll('#QID1 .InputText');
	var namesQ2 = document.querySelectorAll('#QID2 .InputText');
	var namesQ3 = document.querySelectorAll('#QID3 .InputText');
	var namesHidden = document.querySelectorAll('#QID4 .InputText'); 

	function updateNamesHidden() {
		let combinedValues = [];

		function addUniqueValues(inputs) {
			inputs.forEach(input => {
				const value = input.value.trim();
				if (value !== '' && !combinedValues.includes(value)) {
					combinedValues.push(value);
				}
			});
		}

		addUniqueValues(namesQ1);
		addUniqueValues(namesQ2);
        addUniqueValues(namesQ3);

		namesHidden.forEach((input, index) => {
			if (index < combinedValues.length) {
				input.value = combinedValues[index];
			} else {
				input.value = '';
			}
		});
	}

	// Initial copy
	updateNamesHidden();

	// Add event listeners to update values
	namesQ1.forEach(input => {
		input.addEventListener('input', updateNamesHidden);
	});
	namesQ2.forEach(input => {
		input.addEventListener('input', updateNamesHidden);
	});
	namesQ3.forEach(input => {
		input.addEventListener('input', updateNamesHidden);
	});
});

The code adds some listener to each of the inputs available to the participants. When one input changes, this is reflected to the hidden question. The code ensures that the same input value is only added once to the input value.

I already adjusted the code to consider 3 questions which collect names. Make sure to adjust the technical QIDs: 

var namesQ1 = document.querySelectorAll('#QID1 .InputText');
var namesQ2 = document.querySelectorAll('#QID2 .InputText');
var namesQ3 = document.querySelectorAll('#QID3 .InputText');
var namesHidden = document.querySelectorAll('#QID4 .InputText'); 

You find them via the dev tools of the browser: 

Temporarily remove the code from step 2 to get the QID for the hidden question as well. 

Based on my screenshot, the first line (in my survey) would need to be:

var namesQ1 = document.querySelectorAll('#QID58 .InputText');

Get some assistance of your dev team if you struggle with the dev tools. 

4. Add the side-by-side question in some additional block after the previously described questions: 

Use the carry forward choices setting to forward the answers of the previous hidden question. 

That’s it. Maybe there are other solutions as well, but this is the first that got to my mind. 

Hope I could help. 

Best
Christian