I 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:
- Hide the label of text box
- 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*/
});
Hope it resolves your Query!!
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("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.
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("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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.