For a Mobile-Friendly Likert Matrix, how collapse the last statement after a value is selected? | XM Community
Skip to main content
Solved

For a Mobile-Friendly Likert Matrix, how collapse the last statement after a value is selected?

  • June 15, 2021
  • 3 replies
  • 378 views

cash
Forum|alt.badge.img+1

We like the way each statement in a Likert Matrix collapses the accordion, after a scale value is selected (on a mobile device). However, the last statement never collapses after a selection is made. Our client really wants the behavior to be consistent, with the LAST statement also collapsing on selection. How can we force the last statement's scale to collapse upon clicking a radio? For example, in the graphic below, a pain rating is given per body segment. As each body segment is rated, it automatically collapses and expands the next body segment's rating scale. It would be great if when selecting the last body segment (e.g. Legs) it would also collapse that rating and display the text of the selection (like on all the other body segments). Is there a way to force that with CSS or jquery?
Capture.PNG

Best answer by cash

Never mind! I answered my own questions with some jQuery.

3 replies

cash
Forum|alt.badge.img+1
  • Author
  • Answer
  • June 16, 2021

Never mind! I answered my own questions with some jQuery.


uwanae
Forum|alt.badge.img+3
  • July 12, 2022

Hi cash - would you please share the jQuery? I have the exact same issue!


cash
Forum|alt.badge.img+1
  • Author
  • July 12, 2022

Hi Uwanae. Here's the code I used. It seemed to do the trick.
FYI - We ended up doing something totally different in the end. Instead of a matrix question with with a likert, we went with a side-by-side question having a drop-down-list for the column-options. However, here's the code for the matrix/likert that seemed to fix the issue I originally posted about. I haven't look at this for a while. So... hopefully it still works!
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionclick = function(event,element){
//for a single answer multiple choice question, the element type will be radio
if (element.type == 'radio')
{
var choiceNum = element.id.split('~')[2];

//if selection was made on the last body segment (6=legs) then collapse after response
if (choiceNum==6) {
var mobileQuestionDiv = jQuery(".QuestionBody.mobile");
var rowItems = jQuery(".ChoiceRow");
var headerCells = jQuery(".ChoiceRow th");
var standardCells = jQuery(".ChoiceRow td");
var dropDownArrowContainer = jQuery(".ChoiceRow .dropdown-arrow.mobile span")

var rowheight;

jQuery(mobileQuestionDiv).find(rowItems).each(function(index, elem){ 
if (index==0) {
rowheight = jQuery(elem).eq(0).height();
}
jQuery(elem).css("height",rowheight);
});
jQuery(mobileQuestionDiv).find(headerCells).each(function(index, elem){ 
jQuery(elem).attr("aria-expanded", "false");
jQuery(elem).attr("aria-hidden","true");
});
jQuery(mobileQuestionDiv).find(standardCells).each(function(index, elem){
jQuery(elem).attr("aria-expanded", "false");
jQuery(elem).attr("aria-hidden","true");
});
jQuery(mobileQuestionDiv).find(dropDownArrowContainer).each(function(index, elem){ 
jQuery(elem).attr("class", "dropdown-down");
});
}
}
}
});