Percent sign after text fill.

MattyDMattyD Community Member Qubie ✭

Percent sign after text fill.

Hello,

I have a survey item where the respondent should enter a percentage. I saw another thread where someone added percent signs to numbers on a slidebar, but we didn't like how that rendered on mobile devices. Right now, I have a text fill with a 0-100 validation, and the item's instructions say to enter a percentage. But our pilot tests show people still try to type a % sign in the text fill.

Does anyone have a method to display a "%" after the text fill box? Or, any other ideas on how to collect percent inputs.

Thanks for any help.
-Matt

Best Answers

  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    It isn't clear exactly what type of question you are working with, but try this:

    Qualtrics.SurveyEngine.addOnload(function() {
        jQuery("#"+this.questionId+" .InputText").after("%");
    });
    
  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    @MattyD said:
    Hi again TomG, I spoke too soon. This method still renders oddly on mobile devices. The text box takes up the entire width of the screen and the % wraps to the next line.

    Thoughts? Thanks a million though for the first idea, it was excellent.

    You could update the text box to take up a max of 90% of the screen:

    Qualtrics.SurveyEngine.addOnload(function() {
        var input = jQuery("#"+this.questionId+" .InputText");
        input.after("%");
        input.css("max-width","90%");
    });
    

Answers

  • MattyDMattyD Community Member Qubie ✭

    Thanks TomG! This is exactly what I wanted. Just added it and it displays perfectly.

    In case you're still curious, the item I was referring to was:

    What is the overall response rate of your data collection efforts? Please enter a percentage between 0 and 100, or leave blank if you don't know. .......................%

  • MattyDMattyD Community Member Qubie ✭

    Hi again TomG, I spoke too soon. This method still renders oddly on mobile devices. The text box takes up the entire width of the screen and the % wraps to the next line.

    Thoughts? Thanks a million though for the first idea, it was excellent.

  • MattyDMattyD Community Member Qubie ✭

    Perfecto Mundo!

  • LaurenKLaurenK Seattle, WACommunity Administrator Administrator

    Hey @MattyD! Glad you got a response! In the future, you could also check out our Constant Sum question type!

  • SherlySherly LondonCommunity Member Qubie ✭

    @TomG said:
    It isn't clear exactly what type of question you are working with, but try this:

    Qualtrics.SurveyEngine.addOnload(function() {
      jQuery("#"+this.questionId+" .InputText").after("%");
    });
    

    Hi Tom,
    I would like to ask, how to make the text coloum smaller and to change the style of the static text after the coloum ("tahun") in the picture that I attached. Thank you

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭
    edited November 2018

    @Sherly said:
    Hi Tom,
    I would like to ask, how to make the text coloum smaller and to change the style of the static text after the coloum ("tahun") in the picture that I attached. Thank you

    Just modify the second accepted answer above slightly:

    Qualtrics.SurveyEngine.addOnload(function() {
        var input = jQuery("#"+this.questionId+" .InputText");
        input.after("<span style=\"font-size:smaller\">tahun</span>");
        input.css("width","120px");
    });
    
  • SherlySherly LondonCommunity Member Qubie ✭

    Hi Tom,

    thank you,
    but it did not work. The alert is this:
    "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token -"

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    @Sherly said:
    Hi Tom,

    thank you,
    but it did not work. The alert is this:
    "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token -"

    Oops, forgot to escape the quotes. Answer updated.

  • SherlySherly LondonCommunity Member Qubie ✭

    Perfect! Thank you so much!

Sign In to Comment