Copy and paste this into the Look & Feel Header.
FYI for future users - the coding may have changed since this was posted. I got it to work with: > .Skin .ProgressBarFill { > background-color: green; > }
@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 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
@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 : )
@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?
> @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?
> 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... 😊
Already have an account? Login
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
Sorry, our virus scanner detected that this file isn't safe to download.
