How to add static text after a text entry box?

Goldie
Goldie Provo, UTFounding Community Member CEP (Chief Executive Paw-ficer)

I'd like to add static text after the text entry box. I want to include "@[company].com" to make it clear the respondents should enter their ID rather than their entire email. How can I add this after the text box?

Best Answers

  • Clint
    Clint Washington, USACommunity Member, Qualtrics Brand Admin Guru ✭✭
    Accepted Answer

    With the addition of some JavaScript on the question, you can get this done.

    This example shows how to put text on either side of the text entry box.
    https://gist.github.com/13bzhang/92be517b6558132c78620ad029c77f4d

    Qualtrics.SurveyEngine.addOnload(function()
    {
        /*Place Your Javascript Below This Line*/
    
    var inputs = $(this.getQuestionContainer()).select('input[type="text"]');
    
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      $(input).insert({before: 'In '});
      $(input).insert({after: ' years'});
    }
    
    
    });
    
  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    edited November 2018 Accepted Answer

    @Sheryl,

    Yes, unfortunately, you are doing it wrong. I think you've misunderstood what I've been trying to explain from the beginning. I'll start from the beginning one last time:

    1. Create a multiple choice question at the BEGINNING of your survey. Label it "PT" for "Piped Translations". Respondents will not see this question. It's only purpose it to contain words or phrases that need to be piped into various parts of the survey in the current language.
      • Add to the PT question, in your base language, words or phrases that you will need to pipe as choices
      • After adding the choices to the PT question, translate the choices using the Qualtrics translate functionality
      • Hide the PT question using display logic. Use a display logic condition that is always false.
    1. Pipe the PT question choice descriptions into other questions in the survey as needed. Make sure you use the correct pipe string. One way to do this is to go to a question's text and click on "Piped text...", then choose the PT question and the appropriate choice description. This string can then be copied wherever you need it (e.g. into a JavaScript).
«1

Answers

  • Goldie
    Goldie Provo, UTFounding Community Member CEP (Chief Executive Paw-ficer)

    That worked, thank you!!

  • gwrightiv
    gwrightiv Raleigh, NCCommunity Member, Qualtrics Brand Admin Qubie ✭

    hijacking this thread, Is there a way to add a grey text into the text field that after clicking in goes away?

  • Emily
    Emily Seattle, WACommunity Administrator Administrator

    Hi @gwrightiv! If you have a different question, it would be best to start a new question so that it goes into the "Unanswered" queue and gets more attention from other users. That doesn't mean you can't link back to this thread, however!

  • uhrxx005
    uhrxx005 Community Member, XMPN Member, Qualtrics Brand Admin Guru ✭✭
  • Jennifer_Murray1992
    Jennifer_Murray1992 Queen's University BelfastCommunity Member Qubie ✭

    I have a question related to the original post. I used the JavaScript posted by Clint in November 2017 and it worked. However, the static text after the textbox is appearing underneath the textbox and is slightly covered by it. I was wondering if there was any way to amend the code to tidy it up?

  • PeeyushBansal
    PeeyushBansal IndiaCommunity Member, XMPN Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    edited August 2018
  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    @Clint said:
    With the addition of some JavaScript on the question, you can get this done.

    This example shows how to put text on either side of the text entry box.
    https://gist.github.com/13bzhang/92be517b6558132c78620ad029c77f4d

    Qualtrics.SurveyEngine.addOnload(function()
    {
      /*Place Your Javascript Below This Line*/
      
    var inputs = $(this.getQuestionContainer()).select('input[type="text"]');
    
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      $(input).insert({before: 'In '});
      $(input).insert({after: ' years'});
    }
    
    
    });
    

    HI, I would like to ask, how to change the text size and text type of "years"?

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Sherly said:

    @Clint said:
    With the addition of some JavaScript on the question, you can get this done.

    This example shows how to put text on either side of the text entry box.
    https://gist.github.com/13bzhang/92be517b6558132c78620ad029c77f4d

    Qualtrics.SurveyEngine.addOnload(function()
    {
        /*Place Your Javascript Below This Line*/
        
    var inputs = $(this.getQuestionContainer()).select('input[type="text"]');
    
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      $(input).insert({before: 'In '});
      $(input).insert({after: ' years'});
    }
    
    
    });
    

    HI, I would like to ask, how to change the text size and text type of "years"?

    Put the text inside a span and style it, for example:

    $(input).insert({after: '<span style="font-size:16px;font-style:italic">years</span>'});
    
  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    @TomG said:

    @Sherly said:

    @Clint said:
    With the addition of some JavaScript on the question, you can get this done.

    This example shows how to put text on either side of the text entry box.
    https://gist.github.com/13bzhang/92be517b6558132c78620ad029c77f4d

    Qualtrics.SurveyEngine.addOnload(function()
    {
      /*Place Your Javascript Below This Line*/
      
    var inputs = $(this.getQuestionContainer()).select('input[type="text"]');
    
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      $(input).insert({before: 'In '});
      $(input).insert({after: ' years'});
    }
    
    
    });
    

    HI, I would like to ask, how to change the text size and text type of "years"?

    Put the text inside a span and style it, for example:

    $(input).insert({after: '<span style="font-size:16px;font-style:italic">years</span>'});
    

    Hi Tom,

    I have 2 versions of my questionnaire, with different translation. I use the translation features from Qualtrics and put my translation in translation box. I would like to ask if you know how to add this static "years" in my translation box?

    Thank you so much,
    Best Regards,
    Sherly

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Sherly said:

    Hi Tom,

    I have 2 versions of my questionnaire, with different translation. I use the translation features from Qualtrics and put my translation in translation box. I would like to ask if you know how to add this static "years" in my translation box?

    Thank you so much,
    Best Regards,
    Sherly

    @Sherly,

    Add a "Piped Translations" MC question to the beginning of your survey and hide it with display logic. The choices should be the words or phrases you want to pipe (e.g. years, etc.). Then pipe the choice text for years into the JavaScript.

  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    Hi @TomG ,
    Thank you so much for your answer. Can you tell me more detail? That means that I need to create another question containing the same questions, but with the phrases that I want it to be in translated survey. Then I hide this question using the display logic and then add Javascript for the questions that I just created. Is that the one that you explain to me? Apologise, I am very new with Qualtrics.

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Sherly said:
    Hi @TomG ,
    Thank you so much for your answer. Can you tell me more detail? That means that I need to create another question containing the same questions, but with the phrases that I want it to be in translated survey. Then I hide this question using the display logic and then add Javascript for the questions that I just created. Is that the one that you explain to me? Apologise, I am very new with Qualtrics.

    Add a question that looks something like this and translate it:

    Then pipe the choice text into your JavaScript (using the appropriate QID):

    $(input).insert({after: '<span style="font-size:16px;font-style:italic">${q://QID18/ChoiceDescription/1}</span>'});
    
  • Sherly
    Sherly LondonCommunity Member Qubie ✭


    Hi Tom, I am sorry, I think do not understand with what you mention above. How do I choose the display logic? I attach you the picture of my questions and my translation. Basically, I will show my questionnaire in Indonesia language, which I already put static text, which is "tahun". But I could not put static text in my English language, which should be "years".

    Thank you for your help.

  • Sherly
    Sherly LondonCommunity Member Qubie ✭

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    edited November 2018

    The only thing that changes in Q490 is the JavaScript, where you pipe in choice text from the "Piped translations" question. You add the "Piped translations" question as a new question to the beginning of your survey (see image in previous message). The only difference is "years" would be "tahun" since the base language for the survey is Bahasa Indonesia. Then in your English translation, "years" is the translation for "tahun".

  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    @TomG said:

    @Sherly said:
    Hi @TomG ,
    Thank you so much for your answer. Can you tell me more detail? That means that I need to create another question containing the same questions, but with the phrases that I want it to be in translated survey. Then I hide this question using the display logic and then add Javascript for the questions that I just created. Is that the one that you explain to me? Apologise, I am very new with Qualtrics.

    Add a question that looks something like this and translate it:

    Then pipe the choice text into your JavaScript (using the appropriate QID):

    $(input).insert({after: '<span style="font-size:16px;font-style:italic">${q://QID18/ChoiceDescription/1}</span>'});
    

    Hi Tom,
    I saw from your picture, it showed "If hide is equal to 1". How can I get into this? I have created a new question below my "Indonesia" version. However, when I want to do display logic, I could not find the one that you said.

    Thank you.

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Sherly - In Display Logic where it says "Question" select "Embedded Data" then type "hide" in the box next to it, then "Is Equal to" in the next box, then type "1" in the last box. Since "hide" is an undefined embedded data variable it will never be equal to 1 and the question will never display.

  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    Hi Tom,

    Thanks for your explanation. I managed to do that. Now I added the one that you mentioned before in my Javascript of Q490. I added it like this:

    Qualtrics.SurveyEngine.addOnload(function() {
    var input = jQuery("#"+this.questionId+" .InputText");
    input.after(" tahun");
    input.css("width","120px");
    $(input).insert({after: '${q://QID490/ChoiceDescription/1}'});
    });

    When I looked at the translation version, it did not work. What did I miss?

    Thank you,

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Sherly,

    You are mixing two different scripts. The script you posted is jQuery, except the last line which is Prototypejs. Replace the input.after(" tahun") line with:

    input.after(" ${q://QID490/ChoiceDescription/1}");
    

    And delete the $(input)... line.