Adding a sentence before displaying statements

Karishma1486Karishma1486 UK Community Member Qubie ✭
edited June 2020 in Custom Code

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


Cheers,

Karishma

Best Answers

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭
    Accepted Answer

    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')
    



  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭
    Accepted Answer

    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')
    

Answers

  • rondevrondev Community Member - Trial User Wizard ✭✭✭✭✭

    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);   
    
  • Karishma1486Karishma1486 UK Community Member Qubie ✭

    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?

  • rondevrondev Community Member - Trial User Wizard ✭✭✭✭✭

    Yes, go to javascript option of side-by-side question and paste the above code under onReady function as shown below:


  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭

    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')
    
    
  • Karishma1486Karishma1486 UK Community Member Qubie ✭
    edited June 2020

    Hi @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


  • Karishma1486Karishma1486 UK Community Member Qubie ✭

    @rondev


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

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭
    edited June 2020

    @Karishma1486 - 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')
    


  • Karishma1486Karishma1486 UK Community Member Qubie ✭

    @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


  • Karishma1486Karishma1486 UK Community Member Qubie ✭

    @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

  • Karishma1486Karishma1486 UK Community Member Qubie ✭

    @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.


    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

  • Karishma1486Karishma1486 UK Community Member Qubie ✭

    Hi @SurajK


    It worked brilliantly! - Thanks a lot!

Sign In to Comment