How do I get a question to look like this? | XM Community
Skip to main content

image.pngI got as far as multiple choice with java code to hide the label on the first choice but the text entry box needs to be validated to 2-digit integer and I'd like to get the "%" label after the box.

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


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();


// 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*/


});
image.png

Hope it resolves your Query😊!!


Hi PhilipMoore ,
++Adding validation for exactly 2 digit using below method
image.pngYou 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.
image.png


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("inputttype='text'").eq(0).prev().hide();


// Set the width of the first input field of type "text" to 10%
jQuery("inputttype='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("inputttype='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.
image.pngHope 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
image.png


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.
image.pngThe 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("inputQtype='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


Leave a Reply