There doesn't appear to be an option to assign statements in a side-by-side matrix to groups (as there is for a standard matrix question).
As a work around, I used the rich text editor to add the group label directly into the first statement in the group. The problem is that Qualtrics vertically aligns the rows to the middle so now the response boxes appear higher than I would like them for that top row.
Ideas for JS that would push that down? Or other known fixes? Thank you!
Statement Groups Not Available (?) in a Side-by-Side Matrix
Hi there, if you still need, I was able to put something like this in place by using JavaScript to insert rows which will look like Group headers. The below is set up to insert rows above the 1st and 4th statements. To configure for more, copy the row vars and change the nth child number to the row number the header should go above, but be sure to have the jQuery that inserts the Header row go from highest row number to lowest. To give it a try, create a SBS with 6 statements and paste the below in the OnLoad section of the question's JavaScript:
var qid = this.questionId;
var row1 = '#'+qid+' > div.Inner.BorderColor.SBSMatrix > div > fieldset > fieldset > div > table > tbody > tr:nth-child(1)';
var row4 = '#'+qid+' > div.Inner.BorderColor.SBSMatrix > div > fieldset > fieldset > div > table > tbody > tr:nth-child(4)';
//highest row number first//
jQuery(row4).before('
jQuery(row1).before('
jQuery(".sbsheaderrow").css({"background":"#D3D3D3"});
jQuery(".sbsheadercell").css({"text-align":"left", "color":"#000000", "padding-left":"2px"});
updated JS:
var qid = this.questionId;
var row1 = '#'+qid+' > div.Inner.BorderColor.SBSMatrix > div > fieldset > fieldset > div > table > tbody > tr:nth-child(1)';
var row4 = '#'+qid+' > div.Inner.BorderColor.SBSMatrix > div > fieldset > fieldset > div > table > tbody > tr:nth-child(4)';
//highest row number first//
jQuery(row4).before('<tr class="sbsheaderrow"><td class="sbsheadercell" colspan="100%">Header2</td></tr>');
jQuery(row1).before('<tr class="sbsheaderrow"><td class="sbsheadercell" colspan="100%">Header1</td></tr>');
jQuery(".sbsheaderrow").css({"background":"#D3D3D3"});
jQuery(".sbsheadercell").css({"text-align":"left", "color":"#000000", "padding-left":"2px"});
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.