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
Page 1 / 1
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("%");
});
```
```
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" .InputText").after("%");
});
```
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. .......................%_
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. .......................%_
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.
Thoughts? Thanks a million though for the first idea, it was excellent.
> @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%");
});
```
> 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%");
});
```
Perfecto Mundo!
Hey @MattyD! Glad you got a response! In the future, you could also check out our Constant Sum question type!
> @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!
> 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!
> @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");
});
```
> 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");
});
```
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 -"
thank you,
but it did not work. The alert is this:
"Invalid JavaScript! You cannot save until you fix all errors: Unexpected token -"
> @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.
> 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.
Perfect! Thank you so much!
Hi! I've used the JS custom code suggested above to Q1 of my survey. Q2 also has an open text box response but it does not have the JS code, but it is also showing a "%" sign. Any insight into why that would be?
Qualtrics.SurveyEngine.addOnload(function()
{ jQuery('inputttype="text"]').after(" %")});
https://community.qualtrics.com/XMcommunity/discussion/comment/45066#Comment_45066jQuery('input[type="text"]')
finds all text inputs on the page. That is why the code in the accepted answer uses:
jQuery("#"+this.questionId+" .InputText")
Thank you!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.