Adding a sentence before displaying statements | XM Community
Solved

Adding a sentence before displaying statements


Hi Everyone,
I have created a side by side type of question. Before the options to the respondent I would like to add a common statement which connects to rest of the following options.
For eg.
Q. To what extent do you agree with each of the following statements, in terms of the challenges your firm faces in a country? (Please select one option from the drop-down menu for each question)

Relative to the competitors...
Our firm faces costs of advertising (drop-down list of strongly disagree- agree)
Our firm faces transportation costs (drop-down list as above )
Our firm receives biased treatment by consumers (drop-down list as above)

My query is How do I insert "Relative to the competitors..." as a sentence and not have drop down scales displayed for it. Is there a way?

Attached is an example of another question where I am struggling to find how to insert a common overarching sentence
Screenshot 2020-06-30 at 15.11.37.png
Cheers,
Karishma



icon

Best answer by SurajK 30 June 2020, 17:46

View original

13 replies

Userlevel 7
Badge +22

To accomplish what is shown in the attached image, you can use the below code:
jQuery("#"+this.questionId+" select option:first-child").text("Choose an item").prop("selected",true);   

Thanks heaps for your response.
May I please know.. how or where to insert this code?
Do I have to click the java script option?

Userlevel 7
Badge +22

https://www.qualtrics.com/community/discussion/comment/27372#Comment_27372Yes, go to javascript option of side-by-side question and paste the above code under onReady function as shown below:
image.png

Userlevel 5
Badge +4

Try the below code,
jQuery('tbody tr:eq(0)').find('td:gt(1)').css('visibility','hidden')

//OR
jQuery('tbody tr:eq(0)').find('td').css('visibility','hidden')

//OR As per the no. of columns, below there are 3
jQuery('tbody tr:eq(0)').find('.SBS1').css('visibility','hidden')
jQuery('tbody tr:eq(0)').find('.SBS2').css('visibility','hidden')
jQuery('tbody tr:eq(0)').find('.SBS3').css('visibility','hidden')


Screenshot 2020-06-30 at 16.15.46.pngHi SurajK ,
Thanks for your response. The code worked perfectly when I turned on the preview mobile view. But unable to see the whole question on the preview desktop screen. Please see the attached screen shots
Screenshot 2020-06-30 at 16.08.47.png

rondev

Unfortunately..the code didn't work on the question. If you have any other suggestion please do let me know 🙂

Userlevel 5
Badge +4

https://www.qualtrics.com/community/discussion/comment/27376#Comment_27376Karishma1486 - Please use only one code as per your layout of the question. The below code will remove the borders as well. Try at a time one based on the look and feel.
Either use the below one,
jQuery('tbody tr:eq(0)').find('td:gt(1)').css('visibility','hidden')
OR
jQuery('tbody tr:eq(0)').find('td').css('visibility','hidden')
OR
//OR As per the no. of columns, below there are 3
jQuery('tbody tr:eq(0)').find('.SBS1').css('visibility','hidden')
jQuery('tbody tr:eq(0)').find('.SBS2').css('visibility','hidden')
jQuery('tbody tr:eq(0)').find('.SBS3').css('visibility','hidden')

SurajK

Thanks for this Suraj.. Apologies I am bit new to this. I tried each code one at a time and I prefer the last set of codes.
jQuery('tbody tr:eq(0)').find('.SBS1').css('visibility','hidden')
jQuery('tbody tr:eq(0)').find('.SBS2').css('visibility','hidden')
jQuery('tbody tr:eq(0)').find('.SBS3').css('visibility','hidden')

The only issue I have is that, the first sentence "relative to competitors in that location..." appears perfectly on the mobile view i.e. the first row does not contain the drop down list across three columns. However, the desktop preview shows all the drop-downs missing from all the rows. Any idea how to fix this? I have attached a screen shot for your kind reference.

Thanks a million in advance.. really appreciate
Screenshot 2020-06-30 at 16.34.25.png

Userlevel 5
Badge +4

This appears to be working fine for me, see below screenshot. Is there any other JS you have used along with the above one.
Try this one instead,
jQuery('#'+this.questionId).find('tbody tr:eq(0)').find('.SBS1').css('visibility','hidden')
jQuery('#'+this.questionId).find('tbody tr:eq(0)').find('.SBS2').css('visibility','hidden')
jQuery('#'+this.questionId).find('tbody tr:eq(0)').find('.SBS3').css('visibility','hidden')


image.png

SurajK
Thanks a TRILLION!!!!!
The new code that you asked me to try worked perfectly! This has been immensely helpful to me..
Again thanks heaps for your prompt response with excellent solution!
Stay safe and take care,
Kind Regards,
Karishma Nagre

SurajK
A similar query.
I have attached a screen shot below.. My query is only about the last row. May I please know what code would work, if I do not want the choices to be displayed for the first and second column - for the last row? So that it appears something like in the screenshot.
Screenshot 2020-07-21 at 19.33.27.png
This question already has a Java Script for the for the first row, for which you helped previously and recommended me to add this code.
jQuery('#'+this.questionId).find('tbody tr:eq(0)').find('.SBS1').css('visibility','hidden')
jQuery('#'+this.questionId).find('tbody tr:eq(0)').find('.SBS2').css('visibility','hidden')
jQuery('#'+this.questionId).find('tbody tr:eq(0)').find('.SBS3').css('visibility','hidden')
jQuery('#'+this.questionIdjust the d).find('tbody tr:eq(0)').find('.SBS4’).css('visibility','hidden')

Any help on how to adjust the choices for the last row will be really appreciated.
Thanks a lot

Userlevel 5
Badge +4

Hi Karishma1486 ,
You can use the below codes to hide the drop down of last row for the first 2 columns (as per your screenshot)
jQuery('#'+this.questionId).find('tbody tr:last').find('.SBS1').css('visibility','hidden')
jQuery('#'+this.questionId).find('tbody tr:last').find('.SBS2').css('visibility','hidden')

Hi SurajK

It worked brilliantly! - Thanks a lot!

Leave a Reply