Use Javascript for Qualtrics matrix table display

Question

I'd like to use Javascript to set up the display logic for individual rows in a single-choice matrix table question in Qualtrics. I've always done this in the past with the usual click-through method, but I often have 100+ rows to do this for, and it'd save a ton of time to be able to do this programmatically.

I've tried inserting the following into "Add JavaScript" for the question I'm trying to add the display logic to:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Set display logic*/
    if ('${q://QID2/SelectedAnswerRecode/1}' < 3)  {'${q://QID3/ChoiceDescription/1}'.style.visibility='hidden';}
    if ('${q://QID2/SelectedAnswerRecode/2}' < 3)  {'${q://QID3/ChoiceDescription/2}'.style.visibility='hidden';}
});

The idea is that an answer with a value of at least 3 in row 1 of QID2 (also a single-choice matrix table) is required for row 1 of matrix table QID3 to appear, and so on. As it is, is appears unresponsive - rows in QID3 are still displayed even if selected values in the corresponding rows of QID2 are < 3.

I've also tried style.display='none' instead of style.visibility='hidden' with no success. My experience with Javascript is limited, so I suspect it's some kind of syntax issue.

Answer 1

Use Inspect Element in the browser with the survey in Preview mode to find the element ID for the row header of the matrix where the display logic will occur. .up().hide() will grab the rest of the row as well. Quotes around the IDs are necessary because of the '~' in the ID names; otherwise I get an "unexpected token ~" error when trying to save it. Thanks to T. Gibbons for pointing me in the right direction.

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Set display logic*/
    if ('${q://QID2/SelectedAnswerRecode/1}' < 3)  {$('header~QID3~1').up().hide();}
    if ('${q://QID2/SelectedAnswerRecode/2}' < 3)  {$('header~QID3~2').up().hide();}
    if ('${q://QID2/SelectedAnswerRecode/3}' < 3)  {$('header~QID3~3').up().hide();}
    if ('${q://QID2/SelectedAnswerRecode/4}' < 3)  {$('header~QID3~4').up().hide();}
    if ('${q://QID2/SelectedAnswerRecode/5}' < 3)  {$('header~QID3~5').up().hide();}
});

Copy/paste/edit as needed.

UPDATE

Looks like things may have changed with updates, but while this works with the question itself, this can mess with the logic on subsequent questions. Use extreme caution!

Answer 2

The problem is indeed with your syntax. You need to hide an html element and '${q://QID3/ChoiceDescription/1}' is not an html element (it is the innerHTML of a label). Even if it were an html element, the syntax is wrong (it wouldn't be in quotes).

It is best to use prototypejs when possible, so if the element were named 'element' the command would be:

element.hide();

To find the correct elements to hide, you need to identify and find them by element id or some combination of element tag, class and attribute. It could be done using choice description, but it would take a lot more code and wouldn't be very efficient.