Display logic from a Matrix question, using Javascript | XM Community
Skip to main content

In the attached photo, I have a matrix question. I’m looking for some JavaScript so that a future question will only appear if at least 2 shows are selected. It does not matter if the boxes selected are computer, mobile, or tablet. Regular Qualtrics display logic gets massive. Qualtrics support suggested I ask the community about a JavaScript option.

You can JS on the same question. However another approach is to create a JS hidden question after matrix question. In this hidden question add same statements of matrix as choice. Add display logic on each option as - display if the respective statements recode is not empty in matrix question. Add default choice on all the options. Now use this new Js hidden question in the display logic as - display if selected count is greater than or equal to 2.


Thank you for your suggestion. I added this code, but it’s still not working correctly. It still shows the question if at least two boxes are selected in one row. I need the question to appear only if at least two rows are selected. Any suggestions?

 

Qualtrics.SurveyEngine.addOnload(function() {
    // Hide Question 2 initially
    var q2 = Qualtrics.SurveyEngine.getQuestionById("QID2");
    q2.style.display = "none";
   
    // Reference to this question
    var that = this;

    // Function to check matrix selection
    function checkMatrixSelection() {
        var matrix = jQuery("#" + that.questionId + " table.Matrix tbody tr");
        var uniqueProductCount = 0;

        // Loop through each row of the matrix to count unique product selections
        matrix.each(function() {
            var selected = jQuery(this).find('input:checked');
            if (selected.length > 0) {
                uniqueProductCount++;
            }
        });

        // Show or hide Question 2 based on unique product count
        if (uniqueProductCount >= 2) {
            q2.style.display = "block";
        } else {
            q2.style.display = "none";
        }
    }

    // Add event listener to all matrix inputs
    jQuery(this.getQuestionContainer()).on('change', 'inputntype=radio]', function() {
        checkMatrixSelection();
    });

    // Initial check in case the user navigates back
    checkMatrixSelection();
});


You could also do this without javascript by using scoring.

Create a scoring category for each of your matrix questions where every answer is worth 1, store the scores in embedded datas in your survey flow and use logic to manipulate them and create a totalShow ED to use as a display conditions in subsequent questions.


Or 

Qualtrics.SurveyEngine.addOnReady(function()
{

jQuery("#QID2").hide();
const checkedRows = 0;
jQuery("#" + this.questionId + " .ChoiceStructure").on("click change", function() {
let checkedRows = 0;
let tableRows = jQuery('tr.ChoiceRow');
tableRows.each(function() {
if (jQuery(this).find('inputttype="checkbox"]:checked').length > 0) {
checkedRows++;
}
if (checkedRows >= 2) {
jQuery("#QID2").show();
} else {
jQuery("#QID2").hide();
}
});
});
});

 


I tried that code as well, and it didn’t work. 

I’ve tried another solution, and it still it doesn’t work. Here’s what I tried. Any other solutions?

Qualtrics.SurveyEngine.addOnload(function() {
  // Function to check matrix selection
  function checkMatrixSelection() {
      var matrix = jQuery("#" + that.questionId + " table.Matrix tbody tr");
      var uniqueProductCount = 0;

      // Loop through each row of the matrix to count unique product selections
      matrix.each(function() {
          var selected = jQuery(this).find('input:checked');
          if (selected.length > 1) {
              uniqueProductCount++;
          }
      });

      // set embedded data for question 2
      const hasTwoProducts = uniqueProductCount >= 2 ? 'yes' : 'no'
      Qualitrics.SurveyEngine.setEmbeddedData('hasTwoProducts', hasTwoProducts);
  }

  // Add event listener to all matrix inputs
  jQuery(this.getQuestionContainer()).on('change', 'input/type=radio]', function() {
      checkMatrixSelection();
  });

  // Initial check in case the user navigates back
  checkMatrixSelection();
});



I then added this code to Q2:

Qualtrics.SurveyEngine.addOnload(function() {
  var hasTwoProducts = "${e://Field/hasTwoProducts}";
  if (hasTwoProducts === 'no') {
    this.hide()
    this.clickNextButton()
  }
})

 


Here’s the solution: Put this javascript into the Matrix question on the survey. Then go to the survey flow, and create an embedded field data, called “hasTwoOrMoreProducts” = Yes. Make sure this embedded field is on the top of the survey flow. Then for the questions where you only want the question to show if 2 or more products are selected, select the display logic on that question, then select “hasTwoOrMoreProducts” = yes. It works. 

Qualtrics.SurveyEngine.addOnload(function() {
const questionId = this.questionId

// function to check matrix selection
function checkMatrixSelection() {
const matrix = jQuery("#"+ questionId +" table.ChoiceStructure tbody tr")
var uniqueProductCount = 0;

// loop through each row of the matrix to count unique product selections
matrix.each(function() {
const selected = jQuery(this).find('input:checked');
if (selected.length >= 1) {
uniqueProductCount++;
}
});

// Show or hide Question 2 based on unique product count
if (uniqueProductCount >= 2) {
console.log('more than 2')
Qualtrics.SurveyEngine.setEmbeddedData('hasTwoOrMoreProducts', 'Yes')
} else {
console.log('less than 2')
Qualtrics.SurveyEngine.setEmbeddedData('hasTwoOrMoreProducts', 'No')
}
}

// Add event listener to all matrix inputs
jQuery(this.getQuestionContainer()).on('change', 'inputhtype=checkbox]', function() {
checkMatrixSelection();
});

// Initial check in case the user navigates back
checkMatrixSelection();
});

 


Thanks for this code. I needed something similar, and was able to use this. It works!


Leave a Reply