Is it possible to make the answer entry boxes auto-expand when the entered numbers are too big? | XM Community
Skip to main content
Michael_Cooksey
Administrator
27 days ago
Solved

Is it possible to make the answer entry boxes auto-expand when the entered numbers are too big?

P
I have this problem for question type Constant sum. I managed to increase the answer boxes using CSS in the html view, but it would be way cooler if the boxes would automatically expand when someone enters larger numbers. Is there a way to do this using JavaScript? I also want to automatically display thousands separators, so that it is easier to check large numbers. Cheers, Patrick

Best answer by TomG

> @patrick said: > Hi Tom, > > thanks for the reply. I managed to add the js to the question but failed adding the script to the header. > I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this: > <script src="https://github.com/nosir/cleave.js"></script> > > I get the error 'Cleave is not defined' > > Could you help me out again? > > Cheers, > Patrick You can't load it directly from github. You can load it from jsDelivr CDN.
View original

23 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • March 9, 2018
Yes, it is possible to change the size of an input box dynamically with JavaScript. You would add either keyup or input event listeners to the input elements. You can also add thousands separators with JavaScript. Rather than writing it from scratch, I recommend integrating cleave.js.
P
  • patrick
  • Author
  • 4 replies
  • March 12, 2018
Hi Tom, thanks for your reply. Unfortunately I am not that experienced in using JavaScript. Is there a tutorial on how to include these cleave functions (copy paste didn't work 😉 ) Cheers, Patrick
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • March 12, 2018
First you have to add the cleave script to the header. Then, in its simplest form, with one question on the page, add something like this to your question js: ``` var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'}); ```
P
  • patrick
  • Author
  • 4 replies
  • March 20, 2018
Hi Tom, thanks for the reply. I managed to add the js to the question but failed adding the script to the header. I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this: <script src="https://github.com/nosir/cleave.js"></script> I get the error 'Cleave is not defined' Could you help me out again? Cheers, Patrick
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • Answer
  • March 20, 2018
> @patrick said: > Hi Tom, > > thanks for the reply. I managed to add the js to the question but failed adding the script to the header. > I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this: > <script src="https://github.com/nosir/cleave.js"></script> > > I get the error 'Cleave is not defined' > > Could you help me out again? > > Cheers, > Patrick You can't load it directly from github. You can load it from jsDelivr CDN.
P
1 person likes this
  • P
    patrick
M
Forum|alt.badge.img
  • Merina
  • 8 replies
  • May 22, 2018
> thanks for the reply. I managed to add the js to the question but failed adding the script to the header. > I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this: > <script src="https://github.com/nosir/cleave.js"></script> > > I get the error 'Cleave is not defined' > > Could you help me out again? > > Cheers, > Patrick Would you be uncomfy to share the js you added? I'm trying to accomplish the same task and this is my third day attempting javascript... 😊
P
  • patrick
  • Author
  • 4 replies
  • May 22, 2018
Hi Merina, this is the JS I added: Qualtrics.SurveyEngine.addOnload(function() { var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'}); }); Although the problem was solved by hosting the cleave script on a server and integrating that link in the html-header under look&feel with <script src="https://yourserver/cleave.min.js"></script> I hope that helps! Cheers, Patrick
M
Forum|alt.badge.img
  • Merina
  • 8 replies
  • May 24, 2018
> @patrick said: > Hi Merina, > > this is the JS I added: > > Qualtrics.SurveyEngine.addOnload(function() > { > var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'}); > > }); > > > Although the problem was solved by hosting the cleave script on a server and integrating that link in the html-header under look&feel with > <script src="https://yourserver/cleave.min.js"></script> > > I hope that helps! > > Cheers, > Patrick Thanks! Did that automatically update the size of the box too, or was that just for thousand separators?
P
  • patrick
  • Author
  • 4 replies
  • May 25, 2018
No, thats just the thousand separators. I gave up on the box size... I just increased the box size with CS <style> .Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput { width: 80px; } </style>
PeeyushBansal
1 person likes this
  • PeeyushBansal
    PeeyushBansal
M
Forum|alt.badge.img
  • Merina
  • 8 replies
  • May 25, 2018
@patrick Ahh bummer! I did too haha : ) I increased the box size and also decreased the constant sum font size to make it work. Whatever gets the job done, eh?
Akdashboard
Level 4 ●●●●
Forum|alt.badge.img+6
  • Akdashboard
  • Level 4 ●●●●
  • 488 replies
  • May 25, 2018
@patrick @Merina @TomG Would anyone be willing to post exactly what needs to be done for this? 1) What cleave code needs to go in the header 2) What JS code needs to go in the question 3) Anything else to consider (like only works if 1 question per page, or something)?
M
Forum|alt.badge.img
  • Merina
  • 8 replies
  • May 25, 2018
@Akdashboard 1) If you press "Quote" on Patrick's accepted answer you can see the header code between triangle brackets. You have to host the cleave code on a server. 2) That's also in the accepted answer. Qualtrics.SurveyEngine.addOnload(function(){ var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'}); }); 3) I didn't actually do the cleave function because I'm just telling my respondents not to use commas, heh. I have different JS that makes the commas appear later. But I imagine it would work with multiple questions per page. Both of those things are only for the thousand separators auto appearing, not for the auto-expand boxes. Ask someone else for help on the auto-expand thing because I just made do with a workaround : )
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • May 25, 2018
@Akdashboard, 1) Adding cleave to header: ``` <script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script> ``` 2) Add cleave to text input fields on the page: ``` var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'}); ``` 3) You can add cleave to specific fields on a page by adding your own class to those elements, then using that class to initiate cleave. It is all in how you write the JavaScript. The example in (2) is the simplest case.
B
1 person likes this
  • B
    bmgray
M
Forum|alt.badge.img
  • Merina
  • 8 replies
  • June 4, 2018
> @TomG said: > @Akdashboard, > 1) Adding cleave to header: > ``` > <script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script> > ``` > 2) Add cleave to text input fields on the page: > ``` > var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'}); > ``` > 3) You can add cleave to specific fields on a page by adding your own class to those elements, then using that class to initiate cleave. It is all in how you write the JavaScript. The example in (2) is the simplest case. Hey Tom - I'm trying to accomplish this now too. Heh. Can I just ask, how can I add classes to my page elements? I have a constant sum question, and the cleave function works great on the first box, but then doesn't work on the rest of my input boxes in the question. I'm guessing I need to add cleave to each individually, but I don't know where to go to set classes for the input boxes that the function can work on. I inspected the page source and tried to input the class name in the cleave function there but didn't have success. Any tips?
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • June 4, 2018
@Merina - You can use jQuery's addClass.
M
Forum|alt.badge.img
  • Merina
  • 8 replies
  • June 5, 2018
@TomG I don't know javascript, or how to do coding 😀 , so I'm unfamiliar with the syntax. ``` <script src="https://code.jquery.com/jquery-1.10.2.js"></script> jQuery(".Skin button, .Skin input, .Skin select, .Skin textarea").addClass("MyClass"); ``` Is that almost it? I don't know what to put in the first section to call the correct text boxes for the appending.
TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • June 6, 2018
@Merina, You don't need to load jQuery, Qualtrics already loads it. Your selector (.Skin button, etc.) is wrong, but more than that, for a constant sum you really need use a loop to add unique classes to each input element and then attach cleave to each one. I didn't mention it before, but when you add commas to numbers with cleave (or any other way), then they become strings instead of numbers and your constant sum isn't really a constant sum anymore. Maybe that's OK for your specific survey question. It is possible to format the inputs with Cleave and preserve all the features of a constant sum, but it is quite complex. Here is an example survey question/script that does it. The script has lots of options. You (or anyone else) can contact me by private message if you are interested.
B
1 person likes this
  • B
    bmgray
C
  • Catrina
  • 2 replies
  • January 17, 2021

Hi all,
I am also trying to add comma separators to a single text input box. I understand that we need to added the following script to the Java for that question:
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
But I am really struggling with how to add the following portion to the header:
script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cleave.min.js">
Can someone help me with the steps needed to navigate to where this needs to be input? The portion of the text that says "email protected" I am supposed to leave that as is?
Is it possible that since I am using a corporate account that the ability to add script to my header to locked / removed?
Thanks in advance!

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • January 17, 2021

https://www.qualtrics.com/community/discussion/comment/33471#Comment_33471The Qualtrics Community replaces anything that look like an email address with "[email protected]". Since the url contains an @ a portion of it gets replaced. Go to https://www.jsdelivr.com, search for cleave, select the file you need and jsdelivr will provide the url you need to copy. Make you are in source mode (<>) when you paste it into the header.

C
  • Catrina
  • 2 replies
  • January 17, 2021

TomG - Thanks that works!
But I do now have the issue that I am not able to convert the Input text to a number upon page completion. I do math with the input on the next page and I want to embed it as a numeric value.
Here is my script:
Within "addonload" I have:
let purchaseinput = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
Then within "addOnPageSubmit" I have:
let purchaseamountq = jQuery("#"+this.questionId+" .InputText") ;
let purchaseamountnum = parseFloat(purchaseamountq.replace(/,/g, ""))
Qualtrics.SurveyEngine.setEmbeddedData("Purchased", purchaseamountnum);

The embedding worked before I added the cleave functionality and the parse. I am wondering if it is my retrieving of the input (i.e., JQuery) that might not be working now that I have the cleave added.
Welcome any help on what my issue might be.
Thanks

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5934 replies
  • January 17, 2021

I don't know why that didn't work, but you should use the cleave function getRawValue.
It's possible the problem is on the next page where you pipe and parse the value.

S
Forum|alt.badge.img+1
  • STPL
  • 1 reply
  • December 6, 2021


https://community.qualtrics.com/XMcommunity/discussion/comment/2682#Comment_2682I initially did these steps (the header part) as well as putting the second step in the question add on load but it was not resulting in commas coming automatically for the text being entered. later I realized the inputtext has to be adjusted to match the field with one additional step and then it worked. Might need to try on a multi input question later but atleast for 1 input it worked.

A
Forum|alt.badge.img
  • andrew_j
  • 1 reply
  • April 18, 2022

Thank you so much for this amazing thread. It was so clear.
I have a couple questions with more than one answer box. Right now, the commas only appear for the first box. Do you know how I can amend the code so that the commas appear for each box?
Gratefully,
Andrew

Leave a Reply


Terms & Conditions