I'm trying to get something that looks like this:
But instead I'm getting this:
Here is the JS I'm using that is not quite working:
Any suggestions?
Replace
"input[type='text'"with
"input[type=text]"
https://community.qualtrics.com/XMcommunity/discussion/comment/56023#Comment_56023I made this change but it didn't fix the problem. One other thing that seems odd to me is that when I preview the question from within survey builder, things line up
But when I preview the full survey, the text entry box is not overlaying the first response bubble and the "$" is showing up in the top left corner of the page
The code, where ever you got it, is neither correct nor efficient. Post it as code block so it can be copied and pasted for corrections.
https://community.qualtrics.com/XMcommunity/discussion/comment/56030#Comment_56030Qualtrics.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*/
});
The key is limiting the element selection to the question. Here is an updated, untested version:
Qualtrics.SurveyEngine.addOnload(function() {
var textin = jQuery("#"+this.questionId+" .InputText").first();
textin.prev().hide();
textin.parent().css("display", "flex");
textin.before('$');
});
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.