Statement Groups Not Available (?) in a Side-by-Side Matrix | XM Community
Question

Statement Groups Not Available (?) in a Side-by-Side Matrix

  • 4 December 2021
  • 2 replies
  • 209 views
N
Rank
Userlevel 3
Badge +6

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!
shift.down.png



2 replies

Tom_1842
Rank
Userlevel 7
Badge +27

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('Header2');
jQuery(row1).before('Header1');

jQuery(".sbsheaderrow").css({"background":"#D3D3D3"});
jQuery(".sbsheadercell").css({"text-align":"left", "color":"#000000", "padding-left":"2px"});
SBS_addrow.png

Tom_1842
Rank
Userlevel 7
Badge +27

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


Terms & Conditions