How to minimize width of "None of these" answer choice in Dynamic Images test | XM Community
Skip to main content

I am planning to conduct a Qualtrics Dynamic Images test which will also have a “none of these choices” answer optoin.  Currently Qualtrics renders a table with 3 equally sized columns. which means my images are smaller than they need to be and the “none of these choices” column is wider than it needs to be.  I would like to minimize the width of the 3rd column (with the “none of these choices” option) so that text wraps and displays the words one above the other.  The intent of that is to allow the 2 images for the 2 conjoint configurations being tested to be rendered as large as possible to allow the respondent to see as much detail in the images as posisble.  Is there a way I can do this via custom CSS for the overall survey or via javascript?   I don’t see a way to edit the HTML of the individual Conjoint quesiton type as it’s a self-contained module?

Thanks!
Eric Brown

Hi @mericbrow

Currently, the size of the "Allow Text Entry" box is fixed to three options: Small, Medium, and Big. Unfortunately, there is no option to customize the size further.

My suggestion would be to remove the "Allow Text Entry" option and instead add a separate "Text Entry" question below it. You can then apply display logic to show this question only if "Others" is selected. Additionally, you can use CSS to adjust the spacing between questions to remove any unwanted white space.


@mericbrow,

You can modify the conjoint layout with JavaScript located in header or footer.


Thank you TomG!   Just to clarify: I’m assuming you’re referring to the Header or Footer boxes on the “General” menu under Survey “Look and Feel” section, is that correct?      

If so, I don’t know much Javascript and have searched the Qualtrics Community support site for code to use for this application and didn’t find anything that matched.  Based on a BingChat search and borrowing from the question-level java script code (which doesn’t seem to exist for the Dynamic Images / Conjoint question type), I’ve come up with the following code which doesn’t throw an error, but also doesn’t work:  

<script>
Qualtrics.SurveyEngine.addOnload(function() 
{const table = document.getElementById('myTable');  // Set the width percentages for each column 
const columnWidths = e45, 45, 10];  // Set equal widths for the 2 package images and as small as possible for "None of these choices"  
// Apply the widths to the table columns
const colElements = table.querySelectorAll('th, td');
colElements.forEach((col, index) => {     col.style.width = `${columnWidthseindex]}%`; })
</script>

Any suggestions on how to get this code to work?  E.g. do I need to replace “myTable” with a Qualtrics system-level table name?   If so, any ideas what that name is?  

Or do you have other code you’d recommend using instead? 

Thanks for your help!
Eric


I’m assuming you’re referring to the Header or Footer boxes on the “General” menu under Survey “Look and Feel” section, is that correct?

Yes

do I need to replace “myTable” with a Qualtrics system-level table name? If so, any ideas what that name is?

Yes, use your browser’s Inspect feature. Also, you probably need to limit it to the conjoint question (use the QID in your script)

Or do you have other code you’d recommend using instead?

No, but I don’t think your code will work correctly. The part the code that loops the cells/columns doesn’t look right.


Thanks again Tom! 

Another question:  There are 6 QIDs that the java script should get applied to:  

QID1_CBCONJOINT,  QID2_CBCONJOINT, QID3_CBCONJOINT,  QID4_CBCONJOINT, QID5_CBCONJOINT

and QID6_CBCONJOINT.   

I’m assuming there’s a way in java script to filter to the effect of “when QID like or contains ‘CBCONJOINT’ “ etc.?   Do you know what that code would look like? 

Thanks!

Eric


Thanks again Tom! 

Another question:  There are 6 QIDs that the java script should get applied to:  

QID1_CBCONJOINT,  QID2_CBCONJOINT, QID3_CBCONJOINT,  QID4_CBCONJOINT, QID5_CBCONJOINT

and QID6_CBCONJOINT.   

I’m assuming there’s a way in java script to filter to the effect of “when QID like or contains ‘CBCONJOINT’ “ etc.?   Do you know what that code would look like? 

Thanks!

Eric

You could do something like:

var cjid = u"QID1_CBCONJOINT","QID2_CBCONJOINT","QID3_CBCONJOINT","QID4_CBCONJOINT","QID5_CBCONJOINT","QID6_CBCONJOINT"];
if(cjid.indexOf(jQuery(".QuestionOuter:first").attr("id"))>-1) {
//add code here
}

 


Leave a Reply