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

patrickpatrick MunichCommunity Member Qubie ✭

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

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 Answers

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
    Accepted Answer

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

  • patrickpatrick MunichCommunity Member Qubie ✭
    Accepted Answer

    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

    I hope that helps!

    Cheers,
    Patrick

«1

Answers

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

    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.

  • patrickpatrick MunichCommunity Member Qubie ✭

    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 :wink: )

    Cheers,
    Patrick

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

    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'});
    
  • patrickpatrick MunichCommunity Member Qubie ✭

    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:

    I get the error 'Cleave is not defined'

    Could you help me out again?

    Cheers,
    Patrick

  • MerinaMerina Community Member Qubie ✭

    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:

    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... :blush:

  • MerinaMerina Community Member Qubie ✭

    @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

    I hope that helps!

    Cheers,
    Patrick

    Thanks! Did that automatically update the size of the box too, or was that just for thousand separators?

  • patrickpatrick MunichCommunity Member Qubie ✭

    No, thats just the thousand separators. I gave up on the box size...
    I just increased the box size with CS

    .Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput { width: 80px; }
  • MerinaMerina Community Member Qubie ✭

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

  • AkdashboardAkdashboard South CarolinaCommunity Member Superuser ✭✭✭✭

    @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)?

  • MerinaMerina Community Member Qubie ✭

    @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 : )

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
    edited May 2018

    @Akdashboard,
    1) Adding cleave to header:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.

  • MerinaMerina Community Member Qubie ✭

    @TomG said:
    @Akdashboard,
    1) Adding cleave to header:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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?

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

    @Merina - You can use jQuery's addClass.

  • MerinaMerina Community Member Qubie ✭

    @TomG I don't know javascript, or how to do coding :smile: , 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.

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

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

  • CatrinaCatrina Community Member Qubie ✭

    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"></script>
    

    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!

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

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

  • CatrinaCatrina Community Member Qubie ✭

    @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

Sign In to Comment