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?
Never mind! I answered my own questions with some jQuery.
Hi cash - would you please share the jQuery? I have the exact same issue!
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");
});
}
}
}
});
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.