How do I get a question to look like this?

Hi PhilipMoore ,
You can add below code to your question's JS API to achieve below mentioned functionality:

1. Hide the label of text box


2. Add % after the text box

Hi PhilipMoore ,
++Adding validation for exactly 2 digit using below method
You can add above custom validation for text entry.

Thanks qualtrics_nerd,
Is there some way to make the entry box smaller? It's stretching across the whole page.

https://community.qualtrics.com/XMcommunity/discussion/comment/55419#Comment_55419Is there a setting for up to two digits instead of exactly two digits?

Hi PhilipMoore ,
You can use the below updated code to achieve the same:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/


});


Qualtrics.SurveyEngine.addOnReady(function() 
{
// Declare variable "text" with value "%"
let text = "%";


// Hide previous element before first input field of type "text"
jQuery("input[type='text'").eq(0).prev().hide();


// Set the width of the first input field of type "text" to 10%
jQuery("input[type='text']").eq(0).css("width", "10%");


// Add a span element with custom styling and text from the "text" variable after the first input field of type "text"
jQuery("input[type='text'").eq(0).after(''+text+'');
});


Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/


});
Yo can change the "width" as per your requirement.
Further , to validate "Is there a setting for up to two digits instead of exactly two digits?" this you can use below validation.
Hope this resolves your query😊!!!

https://community.qualtrics.com/XMcommunity/discussion/comment/55418#Comment_55418One additional wrinkle that will be useful going forward. If I'm collecting dollar amounts instead of percentages, how do I modify the javascript to move the label in front of the box? I get how to change the value of the declared variable from % to $, so really just need help with the last line.
jQuery("input[type='text'").eq(0).after(''+text+'');
});

Hi PhilipMoore ,
I knew that it will cause this issue in future as different survey have different requirements that's why have made the code adaptable for future situations.
To make change from % to $ just follow below steps:
Find the below line in the code:

let text = "%";

and upadte its value with like this:

let text = "$";
Further , in future if you want anything to appear before the box just update the "text" variable.
It also accepts string like "age".

qualtrics_nerd Thank you. I figured this part out, but still trying to get the $ label in front of the box like this mock up

Hi PhilipMoore ,
My bad , I confused "front" with "after the text-box" , while you meant "before the textbox".
Since the confusion is clear , here is the solution:
Qualtrics.SurveyEngine.addOnReady(function()
{
// Declare variable "text" with value "%"
let text = "$";
// Hide previous element before first input field of type "text"
jQuery("input[type='text'").eq(0).prev().hide();
// To set the container's property to flex
jQuery("input[type='text'").eq(0).parent().css("display", "flex");
// Add a span element with custom styling and text from the "text" variable after the first input field of type "text"

jQuery("input[type='text'").eq(0).before(''+text+'');
});
Hope it resolves your query😊!!!

https://community.qualtrics.com/XMcommunity/discussion/comment/55538#Comment_55538Now something really funky is happening.
The dollar sign label is up at the top of the screen and the box isn't replacing the first option anymore. I think I'm still using the same script you suggested before:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
​
​
});
​
​
Qualtrics.SurveyEngine.addOnReady(function()
{
// Declare variable "text" with value "%"
let text = "$";
​
​
// Hide previous element before first input field of type "text"

jQuery("input[type='text'").eq(0).prev().hide();
​
// To set the container's property to flex
jQuery("input[type='text'").eq(0).parent().css("display", "flex");

// Add a span element with custom styling and text from the "text" variable after the first input field of type "text"

jQuery("input[type='text'").eq(0).before(''+text+'');
});
​
​
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
​
​
});
JS Question API