Hello @busmarketing ,



Create a Text entry form question type with two form fields. Paste the below code to the JS(onReady) of the Text entry question



var that = this.questionId;

jQuery("#"+that+" .ControlContainer").css("white-space","nowrap");

jQuery("#"+that+" .InputText:eq(1)").insertAfter(jQuery("#"+that+" .InputText:eq(0)"));

jQuery("<b> </b>").insertAfter(jQuery("#"+that+" .InputText:eq(0)"));

jQuery("#"+this.questionId+" .InputText").attr({"type":"number","min":"0"});

jQuery("#"+that+" .ReadableAlt").hide();

---

Thanks a lot, @Shashi - this code was a lifesaver!

I wanted to make some changes to the visualization of this code to match my purpose in the research study, however, I was not really successful in making those changes. I would greatly appreciate if you could please guide me on how I can make the following changes:

1- Participants should only be able to enter the value using the arrows next to the entry box - I want to disable the "typing" so that the values can only be entered using the arrows (up and down) next to the box.

2- I want to add a title above each of the boxes, the titles are: Integer (for the left box) and Decimals (for the right box). I want the title to be positioned on top of the boxes.

3- I want the format of the boxes to be like this: [leftbox][comma ","][rightbox]%

4- For the left box (integer box) I want values to increase by 1 unit and go all the way up to 100, whereas for the right box (decimal box) I want the values to increase by 0.1 each time participants click on the arrow and it should be a loop (0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 0, .1,....).





Thank you so much in advance for helping me with this.

---

Hello @busmarketing ,



For point 2, Instead of title I have added the placeholder. For point 4, loop is not possible.

Here is the updated code:



var that = this.questionId;

jQuery("#"+that+" .ControlContainer").css("white-space","nowrap");

jQuery("#"+that+" .InputText:eq(1)").insertAfter(jQuery("#"+that+" .InputText:eq(0)"));

jQuery("<b> , </b>").insertAfter(jQuery("#"+that+" .InputText:eq(0)"));

jQuery("<b> % </b>").insertAfter(jQuery("#"+that+" .InputText:eq(1)"));

jQuery("#"+this.questionId+" .InputText:eq(0)").attr({"type":"number","min":"0","placeholder":"Integer","max":"100","onkeydown":"return false"});

jQuery("#"+this.questionId+" .InputText:eq(1)").attr({"type":"number","min":"0","placeholder":"Decimal","step":"0.1","max":"0.9","onkeydown":"return false"});

jQuery("#"+that+" .ReadableAlt").hide();

jQuery("#"+this.questionId+" .InputText").on("cut copy paste",function(e) {

e.preventDefault();

});



Note: It will be in best practice to add custom validation on the two text fields for range.

---

@Shashi Thank you so much for your prompt reply! It looks awesome now!! Can't thank you enough!

---